@ptcwebops/ptcw-design 1.6.0 → 1.6.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/bundle-jumbotron-example.cjs.entry.js +50 -0
- package/dist/cjs/{bundle-jumbotron-example_14.cjs.entry.js → icon-asset_16.cjs.entry.js} +406 -401
- package/dist/cjs/interfaces-574e6df7.js +15 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/max-width-container_3.cjs.entry.js +237 -0
- package/dist/cjs/ptc-card.cjs.entry.js +1 -1
- package/dist/cjs/ptc-jumbotron.cjs.entry.js +135 -0
- package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/collection/components/ptc-card/ptc-card.css +26 -179
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +4 -0
- package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css +4 -0
- package/dist/collection/components/ptc-product-card/ptc-product-card.css +1 -1
- package/dist/collection/components/ptc-product-card/ptc-product-card.js +1 -19
- package/dist/collection/components/ptc-product-dropdown/ptc-product-dropdown.css +2 -6
- package/dist/collection/components/ptc-product-dropdown/ptc-product-dropdown.js +1 -1
- package/dist/collection/components/ptc-product-sidebar/ptc-product-sidebar.css +2 -2
- package/dist/collection/stories/Button.js +21 -0
- package/dist/collection/stories/Button.stories.js +45 -0
- package/dist/collection/stories/Header.js +45 -0
- package/dist/collection/stories/Header.stories.js +18 -0
- package/dist/collection/stories/Page.js +61 -0
- package/dist/collection/stories/Page.stories.js +20 -0
- package/dist/collection/stories/assets/code-brackets.svg +1 -0
- package/dist/collection/stories/assets/colors.svg +1 -0
- package/dist/collection/stories/assets/comments.svg +1 -0
- package/dist/collection/stories/assets/direction.svg +1 -0
- package/dist/collection/stories/assets/flow.svg +1 -0
- package/dist/collection/stories/assets/plugin.svg +1 -0
- package/dist/collection/stories/assets/repo.svg +1 -0
- package/dist/collection/stories/assets/stackalt.svg +1 -0
- package/dist/custom-elements/index.js +8 -9
- package/dist/esm/bundle-jumbotron-example.entry.js +46 -0
- package/dist/esm/{bundle-jumbotron-example_14.entry.js → icon-asset_16.entry.js} +399 -396
- package/dist/esm/interfaces-7c0243be.js +12 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/max-width-container_3.entry.js +231 -0
- package/dist/esm/ptc-card.entry.js +1 -1
- package/dist/esm/ptc-jumbotron.entry.js +131 -0
- package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/ptcw-design/p-0d2c381a.entry.js +1 -0
- package/dist/ptcw-design/p-73ea7065.entry.js +1 -0
- package/dist/ptcw-design/{p-2404b2db.entry.js → p-9e23fa0e.entry.js} +1 -1
- package/dist/ptcw-design/p-b8debc73.entry.js +1 -0
- package/dist/ptcw-design/p-e8c46d2e.entry.js +1 -0
- package/dist/ptcw-design/p-eba1521a.entry.js +1 -0
- package/dist/ptcw-design/p-ee1183b2.js +1 -0
- package/dist/ptcw-design/ptcw-design.css +1 -1
- package/dist/ptcw-design/ptcw-design.esm.js +1 -1
- package/dist/types/components/ptc-product-card/ptc-product-card.d.ts +0 -2
- package/dist/types/components.d.ts +0 -5
- package/package.json +15 -3
- package/readme.md +1 -1
- package/dist/cjs/ptc-back-to-top.cjs.entry.js +0 -46
- package/dist/cjs/ptc-product-card.cjs.entry.js +0 -33
- package/dist/cjs/ptc-product-category.cjs.entry.js +0 -21
- package/dist/cjs/ptc-product-dropdown.cjs.entry.js +0 -80
- package/dist/cjs/ptc-product-highlight-card.cjs.entry.js +0 -23
- package/dist/cjs/ptc-product-list.cjs.entry.js +0 -128
- package/dist/cjs/ptc-product-sidebar.cjs.entry.js +0 -130
- package/dist/esm/ptc-back-to-top.entry.js +0 -42
- package/dist/esm/ptc-product-card.entry.js +0 -29
- package/dist/esm/ptc-product-category.entry.js +0 -17
- package/dist/esm/ptc-product-dropdown.entry.js +0 -76
- package/dist/esm/ptc-product-highlight-card.entry.js +0 -19
- package/dist/esm/ptc-product-list.entry.js +0 -124
- package/dist/esm/ptc-product-sidebar.entry.js +0 -126
- package/dist/ptcw-design/p-046b0224.entry.js +0 -1
- package/dist/ptcw-design/p-19ec063d.entry.js +0 -1
- package/dist/ptcw-design/p-43e72cf0.entry.js +0 -1
- package/dist/ptcw-design/p-49dc9b68.entry.js +0 -1
- package/dist/ptcw-design/p-65513c45.entry.js +0 -1
- package/dist/ptcw-design/p-798c2328.entry.js +0 -1
- package/dist/ptcw-design/p-ac5dfbd0.entry.js +0 -1
- package/dist/ptcw-design/p-e341cb46.entry.js +0 -1
- package/dist/ptcw-design/p-ff1585a9.entry.js +0 -1
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-8e63c32d.js';
|
|
2
|
-
|
|
3
|
-
const ptcProductCategoryCss = ":host{display:block;padding-bottom:var(--ptc-layout-spacing-03)}";
|
|
4
|
-
|
|
5
|
-
const PtcProductCategory = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.categoryTitle = undefined;
|
|
9
|
-
this.categoryDescription = undefined;
|
|
10
|
-
}
|
|
11
|
-
render() {
|
|
12
|
-
return (h(Host, null, h("ptc-title", { type: "h2", upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "xx-large" }, h("ptc-tooltip", { "text-display": "inline", "text-lines": "4", "z-index": "z-999", description: this.categoryTitle, position: "bottom", width: 'full-width' })), h("ptc-spacer", { size: "x-small" }), h("ptc-spacer", { size: "x-small", breakpoint: "x-small" }), h("ptc-para", { "para-margin": "margin-flush", "font-size": "small", "para-line-h": "line-height-p", "font-weight": "w-5", "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "9", "z-index": "z-999", description: this.categoryDescription, position: "bottom", width: 'full-width' })), h("ptc-spacer", { size: "large" }), h("slot", null)));
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
PtcProductCategory.style = ptcProductCategoryCss;
|
|
16
|
-
|
|
17
|
-
export { PtcProductCategory as ptc_product_category };
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8e63c32d.js';
|
|
2
|
-
|
|
3
|
-
const ptcProductDropdownCss = ":host{display:block;margin-top:4px;background-color:var(--color-white)}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;width:100%;font-size:16px}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between}:host .dropdown .dropdown-toggle .dropdown-placeholder{font-size:14px;color:var(--color-gray-07)}:host .caret{display:inline-block;margin-left:0.25rem;width:0;height:0;border-top:0.4rem solid;border-right:0.4rem solid transparent;border-left:0.4rem solid transparent;vertical-align:middle}:host .dropdown-menu{position:absolute;top:100%;left:0;min-width:10rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);z-index:105;max-height:400px;overflow-y:auto}:host .dropdown-menu::-webkit-scrollbar{width:5px}:host .dropdown-menu::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .checkbox-label{display:flex;align-items:flex-start;padding:6px 16px;cursor:pointer;font-size:14px}:host .checkbox-label:first-child{padding-top:20px}:host .checkbox-label:last-child{padding-bottom:20px}:host .checkbox-label input[type=checkbox]{min-width:20px;margin-right:8px;width:20px;height:20px;margin-top:0}";
|
|
4
|
-
|
|
5
|
-
const PtcProductDropdown = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.selectedValues = createEvent(this, "selectedValues", 7);
|
|
9
|
-
this.dropdownTouched = createEvent(this, "dropdownTouched", 7);
|
|
10
|
-
this.internalOptions = undefined;
|
|
11
|
-
this.newOptions = undefined;
|
|
12
|
-
this.selectedOptions = [];
|
|
13
|
-
this.placeholder = undefined;
|
|
14
|
-
this.isOpen = false;
|
|
15
|
-
}
|
|
16
|
-
parseOptions() {
|
|
17
|
-
let options = Array.from(this.hostElement.querySelectorAll('span'));
|
|
18
|
-
if (options) {
|
|
19
|
-
this.internalOptions = options.map((option) => {
|
|
20
|
-
return option.textContent;
|
|
21
|
-
});
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
toggleDropdown() {
|
|
25
|
-
this.isOpen = !this.isOpen;
|
|
26
|
-
this.dropdownTouched.emit({
|
|
27
|
-
'sender': this,
|
|
28
|
-
'isOpen': this.isOpen
|
|
29
|
-
});
|
|
30
|
-
}
|
|
31
|
-
handleSearchResult(event) {
|
|
32
|
-
const { sender, searchTerm } = event.detail;
|
|
33
|
-
if (sender) {
|
|
34
|
-
if (searchTerm === "") {
|
|
35
|
-
this.selectedOptions = [];
|
|
36
|
-
this.isOpen = false;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
handleinputChanged(event) {
|
|
41
|
-
const { sender } = event.detail;
|
|
42
|
-
if (sender) {
|
|
43
|
-
this.selectedOptions = [];
|
|
44
|
-
this.isOpen = false;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
handleCheckboxChange(option) {
|
|
48
|
-
const index = this.selectedOptions.indexOf(option);
|
|
49
|
-
if (index > -1) {
|
|
50
|
-
this.selectedOptions.splice(index, 1);
|
|
51
|
-
//console.log(this.selectedOptions);
|
|
52
|
-
this.selectedValues.emit({
|
|
53
|
-
'sender': this,
|
|
54
|
-
'selectedOptions': this.selectedOptions
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
this.selectedOptions.push(option);
|
|
59
|
-
//console.log(this.selectedOptions);
|
|
60
|
-
this.selectedValues.emit({
|
|
61
|
-
'sender': this,
|
|
62
|
-
'selectedOptions': this.selectedOptions
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
componentWillLoad() {
|
|
67
|
-
this.parseOptions();
|
|
68
|
-
}
|
|
69
|
-
render() {
|
|
70
|
-
return (h(Host, null, h("div", { class: "dropdown" }, h("div", { class: "dropdown-toggle", onClick: () => this.toggleDropdown() }, h("span", { class: "dropdown-placeholder" }, this.placeholder), h("span", { class: "caret" })), this.isOpen && (h("div", { class: "dropdown-menu" }, this.internalOptions.map((option) => (h("label", { class: "checkbox-label" }, h("input", { type: "checkbox", checked: this.selectedOptions.includes(option), onChange: () => this.handleCheckboxChange(option) }), option)))))), h("div", { class: "hidden" }, h("slot", null))));
|
|
71
|
-
}
|
|
72
|
-
get hostElement() { return getElement(this); }
|
|
73
|
-
};
|
|
74
|
-
PtcProductDropdown.style = ptcProductDropdownCss;
|
|
75
|
-
|
|
76
|
-
export { PtcProductDropdown as ptc_product_dropdown };
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, h, H as Host } from './index-8e63c32d.js';
|
|
2
|
-
|
|
3
|
-
const ptcProductHighlightCardCss = ":host{max-width:300px;display:block;padding:18px 10px 12px 10px;border:1px solid var(--color-gray-04);border-radius:var(--ptc-border-radius-standard);margin:auto}:host ptc-picture{min-height:100px}";
|
|
4
|
-
|
|
5
|
-
const PtcProductHighlightCard = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.cardTitle = undefined;
|
|
9
|
-
this.cardImage = undefined;
|
|
10
|
-
this.cardImageAltText = undefined;
|
|
11
|
-
this.cardDescription = undefined;
|
|
12
|
-
}
|
|
13
|
-
render() {
|
|
14
|
-
return (h(Host, null, h("ptc-title", { type: 'h4', upperline: "no-upperline", "title-margin": "margin-flush", "title-size": "small", "text-align": 'center' }, h("ptc-tooltip", { "text-display": "block", "text-lines": "2", "z-index": "z-999", description: this.cardTitle, position: "bottom", width: 'full-width' })), h("ptc-picture", { alt: "image-test", src: this.cardImage, "image-alignment": "center", width: "69", "display-image": "inline-block", styles: "img{margin: 12px auto 18px auto}" }), h("ptc-para", { "font-size": "x-small", "para-margin": "margin-flush", "para-line-h": "line-height-densest", "para-align": 'left', "para-z-index": "z-auto" }, h("ptc-tooltip", { "text-display": "block", "text-lines": "3", "z-index": "z-999", description: this.cardDescription, position: "bottom", width: 'full-width' }))));
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
PtcProductHighlightCard.style = ptcProductHighlightCardCss;
|
|
18
|
-
|
|
19
|
-
export { PtcProductHighlightCard as ptc_product_highlight_card };
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8e63c32d.js';
|
|
2
|
-
|
|
3
|
-
const ptcProductListCss = ":host{display:block;padding-bottom:52px}@media only screen and (min-width: 992px){:host{padding-bottom:102px}}:host .no-result-wrap{display:none}:host .no-result-wrap.show{display:block}:host .no-result-wrap .no-result{display:flex;justify-content:center;align-items:center;min-height:160px;padding:20px;text-align:center}";
|
|
4
|
-
|
|
5
|
-
const PtcProductList = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.clearCtaClicked = createEvent(this, "clearCtaClicked", 7);
|
|
9
|
-
}
|
|
10
|
-
handleSearchResult(event) {
|
|
11
|
-
const { sender, searchTerm } = event.detail;
|
|
12
|
-
if (sender) {
|
|
13
|
-
this.sortCards(searchTerm);
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
handleMultipleSearchResult(event) {
|
|
17
|
-
const { sender, selectedOptions } = event.detail;
|
|
18
|
-
if (sender) {
|
|
19
|
-
this.sortMultipleCards(selectedOptions);
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
handleEmptyResult(event) {
|
|
23
|
-
const { sender, searchTerm } = event.detail;
|
|
24
|
-
if (sender) {
|
|
25
|
-
this.noresultSection.classList.add('show');
|
|
26
|
-
this.sortCards(searchTerm);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
sortMultipleCards(searchItems) {
|
|
30
|
-
const categoryList = Array.from(this.hostElement.querySelectorAll('ptc-product-category'));
|
|
31
|
-
categoryList.forEach((category) => {
|
|
32
|
-
const categoryTitle = category.getAttribute('category-title');
|
|
33
|
-
const productList = Array.from(category.querySelectorAll('ptc-product-card'));
|
|
34
|
-
if (searchItems.length > 0) {
|
|
35
|
-
const shouldDisplayCategory = searchItems.some(searchItem => categoryTitle && categoryTitle.includes(searchItem));
|
|
36
|
-
category.style.display = shouldDisplayCategory ? 'block' : 'none';
|
|
37
|
-
if (shouldDisplayCategory) {
|
|
38
|
-
productList.forEach(product => {
|
|
39
|
-
product.style.display = 'block';
|
|
40
|
-
});
|
|
41
|
-
}
|
|
42
|
-
else {
|
|
43
|
-
productList.forEach(product => {
|
|
44
|
-
const productTitle = product.getAttribute('card-title');
|
|
45
|
-
const shouldDisplayProduct = searchItems.some(searchItem => productTitle && productTitle.includes(searchItem));
|
|
46
|
-
product.style.display = shouldDisplayProduct ? 'block' : 'none';
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
category.style.display = 'block';
|
|
52
|
-
productList.forEach(product => {
|
|
53
|
-
product.style.display = 'block';
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
|
-
// Sorting the
|
|
59
|
-
sortCards(searchItem) {
|
|
60
|
-
const categoryList = this.hostElement.querySelectorAll('ptc-product-category');
|
|
61
|
-
categoryList.forEach((category) => {
|
|
62
|
-
const categoryTitle = category.getAttribute('category-title');
|
|
63
|
-
const productList = category.querySelectorAll('ptc-product-card');
|
|
64
|
-
category.style.display = 'none';
|
|
65
|
-
if (searchItem === '') {
|
|
66
|
-
category.style.display = 'block';
|
|
67
|
-
productList.forEach(product => {
|
|
68
|
-
product.style.display = 'block';
|
|
69
|
-
});
|
|
70
|
-
this.noresultSection.classList.remove('show');
|
|
71
|
-
}
|
|
72
|
-
else {
|
|
73
|
-
const searchItemLowerCase = searchItem; //
|
|
74
|
-
if (searchItemLowerCase === categoryTitle) {
|
|
75
|
-
category.style.display = 'block';
|
|
76
|
-
productList.forEach(product => {
|
|
77
|
-
product.style.display = 'block';
|
|
78
|
-
});
|
|
79
|
-
}
|
|
80
|
-
else {
|
|
81
|
-
productList.forEach(product => {
|
|
82
|
-
const productTitle = product.getAttribute('card-title');
|
|
83
|
-
product.style.display = 'none';
|
|
84
|
-
if (searchItemLowerCase === productTitle) {
|
|
85
|
-
product.style.display = 'block';
|
|
86
|
-
category.style.display = 'block';
|
|
87
|
-
}
|
|
88
|
-
});
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
componentDidLoad() {
|
|
94
|
-
this.addIds();
|
|
95
|
-
this.noresultSection = this.hostElement.shadowRoot.querySelector('.no-result-wrap');
|
|
96
|
-
this.productList = this.hostElement.shadowRoot.querySelector('.product-list');
|
|
97
|
-
}
|
|
98
|
-
handleClick(event) {
|
|
99
|
-
this.clearCtaClicked.emit({
|
|
100
|
-
'sender': this,
|
|
101
|
-
'event': event,
|
|
102
|
-
});
|
|
103
|
-
}
|
|
104
|
-
// Adding id to the category and product cards
|
|
105
|
-
addIds() {
|
|
106
|
-
const categoryList = this.hostElement.querySelectorAll('ptc-product-category');
|
|
107
|
-
categoryList.forEach((category) => {
|
|
108
|
-
const categoryTitle = category.getAttribute('category-title');
|
|
109
|
-
category.setAttribute('id', categoryTitle);
|
|
110
|
-
const productList = category.querySelectorAll('ptc-product-card');
|
|
111
|
-
productList.forEach(product => {
|
|
112
|
-
const productTitle = product.getAttribute('card-title');
|
|
113
|
-
product.setAttribute('id', productTitle);
|
|
114
|
-
});
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
render() {
|
|
118
|
-
return (h(Host, null, h("div", { class: "product-list" }, h("slot", null)), h("div", { class: "no-result-wrap" }, h("div", { class: "no-result" }, h("div", null, h("ptc-title", { type: 'h3', "title-margin": "margin-flush", upperline: 'no-upperline', "title-size": "large" }, "No Results Found"), h("ptc-para", { "font-size": "x-small" }, "Try changing or removing some of your filters"), h("ptc-button", { type: "link", color: "ptc-quaternary", target: "_blank", onClick: (e) => { this.handleClick(e); } }, "Clear Filters"))))));
|
|
119
|
-
}
|
|
120
|
-
get hostElement() { return getElement(this); }
|
|
121
|
-
};
|
|
122
|
-
PtcProductList.style = ptcProductListCss;
|
|
123
|
-
|
|
124
|
-
export { PtcProductList as ptc_product_list };
|
|
@@ -1,126 +0,0 @@
|
|
|
1
|
-
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-8e63c32d.js';
|
|
2
|
-
|
|
3
|
-
const ptcProductSidebarCss = ":host{display:block;position:relative}:host .hide{display:none !important}:host .white-box{padding:12px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}:host .sort-wrap{display:block}@media only screen and (min-width: 480px){:host .sort-wrap{display:flex;justify-content:space-between}}@media only screen and (min-width: 992px){:host .sort-wrap{display:block}}:host .filter-result-wrap label{font-size:var(--ptc-font-size-x-small);font-weight:600}:host .filter-result-wrap .result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}@media only screen and (min-width: 992px){:host .filter-result-wrap .result-header{margin-bottom:26px}}:host .filter-result-wrap .result-header .clear-cta{cursor:pointer;display:none;color:var(--color-gray-07);font-size:var(--ptc-font-size-x-small);text-decoration:underline}:host .filter-result-wrap .result-header .clear-cta.show{display:block}:host .filter-result-wrap .typeahead-input{box-sizing:border-box;margin-bottom:14px;width:100%;margin-right:0}@media only screen and (min-width: 480px){:host .filter-result-wrap .typeahead-input{margin-right:40px}}@media only screen and (min-width: 992px){:host .filter-result-wrap .typeahead-input{margin-right:0}}:host .filter-result-wrap .typeahead-input .input-wrap{position:relative}:host .filter-result-wrap .typeahead-input .input-wrap svg{position:absolute;left:8px;top:8px}:host .filter-result-wrap .typeahead-input .input-wrap input{margin-top:4px;padding:8px 8px 8px 34px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--color-gray-03);font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap{position:relative;width:100%}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions{border:1px solid var(--color-gray-03);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);background-color:var(--color-white);position:absolute;z-index:105;top:0;margin:0;width:100%;box-sizing:border-box;padding:0;max-height:400px;overflow-y:auto}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar{width:5px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li{list-style:none;padding:10px 16px;cursor:pointer;display:block;font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child{padding-top:20px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:last-child{padding-bottom:20px}:host .filter-result-wrap .dropdwon-filter{margin-bottom:10px;width:100%}:host .product-list-wrap{display:none}@media only screen and (min-width: 992px){:host .product-list-wrap{display:block}}:host .product-list-wrap .category-list{display:block;padding:12px 4px;font-size:var(--ptc-font-size-x-small)}:host .product-list-wrap .category-list ptc-para{padding-bottom:4px;display:block}:host .product-list-wrap .category-list ul{padding-left:20px;margin:0}";
|
|
4
|
-
|
|
5
|
-
const PtcProductSidebar = class {
|
|
6
|
-
constructor(hostRef) {
|
|
7
|
-
registerInstance(this, hostRef);
|
|
8
|
-
this.selectedResult = createEvent(this, "selectedResult", 7);
|
|
9
|
-
this.clearsearch = createEvent(this, "clearsearch", 7);
|
|
10
|
-
this.inputChanged = createEvent(this, "inputChanged", 7);
|
|
11
|
-
this.emptyResult = createEvent(this, "emptyResult", 7);
|
|
12
|
-
this.searchTerm = '';
|
|
13
|
-
this.suggestions = [];
|
|
14
|
-
this.suggestionList = [];
|
|
15
|
-
}
|
|
16
|
-
componentWillLoad() {
|
|
17
|
-
this.getDomData();
|
|
18
|
-
}
|
|
19
|
-
componentDidLoad() {
|
|
20
|
-
this.productListWrap = this.hostElement.shadowRoot.querySelector('.product-list-wrap');
|
|
21
|
-
this.clearBtn = this.hostElement.shadowRoot.querySelector('.clear-cta');
|
|
22
|
-
}
|
|
23
|
-
// Getting category title and products list
|
|
24
|
-
getDomData() {
|
|
25
|
-
const categoryList = document.querySelectorAll('ptc-product-category');
|
|
26
|
-
categoryList.forEach(category => {
|
|
27
|
-
let categoryTitle = category.getAttribute('category-title');
|
|
28
|
-
let categoryObject = { categoryName: categoryTitle, products: [] };
|
|
29
|
-
this.suggestionList.push(categoryObject);
|
|
30
|
-
let productList = category.querySelectorAll('ptc-product-card');
|
|
31
|
-
productList.forEach(product => {
|
|
32
|
-
let productTitle = product.getAttribute('card-title');
|
|
33
|
-
categoryObject.products.push(productTitle);
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
handleInputChange(event) {
|
|
38
|
-
const inputElement = event.target;
|
|
39
|
-
this.searchTerm = inputElement.value.toLocaleLowerCase();
|
|
40
|
-
this.productListWrap.classList.add('hide');
|
|
41
|
-
this.clearBtn.classList.add('show');
|
|
42
|
-
this.getSuggestions();
|
|
43
|
-
this.inputChanged.emit({
|
|
44
|
-
'sender': this,
|
|
45
|
-
'event': event,
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
getSuggestions() {
|
|
49
|
-
const searchTerm = this.searchTerm.toLowerCase();
|
|
50
|
-
const suggestions = this.suggestionList.reduce((acc, item) => {
|
|
51
|
-
if (item.categoryName.toLowerCase().includes(searchTerm)) {
|
|
52
|
-
acc.push(item.categoryName); // Include the category if it matches the search term
|
|
53
|
-
}
|
|
54
|
-
const matchedProducts = item.products.filter((product) => product.toLowerCase().includes(searchTerm));
|
|
55
|
-
if (matchedProducts.length > 0) {
|
|
56
|
-
acc.push(...matchedProducts); // Include the matching products
|
|
57
|
-
}
|
|
58
|
-
return acc;
|
|
59
|
-
}, []);
|
|
60
|
-
this.suggestions = suggestions;
|
|
61
|
-
}
|
|
62
|
-
handleSelectSuggestion(suggestion, event) {
|
|
63
|
-
this.searchTerm = suggestion;
|
|
64
|
-
//this.serachInput.setAttribute('value', this.searchTerm);
|
|
65
|
-
this.selectedResult.emit({
|
|
66
|
-
'sender': this,
|
|
67
|
-
'event': event,
|
|
68
|
-
'searchTerm': this.searchTerm
|
|
69
|
-
});
|
|
70
|
-
}
|
|
71
|
-
handleKeyUp(e) {
|
|
72
|
-
const inputElement = e.target;
|
|
73
|
-
this.searchTerm = inputElement.value.toLocaleLowerCase();
|
|
74
|
-
if (e.keyCode === 13 && this.suggestions.length == 0) {
|
|
75
|
-
console.log('Enter key pressed');
|
|
76
|
-
this.emptyResult.emit({
|
|
77
|
-
'sender': this,
|
|
78
|
-
'event': e,
|
|
79
|
-
});
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
clearSearch(event) {
|
|
83
|
-
let input = this.hostElement.shadowRoot.querySelector('input');
|
|
84
|
-
this.productListWrap.classList.remove('hide');
|
|
85
|
-
this.clearBtn.classList.remove('show');
|
|
86
|
-
if (input) {
|
|
87
|
-
input.value = "";
|
|
88
|
-
}
|
|
89
|
-
this.suggestions = [];
|
|
90
|
-
this.clearsearch.emit({
|
|
91
|
-
'sender': this,
|
|
92
|
-
'event': event,
|
|
93
|
-
'searchTerm': input.value
|
|
94
|
-
});
|
|
95
|
-
}
|
|
96
|
-
handleDropdownTouched(event) {
|
|
97
|
-
const { sender, isOpen } = event.detail;
|
|
98
|
-
if (sender) {
|
|
99
|
-
this.productListWrap.classList.add('hide');
|
|
100
|
-
this.clearBtn.classList.add('show');
|
|
101
|
-
if (isOpen) {
|
|
102
|
-
let input = this.hostElement.shadowRoot.querySelector('input');
|
|
103
|
-
if (input) {
|
|
104
|
-
input.value = "";
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
handleClick() {
|
|
110
|
-
this.suggestions = [];
|
|
111
|
-
}
|
|
112
|
-
handleclearCtaClicked(event) {
|
|
113
|
-
const { sender, event: mouseEvent, } = event.detail;
|
|
114
|
-
if (sender) {
|
|
115
|
-
this.clearSearch(mouseEvent);
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
render() {
|
|
119
|
-
return (h(Host, { class: 'search-box' }, h("div", { class: "filter-result-wrap white-box" }, h("div", { class: "result-header" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Filter Result"), h("span", { class: "clear-cta", onClick: (e) => this.clearSearch(e) }, "Clear")), h("div", { class: "sort-wrap" }, h("div", { class: "typeahead-input" }, h("label", { htmlFor: "searchBox" }, "Filter"), h("div", { class: "input-wrap" }, h("svg", { width: "19", height: "18", viewBox: "0 0 19 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z", fill: "#323B42" })), h("input", { type: "text", value: this.searchTerm, onInput: (event) => this.handleInputChange(event), onKeyUp: (e) => this.handleKeyUp(e), id: 'searchBox' })), this.suggestions.length > 0 &&
|
|
120
|
-
h("div", { class: "suggestion-wrap" }, h("ul", { class: "suggestions" }, this.suggestions.map((suggestion) => (h("li", { onClick: (e) => this.handleSelectSuggestion(suggestion, e) }, suggestion)))))), h("div", { class: "dropdwon-filter" }, h("label", { htmlFor: "tech-dropdown" }, "Technology"), h("ptc-product-dropdown", { placeholder: "Select a technology", id: "tech-dropdown" }, this.suggestionList.map((item) => (h("span", null, item.categoryName))))))), h("ptc-spacer", { size: "large" }), h("div", { class: "product-list-wrap white-box" }, h("ptc-title", { type: "h3", "title-margin": "margin-flush", upperline: "no-upperline", "title-size": "medium" }, "Jump to Product"), this.suggestionList.map((item) => (h("div", { class: "category-list" }, h("ptc-para", { "font-size": 'x-small', "font-weight": 'w-7', "para-line-h": "line-height-densest", "para-margin": 'margin-flush' }, h("list-item", { "list-type": "list-underline", "link-href": '#' + item.categoryName }, item.categoryName)), h("div", { class: "product-list" }, h("ul", null, item.products.map((product) => (h("list-item", { "list-type": "list-underline", "link-href": '#' + product }, product)))))))))));
|
|
121
|
-
}
|
|
122
|
-
get hostElement() { return getElement(this); }
|
|
123
|
-
};
|
|
124
|
-
PtcProductSidebar.style = ptcProductSidebarCss;
|
|
125
|
-
|
|
126
|
-
export { PtcProductSidebar as ptc_product_sidebar };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as r,H as i}from"./p-63c06667.js";const a=class{constructor(r){t(this,r),this.cardType="custom-card",this.cardHref=void 0,this.target="_self",this.rel=void 0,this.hasImage=!1,this.hasVideo=!1,this.hasLottie=!1,this.heading=void 0,this.headingTransform="none",this.cardDate=void 0,this.country=void 0,this.styles=void 0,this.ribbonText=void 0,this.eventType=void 0,this.cardLogo=void 0,this.titleLineCutOff=void 0}render(){const t=this.cardHref?"a":"div",a=this.getCssClassMap(),o=this.getLineCuttoff();let e="";return this.titleLineCutOff&&this.titleLineCutOff>0&&(e=" clamp-title"),r(i,Object.assign({},this.cardType?{class:this.cardType}:{}),this.styles&&r("style",null,this.styles),r("div",{class:"card-border",part:"border-wrapper"},r(t,Object.assign({class:a,part:"card-layout"},this.cardHref?{href:this.cardHref}:{},this.target&&this.cardHref?{target:this.target}:{},this.rel&&this.cardHref?{rel:this.rel}:{},this.ribbonText?{rel:this.ribbonText}:{}),this.hasImage||this.hasLottie||this.hasVideo?r("div",{class:"card-media",part:"media-wrapper"},this.getMediaSlot?r("slot",{name:this.getMediaSlot()}):null):null,this.ribbonText&&"resource-center-card"==this.cardType||this.ribbonText&&"related-card"==this.cardType?r("div",{class:"ribbon-text"},`${this.ribbonText}`):null,r("div",{class:"card-body",part:"body-wrapper"},!this.cardDate||"listing-card"!==this.cardType&&"listing-card-horizontal"!==this.cardType?null:r("div",{class:"card-date-text"},this.eventType?r("span",{class:"small"},`${this.cardDate}`," | ",`${this.eventType}`):r("span",{class:"small"},`${this.cardDate}`)),"case-studies-card"===this.cardType?Object.assign({},this.cardLogo?r("div",{class:"card-logo-container"},r("ptc-picture",{alt:"","object-fit":"contain",src:this.cardLogo,height:"40"})):r("div",{class:"card-logo-none"})):null,r("slot",{name:"slot-before-heading"}),this.heading?[r("h3",{class:`ptc-h3 ${this.headingTransform}${e}`,style:o,part:"card-heading"},this.heading),r("slot",{name:"slot-after-heading"})]:null,r("slot",{name:"slot-description"}),this.cardDate&&"listing-card"!==this.cardType&&"listing-card-horizontal"!==this.cardType&&"hightlight-card"!==this.cardType?r("ptc-date",{"date-string":`${this.cardDate}`,"date-styles":"span{color:#40434a;font-size:var(--ptc-font-size-x-small);margin-top:var(--ptc-element-spacing-06);display:inline-block;}"}):null,this.cardDate&&"hightlight-card"===this.cardType?r("ptc-date",{style:{marginBottom:"20px"},"format-options":'{"year":"numeric","month":"long","day":"numeric"}',"date-string":`${this.cardDate}`,"date-styles":"span{color: #a3a3a3;font-family: Raleway;font-size: 1rem !important;font-stretch: normal;font-style: normal;font-weight: 400;letter-spacing: normal;line-height: 1.03;padding-top: 15px;text-align: left;}",country:this.country}):null))))}getCssClassMap(){return{"card-layout":!0,"link-wrapper":!!this.cardType}}getMediaSlot(){return this.hasLottie?"slot-lottie":this.hasVideo?"slot-video":this.hasImage?"slot-image":null}getLineCuttoff(){let t;return this.titleLineCutOff&&this.titleLineCutOff>0&&(t={"-webkit-line-clamp":`${this.titleLineCutOff}`}),t}};a.style=':host{display:block}:host(.lottie-card) .card-border{box-shadow:var(--ptc-shadow-small);border:1px solid var(--color-gray-03);border-radius:10px;position:relative;overflow:hidden}:host(.lottie-card) .card-border::after{content:"";height:40%;width:4px;position:absolute;top:30%;right:-2px;background-color:var(--color-green-06);z-index:2;display:block}:host(.lottie-card) .card-border:hover{box-shadow:var(--ptc-shadow-x-large)}:host(.lottie-card) .card-border:hover .card-body h3{border-bottom:2px solid var(--color-green-07)}:host(.lottie-card) .card-layout{display:block}@media only screen and (min-width: 768px){:host(.lottie-card) .card-layout{display:flex;flex-flow:nowrap row;justify-content:center}}:host(.lottie-card) .link-wrapper{outline:none;text-decoration:none}:host(.lottie-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.lottie-card) .card-media{flex-basis:40%;border-right:1px solid var(--color-gray-03);display:flex}:host(.lottie-card) .card-body{flex-basis:60%;align-self:center;padding:0 30px 10px}:host(.lottie-card) .card-body h3{display:inline-block;line-height:var(--ptc-line-height-densest);color:var(--color-gray-10);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);border-bottom:2px solid transparent;margin-bottom:var(--ptc-element-spacing-02)}:host(.simple-card) .card-layout{display:block}:host(.simple-card) .link-wrapper{outline:none;text-decoration:none}:host(.simple-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.simple-card) .link-wrapper:hover .card-body h3{color:var(--color-green-06)}:host(.simple-card) .link-wrapper:hover .card-body h3::before{width:100%}:host(.simple-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]){margin-left:var(--ptc-element-spacing-04)}:host(.simple-card) .card-body h3{color:var(--color-gray-10);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-black);line-height:var(--ptc-line-height-dense);position:relative;margin-bottom:var(--ptc-element-spacing-02);display:inline-block}:host(.simple-card) .card-body h3::before{display:block;position:absolute;content:"";width:100%;border-bottom:2px solid var(--color-green-06);bottom:1px;transition:width var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.simple-card) ::slotted([slot=slot-after-heading]){margin-left:var(--ptc-element-spacing-01);transition:margin-left var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) .card-border{overflow:hidden;filter:drop-shadow(rgba(0, 0, 0, 0.32) 0px 3px 6px);width:100%}:host(.clip-edge-card) .card-border:hover{filter:drop-shadow(rgba(0, 0, 0, 0.32) 0px 6px 12px)}:host(.clip-edge-card) .card-layout{display:block}:host(.clip-edge-card) .link-wrapper{outline:none;text-decoration:none}:host(.clip-edge-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.clip-edge-card) .card-media{position:relative;width:100%;height:124px;overflow:hidden;border-radius:var(--ptc-border-radius-standard)}:host(.clip-edge-card) .card-body{transform:translateY(calc(-1 * var(--ptc-element-spacing-04)));overflow:hidden;width:calc(95% - var(--ptc-element-spacing-04) - var(--ptc-element-spacing-04));font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-medium);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10);clip-path:var(--ptc-clip-path-bottom-right);background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard);padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-04) var(--ptc-element-spacing-03) var(--ptc-element-spacing-04)}:host(.clip-edge-card) .card-body h3{display:inline-block;margin:0px;font-size:var(--ptc-font-size-x-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-dense);color:var(--color-gray-10);text-decoration:none;border-bottom:2px solid transparent;transition:border-bottom var(--ptc-transition-medium) var(--ptc-ease-inout), margin var(--ptc-transition-medium) var(--ptc-ease-inout);margin:var(--ptc-element-spacing-03) 0 var(--ptc-element-spacing-03) 0}:host(.clip-edge-card) ::slotted([slot=slot-description]){height:0;opacity:0;transition:height var(--ptc-transition-medium) var(--ptc-ease-inout), opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) ::slotted([slot=slot-image]){display:block;width:100%;height:100%;transform:scale(1);transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);transform-origin:top center}:host(.clip-edge-card) ::slotted([slot=slot-after-heading]){position:absolute;top:var(--ptc-element-spacing-03);left:var(--ptc-element-spacing-04);opacity:1;transform:scale(1);height:44px;transform-origin:bottom center;transition:opacity var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) ::slotted([slot=slot-before-heading]){display:block;opacity:0;height:24px;transition:all var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.clip-edge-card) .link-wrapper:hover .card-body h3{border-bottom:2px solid var(--color-green-06)}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:60px;opacity:1}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-image]){transform:scale(1.1)}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-after-heading]){opacity:0;transform:scale(0);height:0}:host(.clip-edge-card) .link-wrapper:hover ::slotted([slot=slot-before-heading]){opacity:1}:host(.hightlight-card) .card-border{width:100%;border-radius:var(--ptc-border-radius-standard);overflow:hidden}:host(.hightlight-card) .card-border:hover .card-media{transform:scale(1.1)}:host(.hightlight-card) .card-layout{display:block;position:relative}:host(.hightlight-card) .link-wrapper{outline:none;text-decoration:none}:host(.hightlight-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:96px;opacity:1}@media only screen and (min-width: 768px){:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:var(--ptc-layout-spacing-05)}}@media only screen and (min-width: 992px){:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:var(--ptc-layout-spacing-06)}}@media only screen and (min-width: 1440px){:host(.hightlight-card) .link-wrapper:hover ::slotted([slot=slot-description]){height:var(--ptc-layout-spacing-05)}}:host(.hightlight-card) .card-media{width:100%;height:auto;min-height:450px;position:relative;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-ease-inout);transition-delay:var(--ptc-delay-5)}:host(.hightlight-card) .card-body{position:absolute;bottom:0;top:auto;left:0;right:auto;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-07);background-color:var(--color-white);box-sizing:border-box}:host(.hightlight-card) .card-body h3{font-size:var(--ptc-font-size-x-large);line-height:var(--ptc-line-height-densest);font-weight:var(--ptc-font-weight-bold);color:var(--color-gray-10);margin:var(--ptc-element-spacing-04) 0}:host(.hightlight-card) ::slotted([slot=slot-description]){height:0;opacity:0;transition:height var(--ptc-transition-medium) var(--ptc-ease-inout), opacity var(--ptc-transition-fast) var(--ptc-ease-inout);transition-delay:var(--ptc-delay-5)}:host(.horizontal-card){margin-bottom:var(--ptc-layout-spacing-02)}:host(.horizontal-card) .card-layout{position:relative}@media only screen and (min-width: 768px){:host(.horizontal-card) .card-layout{display:grid;grid-template-columns:42% 58%;direction:ltr;grid-auto-rows:1fr}}:host(.horizontal-card) .link-wrapper{outline:none;text-decoration:none;transition:var(--ptc-transition-slow) linear}:host(.horizontal-card) .link-wrapper:hover{box-shadow:var(--ptc-shadow-large);transition:var(--ptc-transition-slow) linear;background-color:var(--color-white)}:host(.horizontal-card) .link-wrapper:hover h3{border-color:var(--color-green-06);transition:var(--ptc-transition-slow) linear}:host(.horizontal-card) .card-media{display:flex;align-self:center}:host(.horizontal-card) .card-body{padding:var(--ptc-element-spacing-05) var(--ptc-element-spacing-04)}@media only screen and (min-width: 768px){:host(.horizontal-card) .card-body{padding:var(--ptc-element-spacing-06) var(--ptc-element-spacing-07)}}:host(.horizontal-card) .card-body h3{margin-top:0;font-size:var(--ptc-font-size-x-small);color:var(--color-gray-10);border-bottom:1px solid transparent;padding-bottom:var(--ptc-element-spacing-01);margin-bottom:var(--ptc-element-spacing-02);transition:var(--ptc-transition-slow) linear}:host(.horizontal-card) ::slotted([slot=slot-image]){box-shadow:var(--ptc-shadow-medium);width:100%}:host(.listing-card) .card-border{width:100%;overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;height:487px;display:flex;flex-direction:row;margin-bottom:0.5rem}:host(.listing-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.listing-card) .card-border:hover .card-media{background:var(--color-white)}:host(.listing-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}@media (min-width: 480px){:host(.listing-card) .card-border{height:487px}}@media (min-width: 768px){:host(.listing-card) .card-border{height:456px}}@media (min-width: 992px){:host(.listing-card) .card-border{margin-left:4px;margin-right:4px;height:440px}}@media (min-width: 1200px){:host(.listing-card) .card-border{height:420px}}@media (min-width: 1440px){:host(.listing-card) .card-border{height:420px}}:host(.listing-card) .card-layout{display:block;position:relative;width:100%;height:100%}:host(.listing-card) .link-wrapper{outline:none;text-decoration:none}:host(.listing-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.listing-card) .card-media{width:100%;height:288px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.listing-card) .card-media .smart-img{height:288px}@media (min-width: 768px){:host(.listing-card) .card-media .smart-img{height:232px}}@media (min-width: 992px){:host(.listing-card) .card-media .smart-img{height:192px}}@media (min-width: 1200px){:host(.listing-card) .card-media .smart-img{height:170px}}@media (min-width: 768px){:host(.listing-card) .card-media{height:232px}}@media (min-width: 992px){:host(.listing-card) .card-media{height:192px}}@media (min-width: 1200px){:host(.listing-card) .card-media{height:170px}}:host(.listing-card) .card-body{padding:16px 20px 0px 20px}:host(.listing-card) .card-body .card-date-text{display:flex;flex-direction:row}:host(.listing-card) .card-body .card-date-text p{font-size:var(--ptc-font-size-xx-small);font-weight:400;line-height:19px;color:#282F35;margin-bottom:16px;display:inline-block;margin-top:0rem}:host(.listing-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282F35;margin-bottom:16px;display:inline-block}:host(.listing-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:14px;margin-top:0rem}:host(.listing-card) ::slotted([slot=slot-date]){font-weight:400;font-size:16px;line-height:19px;color:#282F35;margin-bottom:16px;display:inline-block}:host(.listing-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:39px}:host(.listing-card-horizontal) .card-border{overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;height:220px;width:100%}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-border{margin-bottom:0.5rem}}@media (min-width: 1200px) and (max-width: 1439){:host(.listing-card-horizontal) .card-border{margin-left:16px}}:host(.listing-card-horizontal) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.listing-card-horizontal) .card-border:hover .card-media{background:var(--color-white)}:host(.listing-card-horizontal) .card-border:hover .card-media .smart-img{background:var(--color-white)}@media (min-width: 480px){:host(.listing-card-horizontal) .card-border{height:178px}}@media (min-width: 768px){:host(.listing-card-horizontal) .card-border{height:210px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-border{height:200px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-border{height:200px}}:host(.listing-card-horizontal) .card-layout{display:flex;flex-direction:row;width:100%;height:220px}@media (min-width: 480px){:host(.listing-card-horizontal) .card-layout{height:178px}}@media (min-width: 768px){:host(.listing-card-horizontal) .card-layout{height:210px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-layout{height:200px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-layout{height:200px}}:host(.listing-card-horizontal) .link-wrapper{outline:none;text-decoration:none}:host(.listing-card-horizontal) .link-wrapper:hover{outline:none;text-decoration:none}:host(.listing-card-horizontal) .card-media{width:100%;height:224px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium);display:none}:host(.listing-card-horizontal) .card-media .smart-img{height:224px}@media (min-width: 768px){:host(.listing-card-horizontal) .card-media .smart-img{height:210px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-media .smart-img{height:200px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-media .smart-img{height:200px}}@media (min-width: 768px){:host(.listing-card-horizontal) .card-media{display:block;height:210px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-media{height:200px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-media{height:200px}}:host(.listing-card-horizontal) .card-body{padding:16px 24px 0px 24px}@media (min-width: 768px){:host(.listing-card-horizontal) .card-body{padding:24px 32px 0px 32px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-body{padding:8px 16px 0px 16px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-body{padding:14px 32px 0px 32px}}@media only screen and (min-width: 768px){:host(.listing-card-horizontal) .card-body{width:505px}}:host(.listing-card-horizontal) .card-body .card-date-text{display:flex;flex-direction:row}:host(.listing-card-horizontal) .card-body .card-date-text p{font-size:var(--ptc-font-size-xx-small);font-weight:400;line-height:19px;color:#282F35;margin-bottom:12px;display:inline-block;margin-top:0rem;margin-block-start:0rem}@media only screen and (min-width: 1200px){:host(.listing-card-horizontal) .card-body .card-date-text p{margin-bottom:20px}}@media only screen and (min-width: 1440px){:host(.listing-card-horizontal) .card-body .card-date-text p{margin-bottom:24px}}@media only screen and (min-width: 1600px){:host(.listing-card-horizontal) .card-body .card-date-text p{margin-bottom:32px}}:host(.listing-card-horizontal) .card-body .small{font-weight:400;font-size:16px;line-height:19px;color:#282F35;margin-bottom:16px;display:inline-block}@media (min-width: 992px){:host(.listing-card-horizontal) .card-body .small{margin-bottom:12px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-body .small{margin-bottom:16px}}:host(.listing-card-horizontal) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);line-height:19px;color:var(--color-gray-11);margin-bottom:8px;margin-top:0rem}@media (min-width: 768px){:host(.listing-card-horizontal) .card-body h3{margin-bottom:16px}}@media (min-width: 992px){:host(.listing-card-horizontal) .card-body h3{margin-bottom:12px}}@media (min-width: 1200px){:host(.listing-card-horizontal) .card-body h3{margin-bottom:16px}}@media only screen and (min-width: 768px){:host(.listing-card-horizontal) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:8px;margin-top:0rem}}:host(.listing-card-horizontal) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:19px;margin-top:0rem;margin-block-start:0rem}:host(.listing-card-horizontal) ::slotted([slot=slot-description]) p{margin-block-start:0rem}@media (max-width: 767px){:host(.listing-card-horizontal) ::slotted([slot=slot-description]){font-weight:400;font-size:14px;line-height:16px}}:host(.resource-center-card) .card-border{width:100%;overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;height:442px;display:flex;flex-direction:row;margin-bottom:0.5rem}:host(.resource-center-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.resource-center-card) .card-border:hover .card-media{background:var(--color-white)}:host(.resource-center-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}@media (min-width: 480px){:host(.resource-center-card) .card-border{height:442px}}@media (min-width: 768px){:host(.resource-center-card) .card-border{height:396px}}@media (min-width: 992px){:host(.resource-center-card) .card-border{height:396px}}@media (min-width: 1200px){:host(.resource-center-card) .card-border{height:396px}}@media (min-width: 1440px){:host(.resource-center-card) .card-border{height:396px}}@media only screen and (min-width: 768px){:host(.resource-center-card) .card-border{margin-left:4px;margin-right:4px}}:host(.resource-center-card) .card-layout{display:block;position:relative}:host(.resource-center-card) .card-layout .ribbon-text{position:absolute;top:0;left:0;margin-top:24px;background-color:var(--color-white);padding:4px 24px;font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);color:var(--color-gray-11);border-radius:0px 3px 3px 0px;box-shadow:var(--ptc-shadow-small);max-width:70%;max-height:30px;line-height:30px;overflow:hidden}:host(.resource-center-card) .link-wrapper{outline:none;text-decoration:none}:host(.resource-center-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.resource-center-card) .card-media{width:100%;height:250px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.resource-center-card) .card-media .smart-img{height:250px}@media (min-width: 480px){:host(.resource-center-card) .card-media .smart-img{height:285px}}@media (min-width: 768px){:host(.resource-center-card) .card-media .smart-img{height:221px}}@media (min-width: 992px){:host(.resource-center-card) .card-media .smart-img{height:189px}}@media (min-width: 1200px){:host(.resource-center-card) .card-media .smart-img{height:173px}}@media (min-width: 1440px){:host(.resource-center-card) .card-media .smart-img{height:173px}}@media (min-width: 480px){:host(.resource-center-card) .card-media{height:285px}}@media (min-width: 768px){:host(.resource-center-card) .card-media{height:221px}}@media (min-width: 992px){:host(.resource-center-card) .card-media{height:189px}}@media (min-width: 1200px){:host(.resource-center-card) .card-media{height:173px}}@media (min-width: 1440px){:host(.resource-center-card) .card-media{height:173px}}:host(.resource-center-card) .card-body{padding:16px 24px 0px 24px}@media (min-width: 768px){:host(.resource-center-card) .card-body{padding:14px 24px 0px 24px}}@media (min-width: 1200px){:host(.resource-center-card) .card-body{padding:14px 20px 0px 21px}}:host(.resource-center-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282F35;margin-bottom:24px;display:inline-block}:host(.resource-center-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:12px;margin-top:0rem;word-break:break-word;hyphens:auto}:host(.resource-center-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:39px}:host(.resource-center-card) ::slotted([slot=slot-description]) p{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:39px}:host(.resource-center-card) ::slotted([slot=slot-description]) span{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin-bottom:39px}:host(.case-studies-card) .card-border{width:100%;overflow:hidden;background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:3px;height:447px;display:flex;flex-direction:row;margin-bottom:0.5rem}:host(.case-studies-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.case-studies-card) .card-border:hover .card-media{background:var(--color-white)}:host(.case-studies-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}@media (min-width: 480px){:host(.case-studies-card) .card-border{height:536px}}@media (min-width: 768px){:host(.case-studies-card) .card-border{height:452px}}@media (min-width: 992px){:host(.case-studies-card) .card-border{height:452px}}@media (min-width: 1200px){:host(.case-studies-card) .card-border{height:452px}}@media (min-width: 1440px){:host(.case-studies-card) .card-border{height:452px}}@media only screen and (min-width: 768px){:host(.case-studies-card) .card-border{margin-left:4px;margin-right:4px}}:host(.case-studies-card) .card-layout{display:block;position:relative}:host(.case-studies-card) .link-wrapper{outline:none;text-decoration:none}:host(.case-studies-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.case-studies-card) .card-media{width:100%;height:200px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.case-studies-card) .card-media .smart-img{width:100%;height:200px}@media (min-width: 480px){:host(.case-studies-card) .card-media .smart-img{height:286px}}@media (min-width: 768px){:host(.case-studies-card) .card-media .smart-img{height:224px}}@media (min-width: 992px){:host(.case-studies-card) .card-media .smart-img{height:192px}}@media (min-width: 1200px){:host(.case-studies-card) .card-media .smart-img{height:173px}}@media (min-width: 1440px){:host(.case-studies-card) .card-media .smart-img{height:170px}}@media (min-width: 480px){:host(.case-studies-card) .card-media{height:286px}}@media (min-width: 768px){:host(.case-studies-card) .card-media{height:224px}}@media (min-width: 992px){:host(.case-studies-card) .card-media{height:192px}}@media (min-width: 1200px){:host(.case-studies-card) .card-media{height:173px}}@media (min-width: 1440px){:host(.case-studies-card) .card-media{height:170px}}:host(.case-studies-card) .card-body .card-logo-container{padding:8px 20px;border-bottom:1px solid #E4E7E9}:host(.case-studies-card) .card-body .card-logo-none{padding-top:16px}:host(.case-studies-card) .card-body .card-logo{max-width:280px;width:auto;height:40px;object-fit:cover;border:1px solid #E4E7E9;margin-bottom:8px}:host(.case-studies-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282F35;margin-bottom:24px;display:inline-block}:host(.case-studies-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin:8px 20px 12px 20px}:host(.case-studies-card) ::slotted([slot=slot-date]){font-weight:400;font-size:16px;line-height:19px;color:#282F35;margin-bottom:24px;display:inline-block}:host(.case-studies-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:19px;color:var(--color-gray-11);margin:0px 20px 39px 20px}:host(.related-card){width:100%}:host(.related-card) .card-border{background:var(--color-white);box-shadow:var(--ptc-shadow-small);border-radius:var(--ptc-border-radius-standard);width:100%;height:auto;display:flex;flex-direction:row}:host(.related-card) .card-border:hover{background:var(--color-gray-02);box-shadow:var(--ptc-shadow-large)}:host(.related-card) .card-border:hover .card-media{background:var(--color-white)}:host(.related-card) .card-border:hover .card-media .smart-img{background:var(--color-white)}:host(.related-card) .card-layout{display:block;position:relative;width:100%;height:100%}:host(.related-card) .card-layout .ribbon-text{position:absolute;top:0;left:0;margin-top:var(--ptc-element-spacing-06);background-color:var(--color-white);padding:var(--ptc-element-spacing-01) var(--ptc-element-spacing-05);font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);color:var(--color-gray-11);border-radius:0px 3px 3px 0px;box-shadow:var(--ptc-shadow-small);max-width:70%;max-height:20px;overflow:hidden}:host(.related-card) .link-wrapper{outline:none;text-decoration:none}:host(.related-card) .link-wrapper:hover{outline:none;text-decoration:none}:host(.related-card) .card-media{width:100%;height:288px;transform:scale(1);transform-origin:center bottom;transition:transform var(--ptc-transition-medium) var(--ptc-standard-ease);transition-delay:var(--ptc-delay-medium)}:host(.related-card) .card-media .smart-img{height:288px}@media only screen and (min-width: 480px){:host(.related-card) .card-media .smart-img{height:286px}}@media only screen and (min-width: 768px){:host(.related-card) .card-media .smart-img{height:142px}}@media only screen and (min-width: 992px){:host(.related-card) .card-media .smart-img{height:192px}}@media only screen and (min-width: 1200px){:host(.related-card) .card-media .smart-img{height:237px}}@media only screen and (min-width: 1440px){:host(.related-card) .card-media .smart-img{height:248px}}@media only screen and (min-width: 480px){:host(.related-card) .card-media{height:286px}}@media only screen and (min-width: 768px){:host(.related-card) .card-media{height:142px}}@media only screen and (min-width: 992px){:host(.related-card) .card-media{height:192px}}@media only screen and (min-width: 1200px){:host(.related-card) .card-media{height:237px}}@media only screen and (min-width: 1440px){:host(.related-card) .card-media{height:248px}}:host(.related-card) .card-body{box-sizing:border-box;padding:var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06)}:host(.related-card) .card-body .card-date-text{display:flex;flex-direction:row}:host(.related-card) .card-body .card-date-text p{font-size:var(--ptc-font-size-xx-small);font-weight:400;line-height:19px;color:#282F35;margin-bottom:16px;display:inline-block;margin-top:0rem}:host(.related-card) .card-body .small{font-size:var(--ptc-font-size-x-small);font-weight:400;line-height:19px;color:#282F35;margin-bottom:16px;display:inline-block}:host(.related-card) .card-body h3{font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-small);line-height:var(--ptc-line-height-loose);line-height:21px;color:var(--color-gray-11);margin-bottom:14px;margin-top:0rem}:host(.related-card) ::slotted([slot=slot-description]){font-family:var(--ptc-font-latin);font-style:var(--ptc-font-style-normal);font-weight:400;font-size:1rem;line-height:18px;color:var(--color-gray-11)}.ptc-h3.uppercase{text-transform:uppercase}.ptc-h3.capitalize{text-transform:capitalize}.ptc-h3.lowercase{text-transform:lowercase}.ptc-h3.none{text-transform:none}';export{a as ptc_card}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,H as e}from"./p-63c06667.js";const a=class{constructor(i){t(this,i),this.cardTitle=void 0,this.cardImage=void 0,this.cardImageAltText=void 0,this.cardDescription=void 0}render(){return i(e,null,i("ptc-title",{type:"h4",upperline:"no-upperline","title-margin":"margin-flush","title-size":"small","text-align":"center"},i("ptc-tooltip",{"text-display":"block","text-lines":"2","z-index":"z-999",description:this.cardTitle,position:"bottom",width:"full-width"})),i("ptc-picture",{alt:"image-test",src:this.cardImage,"image-alignment":"center",width:"69","display-image":"inline-block",styles:"img{margin: 12px auto 18px auto}"}),i("ptc-para",{"font-size":"x-small","para-margin":"margin-flush","para-line-h":"line-height-densest","para-align":"left","para-z-index":"z-auto"},i("ptc-tooltip",{"text-display":"block","text-lines":"3","z-index":"z-999",description:this.cardDescription,position:"bottom",width:"full-width"})))}};a.style=":host{max-width:300px;display:block;padding:18px 10px 12px 10px;border:1px solid var(--color-gray-04);border-radius:var(--ptc-border-radius-standard);margin:auto}:host ptc-picture{min-height:100px}";export{a as ptc_product_highlight_card}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as i,H as s,a as r}from"./p-63c06667.js";const a=class{constructor(i){t(this,i),this.selectedResult=e(this,"selectedResult",7),this.clearsearch=e(this,"clearsearch",7),this.inputChanged=e(this,"inputChanged",7),this.emptyResult=e(this,"emptyResult",7),this.searchTerm="",this.suggestions=[],this.suggestionList=[]}componentWillLoad(){this.getDomData()}componentDidLoad(){this.productListWrap=this.hostElement.shadowRoot.querySelector(".product-list-wrap"),this.clearBtn=this.hostElement.shadowRoot.querySelector(".clear-cta")}getDomData(){document.querySelectorAll("ptc-product-category").forEach((t=>{let e={categoryName:t.getAttribute("category-title"),products:[]};this.suggestionList.push(e),t.querySelectorAll("ptc-product-card").forEach((t=>{let i=t.getAttribute("card-title");e.products.push(i)}))}))}handleInputChange(t){this.searchTerm=t.target.value.toLocaleLowerCase(),this.productListWrap.classList.add("hide"),this.clearBtn.classList.add("show"),this.getSuggestions(),this.inputChanged.emit({sender:this,event:t})}getSuggestions(){const t=this.searchTerm.toLowerCase(),e=this.suggestionList.reduce(((e,i)=>{i.categoryName.toLowerCase().includes(t)&&e.push(i.categoryName);const s=i.products.filter((e=>e.toLowerCase().includes(t)));return s.length>0&&e.push(...s),e}),[]);this.suggestions=e}handleSelectSuggestion(t,e){this.searchTerm=t,this.selectedResult.emit({sender:this,event:e,searchTerm:this.searchTerm})}handleKeyUp(t){this.searchTerm=t.target.value.toLocaleLowerCase(),13===t.keyCode&&0==this.suggestions.length&&(console.log("Enter key pressed"),this.emptyResult.emit({sender:this,event:t}))}clearSearch(t){let e=this.hostElement.shadowRoot.querySelector("input");this.productListWrap.classList.remove("hide"),this.clearBtn.classList.remove("show"),e&&(e.value=""),this.suggestions=[],this.clearsearch.emit({sender:this,event:t,searchTerm:e.value})}handleDropdownTouched(t){const{sender:e,isOpen:i}=t.detail;if(e&&(this.productListWrap.classList.add("hide"),this.clearBtn.classList.add("show"),i)){let t=this.hostElement.shadowRoot.querySelector("input");t&&(t.value="")}}handleClick(){this.suggestions=[]}handleclearCtaClicked(t){const{sender:e,event:i}=t.detail;e&&this.clearSearch(i)}render(){return i(s,{class:"search-box"},i("div",{class:"filter-result-wrap white-box"},i("div",{class:"result-header"},i("ptc-title",{type:"h3","title-margin":"margin-flush",upperline:"no-upperline","title-size":"medium"},"Filter Result"),i("span",{class:"clear-cta",onClick:t=>this.clearSearch(t)},"Clear")),i("div",{class:"sort-wrap"},i("div",{class:"typeahead-input"},i("label",{htmlFor:"searchBox"},"Filter"),i("div",{class:"input-wrap"},i("svg",{width:"19",height:"18",viewBox:"0 0 19 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},i("path",{d:"M0.208984 0V1.2375L6.95898 7.65V14.2875L11.5715 17.8875V7.65L18.209 1.35V0H0.208984Z",fill:"#323B42"})),i("input",{type:"text",value:this.searchTerm,onInput:t=>this.handleInputChange(t),onKeyUp:t=>this.handleKeyUp(t),id:"searchBox"})),this.suggestions.length>0&&i("div",{class:"suggestion-wrap"},i("ul",{class:"suggestions"},this.suggestions.map((t=>i("li",{onClick:e=>this.handleSelectSuggestion(t,e)},t)))))),i("div",{class:"dropdwon-filter"},i("label",{htmlFor:"tech-dropdown"},"Technology"),i("ptc-product-dropdown",{placeholder:"Select a technology",id:"tech-dropdown"},this.suggestionList.map((t=>i("span",null,t.categoryName))))))),i("ptc-spacer",{size:"large"}),i("div",{class:"product-list-wrap white-box"},i("ptc-title",{type:"h3","title-margin":"margin-flush",upperline:"no-upperline","title-size":"medium"},"Jump to Product"),this.suggestionList.map((t=>i("div",{class:"category-list"},i("ptc-para",{"font-size":"x-small","font-weight":"w-7","para-line-h":"line-height-densest","para-margin":"margin-flush"},i("list-item",{"list-type":"list-underline","link-href":"#"+t.categoryName},t.categoryName)),i("div",{class:"product-list"},i("ul",null,t.products.map((t=>i("list-item",{"list-type":"list-underline","link-href":"#"+t},t))))))))))}get hostElement(){return r(this)}};a.style=":host{display:block;position:relative}:host .hide{display:none !important}:host .white-box{padding:12px;background-color:var(--color-white);border-radius:var(--ptc-border-radius-standard)}:host .sort-wrap{display:block}@media only screen and (min-width: 480px){:host .sort-wrap{display:flex;justify-content:space-between}}@media only screen and (min-width: 992px){:host .sort-wrap{display:block}}:host .filter-result-wrap label{font-size:var(--ptc-font-size-x-small);font-weight:600}:host .filter-result-wrap .result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}@media only screen and (min-width: 992px){:host .filter-result-wrap .result-header{margin-bottom:26px}}:host .filter-result-wrap .result-header .clear-cta{cursor:pointer;display:none;color:var(--color-gray-07);font-size:var(--ptc-font-size-x-small);text-decoration:underline}:host .filter-result-wrap .result-header .clear-cta.show{display:block}:host .filter-result-wrap .typeahead-input{box-sizing:border-box;margin-bottom:14px;width:100%;margin-right:0}@media only screen and (min-width: 480px){:host .filter-result-wrap .typeahead-input{margin-right:40px}}@media only screen and (min-width: 992px){:host .filter-result-wrap .typeahead-input{margin-right:0}}:host .filter-result-wrap .typeahead-input .input-wrap{position:relative}:host .filter-result-wrap .typeahead-input .input-wrap svg{position:absolute;left:8px;top:8px}:host .filter-result-wrap .typeahead-input .input-wrap input{margin-top:4px;padding:8px 8px 8px 34px;display:block;width:100%;box-sizing:border-box;border:1px solid var(--color-gray-03);font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap{position:relative;width:100%}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions{border:1px solid var(--color-gray-03);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);background-color:var(--color-white);position:absolute;z-index:105;top:0;margin:0;width:100%;box-sizing:border-box;padding:0;max-height:400px;overflow-y:auto}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar{width:5px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li{list-style:none;padding:10px 16px;cursor:pointer;display:block;font-size:14px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:first-child{padding-top:20px}:host .filter-result-wrap .typeahead-input .suggestion-wrap .suggestions li:last-child{padding-bottom:20px}:host .filter-result-wrap .dropdwon-filter{margin-bottom:10px;width:100%}:host .product-list-wrap{display:none}@media only screen and (min-width: 992px){:host .product-list-wrap{display:block}}:host .product-list-wrap .category-list{display:block;padding:12px 4px;font-size:var(--ptc-font-size-x-small)}:host .product-list-wrap .category-list ptc-para{padding-bottom:4px;display:block}:host .product-list-wrap .category-list ul{padding-left:20px;margin:0}";export{a as ptc_product_sidebar}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,h as t,H as i}from"./p-63c06667.js";const s=class{constructor(t){o(this,t),this.handleScroll=()=>{const o=window.pageYOffset||document.documentElement.scrollTop;this.showButton=o>1*window.innerHeight},this.showButton=!1}componentDidLoad(){window.addEventListener("scroll",this.handleScroll)}disconnectedCallback(){window.removeEventListener("scroll",this.handleScroll)}handleClick(){this.scrollToTop()}scrollToTop(){"scrollBehavior"in document.documentElement.style?window.scrollTo({top:0,behavior:"smooth"}):window.scrollTo(0,0)}render(){return t(i,null,this.showButton&&t("button",{class:"back-to-top-button",title:"Back to Top"},t("span",{class:"arrow"},t("svg",{width:"18",height:"12",viewBox:"0 0 18 12",fill:"none",xmlns:"http://www.w3.org/2000/svg"},t("path",{d:"M15.5248 11.625L8.9998 5.1L2.4748 11.625L0.112305 9.2625L8.9998 0.375L17.8873 9.2625L15.5248 11.625Z",fill:"#323B42"}))),t("span",{class:"text"},"Back to Top")))}};s.style=":host{display:block}:host .back-to-top-button{position:fixed;bottom:140px;right:24px;width:64px;height:58px;border:1px solid var(--color-gray-10);border-radius:var(--ptc-border-radius-standard);background-color:var(--color-white);color:var(--color-gray-10);font-size:12px;font-weight:var(--ptc-font-weight-semibold);outline:none;cursor:pointer;transition:opacity 0.3s ease-in-out;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--ptc-shadow-small)}:host .back-to-top-button:hover{opacity:1}:host .arrow{margin-bottom:5px}";export{s as ptc_back_to_top}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,h as i,H as e}from"./p-63c06667.js";const l=class{constructor(i){t(this,i),this.categoryTitle=void 0,this.categoryDescription=void 0}render(){return i(e,null,i("ptc-title",{type:"h2",upperline:"no-upperline","title-margin":"margin-flush","title-size":"xx-large"},i("ptc-tooltip",{"text-display":"inline","text-lines":"4","z-index":"z-999",description:this.categoryTitle,position:"bottom",width:"full-width"})),i("ptc-spacer",{size:"x-small"}),i("ptc-spacer",{size:"x-small",breakpoint:"x-small"}),i("ptc-para",{"para-margin":"margin-flush","font-size":"small","para-line-h":"line-height-p","font-weight":"w-5","para-z-index":"z-auto"},i("ptc-tooltip",{"text-display":"block","text-lines":"9","z-index":"z-999",description:this.categoryDescription,position:"bottom",width:"full-width"})),i("ptc-spacer",{size:"large"}),i("slot",null))}};l.style=":host{display:block;padding-bottom:var(--ptc-layout-spacing-03)}";export{l as ptc_product_category}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as o,c as t,h as s,H as e,a as i}from"./p-63c06667.js";const r=class{constructor(s){o(this,s),this.selectedValues=t(this,"selectedValues",7),this.dropdownTouched=t(this,"dropdownTouched",7),this.internalOptions=void 0,this.newOptions=void 0,this.selectedOptions=[],this.placeholder=void 0,this.isOpen=!1}parseOptions(){let o=Array.from(this.hostElement.querySelectorAll("span"));o&&(this.internalOptions=o.map((o=>o.textContent)))}toggleDropdown(){this.isOpen=!this.isOpen,this.dropdownTouched.emit({sender:this,isOpen:this.isOpen})}handleSearchResult(o){const{sender:t,searchTerm:s}=o.detail;t&&""===s&&(this.selectedOptions=[],this.isOpen=!1)}handleinputChanged(o){const{sender:t}=o.detail;t&&(this.selectedOptions=[],this.isOpen=!1)}handleCheckboxChange(o){const t=this.selectedOptions.indexOf(o);t>-1?(this.selectedOptions.splice(t,1),this.selectedValues.emit({sender:this,selectedOptions:this.selectedOptions})):(this.selectedOptions.push(o),this.selectedValues.emit({sender:this,selectedOptions:this.selectedOptions}))}componentWillLoad(){this.parseOptions()}render(){return s(e,null,s("div",{class:"dropdown"},s("div",{class:"dropdown-toggle",onClick:()=>this.toggleDropdown()},s("span",{class:"dropdown-placeholder"},this.placeholder),s("span",{class:"caret"})),this.isOpen&&s("div",{class:"dropdown-menu"},this.internalOptions.map((o=>s("label",{class:"checkbox-label"},s("input",{type:"checkbox",checked:this.selectedOptions.includes(o),onChange:()=>this.handleCheckboxChange(o)}),o))))),s("div",{class:"hidden"},s("slot",null)))}get hostElement(){return i(this)}};r.style=":host{display:block;margin-top:4px;background-color:var(--color-white)}:host .hidden{display:none}:host .dropdown{position:relative;display:inline-block;width:100%;font-size:16px}:host .dropdown .dropdown-toggle{padding:0.5rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);cursor:pointer;display:flex;align-items:center;justify-content:space-between}:host .dropdown .dropdown-toggle .dropdown-placeholder{font-size:14px;color:var(--color-gray-07)}:host .caret{display:inline-block;margin-left:0.25rem;width:0;height:0;border-top:0.4rem solid;border-right:0.4rem solid transparent;border-left:0.4rem solid transparent;vertical-align:middle}:host .dropdown-menu{position:absolute;top:100%;left:0;min-width:10rem;border:1px solid var(--color-gray-03);background-color:var(--color-white);box-shadow:0px 2px 4px rgba(35, 43, 45, 0.3);z-index:105;max-height:400px;overflow-y:auto}:host .dropdown-menu::-webkit-scrollbar{width:5px}:host .dropdown-menu::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0, 0, 0, 0.3)}:host .dropdown-menu::-webkit-scrollbar-thumb{background-color:var(--color-gray-05);outline:1px solid var(--color-gray-05)}:host .checkbox-label{display:flex;align-items:flex-start;padding:6px 16px;cursor:pointer;font-size:14px}:host .checkbox-label:first-child{padding-top:20px}:host .checkbox-label:last-child{padding-bottom:20px}:host .checkbox-label input[type=checkbox]{min-width:20px;margin-right:8px;width:20px;height:20px;margin-top:0}";export{r as ptc_product_dropdown}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as e,h as s,H as o,a as r}from"./p-63c06667.js";const l=class{constructor(s){t(this,s),this.clearCtaClicked=e(this,"clearCtaClicked",7)}handleSearchResult(t){const{sender:e,searchTerm:s}=t.detail;e&&this.sortCards(s)}handleMultipleSearchResult(t){const{sender:e,selectedOptions:s}=t.detail;e&&this.sortMultipleCards(s)}handleEmptyResult(t){const{sender:e,searchTerm:s}=t.detail;e&&(this.noresultSection.classList.add("show"),this.sortCards(s))}sortMultipleCards(t){Array.from(this.hostElement.querySelectorAll("ptc-product-category")).forEach((e=>{const s=e.getAttribute("category-title"),o=Array.from(e.querySelectorAll("ptc-product-card"));if(t.length>0){const r=t.some((t=>s&&s.includes(t)));e.style.display=r?"block":"none",o.forEach(r?t=>{t.style.display="block"}:e=>{const s=e.getAttribute("card-title"),o=t.some((t=>s&&s.includes(t)));e.style.display=o?"block":"none"})}else e.style.display="block",o.forEach((t=>{t.style.display="block"}))}))}sortCards(t){this.hostElement.querySelectorAll("ptc-product-category").forEach((e=>{const s=e.getAttribute("category-title"),o=e.querySelectorAll("ptc-product-card");if(e.style.display="none",""===t)e.style.display="block",o.forEach((t=>{t.style.display="block"})),this.noresultSection.classList.remove("show");else{const r=t;r===s?(e.style.display="block",o.forEach((t=>{t.style.display="block"}))):o.forEach((t=>{const s=t.getAttribute("card-title");t.style.display="none",r===s&&(t.style.display="block",e.style.display="block")}))}}))}componentDidLoad(){this.addIds(),this.noresultSection=this.hostElement.shadowRoot.querySelector(".no-result-wrap"),this.productList=this.hostElement.shadowRoot.querySelector(".product-list")}handleClick(t){this.clearCtaClicked.emit({sender:this,event:t})}addIds(){this.hostElement.querySelectorAll("ptc-product-category").forEach((t=>{const e=t.getAttribute("category-title");t.setAttribute("id",e),t.querySelectorAll("ptc-product-card").forEach((t=>{const e=t.getAttribute("card-title");t.setAttribute("id",e)}))}))}render(){return s(o,null,s("div",{class:"product-list"},s("slot",null)),s("div",{class:"no-result-wrap"},s("div",{class:"no-result"},s("div",null,s("ptc-title",{type:"h3","title-margin":"margin-flush",upperline:"no-upperline","title-size":"large"},"No Results Found"),s("ptc-para",{"font-size":"x-small"},"Try changing or removing some of your filters"),s("ptc-button",{type:"link",color:"ptc-quaternary",target:"_blank",onClick:t=>{this.handleClick(t)}},"Clear Filters")))))}get hostElement(){return r(this)}};l.style=":host{display:block;padding-bottom:52px}@media only screen and (min-width: 992px){:host{padding-bottom:102px}}:host .no-result-wrap{display:none}:host .no-result-wrap.show{display:block}:host .no-result-wrap .no-result{display:flex;justify-content:center;align-items:center;min-height:160px;padding:20px;text-align:center}";export{l as ptc_product_list}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as a,H as e,a as n}from"./p-63c06667.js";const l=class{constructor(a){t(this,a),this.isOpenProductHighlight=i(this,"isOpenProductHighlight",7),this.cardTitle=void 0,this.cardImage=void 0,this.cardImageAltText=void 0,this.cardDescription=void 0,this.cardCtaText=void 0,this.toggleCtaTitle=void 0,this.isOpen=!1,this.isSlotEmpty=void 0}togglePanel(){this.isOpen=!this.isOpen}render(){return a(e,null,a("div",{class:"card-wrap"},a("ptc-picture",{alt:"image-test",src:this.cardImage,"display-image":"inline-block",width:"38"}),a("div",{class:"content"},a("div",null,a("ptc-title",{type:"h3",upperline:"no-upperline","title-size":"medium","title-weight":"w-8","title-height":"densest","title-margin":"margin-flush"},a("ptc-tooltip",{"text-display":"block","text-lines":"3","z-index":"z-999",description:this.cardTitle,position:"bottom",width:"full-width"})),a("ptc-para",{"font-size":"x-small","para-margin":"margin-flush","para-line-h":"line-height-densest","para-z-index":"z-auto"},a("ptc-tooltip",{"text-display":"block","text-lines":"16","z-index":"z-999",description:this.cardDescription,position:"bottom",width:"full-width"}))),a("div",{class:"cta-wrap"},a("slot",{name:"cta"})))),this.toggleCtaTitle&&a("ptc-para",{class:"toggle-btn","font-size":"small","para-margin":"margin-flush","para-line-h":"line-height-p","para-z-index":"z-auto",onClick:()=>this.togglePanel()},a("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},a("rect",{width:"18",height:"18",rx:"4",fill:"#00890B"}),this.isOpen?a("g",{"clip-path":"url(#clip0_187_1609)"},a("path",{d:"M4.86365 7.98779V10.0128H14.3824V7.98779H4.86365Z",fill:"white"})):a("path",{"fill-rule":"evenodd","clip-rule":"evenodd",d:"M9.953 4.23535H8.04712V8.04712H4.23535V9.953H8.04712V13.7648H9.953V9.953H13.7648V8.04712H9.953V4.23535Z",fill:"white"}),a("defs",null,a("clipPath",{id:"clip0_187_1609"},a("rect",{width:"9.51872",height:"9.52941",fill:"white",transform:"translate(4.86365 4.23535)"})))),a("span",null,this.toggleCtaTitle)),this.isOpen&&a("div",{class:"product-highlights-container"},a("slot",null)))}get hostElement(){return n(this)}};l.style=":host{display:block;background-color:var(--color-white);padding-top:var(--ptc-layout-spacing-03);border-radius:var(--ptc-border-radius-standard);margin-bottom:var(--ptc-layout-spacing-03)}:host .card-wrap{display:flex;align-items:center}:host .card-wrap ptc-picture{display:none}@media only screen and (min-width: 768px){:host .card-wrap ptc-picture{display:block;margin-left:var(--ptc-element-spacing-06);min-width:38px;max-width:38px}}:host .card-wrap .content{padding:0 38px 24px 38px}@media only screen and (min-width: 768px){:host .card-wrap .content{padding:0 44px 24px 44px}}@media only screen and (min-width: 1200px){:host .card-wrap .content{display:flex;align-items:center}}:host .card-wrap .content .cta-wrap{margin-left:0;margin-top:24px}@media only screen and (min-width: 1200px){:host .card-wrap .content .cta-wrap{margin-top:0px;margin-left:44px}}:host .toggle-btn{padding:16px;text-align:center;border-top:1px solid var(--color-gray-04);display:block;cursor:pointer}:host .toggle-btn svg{margin-right:var(--ptc-element-spacing-03);vertical-align:middle;margin-top:-2px}:host .product-highlights-container{padding:0px 20px 16px 20px}";export{l as ptc_product_card}
|