{"id":1225,"date":"2023-07-18T15:31:22","date_gmt":"2023-07-18T07:31:22","guid":{"rendered":"https:\/\/www.taiwansemi.com\/ja\/?page_id=1225"},"modified":"2023-07-18T15:33:04","modified_gmt":"2023-07-18T07:33:04","slug":"product-filter","status":"publish","type":"page","link":"http:\/\/services.ts.com.tw\/ja\/product-filter\/","title":{"rendered":"Product Filter"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1225\" class=\"elementor elementor-1225\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-92e009a e-con-full e-flex e-con e-parent\" data-id=\"92e009a\" data-element_type=\"container\" data-settings=\"{&quot;content_width&quot;:&quot;full&quot;,&quot;jet_parallax_layout_list&quot;:[]}\" data-core-v316-plus=\"true\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8d021ed elementor-widget elementor-widget-shortcode\" data-id=\"8d021ed\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<link rel=\"stylesheet\" href=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/css\/product-filter-page.css\" type=\"text\/css\" \/>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/printjs-4de6.kxcdn.com\/print.min.css\">\r\n<style>\r\n    body {\r\n        margin: 0px;\r\n    }\r\n\r\n    .dialog-compare-header {\r\n        display: flex;\r\n        flex-direction: row;\r\n        justify-content: space-between;\r\n        gap: 16px;\r\n        margin-right: 30px;\r\n\r\n\r\n    }\r\n\r\n    .dialog-compare-header .right-box .el-button {\r\n        margin-top: -6px;\r\n    }\r\n\r\n    .el-alert.fixed {\r\n        position: fixed;\r\n        top: 90px;\r\n        left: 3%;\r\n        z-index: 2;\r\n        width: auto;\r\n        min-width: 200px;\r\n    }\r\n\r\n    .el-alert.fixed.alert_compare {\r\n        z-index: 2007;\r\n        right: 3%;\r\n        left: auto;\r\n    }\r\n\r\n    #app .el-input-group--append>.el-input__wrapper {\r\n        border-top-right-radius: 0;\r\n        border-bottom-right-radius: 0;\r\n    }\r\n\r\n    #app .dialog-email-pdf {\r\n        width: 500px;\r\n    }\r\n\r\n    .mb-0 {\r\n        margin-bottom: 0px;\r\n    }\r\n<\/style>\r\n\r\n<div id=\"app\">\r\n    <div class=\"crumbs-box\">\r\n        <span>\r\n            <a href=\"\/ja\/\">\r\n                <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-home.svg\">\r\n                <span>Home<\/span>\r\n            <\/a>\r\n        <\/span>\r\n        <span class=\"slash\">\/<\/span>\r\n        <span><a href=\"\/ja\/product\/\">Products<\/a><\/span>\r\n        <template v-for=\"(belongsCategory, index) in category_line\">\r\n            <span class=\"slash\">\/<\/span>\r\n            <a v-if=\"index === 0\" :href=\"'\/ja\/product-categories\/' + belongsCategory + '\/'\"><span v-text=\"category_slug_mapping[belongsCategory].name\"><\/span><\/a>\r\n            <a v-else-if=\"index !== category_line.length - 1\" :href=\"'\/ja\/product-filter\/?category=' + belongsCategory\"><span v-text=\"category_slug_mapping[belongsCategory].name\"><\/span><\/a>\r\n            <span v-else v-text=\"category_slug_mapping[belongsCategory].name\"><\/span>\r\n        <\/template>\r\n    <\/div>\r\n\r\n    <div class=\"page-title-box\">\r\n        <div class=\"top-box\">\r\n            <!-- Category Name -->\r\n            <div class=\"title\" v-text=\"category_name\"><\/div>\r\n            <el-button type=\"primary\" round @click=\"open_category_lightbox = true\">\r\n                <template v-slot:icon>\r\n                    <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-hierarchy.svg\">\r\n                    <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-hierarchy-hover.svg\">\r\n                <\/template>\r\n                Product Hierarchy\r\n            <\/el-button>\r\n            <div class=\"dec-animation-box\">\r\n                <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-dec-animation.png\">\r\n            <\/div>\r\n        <\/div>\r\n        <!-- Category Description -->\r\n        <div v-text=\"category_description\" class=\"description\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Filter Feature Bar -->\r\n    <div class=\"btn-box\">\r\n        <div class=\"wrap\">\r\n            <div class=\"left-box\">\r\n                <div class=\"title\">Parametric Search<\/div>\r\n                <!-- <div class=\"hint\">\r\n                    <i><\/i>\r\n                    <span>Add Parameters<\/span>\r\n                <\/div> -->\r\n            <\/div>\r\n            <div class=\"right-box\">\r\n                <el-button :disabled=\"filterable_properties === null || filterable_properties === {} || Object.keys(filterable_properties).length === 0\" type=\"primary\" round @click=\"clearFilter\">\r\n                    <template v-slot:icon>\r\n                        <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-clear.svg\">\r\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-clear-hover.svg\">\r\n                    <\/template>\r\n                    Clear Filter\r\n                <\/el-button>\r\n                <el-button :disabled=\"filterable_properties === null || filterable_properties === {} || Object.keys(filterable_properties).length === 0\" type=\"primary\" round @click=\"openSaveFilterLightbox\">\r\n                    <template v-slot:icon>\r\n                        <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-star.svg\">\r\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-star-hover.svg\">\r\n                    <\/template>\r\n                    Save Filter\r\n                <\/el-button>\r\n                <el-button type=\"primary\" round @click=\"showFilterRecords\">\r\n                    <template v-slot:icon>\r\n                        <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-record.svg\">\r\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-record-hover.svg\">\r\n                    <\/template>\r\n                    Filter Records\r\n                <\/el-button>\r\n                <div class=\"dec-line\"><\/div>\r\n                <el-button :disabled=\"filterable_properties === null || filterable_properties === {} || Object.keys(filterable_properties).length === 0\" class=\"primary-reverse btn-close-filter\" type=\"primary\" round @click=\"filterBoxToggle\">\r\n                    <template v-slot:icon>\r\n                        <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-control.svg\">\r\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-control-hover.svg\">\r\n                    <\/template>\r\n                    Filter Toggle\r\n                <\/el-button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Filterable Properties -->\r\n    <div class=\"filter-box\" v-if=\"is_filter_showing === true\" v-loading=\"filter_mask\" id=\"filter-box\">\r\n        <div class=\"wrap\">\r\n            <!-- <div v-if=\"filterable_properties !== null && filterable_properties !== [] && filterable_properties.length > 0\" class=\"wrap\"> -->\r\n            <ul>\r\n                <li v-for=\"(filterableProperty, index) in filterable_properties\" :key=\"filterableProperty.name\" :class=\"filterableProperty.type === 'options' ? 'type-checkbox' : 'type-range'\">\r\n                    <!-- Multiple Select -->\r\n                    <template v-if=\"filterableProperty.type === 'options'\">\r\n                        <div class=\"filter-title-box\">\r\n                            <el-checkbox\r\n                                v-model=\"filterableProperty.select\"\r\n                                :disabled=\"filterableProperty.enable === false\"\r\n                                :indeterminate=\"filterableProperty.select === true && filterableProperty.select_all === false\"\r\n                                @change=\"handlePropertyCheckIsAll(index, filterableProperty.slug, filterable_property_type.MULTIPLE_SELECT)\">\r\n                                <div v-html=\"filterableProperty.name\"><\/div>\r\n                            <\/el-checkbox>\r\n                            <div :class=\"{'btn-arrow': true, 'disabled': filterableProperty === 'undefined' || filterableProperty.value.length === 0}\">\r\n                                <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/mobile-dropdown-icon.svg\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <div class=\"mobile-transform-box\" v-if=\"filterableProperty.value.length > 0\">\r\n                            <!-- <el-checkbox-group v-if=\"filterableProperty.value.length > 0\"> -->\r\n                            <div class=\"el-checkbox-group\">\r\n                                <el-checkbox\r\n                                    v-for=\"property in filterableProperty.value\"\r\n                                    v-model=\"property.select\"\r\n                                    :disabled=\"property.enable === false\"\r\n                                    :key=\"property.value\"\r\n                                    :label=\"property.value\"\r\n                                    @change=\"handlePropertyCheckOption(index, property.value)\">\r\n                                    <span v-html=\"purify(property.value)\">\r\n                                <\/el-checkbox>\r\n                            <\/div>\r\n                            <!-- <\/el-checkbox-group> -->\r\n                        <\/div>\r\n                    <\/template>\r\n\r\n                    <!-- Range -->\r\n                    <template v-if=\"filterableProperty.type === 'range'\">\r\n                        <div class=\"filter-title-box\">\r\n                            <el-checkbox\r\n                                v-model=\"filterableProperty.select\"\r\n                                :disabled=\"filterableProperty.enable === false && filterableProperty.range[0] === filterableProperty.range[1]\"\r\n                                :indeterminate=\"filterableProperty.select_all === false && filterableProperty.select === true\"\r\n                                @change=\"handlePropertyCheckIsAll(index, filterableProperty.slug, filterable_property_type.RANGE)\">\r\n                                <div v-html=\"filterableProperty.name\"><\/div>\r\n                            <\/el-checkbox>\r\n                            <div :class=\"{'btn-arrow': true, 'disabled': typeof filterableProperty.slug === 'undefined' && (filterableProperty.range[0] === filterableProperty.range[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false)}\">\r\n                                <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/mobile-dropdown-icon.svg\">\r\n                            <\/div>\r\n                        <\/div>\r\n                        <!-- Legal Slider Template -->\r\n                        <template v-if=\"filterableProperty.range.length > 0\">\r\n                            <div class=\"range-box mobile-transform-box\">\r\n                                <div class=\"range-input-box\">\r\n                                    <el-slider\r\n                                        v-model=\"filterableProperty.range\"\r\n                                        range\r\n                                        :min=\"filterableProperty.max_range[0]\"\r\n                                        :max=\"filterableProperty.max_range[1]\"\r\n                                        :step=\"filterableProperty.step\"\r\n                                        :disabled=\"filterableProperty.enable === false && filterableProperty.range[0] === filterableProperty.range[1]\"\r\n                                        @change=\"handlePropertyChangeRange(index, filterableProperty.range)\"\r\n                                        :marks=\"filterableProperty.marks\">\r\n                                    <\/el-slider>\r\n                                    <div class=\"input-box\">\r\n                                        <el-input-number\r\n                                            v-model=\"filterableProperty.range[0]\"\r\n                                            controls-position=\"right\"\r\n                                            :min=\"filterableProperty.max_range[0]\"\r\n                                            :max=\"filterableProperty.max_range[1]\"\r\n                                            :step=\"filterableProperty.step\"\r\n                                            :placeholder=\"'Min. ' + filterableProperty.range[0]\"\r\n                                            :disabled=\"filterableProperty.enable === false && (filterableProperty.range[0] === filterableProperty.range[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false)\"\r\n                                            @change=\"handlePropertyChangeRange(index, filterableProperty.range)\">\r\n                                        <\/el-input-number>\r\n                                        <el-input-number\r\n                                            v-model=\"filterableProperty.range[1]\"\r\n                                            controls-position=\"right\"\r\n                                            :min=\"filterableProperty.max_range[0]\"\r\n                                            :max=\"filterableProperty.max_range[1]\"\r\n                                            :step=\"filterableProperty.step\"\r\n                                            :placeholder=\"'Max. ' + filterableProperty.range[1]\"\r\n                                            :disabled=\"filterableProperty.enable === false && (filterableProperty.range[0] === filterableProperty.range[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false)\"\r\n                                            @change=\"handlePropertyChangeRange(index, filterableProperty.range)\">\r\n                                        <\/el-input-number>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <el-checkbox\r\n                                    v-model=\"filterableProperty.select_all\"\r\n                                    @change=\"handlePropertyCheckIsRangeOrNull(index)\"\r\n                                    :disabled=\"filterableProperty.enable === false && (filterableProperty.range[0] === filterableProperty.range[1] && Object.keys(search_conditions).includes(filterableProperty.slug) === false)\">\r\n                                    -\r\n                                <\/el-checkbox>\r\n                            <\/div>\r\n                        <\/template>\r\n                        <!-- Illegal Slider Template -->\r\n                        <template v-else>\r\n                            <div class=\"range-box mobile-transform-box\">\r\n                                <div class=\"range-input-box\">\r\n                                    <el-slider range :min=\"0\" :max=\"0\" disabled><\/el-slider>\r\n                                    <div class=\"input-box\">\r\n                                        <el-input type=\"number\" placeholder=\"Min. 0\" disabled><\/el-input>\r\n                                        <el-input type=\"number\" placeholder=\"Max. 0\" disabled><\/el-input>\r\n                                    <\/div>\r\n                                <\/div>\r\n                                <el-checkbox disabled>-<\/el-checkbox>\r\n                            <\/div>\r\n                        <\/template>\r\n                    <\/template>\r\n                <\/li>\r\n            <\/ul>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Product List -->\r\n    <div class=\"table-box\">\r\n        <div class=\"wrap\">\r\n            <div class=\"mobile-vertical-hint-box\">\r\n                <div class=\"btn-close\">\r\n                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" fill=\"none\">\r\n                        <path d=\"M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4L14.6 16L8 22.6L9.4 24L16 17.4L22.6 24L24 22.6L17.4 16L24 9.4Z\" fill=\"black\"><\/path>\r\n                    <\/svg>\r\n                <\/div>\r\n                <img decoding=\"async\" class=\"\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/mobile-Rotate-icon.svg\">\r\n            <\/div>\r\n            <div class=\"top-box\">\r\n                <div class=\"left-box\">\r\n                    <div class=\"number\">Part Number: <span v-text=\"pagination.total\"><\/span><\/div>\r\n                    <div class=\"search-box\">\r\n                        <el-input id=\"product-keyword\" v-model=\"keyword\" placeholder=\"Search Part Number\" clearable @change=\"handleKeywordChange\" :disabled=\"selected_category.length === 0\">\r\n                            <template #prefix>\r\n                                <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-search.svg\">\r\n                            <\/template>\r\n                        <\/el-input>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"right-box\">\r\n                    <div class=\"btn-share-box\">\r\n                        <el-button type=\"primary\" round @click=\"shareBoxToggle\">\r\n                            <template v-slot:icon>\r\n                                <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-share.svg\">\r\n                                <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-share-hover.svg\">\r\n                            <\/template>\r\n                            Share\r\n                        <\/el-button>\r\n                        <div class=\"share-box\">\r\n                            <div class=\"btn-copy-link\" @click=\"copyUrl\">\r\n                                <div><img decoding=\"async\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-copy.svg\"><\/div>\r\n                                <div>Copy Link<\/div>\r\n                            <\/div>\r\n                            <div class=\"btn-share-email\" @click=\"shareBoxToggle\">\r\n                                <a href=\"mailto:example@google.com\" @click.prevent=\"shareProductLinks\">\r\n                                    <div>\r\n                                        <img decoding=\"async\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-email.svg\">\r\n                                    <\/div>\r\n                                    <div>Share via Email<\/div>\r\n                                <\/a>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <el-button type=\"primary\" round @click=\"exportProductTable\">\r\n                        <template v-slot:icon>\r\n                            <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-export.svg\">\r\n                            <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-export-hover.svg\">\r\n                        <\/template>\r\n                        Export\r\n                    <\/el-button>\r\n                    <el-button type=\"primary\" round @click=\"compareProducts\">\r\n                        <template v-slot:icon>\r\n                            <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-compare.svg\">\r\n                            <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-compare-hover.svg\">\r\n                        <\/template>\r\n                        Compare\r\n                    <\/el-button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <el-table v-loading=\"table_mask\" ref=\"productListRef\" :data=\"product_list.items\" empty-text=\"&nbsp;\" :row-key=\"(row) => row.name\" stripe border style=\"width: 100%; border-radius: 5px;\" :height=\"(product_list.items.length >= 11) ? 600 : (product_list.items.length > 0) ? (product_list.items.length + 1) * 35 + 5 : 280\" @sort-change=\"handleSortChange\" @selection-change=\"handleSelectionChange\">\r\n                <el-table-column v-if=\"product_list.items.length > 0\" type=\"selection\" :reserve-selection=\"true\" width=\"55\" fixed><\/el-table-column>\r\n                <el-table-column v-for=\"header in product_list.headers\" :key=\"'key-' + header.value\" :prop=\"header.value\" :label=\"header.text\" :width=\"product_list.headers.length <= 1 ? '' : typeof column_width[header.value] ? column_width[header.value] : 160\" :sortable=\"((header.value !== 'datasheet') && (header.value !== 'cart'))\" :sort-method=\"null\" :sort-by=\"null\" :fixed=\"header.value === 'name'\">\r\n                    <template #header=\"{ column }\">\r\n                        <div v-html=\"column.label\"><\/div>\r\n                    <\/template>\r\n                    <template v-slot=\"{ row }\">\r\n                        <div v-if=\"header.value === 'datasheet' || header.value === 'cart'\" class=\"small-td\">\r\n                            <a v-if=\"header.value === 'datasheet' && row[header.value] !== null\" :href=\"row[header.value]\" target=\"_blank\"><img decoding=\"async\" v-if=\"header.value === 'datasheet' && row[header.value] !== null\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-datasheet.svg\"><\/a>\r\n                            <a v-if=\"header.value === 'cart'\" :href=\"'\/ja\/stock-check\/' + row['name'] + '\/'\" target=\"_blank\"><img decoding=\"async\" v-if=\"header.value === 'cart'\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-cart.svg\"><\/a>\r\n                        <\/div>\r\n                        <div v-else class=\"td\">\r\n                            <div v-if=\"header.value === 'name' || header.value === 'replacement'\" class=\"td-value\">\r\n                                <span class=\"product-info-page-link\" @click=\"openInnerPage(row[header.value])\" v-text=\"row[header.value]\"><\/span>\r\n                            <\/div>\r\n                            <div v-else class=\"td-value\" v-html=\"((typeof row[header.value] === 'undefined' || row[header.value] === null) && typeof property_slug_mapping[header.value] !== 'undefined' && property_slug_mapping[header.value].type.includes('double') === true) ? '-' : purify(row[header.value])\"><\/div>\r\n                            <!-- <div v-else class=\"td-value\" v-html=\"((typeof row[header.value] === 'undefined' || row[header.value] === null) && typeof property_slug_mapping[header.value] !== 'undefined' && property_slug_mapping[header.value].type.includes('double') === true) ? '-' : row[header.value]\"><\/div> -->\r\n                            <div v-if=\"header.value === 'name' && row.is_new_product == true\" class=\"td-tag\">NEW<\/div>\r\n                        <\/div>\r\n                    <\/template>\r\n                <\/el-table-column>\r\n                <template #empty>\r\n                    <p v-if=\"table_mask !== true\">\r\n                        <span v-text=\"empty_text\"><\/span><br \/>\r\n                        <el-button v-if=\"selected_category.length === 0\" @click=\"open_category_lightbox = true\">Choose Category First<\/el-button>\r\n                    <\/p>\r\n                <\/template>\r\n            <\/el-table>\r\n\r\n            <div class=\"pagination-box\">\r\n                <el-pagination v-model:current-page=\"pagination.page\" v-model:page-size=\"pagination.limit\" :page-sizes=\"[5, 20, 50, 100, 500]\" :pager-count=\"5\" small :disabled=\"pagination.total === 0\" background layout=\"total, sizes, prev, pager, next, jumper\" :total=\"pagination.total\" @size-change=\"handlePageSizeChange\" @current-change=\"handleCurrentPageChange\" \/>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Hierarchy -->\r\n    <el-dialog v-model=\"open_category_lightbox\" v-if=\"is_hierarchy_showing === true\" class=\"dialog-product-hierarchy\" title=\"Product Hierarchy\" :before-close=\"handleHierarchyClose\">\r\n        <div class=\"collapse-box\">\r\n            <el-collapse v-model=\"active_collapses.root\" class=\"collapse-first-level\">\r\n                <el-collapse-item v-for=\"mainCategory in category_tree\" :title=\"mainCategory.name\" :name=\"'collapse_' + mainCategory.slug\">\r\n                    <div class=\"content\">\r\n                        <ul v-if=\"mainCategory.sub_categories.records.length > 0\">\r\n                            <li v-for=\"secondFloorCategory in mainCategory.sub_categories.records\">\r\n                                <div @click=\"pickCategory(secondFloorCategory.slug)\" class=\"li-title\" v-text=\"secondFloorCategory.name\"><\/div>\r\n                                <ul v-if=\"secondFloorCategory.sub_categories.records.length > 0\">\r\n                                    <li v-for=\"(thirdFloorCategory, index) in secondFloorCategory.sub_categories.records\">\r\n                                        <span v-if=\"thirdFloorCategory.sub_categories.records.length === 0\" @click=\"pickCategory(thirdFloorCategory.slug)\" v-text=\"thirdFloorCategory.name\"><\/span>\r\n                                        <el-collapse v-else v-model=\"active_collapses[thirdFloorCategory.slug]\">\r\n                                            <el-collapse-item :title=\"thirdFloorCategory.name\" :name=\"'collapse_' + thirdFloorCategory.slug\">\r\n                                                <template #title>\r\n                                                    <div v-stop=\"() => pickCategory(thirdFloorCategory.slug)\" v-text=\"thirdFloorCategory.name\"><\/div>\r\n                                                <\/template>\r\n                                                <ul v-if=\"thirdFloorCategory.sub_categories.records.length > 0\">\r\n                                                    <li v-for=\"fourthFloorCategory in thirdFloorCategory.sub_categories.records\" @click.stop=\"pickCategory(fourthFloorCategory.slug)\" v-text=\"fourthFloorCategory.name\"><\/li>\r\n                                                <\/ul>\r\n                                            <\/el-collapse-item>\r\n                                        <\/el-collapse>\r\n                                    <\/li>\r\n                                <\/ul>\r\n                            <\/li>\r\n                        <\/ul>\r\n                    <\/div>\r\n                <\/el-collapse-item>\r\n            <\/el-collapse>\r\n        <\/div>\r\n    <\/el-dialog>\r\n\r\n    <!-- Filter Records -->\r\n    <template v-if=\"open_filter_records_lightbox === true\">\r\n        <el-dialog v-model=\"open_filter_records_lightbox\" class=\"dialog-filter-records font-bold\" title=\"Filter Records\">\r\n            <div class=\"filter-records-box\">\r\n                <div class=\"text\">Recording your Parametric history allows you to search for that filter next time without going through the same process again.<\/div>\r\n\r\n                <el-table :data=\"record_table.items\">\r\n                    <el-table-column v-for=\"header in record_table.headers\" :prop=\"header.value\" :label=\"header.text\" :width=\"(header.value === 'conditions') ? '425' : (header.value === 'actions') ? 120 : (header.width ? header.width : '')\">\r\n                        <template v-slot=\"{ row, $index }\">\r\n                            <div v-if=\"header.value === 'conditions'\" class=\"col-properties\">\r\n                                <div v-for=\"condition in row[header.value]\" class=\"tag\">\r\n                                    <div class=\"label-name\" v-html=\"condition.key + ': '\"><\/div>\r\n                                    <div class=\"label-value\" v-html=\"purify(condition.value)\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                            <div v-else-if=\"header.value === 'actions'\" class=\"col-action\">\r\n                                <div class=\"btn-apply\" @click=\"openTargetPage(row['uri'])\">Apply<\/div>\r\n                                <div class=\"btn-delete\" @click=\"deleteFilterRecord(row.id)\">Delete<\/div>\r\n                            <\/div>\r\n                            <div v-else :class=\"'col-' + header.value\">\r\n                                <div v-if=\"(row.is_editing === false && header.value === 'name') || header.value !== 'name'\" v-text=\"row[header.value]\"><\/div>\r\n                                <el-input v-if=\"header.value === 'name' && row.is_editing === true\" v-model=\"row[header.value]\" placeholder=\"Please input\" @change=\"updateFilterRecord(row.id, $index)\" maxlength=\"50\"><\/el-input>\r\n                                <div v-if=\"header.value === 'name'\" @click=\"row.is_editing = true\" class=\"btn-edit\">\r\n                                    <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-edit.svg\">\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/template>\r\n                    <\/el-table-column>\r\n                <\/el-table>\r\n            <\/div>\r\n        <\/el-dialog>\r\n    <\/template>\r\n\r\n    <!-- Save Filter -->\r\n    <template v-if=\"open_save_filter_lightbox === true\">\r\n        <el-dialog v-model=\"open_save_filter_lightbox\" class=\"dialog-save-filter \" title=\"Save Filter\">\r\n            <div class=\"filter-records-box\">\r\n                <div class=\"top-box\">\r\n                    <div class=\"text\">Saving your favorite filter allows you to search for that filter next time without going through the same process again.<\/div>\r\n                    <el-form id=\"save-filter\" label-width=\"120px\">\r\n                        <el-form-item label=\"Activity name\">\r\n                            <el-input id=\"filter-record-name\" v-model=\"record_name\" placeholder=\"Please enter a record name.\" maxlength=\"50\"><\/el-input>\r\n                        <\/el-form-item>\r\n                    <\/el-form>\r\n                <\/div>\r\n                <div class=\"bottom-box\">\r\n                    <div class=\"title\">Selected Parameters:<\/div>\r\n                    <div class=\"result-box\">\r\n                        <ul>\r\n                            <li>\r\n                                <div class=\"li-title\">Taxonomy:<\/div>\r\n                                <div class=\"tag-box\">\r\n                                    <div class=\"tag\" v-text=\"category_name\"><\/div>\r\n                                <\/div>\r\n                            <\/li>\r\n                            <li v-if=\"keyword.length > 0\">\r\n                                <div class=\"li-title\">Part Number:<\/div>\r\n                                <div class=\"tag-box\">\r\n                                    <div class=\"tag\" v-text=\"keyword\"><\/div>\r\n                                <\/div>\r\n                            <\/li>\r\n                            <template v-for=\"(optionController, propertySlug) in filter_controller\">\r\n                                <li v-if=\"optionController.is_all === true || optionController.is_indeterminate === true\">\r\n                                    <div class=\"li-title\" v-html=\"property_slug_mapping[propertySlug].name + ':'\"><\/div>\r\n                                    <div class=\"tag-box\" v-if=\"optionController.type === filterable_property_type.MULTIPLE_SELECT && optionController.checked_options.length > 0\">\r\n                                        <div class=\"tag\" v-for=\"checkedOption in optionController.checked_options\" v-html=\"purify(checkedOption)\"><\/div>\r\n                                    <\/div>\r\n                                    <div class=\"tag-box\" v-if=\"optionController.type === filterable_property_type.RANGE && optionController.range.length === 2\">\r\n                                        <div class=\"tag\" v-text=\"optionController.range[0] + ' - ' + optionController.range[1]\"><\/div>\r\n                                        <div class=\"tag\" v-if=\"optionController.is_range_or_null === true\"> - <\/div>\r\n                                    <\/div>\r\n                                <\/li>\r\n                            <\/template>\r\n                        <\/ul>\r\n\r\n                    <\/div>\r\n                <\/div>\r\n                <el-button type=\"primary\" @click=\"createFilterRecord\" class=\"btn-submit\" :disabled=\"record_name.length === 0\">Save Filter<\/el-button>\r\n            <\/div>\r\n        <\/el-dialog>\r\n    <\/template>\r\n\r\n    <!-- Compare -->\r\n    <el-dialog v-model=\"open_compare_lightbox\" class=\"dialog-compare\">\r\n        <template #header=\"{ close, titleId, titleClass }\">\r\n            <div class=\"dialog-compare-header top-box\">\r\n                <div class=\"left-box\">\r\n                    <h4 :id=\"titleId\" :class=\"titleClass\">Compare<\/h4>\r\n                <\/div>\r\n                <div class=\"right-box\">\r\n                    <el-button type=\"primary\" round @click=\"shareUrl\">\r\n                        Email\r\n                    <\/el-button>\r\n                    <el-button type=\"primary\" round @click=\"copyUrl(true)\">\r\n                        Copy Link\r\n                    <\/el-button>\r\n                    <el-button type=\"primary\" round @click=\"exportToPdf\">\r\n                        <template v-slot:icon>\r\n                            <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-export.svg\">\r\n                            <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-export-hover.svg\">\r\n                        <\/template>\r\n                        Export\r\n                    <\/el-button>\r\n\r\n                <\/div>\r\n            <\/div>\r\n        <\/template>\r\n        <div class=\"compare-products-box\">\r\n            <el-table ref=\"multipleTableRef\" :data=\"reversed_table.items\" :empty-text=\"empty_text\" stripe border height=\"450\" style=\"width: 100%; border-radius: 5px;\">\r\n                <el-table-column v-for=\"(header, index) in reversed_table.headers\" :key=\"index\" :prop=\"header.value\" :label=\"header.text\" :width=\"header.text.length > 15 ? header.text.length * 11 : 200\" :fixed=\"index === 0 ? 'left' : false\">\r\n                    <template #header=\"{ column }\">\r\n                        <template v-if=\"column.property === 'column'\">\r\n                            <b>\r\n                                <span v-text=\"column.label\"><\/span>\r\n                            <\/b>\r\n                        <\/template>\r\n                        <template v-else>\r\n                            {{ column.label }}\r\n                        <\/template>\r\n                    <\/template>\r\n                    <template v-slot=\"{ row }\">\r\n                        <b v-if=\"header.value === 'column'\"><span v-html=\"row[header.value]\"><\/span><\/b>\r\n                        <span v-else v-html=\"purify(row[header.value])\"><\/span>\r\n                    <\/template>\r\n                <\/el-table-column>\r\n            <\/el-table>\r\n        <\/div>\r\n        <el-alert v-show=\"alert_is_show_compare\" class=\"fixed alert_compare\" :title=\"alert_title\" :closable=\"false\" :type=\"alert_is_show_compare\" show-icon \/>\r\n    <\/el-dialog>\r\n\r\n    <!-- Export PDF -->\r\n    <el-dialog v-model=\"open_export_to_pdf_lightbox\" class=\"dialog-compare dialog-export-to-pdf\" :show-close=\"false\" :close-on-press-escape=\"false\" :close-on-click-modal=\"false\">\r\n        <template #header=\"{ close, titleId, titleClass }\">\r\n            <div class=\"dialog-compare-header top-box\">\r\n                <div class=\"left-box\">\r\n                    <h4 :id=\"titleId\" :class=\"titleClass\">Exporting PDF...<\/h4>\r\n                <\/div>\r\n            <\/div>\r\n        <\/template>\r\n        <div id=\"exportToPdfArea\" class=\"compare-products-box\" ref=\"exportToPdfArea\">\r\n            <template v-for=\"(item, index) in pdf_data\">\r\n                <el-table :id=\"'exportToPdfArea_' + index\" ref=\"multipleCompareTableRef\" :data=\"reversed_table.items\" :empty-text=\"empty_text\" stripe border :height=\"print_each_table_height\" style=\"width: 100%;  margin-bottom: 10px\">\r\n                    <el-table-column v-for=\"(header, index) in item\" :key=\"index\" :prop=\"header.value\" :label=\"header.text\" :fixed=\"index === 0 ? 'left' : false\" :width=\"header.value === 'column' && 200\">\r\n                        <template #header=\"{ column }\">\r\n                            <template v-if=\"column.property === 'column'\">\r\n                                <b>\r\n                                    <span v-text=\"column.label\"><\/span>\r\n                                <\/b>\r\n                            <\/template>\r\n                            <template v-else>\r\n                                {{ column.label }}\r\n                            <\/template>\r\n                        <\/template>\r\n                        <template v-slot=\"{ row }\">\r\n                            <b v-if=\"header.value === 'column'\"><span v-html=\"row[header.value]\"><\/span><\/b>\r\n                            <span v-else v-html=\"purify(row[header.value])\"><\/span>\r\n                        <\/template>\r\n                    <\/el-table-column>\r\n                <\/el-table>\r\n            <\/template>\r\n        <\/div>\r\n    <\/el-dialog>\r\n\r\n    <!-- Email -->\r\n    <el-dialog v-model=\"open_email_lightbox\" class=\"dialog-compare dialog-email-pdf\" :close-on-press-escape=\"false\" :close-on-click-modal=\"false\">\r\n        <template #header=\"{ close, titleId, titleClass }\">\r\n            <div class=\"dialog-compare-header top-box\">\r\n                <div class=\"left-box\">\r\n                    <h4 :id=\"titleId\" :class=\"titleClass\">Share to email<\/h4>\r\n                <\/div>\r\n            <\/div>\r\n        <\/template>\r\n        <div class=\"compare-products-box\">\r\n            <el-space fill>\r\n                <el-input class=\"mb-0 pb-0\" v-model=\"emailAddresses\" label=\"To\">\r\n                    <template #append>{{checkedAddressArr.length}}\/10<\/template>\r\n                <\/el-input>\r\n                <el-space wrap>\r\n                    <el-tag :type=\"index > 9 ? 'warning' : 'info'\" class=\"mr-1\" v-for=\"(item, index) in checkedAddressArr\">{{item}}<\/el-tag>\r\n                <\/el-space>\r\n                <el-alert :type=\"checkedAddressRes\" :closable=\"false\">\r\n                    <p class=\"mb-0\">use comma to separate emails, max limit 10 emails.<\/p>\r\n                    <p class=\"mb-0\">e.g. a1@abc.com, a2@abc.com, a3@abc.com<\/p>\r\n                <\/el-alert>\r\n            <\/el-space>\r\n        <\/div>\r\n        <template #footer>\r\n            <div class=\"dialog-footer\" center>\r\n                <el-button type=\"primary\" round @click=\"sendEmail()\">\r\n                    <template v-slot:icon>\r\n                        <img decoding=\"async\" class=\"default\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-share.svg\">\r\n                        <img decoding=\"async\" class=\"for-hover\" src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/images\/product-filter-page\/icon-share-hover.svg\">\r\n                    <\/template>\r\n                    Share\r\n                <\/el-button>\r\n            <\/div>\r\n        <\/template>\r\n    <\/el-dialog>\r\n\r\n    <!-- alert area -->\r\n    <el-alert v-show=\"alert_is_show\" class=\"fixed\" :title=\"alert_title\" :closable=\"false\" :type=\"alert_is_show\" show-icon \/>\r\n<\/div>\r\n\r\n<script>\r\n    const SITE_URL = 'http:\/\/services.ts.com.tw\/ja'\r\n    const API_URL = 'https:\/\/services.taiwansemi.com'\r\n    const SITE_SLUG = 'twsemi'\r\n    const PRODUCT_RESOURCE_URI = 'products'\r\n    const PRODUCT_RESOURCE_URI_V2 = 'products_v2'\r\n    const COMPARE_EMAIL_RECORD_URI = 'compareEmailRecord'\r\n    const PRODUCT_FILTER_RECORD_RESOURCE_URI = 'product-filter-records'\r\n    const PRODUCT_FILTER_SKELETON_URI = 'product-filter-skeleton'\r\n    const SERVICE_LANGUAGE = 'JP'\r\n    const LANGUAGE_PATH = '\/ja'\r\n\r\n    <\/script>\r\n\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/axios\/axios.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/js-cookie\/js.cookie.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/lodash\/lodash.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/purify\/purify.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/lz-string\/lz-string.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/xlsx\/xlsx.full.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/js-pdf\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/js-pdf\/html2canvas.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/js-pdf\/jspdf-html2canvas.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/js-pdf\/base64.min.js\"><\/script>\r\n<script src=\"\/ja\/wp-content\/plugins\/wakeup-twsemi-feature\/js\/front-stage\/product-filter.js\"><\/script>\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":25,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"folder":[73],"class_list":["post-1225","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/pages\/1225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/comments?post=1225"}],"version-history":[{"count":0,"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/pages\/1225\/revisions"}],"wp:attachment":[{"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/media?parent=1225"}],"wp:term":[{"taxonomy":"folder","embeddable":true,"href":"http:\/\/services.ts.com.tw\/ja\/wp-json\/wp\/v2\/folder?post=1225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}