@ptcwebops/ptcw-design 5.8.0 → 5.8.2
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/blog-detail-content_21.cjs.entry.js +4 -4
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/ptc-card_2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-dynamic-card.cjs.entry.js +61 -18
- package/dist/cjs/ptc-ellipsis-dropdown.cjs.entry.js +1 -1
- package/dist/cjs/ptc-filter-tag_2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-form-checkbox_2.cjs.entry.js +76 -185
- package/dist/cjs/ptc-multi-select_2.cjs.entry.js +1 -1
- package/dist/cjs/ptc-pricing-tabs.cjs.entry.js +1 -1
- package/dist/cjs/ptc-readmore.cjs.entry.js +1 -1
- package/dist/cjs/ptcw-design.cjs.js +1 -1
- package/dist/cjs/sequential-bundle-example.cjs.entry.js +5 -5
- package/dist/collection/components/icon-asset/icon-asset.css +2 -2
- package/dist/collection/components/organism-bundles/blog-detail-content/blog-detail-content.css +1 -1
- package/dist/collection/components/organism-bundles/blog-detail-layout/blog-detail-layout.css +1 -1
- package/dist/collection/components/organism-bundles/sequential-bundle-example/sequential-bundle-example.js +5 -5
- package/dist/collection/components/ptc-card/ptc-card.css +1 -1
- package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.css +7 -22
- package/dist/collection/components/ptc-dynamic-card/ptc-dynamic-card.js +115 -20
- package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js +1 -1
- package/dist/collection/components/ptc-form-checkbox/ptc-form-checkbox.css +7 -7
- package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css +2 -2
- package/dist/collection/components/ptc-multi-select/ptc-multi-select.css +199 -6
- package/dist/collection/components/ptc-pagenation/ptc-pagenation.css +1 -1
- package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css +2 -2
- package/dist/collection/components/ptc-readmore/ptc-readmore.js +1 -1
- package/dist/collection/components/ptc-textfield/ptc-textfield.css +34 -51
- package/dist/custom-elements/index.js +153 -219
- package/dist/esm/blog-detail-content_21.entry.js +4 -4
- package/dist/esm/loader.js +1 -1
- package/dist/esm/ptc-card_2.entry.js +1 -1
- package/dist/esm/ptc-dynamic-card.entry.js +62 -19
- package/dist/esm/ptc-ellipsis-dropdown.entry.js +1 -1
- package/dist/esm/ptc-filter-tag_2.entry.js +1 -1
- package/dist/esm/ptc-form-checkbox_2.entry.js +76 -185
- package/dist/esm/ptc-multi-select_2.entry.js +1 -1
- package/dist/esm/ptc-pricing-tabs.entry.js +1 -1
- package/dist/esm/ptc-readmore.entry.js +1 -1
- package/dist/esm/ptcw-design.js +1 -1
- package/dist/esm/sequential-bundle-example.entry.js +5 -5
- package/dist/ptcw-design/p-1ed632b2.entry.js +1 -0
- package/dist/ptcw-design/{p-00980d4d.entry.js → p-20c01caa.entry.js} +1 -1
- package/dist/ptcw-design/p-3e5f19f9.entry.js +1 -0
- package/dist/ptcw-design/p-40e095bf.entry.js +68 -0
- package/dist/ptcw-design/{p-fc51fc29.entry.js → p-657ecf13.entry.js} +1 -1
- package/dist/ptcw-design/p-754fe9f4.entry.js +1 -0
- package/dist/ptcw-design/p-85cc23f7.entry.js +1 -0
- package/dist/ptcw-design/p-9a9d5b49.entry.js +1 -0
- package/dist/ptcw-design/p-ab7224b7.entry.js +1 -0
- package/dist/ptcw-design/p-d563af49.entry.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-dynamic-card/ptc-dynamic-card.d.ts +30 -3
- package/dist/types/components.d.ts +13 -1
- package/package.json +1 -1
- package/readme.md +1 -1
- package/dist/ptcw-design/p-14122d3f.entry.js +0 -68
- package/dist/ptcw-design/p-3dae22b8.entry.js +0 -1
- package/dist/ptcw-design/p-510575ce.entry.js +0 -1
- package/dist/ptcw-design/p-5af20305.entry.js +0 -1
- package/dist/ptcw-design/p-5f78517a.entry.js +0 -1
- package/dist/ptcw-design/p-ae0543c8.entry.js +0 -1
- package/dist/ptcw-design/p-b1c5404b.entry.js +0 -1
- package/dist/ptcw-design/p-e09163f2.entry.js +0 -1
|
@@ -4,53 +4,96 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
4
4
|
|
|
5
5
|
const index = require('./index-63ddc79c.js');
|
|
6
6
|
|
|
7
|
-
const ptcDynamicCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host(.sequential) .card-wrapper{position:relative;cursor:pointer
|
|
7
|
+
const ptcDynamicCardCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}:host(.sequential) .card-wrapper{position:relative;cursor:pointer;outline:none}:host(.sequential) .card-wrapper:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline);z-index:1}:host(.sequential) .card{background-color:var(--color-gray-12);overflow:hidden}:host(.sequential) .card-mobile,:host(.sequential) .card-dt-open{display:block}:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{display:flex;flex-basis:38%;justify-content:flex-start;align-items:center;padding:var(--ptc-element-spacing-06)}@media only screen and (min-width: 1200px){:host(.sequential) .card-mobile ptc-card-content,:host(.sequential) .card-dt-open ptc-card-content{height:unset;flex:0 0 310px}}:host(.sequential) .card-mobile ptc-picture,:host(.sequential) .card-dt-open ptc-picture{flex:1 1 auto}:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{color:var(--color-white);font-size:var(--ptc-font-size-medium);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal)}@media only screen and (min-width: 768px){:host(.sequential) .card-mobile .card-title h3,:host(.sequential) .card-dt-open .card-title h3{font-size:var(--ptc-font-size-large)}}:host(.sequential) .card-mobile .card-content,:host(.sequential) .card-dt-open .card-content{margin-top:var(--ptc-element-spacing-03)}:host(.sequential) .card-mobile{max-width:320px;min-width:226px;position:relative}@media only screen and (min-width: 480px){:host(.sequential) .card-mobile{max-width:350px}}:host(.sequential) .card-mobile::before{content:\"\";display:block;position:absolute;top:0;left:0;width:100%;height:5px;transition:background-color var(--ptc-transition-medium) var(--ptc-ease-out);background-color:transparent}:host(.sequential) .card-mobile ptc-card-content{align-items:flex-start}:host(.sequential) .card-dt-closed{width:135px;height:424px;position:relative}:host(.sequential) .card-dt-closed .closed-content{position:absolute;width:100%;height:100%;top:0;display:flex;align-items:center;justify-content:center}:host(.sequential) .card-dt-closed .card-title{text-align:center}:host(.sequential) .card-dt-closed .card-title h2{color:var(--color-white);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-bold);line-height:var(--ptc-line-height-densest);margin-bottom:0rem;margin-block-start:0rem;letter-spacing:var(--ptc-letter-spacing-normal);padding-left:var(--ptc-element-spacing-02);padding-right:var(--ptc-element-spacing-02)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-closed .card-title h2{font-size:var(--ptc-font-size-small)}}:host(.sequential) .card-dt-open{border-top:5px solid var(--color-green-05);display:flex;max-width:790px;height:480px;transition:width var(--ptc-transition-x-fast) var(--ptc-ease-out)}@media only screen and (min-width: 1440px){:host(.sequential) .card-dt-open{max-width:825px}}:host(.sequential):host(.active) .card-mobile::before{background-color:var(--color-green-05)}";
|
|
8
8
|
|
|
9
9
|
const PtcDynamicCard = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
|
+
this.cardOpened = index.createEvent(this, "cardOpened", 7);
|
|
13
|
+
/**
|
|
14
|
+
* Open the card
|
|
15
|
+
*/
|
|
16
|
+
this.openCard = () => {
|
|
17
|
+
if (!this.isExpanded) {
|
|
18
|
+
this.isExpanded = true;
|
|
19
|
+
this.cardOpened.emit(this.trackerId);
|
|
20
|
+
}
|
|
21
|
+
// If already expanded, do nothing to ensure at least one card remains open
|
|
22
|
+
};
|
|
23
|
+
/**
|
|
24
|
+
* Handle keyboard interactions
|
|
25
|
+
*/
|
|
26
|
+
this.handleKeyDown = (event) => {
|
|
27
|
+
switch (event.key) {
|
|
28
|
+
case 'Enter':
|
|
29
|
+
//event.preventDefault();
|
|
30
|
+
this.openCard();
|
|
31
|
+
break;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
12
34
|
this.dotSvg = index.getAssetPath('./media/nav-active-dotslick.svg');
|
|
13
35
|
this.cardType = 'sequential';
|
|
14
36
|
this.cardTitle = 'Card Title Goes Here';
|
|
15
37
|
this.cardImgSrc = undefined;
|
|
16
38
|
this.cardImgAlt = undefined;
|
|
17
39
|
this.cardScreen = 'desktop';
|
|
18
|
-
this.isExpanded =
|
|
40
|
+
this.isExpanded = false;
|
|
19
41
|
this.overlayExists = true;
|
|
20
42
|
this.styles = undefined;
|
|
21
43
|
this.trackerId = undefined;
|
|
22
44
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
45
|
+
componentDidLoad() {
|
|
46
|
+
// Handle mouse enter and leave for overlay
|
|
47
|
+
this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
|
|
48
|
+
this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* Listen for 'cardOpened' events on the document to close other cards
|
|
52
|
+
*/
|
|
53
|
+
handleCardOpened(event) {
|
|
54
|
+
const openedTrackerId = event.detail;
|
|
55
|
+
if (openedTrackerId !== this.trackerId && this.isExpanded) {
|
|
56
|
+
this.isExpanded = false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Focus the card-wrapper element
|
|
61
|
+
*/
|
|
62
|
+
async focusCardWrapper() {
|
|
63
|
+
const cardWrapper = this.el.querySelector('.card-wrapper');
|
|
64
|
+
if (cardWrapper) {
|
|
65
|
+
cardWrapper.focus();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
/**
|
|
69
|
+
* Get CSS class map
|
|
70
|
+
*/
|
|
71
|
+
getCssClassMap() {
|
|
72
|
+
return {
|
|
73
|
+
[this.cardType]: true,
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Get desktop card based on expansion state
|
|
78
|
+
*/
|
|
26
79
|
getDesktopCard() {
|
|
27
80
|
if (this.cardScreen === 'desktop' && this.isExpanded) {
|
|
28
81
|
return [
|
|
29
|
-
index.h("div", { class: "card card-dt-open mf-listen", id: this.trackerId
|
|
82
|
+
index.h("div", { class: "card card-dt-open mf-listen", id: this.trackerId }, index.h("ptc-card-content", { "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))), index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "is-full-width": "true", "is-full-height": "true", "image-alignment": "center" })),
|
|
30
83
|
];
|
|
31
84
|
}
|
|
32
85
|
else if (this.cardScreen === 'desktop' && !this.isExpanded) {
|
|
33
86
|
return [
|
|
34
|
-
index.h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId
|
|
87
|
+
index.h("div", { class: "card card-dt-closed mf-listen", id: this.trackerId }, index.h("ptc-picture", { alt: this.cardImgAlt, src: this.cardImgSrc, "image-position": "relative", "is-full-width": true, height: "424" }, this.overlayExists ? (index.h("ptc-overlay", { "filter-color": "solid-black-1" })) : (index.h("ptc-overlay", { "filter-color": "solid-black-2" }))), index.h("div", { class: "closed-content", "card-type": "card-dynamic" }, index.h("div", { class: "card-title" }, index.h("h2", null, this.cardTitle)))),
|
|
35
88
|
];
|
|
36
89
|
}
|
|
37
90
|
else {
|
|
38
91
|
return null;
|
|
39
92
|
}
|
|
40
93
|
}
|
|
41
|
-
componentDidLoad() {
|
|
42
|
-
// this.handleResize();
|
|
43
|
-
this.el.addEventListener('mouseenter', () => (this.overlayExists = false));
|
|
44
|
-
this.el.addEventListener('mouseleave', () => (this.overlayExists = true));
|
|
45
|
-
}
|
|
46
94
|
render() {
|
|
47
95
|
const classMap = this.getCssClassMap();
|
|
48
|
-
return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "card-wrapper" }, this.cardScreen
|
|
49
|
-
}
|
|
50
|
-
getCssClassMap() {
|
|
51
|
-
return {
|
|
52
|
-
[this.cardType]: true,
|
|
53
|
-
};
|
|
96
|
+
return (index.h(index.Host, { class: classMap }, this.styles && index.h("style", null, this.styles), index.h("div", { class: "card-wrapper", role: "button", tabindex: "0", "aria-expanded": this.isExpanded, onClick: this.openCard, onKeyDown: this.handleKeyDown }, this.cardScreen === 'mobile' ? (index.h("div", { class: "card card-mobile mf-listen", id: this.trackerId }, index.h("ptc-picture", { height: "287", "is-full-width": true, alt: this.cardImgAlt, src: this.cardImgSrc }), index.h("ptc-card-content", { "card-type": "card-dynamic", styles: ":host(.card-dynamic){height: auto;}" }, index.h("div", { class: "card-title" }, index.h("h3", null, this.cardTitle)), index.h("div", { class: "card-content" }, index.h("slot", null))))) : (this.getDesktopCard())), this.cardScreen === 'desktop' && (index.h("div", { hidden: true }, index.h("svg", null, index.h("use", { href: `${this.dotSvg}` }))))));
|
|
54
97
|
}
|
|
55
98
|
static get assetsDirs() { return ["media"]; }
|
|
56
99
|
get el() { return index.getElement(this); }
|
|
@@ -48,7 +48,7 @@ const PtcEllipsisDropdown = class {
|
|
|
48
48
|
return (index.h("div", { class: this.dropdownType == 'tab-with-banner' ? "ptc-ellipsis-dropdown tab-with-banner" : "ptc-ellipsis-dropdown default", onClick: (e) => this.dropdownToggle(e) }, (this.isMobile || (this.isIPad && this.dropdownType === 'tab-with-banner')) ? (index.h("div", { class: 'mob-drop' }, index.h("span", { class: 'opt-name' }, this.dataItems.map((item) => item.isSelected ? item.text : '')), index.h("svg", { width: "12", height: "9", viewBox: "0 0 12 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M1 1.65723L5.94975 6.60697L10.8995 1.65723", stroke: "#00890B", "stroke-width": "2", "stroke-linecap": "round" })))) : (index.h("div", { class: isActive || this.isDropdownOpen ? "ellipsis-icon active" : "ellipsis-icon" }, index.h("icon-asset", { type: "ptc", size: "xxx-small", name: "ellipsis", color: isActive || this.isDropdownOpen ? 'white' : 'black' }))), index.h("div", { class: "dropdown-container" }, index.h("slot", { name: "dropdown" }), this.dataItems.map(dataItem => {
|
|
49
49
|
let activeClass = dataItem.value == this.selectedTab ? 'active' : '';
|
|
50
50
|
let activeDropdown = dataItem.isSelected ? 'selected-drop' : '';
|
|
51
|
-
return (index.h("dropdown-item", { class: activeClass + activeDropdown }, index.h("span", { onClick: (e) => {
|
|
51
|
+
return (index.h("dropdown-item", { class: activeClass + activeDropdown + 'mf-listen' }, index.h("span", { onClick: (e) => {
|
|
52
52
|
e.preventDefault();
|
|
53
53
|
this.onItemSelected(dataItem);
|
|
54
54
|
} }, dataItem.text)));
|
|
@@ -66,7 +66,7 @@ const PtcFilterTag = class {
|
|
|
66
66
|
};
|
|
67
67
|
PtcFilterTag.style = ptcFilterTagCss;
|
|
68
68
|
|
|
69
|
-
const ptcPagenationCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.events-filter{padding:20px 32px 20px 0;text-align:center}@media (min-width: 992px){.events-filter{padding:10px 40px 10px 0px}}.events-filter .pagenation-arrow{width:40px;height:40px;margin:0 15px;vertical-align:middle}.standard-filter{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-semibold);text-align:center}.standard-filter .standard-filter-item{height:2.5rem;width:2.5rem;display:inline-flex;align-items:center;justify-content:center;margin-right:0.5rem;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:transparent;border-radius:var(--ptc-border-radius-standard);color:var(--color-gray-10);text-decoration:none}.standard-filter .standard-filter-item:hover{background-color:var(--color-gray-02);text-decoration:none}.standard-filter .standard-filter-item:focus{text-decoration:none;outline:3px solid var(--color-blue-07);outline-offset:2px}.standard-filter .standard-filter-item:active{background-color:var(--color-gray-05);text-decoration:none;transition:none}.standard-filter .standard-filter-item.active{transition:none;background-color:var(--color-gray-12);color:var(--color-white)}.standard-filter .standard-filter-item.active:hover{transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:var(--color-gray-12);cursor:default}.standard-filter .standard-filter-item[data-url=last]{margin-right:1.25rem}.standard-filter .next-button,.standard-filter .previous-button{font-size:var(--ptc-font-size-x-small);font-weight:normal;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1px solid var(--color-gray-10);border-radius:calc(var(--ptc-border-radius-standard)
|
|
69
|
+
const ptcPagenationCss = "h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual}@supports (hyphenate-limit-chars: 12 3 3){h1,h2,h3,h4,h5,h6,p,ul,li,ptc-subnav,ptc-tab-list,ptc-link,ptc-square-card,.hyphenate-text,ptc-footer{hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;hyphenate-limit-chars:12 3 3;hyphenate-limit-lines:2;hyphenate-limit-last:always;hyphenate-limit-zone:6%;-webkit-hyphens:auto;-webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3;-webkit-hyphenate-limit-chars:12 3 3;-webkit-hyphenate-limit-lines:2;-moz-hyphens:auto;-moz-hyphenate-limit-chars:12 3 3;-moz-hyphenate-limit-lines:2;-ms-hyphens:auto;-ms-hyphenate-limit-chars:12 3 3;-ms-hyphenate-limit-lines:2}}:host{display:block}.events-filter{padding:20px 32px 20px 0;text-align:center}@media (min-width: 992px){.events-filter{padding:10px 40px 10px 0px}}.events-filter .pagenation-arrow{width:40px;height:40px;margin:0 15px;vertical-align:middle}.standard-filter{font-size:var(--ptc-font-size-small);font-weight:var(--ptc-font-weight-semibold);text-align:center}.standard-filter .standard-filter-item{height:2.5rem;width:2.5rem;display:inline-flex;align-items:center;justify-content:center;margin-right:0.5rem;transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:transparent;border-radius:var(--ptc-border-radius-standard);color:var(--color-gray-10);text-decoration:none}.standard-filter .standard-filter-item:hover{background-color:var(--color-gray-02);text-decoration:none}.standard-filter .standard-filter-item:focus{text-decoration:none;outline:3px solid var(--color-blue-07);outline-offset:2px}.standard-filter .standard-filter-item:active{background-color:var(--color-gray-05);text-decoration:none;transition:none}.standard-filter .standard-filter-item.active{transition:none;background-color:var(--color-gray-12);color:var(--color-white)}.standard-filter .standard-filter-item.active:hover{transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium);background-color:var(--color-gray-12);cursor:default}.standard-filter .standard-filter-item[data-url=last]{margin-right:1.25rem}.standard-filter .next-button,.standard-filter .previous-button{font-size:var(--ptc-font-size-x-small);font-weight:normal;display:inline-flex;align-items:center;justify-content:center;width:1.125rem;height:1.125rem;border:1px solid var(--color-gray-10);border-radius:calc(var(--ptc-border-radius-standard)/2);transition:background-color var(--ptc-ease-out) var(--ptc-transition-medium), fill var(--ptc-ease-out) var(--ptc-transition-medium), border-color var(--ptc-ease-out) var(--ptc-transition-medium)}.standard-filter .next-button:hover,.standard-filter .previous-button:hover{background-color:var(--color-gray-02);text-decoration:none}.standard-filter .next-button:active,.standard-filter .previous-button:active{transition:none;background-color:var(--color-gray-05);text-decoration:none}.standard-filter .next-button:focus,.standard-filter .previous-button:focus{text-decoration:none;outline:3px solid var(--color-blue-07);outline-offset:2px}.standard-filter .next-button.disabled,.standard-filter .previous-button.disabled{cursor:default;border-color:var(--color-gray-04);color:var(--color-gray-04);fill:var(--color-gray-04)}.standard-filter .next-button.disabled:hover,.standard-filter .next-button.disabled:active,.standard-filter .previous-button.disabled:hover,.standard-filter .previous-button.disabled:active{background-color:transparent}.standard-filter .previous-button{margin-right:1.25rem}.standard-filter .previous-button icon-asset{transform:rotate(90deg);position:relative;right:2px}.standard-filter .next-button icon-asset{transform:rotate(-90deg);position:relative;left:1px}.standard-filter .standard-filter-dots{margin:0.125rem 0.5rem 0.125rem 0.125rem}@media (768px){.standard-filter .standard-filter-dots{margin:0.125rem 0.5rem 0.125rem 0.125rem}}.show-page{display:inline}.hide-page{display:none}.prev-text{display:none}.last-text{display:none}@media (min-width: 992px){.prev-text{display:inline}.last-text{display:inline}}.events-filter-item{font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-semibold);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;padding:6px;color:var(--color-gray-10);text-decoration:none}.events-filter .active{font-family:var(--ptc-font-latin);border-bottom:2px solid var(--color-green-13);font-weight:var(--ptc-font-weight-semibold)}.events-filter-item:hover,.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-green-14)}span.events-filter-item:hover,span.events-filter-item:focus{text-decoration:none;outline:0;color:var(--color-gray-10)}span.events-filter-item.disabled{color:var(--color-white-01)}.events-filter .disabled{color:var(--color-white-01)}.events-filter-dots{padding:0rem;font-weight:var(--ptc-font-weight-extrabold);font-family:var(--ptc-font-latin);font-size:var(--ptc-font-size-xx-small);font-stretch:normal;font-style:var(--ptc-font-style-normal);line-height:var(--ptc-line-height-denser);letter-spacing:var(--ptc-letter-spacing-normal);text-align:left;color:var(--color-gray-10);text-decoration:none}.events-disable-arrows{opacity:0.35}.events-enable-arrows{opacity:1}.events-small-dots{height:60px;margin-top:-25px}@media (min-width: 992px){.events-small-dots{height:80px;margin-top:-40px}}.last-page{transform:rotate(180deg)}";
|
|
70
70
|
|
|
71
71
|
const PtcPagenation = class {
|
|
72
72
|
constructor(hostRef) {
|