npm - @ptcwebops/ptcw-design - Versions diffs - 7.0.10-upgrade → 7.0.12-upgrade - Mend

@ptcwebops/ptcw-design 7.0.10-upgrade → 7.0.12-upgrade

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.

Files changed (1020) hide show

package/dist/components/{p-CDH04Z6-.js.map → p-DwR4-JBM.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CDH04Z6-.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/ptc-button/ptc-button.scss?tag=ptc-button&encapsulation=shadow","src/components/atoms/ptc-button/ptc-button.tsx"],"sourcesContent":["@use 'mixins' as ;\r\n\r\nbutton.disabled {\r\n pointer-events: none;\r\n opacity: 0.6;\r\n}\r\n\r\nbutton {\r\n background-color: var(--color-gray-10);\r\n display: inline-block;\r\n border-style: solid;\r\n border-width: 1px;\r\n white-space: normal;\r\n position: relative;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n cursor: pointer;\r\n padding: 9.4px 17.5px;\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &.reveal-down {\r\n .content {\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\r\n opacity: 0;\r\n font-size: var(--ptc-font-size-xx-small);\r\n }\r\n .icon-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n align-content: center;\r\n height: 16px;\r\n\r\n .icon {\r\n transition: top var(--ptc-transition-fast) var(--ptc-ease-out);\r\n position: absolute;\r\n display: inline-block;\r\n top: -12px;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n &.reveal-down {\r\n .content {\r\n opacity: 1;\r\n }\r\n\r\n .icon-wrapper {\r\n .icon {\r\n top: 4px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.animation-right,\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transition: transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n position: relative;\r\n display: inline-block;\r\n }\r\n }\r\n\r\n &:hover {\r\n &.animation-right {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateX(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateY(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n }\r\n\r\n span {\r\n font-family: var(--ptc-font-latin);\r\n font-size: var(--ptc-font-size-small);\r\n font-weight: bold;\r\n line-height: var(--ptc-line-height-densest);\r\n }\r\n &.left {\r\n text-align: left;\r\n }\r\n &.right {\r\n text-align: right;\r\n }\r\n &.center {\r\n text-align: center;\r\n }\r\n}\r\n\r\n.icon-left {\r\n ::slotted([slot='slot-before-text']) {\r\n margin-right: var(--ptc-element-spacing-01);\r\n }\r\n}\r\n\r\n.icon-right {\r\n ::slotted([slot='slot-after-text']) {\r\n margin-left: var(--ptc-element-spacing-01);\r\n }\r\n}\r\n\r\n.blackgrey {\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n }\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n border: solid 1px var(--color-gray-10);\r\n background-image: linear-gradient(285deg, var(--color-gray-10) 155%, var(--color-gray-07) 62%);\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n}\r\n\r\n.turtlegreen {\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n }\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n border: solid 1px var(--color-green-07);\r\n background-image: linear-gradient(285deg, var(--color-green-07) 155%, var(--color-green-07) 62%);\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n}\r\n\r\n.offwhite {\r\n box-shadow: var(--ptc-shadow-x-small);\r\n border: solid 1px var(--color-gray-10);\r\n background-image: linear-gradient(to right, var(--color-white), var(--color-gray-02), var(--color-gray-01));\r\n\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n }\r\n\r\n span {\r\n color: var(--color-gray-10);\r\n }\r\n}\r\n\r\n.legacy-green {\r\n margin-left: 10px;\r\n padding: 10px 20px;\r\n margin-bottom: var(--ptc-element-spacing-01);\r\n margin-top: var(--ptc-element-spacing-01);\r\n\r\n &:after {\r\n position: absolute;\r\n content: '';\r\n top: -1px;\r\n left: 0;\r\n bottom: 0;\r\n right: 0;\r\n width: 100%;\r\n height: 103%;\r\n background-image: linear-gradient(to right, var(--color-green-08), var(--color-green-06));\r\n opacity: 0;\r\n transition: opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);\r\n border-radius: 2px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n }\r\n\r\n &:hover:after {\r\n opacity: 1;\r\n }\r\n\r\n box-shadow: var(--ptc-shadow-large);\r\n border: solid 2.5px var(--color-green-08);\r\n background-image: linear-gradient(to right, var(--color-green-06), var(--color-green-08));\r\n\r\n span {\r\n font-family: var(--ptc-font-secondary-latin);\r\n color: var(--color-white);\r\n z-index: 100;\r\n position: relative;\r\n text-transform: uppercase;\r\n font-weight: var(--ptc-font-weight-bold);\r\n letter-spacing: var(--ptc-letter-spacing-normal);\r\n font-size: var(--ptc-font-size-x-small);\r\n\r\n @include screen-sm {\r\n font-size: var(--ptc-font-size-small);\r\n letter-spacing: var(--ptc-letter-spacing-loose);\r\n }\r\n }\r\n\r\n icon-asset {\r\n display: inline;\r\n }\r\n}\r\n\r\n//Link style adjustments\r\na {\r\n border-style: solid;\r\n border-width: 1px;\r\n position: relative;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n padding: 9.4px 17.5px;\r\n border-radius: var(--ptc-border-radius-standard);\r\n display: inline-block;\r\n position: relative;\r\n\r\n &.animation-right,\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transition: all var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n position: relative;\r\n display: inline-block;\r\n margin-left: 5px;\r\n }\r\n }\r\n\r\n &:hover {\r\n &.animation-right {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateX(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateY(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n }\r\n &.left {\r\n text-align: left;\r\n }\r\n &.right {\r\n text-align: right;\r\n }\r\n &.center {\r\n text-align: center;\r\n }\r\n}\r\n\r\n.nav {\r\n font-family: var(--ptc-font-latin);\r\n background-color: var(--color-gray-10);\r\n border-radius: var(--ptc-border-radius-standard);\r\n border: 1px solid var(--color-white);\r\n border-bottom-style: solid;\r\n border-bottom-width: 1px;\r\n box-sizing: border-box;\r\n color: var(--color-white);\r\n display: inline-block;\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-stretch: 100%; //undefined value\r\n font-weight: var(--ptc-font-weight-bold);\r\n line-height: var(--ptc-line-height-loose);\r\n list-style: none;\r\n padding: 3px var(--ptc-element-spacing-04);\r\n position: relative;\r\n text-align: center;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n &:focus-visible {\r\n border-radius: 4px !important;\r\n border: 2px solid #fff !important;\r\n outline: 5px solid #003dd6 !important;\r\n background-color: transparent !important;\r\n outline-offset: 0px !important;\r\n }\r\n\r\n &:focus {\r\n text-decoration: none;\r\n border: solid 2px transparent;\r\n outline: none;\r\n }\r\n\r\n // &:focus {\r\n // outline: 3px solid var(--color-blue-07);\r\n // outline-offset: 2px;\r\n // }\r\n\r\n &:hover {\r\n background-color: var(--color-gray-12);\r\n }\r\n}\r\n\r\n.nav-store-btn {\r\n font-family: var(--ptc-font-latin);\r\n background-color: var(--color-green-07);\r\n border-radius: var(--ptc-border-radius-standard);\r\n border: 1px solid var(--color-green-07);\r\n border-bottom-style: solid;\r\n border-bottom-width: 1px;\r\n box-sizing: border-box;\r\n color: var(--color-white);\r\n display: inline-block;\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-stretch: 100%; //undefined value\r\n font-weight: var(--ptc-font-weight-bold);\r\n line-height: var(--ptc-line-height-loose);\r\n list-style: none;\r\n padding: 3px var(--ptc-element-spacing-04);\r\n position: relative;\r\n text-align: center;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n &:focus-visible {\r\n border-radius: 4px !important;\r\n border: 2px solid #fff !important;\r\n outline: 5px solid #003dd6 !important;\r\n background-color: var(--color-green-07) !important;\r\n outline-offset: 0px !important;\r\n }\r\n\r\n &:focus {\r\n text-decoration: none;\r\n border: solid 2px transparent;\r\n outline: none;\r\n }\r\n\r\n // &:focus {\r\n // outline: 3px solid var(--color-blue-07);\r\n // outline-offset: 2px;\r\n // }\r\n\r\n &:hover {\r\n background-color: var(--color-green-08);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-green-09);\r\n transition: none;\r\n }\r\n}\r\n\r\n//ADA button updates\r\n.ptc-primary,\r\n.ptc-quaternary,\r\n.ptc-secondary,\r\n.ptc-tertiary,\r\n.icon-toggle {\r\n padding: var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);\r\n transition: background-color var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n line-height: 20px; //undefined size\r\n\r\n &.disabled {\r\n pointer-events: none;\r\n border-color: var(--color-gray-03);\r\n background: var(--color-gray-02);\r\n\r\n span {\r\n color: var(--color-gray-03);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-gray-03) !important;\r\n }\r\n }\r\n\r\n // &:focus {\r\n // outline: 3px solid var(--color-blue-07);\r\n // outline-offset: 2px;\r\n // }\r\n\r\n &:focus-visible {\r\n @include base-focus-state;\r\n }\r\n\r\n span {\r\n font-family: var(--ptc-font-latin);\r\n font-weight: var(--ptc-font-weight-bold);\r\n font-size: var(--ptc-font-size-small);\r\n line-height: var(--ptc-line-height-densest);\r\n letter-spacing: normal;\r\n }\r\n &.small {\r\n padding: var(--ptc-element-spacing-03) var(--ptc-element-spacing-04);\r\n span {\r\n font-size: var(--ptc-font-size-xx-small);\r\n }\r\n }\r\n &.medium {\r\n padding: 14px 20px;\r\n span {\r\n font-size: var(--ptc-font-size-small);\r\n }\r\n }\r\n &.large {\r\n padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);\r\n span {\r\n font-size: var(--ptc-font-size-large);\r\n }\r\n }\r\n\r\n &.acc-alt-style {\r\n &:focus-visible {\r\n @include focus-state;\r\n }\r\n }\r\n}\r\n\r\n.ptc-primary {\r\n background: var(--color-gray-12); //--color-primary\r\n border: 2px solid var(--color-green-07); //--color-primary-green\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-10);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-black);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-white) !important;\r\n }\r\n}\r\n\r\n.ptc-secondary {\r\n background: var(--color-gray-12);\r\n border: 2px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-10);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-black);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-white) !important;\r\n }\r\n}\r\n\r\n.ptc-tertiary {\r\n background: var(--color-white);\r\n border: 2px solid var(--color-gray-10);\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-02);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-gray-03);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-gray-10);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-gray-10) !important;\r\n }\r\n\r\n ::slotted(a) {\r\n color: var(--color-gray-10) !important;\r\n text-decoration-line: none !important;\r\n }\r\n}\r\n\r\n.ptc-quaternary {\r\n background: var(--color-green-07);\r\n border: 2px solid var(--color-green-07);\r\n border-radius: var(--ptc-border-radius-standard);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: var(--color-green-08);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-green-09);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-white) !important;\r\n }\r\n}\r\n\r\n.icon-toggle {\r\n background: var(--color-white);\r\n border: 1px solid var(--color-gray-10);\r\n border-radius: var(--ptc-border-radius-standard);\r\n padding: 0;\r\n height: 2.125rem;\r\n width: 2.125rem;\r\n box-shadow: var(--ptc-shadow-medium);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-02);\r\n }\r\n\r\n &:active {\r\n transition: none;\r\n background-color: var(--color-gray-03);\r\n }\r\n\r\n &.active {\r\n background-color: var(--color-gray-04);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-05);\r\n }\r\n\r\n &:active {\r\n transition: none;\r\n background-color: var(--color-gray-03);\r\n }\r\n }\r\n\r\n &:focus {\r\n outline: 2px solid var(--color-blue-07);\r\n outline-offset: 1px;\r\n }\r\n\r\n span {\r\n color: var(--color-gray-10);\r\n padding: 0;\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-gray-10) !important;\r\n }\r\n\r\n ::slotted(icon-asset) {\r\n display: block;\r\n margin: auto;\r\n height: 18px;\r\n width: 18px;\r\n }\r\n}\r\n\r\n.clear-search {\r\n border: none;\r\n padding: 0px;\r\n line-height: var(----ptc-line-height-densest);\r\n background-color: transparent;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n text-decoration-color: var(--color-white);\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n font-weight: var(--ptc-font-weight-semibold);\r\n font-size: var(--ptc-font-size-x-small);\r\n -moz-osx-font-smoothing: grayscale;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n}\r\n\r\n.tracker-div {\r\n @include div-tracker;\r\n display: inline-block;\r\n}\r\n\r\n.focus-state-dark-background {\r\n &:focus-visible {\r\n @include focus-state;\r\n }\r\n}\r\n\r\n// New CTA's\r\n// Common CTA base styles\r\n%cta-base {\r\n padding: 0.875rem 1.25rem;\r\n font-size: var(--ptc-font-size-small);\r\n font-style: normal;\r\n font-weight: var(--ptc-font-weight-bold);\r\n line-height: var(--ptc-line-height-densest);\r\n color: var(--color-white);\r\n border: 2px solid transparent;\r\n text-decoration: none;\r\n\r\n &.medium {\r\n padding: 0.75rem 1rem;\r\n\r\n span {\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-weight: var(--ptc-font-weight-extrabold);\r\n }\r\n }\r\n\r\n &.small {\r\n padding: 0.5rem 0.75rem;\r\n\r\n span {\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-weight: var(--ptc-font-weight-extrabold);\r\n }\r\n }\r\n\r\n &.disabled {\r\n pointer-events: none;\r\n color: var(--color-gray-03);\r\n border-color: var(--color-gray-03);\r\n background-color: var(--color-gray-02);\r\n\r\n icon-asset svg {\r\n fill: var(--color-gray-03);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-gray-02);\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n @include focus-state;\r\n }\r\n\r\n &.full-width {\r\n width: 100%;\r\n }\r\n\r\n .cta-content-wrap {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n icon-asset {\r\n margin-right: 8px;\r\n line-height: 0;\r\n & + span {\r\n text-align: left;\r\n }\r\n }\r\n }\r\n}\r\n\r\n// Primary CTA\r\n.primary-cta {\r\n @extend %cta-base;\r\n background-color: var(--color-green-07);\r\n border-color: var(--color-green-07);\r\n transition: all 0.2s ease;\r\n\r\n &:hover {\r\n background-color: var(--color-green-08);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-green-09);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-green-07);\r\n }\r\n}\r\n\r\n// Secondary CTA (dark theme)\r\n.secondary-cta-dark {\r\n @extend %cta-base;\r\n background-color: var(--color-gray-12);\r\n border-color: var(--color-gray-08);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-10);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-black);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-gray-12);\r\n }\r\n}\r\n\r\n// Secondary CTA (light theme)\r\n.secondary-cta-light {\r\n @extend %cta-base;\r\n background-color: var(--color-white);\r\n border-color: var(--color-gray-10);\r\n color: var(--color-gray-10);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-02);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-gray-03);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-white);\r\n }\r\n}\r\n","import {\r\n\tComponent,\r\n\tProp,\r\n\th,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tHost,\r\n\tElement,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\nimport { getSeoTagType, CheckDarkFocusState } from \"../../../utils/utils\";\r\n\r\n@Component({\r\n\ttag: \"ptc-button\",\r\n\tstyleUrl: \"ptc-button.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcButton {\r\n\t@Element() el: HTMLElement;\r\n\t/\r\n\t Disabled button\r\n\t /\r\n\t@Prop({ reflect: true }) disabled?: boolean = false;\r\n\t/\r\n\t Active Toggle button\r\n\t /\r\n\t@Prop({ reflect: true }) active?: boolean = false;\r\n\t/\r\n\t Button type\r\n\t /\r\n\t@Prop() type: \"button\" \| \"reset\" \| \"submit\" \| \"link\" = \"button\";\r\n\t/\r\n\t Button theme color\r\n\t /\r\n\t@Prop()\r\n\tcolor:\r\n\t\t\| \"offwhite\"\r\n\t\t\| \"blackgrey\"\r\n\t\t\| \"turtlegreen\"\r\n\t\t\| \"nav\"\r\n\t\t\| \"legacy-green\"\r\n\t\t\| \"ptc-primary\"\r\n\t\t\| \"ptc-secondary\"\r\n\t\t\| \"ptc-tertiary\"\r\n\t\t\| \"ptc-quaternary\"\r\n\t\t\| \"icon-toggle\"\r\n\t\t\| \"clear-search\"\r\n\t\t\| \"primary-cta\"\r\n\t\t\| \"secondary-cta-dark\"\r\n\t\t\| \"secondary-cta-light\" = \"ptc-primary\";\r\n\t/\r\n\t Icon Animation\r\n\t /\r\n\t@Prop() iconAnimation:\r\n\t\t\| \"animation-right\"\r\n\t\t\| \"animation-down\"\r\n\t\t\| \"reveal-down\"\r\n\t\t\| \"\" = \"\";\r\n\t/\r\n\t Icon Position\r\n\t /\r\n\t@Prop() iconPosition: \"icon-left\" \| \"icon-right\" \| \"none\" = \"icon-right\";\r\n\r\n\t/\r\n\t Link URL\r\n\t /\r\n\t@Prop() linkHref?: string = undefined;\r\n\r\n\t/\r\n\t link Title\r\n\t /\r\n\t@Prop() linkTitle?: string = undefined;\r\n\r\n\t/\r\n\t Link target\r\n\t * /\r\n\t@Prop() target?: string = \"_self\";\r\n\t/\r\n\t Link rel\r\n\t * /\r\n\t@Prop() rel?: string = undefined;\r\n\t/\r\n\t (optional) tab-nav.\r\n\t * indicates that its element can be focused, and where it participates in sequential keyboard navigation.\r\n\t * A negative value (usually tabindex=\"-1\") means that the element is not reachable via sequential keyboard navigation\r\n\t /\r\n\t@Prop() tabNav: number = 0;\r\n\t/\r\n\t (optional) Injected CSS Styles\r\n\t /\r\n\t@Prop() styles?: string;\r\n\r\n\t/\r\n\t Text Align\r\n\t /\r\n\t@Prop() textAlign?: \"left\" \| \"right\" \| \"center\";\r\n\r\n\t/\r\n\t Enable Accessibility Alternate Styling\r\n\t /\r\n\t@Prop() enableAccessibilityAltStyle: boolean = false;\r\n\r\n\t/\r\n\t Button theme color\r\n\t /\r\n\t@Prop()\r\n\tsize: \"small\" \| \"medium\" \| \"large\";\r\n\t/\r\n\t Emitted when the button has focus.\r\n\t /\r\n\t@Event() clickEvent: EventEmitter<void>;\r\n\tclickEventHandler() {\r\n\t\tthis.clickEvent.emit();\r\n\t}\r\n\t// Properties for accessibilty / aria\r\n\t@Prop() buttonTitle?: string;\r\n\t@Prop() ariaLabel: string = \"\";\r\n\t/\r\n\t (optional) enable support for seo tools that can only view source\r\n\t /\r\n\t@Prop() seoCompatibilityMode: boolean = false;\r\n\t/\r\n\t when support for seo tools is enabled will take inner element content and dublicate to slot for browser translation compatibility\r\n\t /\r\n\t@Prop() maintainContent: boolean = false;\r\n\t@Prop() trackerId?: string;\r\n\r\n\t/\r\n\t Add dark-focus-state property where button is present on dark backgrounds\r\n\t */\r\n\t@Prop() darkFocusState: boolean = false;\r\n\r\n\t@Prop() ctaWidth: \"full-width\" \| \"default\" = \"default\";\r\n\r\n\tcomponentWillLoad() {\r\n\t\tconsole.log(\"FeF v4 test\");\r\n\t\tCheckDarkFocusState(this, this.el);\r\n\t}\r\n\r\n\tseoCompRender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\tconst Tag = !!this.linkHref ? \"a\" : \"button\";\r\n\t\tconst [TagType, firstChild] = getSeoTagType(this.el, Tag);\r\n\t\tconst html = firstChild && firstChild.innerHTML;\r\n\r\n\t\tif (this.el == firstChild) {\r\n\t\t\tthis.el.innerHTML = \"\";\r\n\t\t}\r\n\r\n\t\tif (this.maintainContent) {\r\n\t\t\tthis.el.innerHTML = html;\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t<Host>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\tclass=\"tracker-div mf-listen\"\r\n\t\t\t\t\t{...(this.ctaWidth === \"full-width\"\r\n\t\t\t\t\t\t? { style: { display: \"block\" } }\r\n\t\t\t\t\t\t: {})}\r\n\t\t\t\t>\r\n\t\t\t\t\t<TagType\r\n\t\t\t\t\t\tclass={classMap}\r\n\t\t\t\t\t\tonClick={this.clickEventHandler.bind(this)}\r\n\t\t\t\t\t\t{...(!!this.linkHref ? { href: this.linkHref } : {})}\r\n\t\t\t\t\t\t{...(!this.linkHref ? { type: this.type } : {})}\r\n\t\t\t\t\t\t{...(!!this.target && !!this.linkHref\r\n\t\t\t\t\t\t\t? { target: this.target }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.rel && !!this.linkHref\r\n\t\t\t\t\t\t\t? { rel: this.rel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.linkHref\r\n\t\t\t\t\t\t\t? {\r\n\t\t\t\t\t\t\t\t\ttitle: this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t? this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t: this.linkHref,\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.tabNav\r\n\t\t\t\t\t\t\t? { tabindex: -1 }\r\n\t\t\t\t\t\t\t: { tabindex: 0 })}\r\n\t\t\t\t\t\ttitle={this.buttonTitle}\r\n\t\t\t\t\t\t{...(this.ariaLabel !== \"\"\r\n\t\t\t\t\t\t\t? { ariaLabel: this.ariaLabel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t<span innerHTML={html} class={\"cta-content-wrap\"}>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-before-text\"></slot>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-after-text\"></slot>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</TagType>\r\n\t\t\t\t</div>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tstandardRender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\tconst Tag = !!this.linkHref ? \"a\" : \"button\";\r\n\r\n\t\treturn (\r\n\t\t\t<Host>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div id={this.trackerId} class=\"tracker-div mf-listen\">\r\n\t\t\t\t\t<Tag\r\n\t\t\t\t\t\tclass={classMap}\r\n\t\t\t\t\t\tonClick={this.clickEventHandler.bind(this)}\r\n\t\t\t\t\t\t{...(!!this.linkHref ? { href: this.linkHref } : {})}\r\n\t\t\t\t\t\t{...(!this.linkHref ? { type: this.type } : {})}\r\n\t\t\t\t\t\t{...(!!this.target && !!this.linkHref\r\n\t\t\t\t\t\t\t? { target: this.target }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.rel && !!this.linkHref\r\n\t\t\t\t\t\t\t? { rel: this.rel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.linkHref\r\n\t\t\t\t\t\t\t? {\r\n\t\t\t\t\t\t\t\t\ttitle: this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t? this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t: this.linkHref,\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.tabNav\r\n\t\t\t\t\t\t\t? { tabindex: -1 }\r\n\t\t\t\t\t\t\t: { tabindex: 0 })}\r\n\t\t\t\t\t\ttitle={this.buttonTitle}\r\n\t\t\t\t\t\t{...(this.ariaLabel !== \"\"\r\n\t\t\t\t\t\t\t? { ariaLabel: this.ariaLabel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{this.iconAnimation == \"reveal-down\" ? (\r\n\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"icon-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"icon\">\r\n\t\t\t\t\t\t\t\t\t\t<slot name=\"slot-after-text\"></slot>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-before-text\"></slot>\r\n\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-after-text\"></slot>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</Tag>\r\n\t\t\t\t</div>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\trender() {\r\n\t\tif (this.seoCompatibilityMode) {\r\n\t\t\treturn this.seoCompRender();\r\n\t\t} else {\r\n\t\t\treturn this.standardRender();\r\n\t\t}\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.color]: true,\r\n\t\t\t[this.iconAnimation]: true,\r\n\t\t\t[this.iconPosition]: true,\r\n\t\t\t[\"disabled\"]: this.disabled ? true : false,\r\n\t\t\t[\"active\"]: this.active ? true : false,\r\n\t\t\t[this.textAlign]: true,\r\n\t\t\t[this.size]: true,\r\n\t\t\t[\"acc-alt-style\"]: this.enableAccessibilityAltStyle,\r\n\t\t\t[\"focus-state-dark-background\"]: this.darkFocusState,\r\n\t\t\t[this.ctaWidth]: true,\r\n\t\t};\r\n\t}\r\n}\r\n"],"version":3}
1	+ {"file":"p-DwR4-JBM.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/ptc-button/ptc-button.scss?tag=ptc-button&encapsulation=shadow","src/components/atoms/ptc-button/ptc-button.tsx"],"sourcesContent":["@use 'mixins' as ;\r\n\r\nbutton.disabled {\r\n pointer-events: none;\r\n opacity: 0.6;\r\n}\r\n\r\nbutton {\r\n background-color: var(--color-gray-10);\r\n display: inline-block;\r\n border-style: solid;\r\n border-width: 1px;\r\n white-space: normal;\r\n position: relative;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n cursor: pointer;\r\n padding: 9.4px 17.5px;\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &.reveal-down {\r\n .content {\r\n transition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\r\n opacity: 0;\r\n font-size: var(--ptc-font-size-xx-small);\r\n }\r\n .icon-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n align-content: center;\r\n height: 16px;\r\n\r\n .icon {\r\n transition: top var(--ptc-transition-fast) var(--ptc-ease-out);\r\n position: absolute;\r\n display: inline-block;\r\n top: -12px;\r\n }\r\n }\r\n }\r\n\r\n &:hover {\r\n &.reveal-down {\r\n .content {\r\n opacity: 1;\r\n }\r\n\r\n .icon-wrapper {\r\n .icon {\r\n top: 4px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.animation-right,\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transition: transform var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n position: relative;\r\n display: inline-block;\r\n }\r\n }\r\n\r\n &:hover {\r\n &.animation-right {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateX(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateY(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n }\r\n\r\n span {\r\n font-family: var(--ptc-font-latin);\r\n font-size: var(--ptc-font-size-small);\r\n font-weight: bold;\r\n line-height: var(--ptc-line-height-densest);\r\n }\r\n &.left {\r\n text-align: left;\r\n }\r\n &.right {\r\n text-align: right;\r\n }\r\n &.center {\r\n text-align: center;\r\n }\r\n}\r\n\r\n.icon-left {\r\n ::slotted([slot='slot-before-text']) {\r\n margin-right: var(--ptc-element-spacing-01);\r\n }\r\n}\r\n\r\n.icon-right {\r\n ::slotted([slot='slot-after-text']) {\r\n margin-left: var(--ptc-element-spacing-01);\r\n }\r\n}\r\n\r\n.blackgrey {\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n }\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n border: solid 1px var(--color-gray-10);\r\n background-image: linear-gradient(285deg, var(--color-gray-10) 155%, var(--color-gray-07) 62%);\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n}\r\n\r\n.turtlegreen {\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n }\r\n\r\n box-shadow: var(--ptc-shadow-x-small);\r\n border: solid 1px var(--color-green-07);\r\n background-image: linear-gradient(285deg, var(--color-green-07) 155%, var(--color-green-07) 62%);\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n}\r\n\r\n.offwhite {\r\n box-shadow: var(--ptc-shadow-x-small);\r\n border: solid 1px var(--color-gray-10);\r\n background-image: linear-gradient(to right, var(--color-white), var(--color-gray-02), var(--color-gray-01));\r\n\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n }\r\n\r\n span {\r\n color: var(--color-gray-10);\r\n }\r\n}\r\n\r\n.legacy-green {\r\n margin-left: 10px;\r\n padding: 10px 20px;\r\n margin-bottom: var(--ptc-element-spacing-01);\r\n margin-top: var(--ptc-element-spacing-01);\r\n\r\n &:after {\r\n position: absolute;\r\n content: '';\r\n top: -1px;\r\n left: 0;\r\n bottom: 0;\r\n right: 0;\r\n width: 100%;\r\n height: 103%;\r\n background-image: linear-gradient(to right, var(--color-green-08), var(--color-green-06));\r\n opacity: 0;\r\n transition: opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);\r\n border-radius: 2px;\r\n }\r\n\r\n &:hover {\r\n box-shadow: var(--ptc-shadow-x-large);\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n }\r\n\r\n &:hover:after {\r\n opacity: 1;\r\n }\r\n\r\n box-shadow: var(--ptc-shadow-large);\r\n border: solid 2.5px var(--color-green-08);\r\n background-image: linear-gradient(to right, var(--color-green-06), var(--color-green-08));\r\n\r\n span {\r\n font-family: var(--ptc-font-secondary-latin);\r\n color: var(--color-white);\r\n z-index: 100;\r\n position: relative;\r\n text-transform: uppercase;\r\n font-weight: var(--ptc-font-weight-bold);\r\n letter-spacing: var(--ptc-letter-spacing-normal);\r\n font-size: var(--ptc-font-size-x-small);\r\n\r\n @include screen-sm {\r\n font-size: var(--ptc-font-size-small);\r\n letter-spacing: var(--ptc-letter-spacing-loose);\r\n }\r\n }\r\n\r\n icon-asset {\r\n display: inline;\r\n }\r\n}\r\n\r\n//Link style adjustments\r\na {\r\n border-style: solid;\r\n border-width: 1px;\r\n position: relative;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n padding: 9.4px 17.5px;\r\n border-radius: var(--ptc-border-radius-standard);\r\n display: inline-block;\r\n position: relative;\r\n\r\n &.animation-right,\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transition: all var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n position: relative;\r\n display: inline-block;\r\n margin-left: 5px;\r\n }\r\n }\r\n\r\n &:hover {\r\n &.animation-right {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateX(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n\r\n &.animation-down {\r\n ::slotted([slot='slot-after-text']),\r\n ::slotted([slot='slot-before-text']) {\r\n transform: translateY(var(--ptc-element-spacing-02));\r\n }\r\n }\r\n }\r\n &.left {\r\n text-align: left;\r\n }\r\n &.right {\r\n text-align: right;\r\n }\r\n &.center {\r\n text-align: center;\r\n }\r\n}\r\n\r\n.nav {\r\n font-family: var(--ptc-font-latin);\r\n background-color: var(--color-gray-10);\r\n border-radius: var(--ptc-border-radius-standard);\r\n border: 1px solid var(--color-white);\r\n border-bottom-style: solid;\r\n border-bottom-width: 1px;\r\n box-sizing: border-box;\r\n color: var(--color-white);\r\n display: inline-block;\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-stretch: 100%; //undefined value\r\n font-weight: var(--ptc-font-weight-bold);\r\n line-height: var(--ptc-line-height-loose);\r\n list-style: none;\r\n padding: 3px var(--ptc-element-spacing-04);\r\n position: relative;\r\n text-align: center;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n &:focus-visible {\r\n border-radius: 4px !important;\r\n border: 2px solid #fff !important;\r\n outline: 5px solid #003dd6 !important;\r\n background-color: transparent !important;\r\n outline-offset: 0px !important;\r\n }\r\n\r\n &:focus {\r\n text-decoration: none;\r\n border: solid 2px transparent;\r\n outline: none;\r\n }\r\n\r\n // &:focus {\r\n // outline: 3px solid var(--color-blue-07);\r\n // outline-offset: 2px;\r\n // }\r\n\r\n &:hover {\r\n background-color: var(--color-gray-12);\r\n }\r\n}\r\n\r\n.nav-store-btn {\r\n font-family: var(--ptc-font-latin);\r\n background-color: var(--color-green-07);\r\n border-radius: var(--ptc-border-radius-standard);\r\n border: 1px solid var(--color-green-07);\r\n border-bottom-style: solid;\r\n border-bottom-width: 1px;\r\n box-sizing: border-box;\r\n color: var(--color-white);\r\n display: inline-block;\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-stretch: 100%; //undefined value\r\n font-weight: var(--ptc-font-weight-bold);\r\n line-height: var(--ptc-line-height-loose);\r\n list-style: none;\r\n padding: 3px var(--ptc-element-spacing-04);\r\n position: relative;\r\n text-align: center;\r\n text-decoration: none;\r\n -moz-osx-font-smoothing: grayscale;\r\n /(For Firefox)/\r\n -webkit-font-smoothing: antialiased;\r\n /(For Chrome and Safari)/\r\n transition: background-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n &:focus-visible {\r\n border-radius: 4px !important;\r\n border: 2px solid #fff !important;\r\n outline: 5px solid #003dd6 !important;\r\n background-color: var(--color-green-07) !important;\r\n outline-offset: 0px !important;\r\n }\r\n\r\n &:focus {\r\n text-decoration: none;\r\n border: solid 2px transparent;\r\n outline: none;\r\n }\r\n\r\n // &:focus {\r\n // outline: 3px solid var(--color-blue-07);\r\n // outline-offset: 2px;\r\n // }\r\n\r\n &:hover {\r\n background-color: var(--color-green-08);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-green-09);\r\n transition: none;\r\n }\r\n}\r\n\r\n//ADA button updates\r\n.ptc-primary,\r\n.ptc-quaternary,\r\n.ptc-secondary,\r\n.ptc-tertiary,\r\n.icon-toggle {\r\n padding: var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);\r\n transition: background-color var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n line-height: 20px; //undefined size\r\n\r\n &.disabled {\r\n pointer-events: none;\r\n border-color: var(--color-gray-03);\r\n background: var(--color-gray-02);\r\n\r\n span {\r\n color: var(--color-gray-03);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-gray-03) !important;\r\n }\r\n }\r\n\r\n // &:focus {\r\n // outline: 3px solid var(--color-blue-07);\r\n // outline-offset: 2px;\r\n // }\r\n\r\n &:focus-visible {\r\n @include base-focus-state;\r\n }\r\n\r\n span {\r\n font-family: var(--ptc-font-latin);\r\n font-weight: var(--ptc-font-weight-bold);\r\n font-size: var(--ptc-font-size-small);\r\n line-height: var(--ptc-line-height-densest);\r\n letter-spacing: normal;\r\n }\r\n &.small {\r\n padding: var(--ptc-element-spacing-03) var(--ptc-element-spacing-04);\r\n span {\r\n font-size: var(--ptc-font-size-xx-small);\r\n }\r\n }\r\n &.medium {\r\n padding: 14px 20px;\r\n span {\r\n font-size: var(--ptc-font-size-small);\r\n }\r\n }\r\n &.large {\r\n padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);\r\n span {\r\n font-size: var(--ptc-font-size-large);\r\n }\r\n }\r\n\r\n &.acc-alt-style {\r\n &:focus-visible {\r\n @include focus-state;\r\n }\r\n }\r\n}\r\n\r\n.ptc-primary {\r\n background: var(--color-gray-12); //--color-primary\r\n border: 2px solid var(--color-green-07); //--color-primary-green\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-10);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-black);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-white) !important;\r\n }\r\n}\r\n\r\n.ptc-secondary {\r\n background: var(--color-gray-12);\r\n border: 2px solid var(--color-gray-08);\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-10);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-black);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-white) !important;\r\n }\r\n}\r\n\r\n.ptc-tertiary {\r\n background: var(--color-white);\r\n border: 2px solid var(--color-gray-10);\r\n border-radius: var(--ptc-border-radius-standard);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-02);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-gray-03);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-gray-10);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-gray-10) !important;\r\n }\r\n\r\n ::slotted(a) {\r\n color: var(--color-gray-10) !important;\r\n text-decoration-line: none !important;\r\n }\r\n}\r\n\r\n.ptc-quaternary {\r\n background: var(--color-green-07);\r\n border: 2px solid var(--color-green-07);\r\n border-radius: var(--ptc-border-radius-standard);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n background-color: var(--color-green-08);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-green-09);\r\n transition: none;\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-white) !important;\r\n }\r\n}\r\n\r\n.icon-toggle {\r\n background: var(--color-white);\r\n border: 1px solid var(--color-gray-10);\r\n border-radius: var(--ptc-border-radius-standard);\r\n padding: 0;\r\n height: 2.125rem;\r\n width: 2.125rem;\r\n box-shadow: var(--ptc-shadow-medium);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-02);\r\n }\r\n\r\n &:active {\r\n transition: none;\r\n background-color: var(--color-gray-03);\r\n }\r\n\r\n &.active {\r\n background-color: var(--color-gray-04);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-05);\r\n }\r\n\r\n &:active {\r\n transition: none;\r\n background-color: var(--color-gray-03);\r\n }\r\n }\r\n\r\n &:focus {\r\n outline: 2px solid var(--color-blue-07);\r\n outline-offset: 1px;\r\n }\r\n\r\n span {\r\n color: var(--color-gray-10);\r\n padding: 0;\r\n }\r\n\r\n ::slotted([slot='slot-after-text']) {\r\n fill: var(--color-gray-10) !important;\r\n }\r\n\r\n ::slotted(icon-asset) {\r\n display: block;\r\n margin: auto;\r\n height: 18px;\r\n width: 18px;\r\n }\r\n}\r\n\r\n.clear-search {\r\n border: none;\r\n padding: 0px;\r\n line-height: var(----ptc-line-height-densest);\r\n background-color: transparent;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n text-decoration-color: var(--color-white);\r\n }\r\n\r\n span {\r\n color: var(--color-white);\r\n font-weight: var(--ptc-font-weight-semibold);\r\n font-size: var(--ptc-font-size-x-small);\r\n -moz-osx-font-smoothing: grayscale;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n}\r\n\r\n.tracker-div {\r\n @include div-tracker;\r\n display: inline-block;\r\n}\r\n\r\n.focus-state-dark-background {\r\n &:focus-visible {\r\n @include focus-state;\r\n }\r\n}\r\n\r\n// New CTA's\r\n// Common CTA base styles\r\n%cta-base {\r\n padding: 0.875rem 1.25rem;\r\n font-size: var(--ptc-font-size-small);\r\n font-style: normal;\r\n font-weight: var(--ptc-font-weight-bold);\r\n line-height: var(--ptc-line-height-densest);\r\n color: var(--color-white);\r\n border: 2px solid transparent;\r\n text-decoration: none;\r\n\r\n &.medium {\r\n padding: 0.75rem 1rem;\r\n\r\n span {\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-weight: var(--ptc-font-weight-extrabold);\r\n }\r\n }\r\n\r\n &.small {\r\n padding: 0.5rem 0.75rem;\r\n\r\n span {\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-weight: var(--ptc-font-weight-extrabold);\r\n }\r\n }\r\n\r\n &.disabled {\r\n pointer-events: none;\r\n color: var(--color-gray-03);\r\n border-color: var(--color-gray-03);\r\n background-color: var(--color-gray-02);\r\n\r\n icon-asset svg {\r\n fill: var(--color-gray-03);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-gray-02);\r\n }\r\n }\r\n\r\n &:focus-visible {\r\n @include focus-state;\r\n }\r\n\r\n &.full-width {\r\n width: 100%;\r\n }\r\n\r\n .cta-content-wrap {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n icon-asset {\r\n margin-right: 8px;\r\n line-height: 0;\r\n & + span {\r\n text-align: left;\r\n }\r\n }\r\n }\r\n}\r\n\r\n// Primary CTA\r\n.primary-cta {\r\n @extend %cta-base;\r\n background-color: var(--color-green-07);\r\n border-color: var(--color-green-07);\r\n transition: all 0.2s ease;\r\n\r\n &:hover {\r\n background-color: var(--color-green-08);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-green-09);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-green-07);\r\n }\r\n}\r\n\r\n// Secondary CTA (dark theme)\r\n.secondary-cta-dark {\r\n @extend %cta-base;\r\n background-color: var(--color-gray-12);\r\n border-color: var(--color-gray-08);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-10);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-black);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-gray-12);\r\n }\r\n}\r\n\r\n// Secondary CTA (light theme)\r\n.secondary-cta-light {\r\n @extend %cta-base;\r\n background-color: var(--color-white);\r\n border-color: var(--color-gray-10);\r\n color: var(--color-gray-10);\r\n\r\n &:hover {\r\n background-color: var(--color-gray-02);\r\n }\r\n\r\n &:active {\r\n background-color: var(--color-gray-03);\r\n }\r\n\r\n &:focus-visible {\r\n background-color: var(--color-white);\r\n }\r\n}\r\n","import {\r\n\tComponent,\r\n\tProp,\r\n\th,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tHost,\r\n\tElement,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\nimport { getSeoTagType, CheckDarkFocusState } from \"../../../utils/utils\";\r\n\r\n@Component({\r\n\ttag: \"ptc-button\",\r\n\tstyleUrl: \"ptc-button.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcButton {\r\n\t@Element() el: HTMLElement;\r\n\t/\r\n\t Disabled button\r\n\t /\r\n\t@Prop({ reflect: true }) disabled?: boolean = false;\r\n\t/\r\n\t Active Toggle button\r\n\t /\r\n\t@Prop({ reflect: true }) active?: boolean = false;\r\n\t/\r\n\t Button type\r\n\t /\r\n\t@Prop() type: \"button\" \| \"reset\" \| \"submit\" \| \"link\" = \"button\";\r\n\t/\r\n\t Button theme color\r\n\t /\r\n\t@Prop()\r\n\tcolor:\r\n\t\t\| \"offwhite\"\r\n\t\t\| \"blackgrey\"\r\n\t\t\| \"turtlegreen\"\r\n\t\t\| \"nav\"\r\n\t\t\| \"legacy-green\"\r\n\t\t\| \"ptc-primary\"\r\n\t\t\| \"ptc-secondary\"\r\n\t\t\| \"ptc-tertiary\"\r\n\t\t\| \"ptc-quaternary\"\r\n\t\t\| \"icon-toggle\"\r\n\t\t\| \"clear-search\"\r\n\t\t\| \"primary-cta\"\r\n\t\t\| \"secondary-cta-dark\"\r\n\t\t\| \"secondary-cta-light\" = \"ptc-primary\";\r\n\t/\r\n\t Icon Animation\r\n\t /\r\n\t@Prop() iconAnimation:\r\n\t\t\| \"animation-right\"\r\n\t\t\| \"animation-down\"\r\n\t\t\| \"reveal-down\"\r\n\t\t\| \"\" = \"\";\r\n\t/\r\n\t Icon Position\r\n\t /\r\n\t@Prop() iconPosition: \"icon-left\" \| \"icon-right\" \| \"none\" = \"icon-right\";\r\n\r\n\t/\r\n\t Link URL\r\n\t /\r\n\t@Prop() linkHref?: string = undefined;\r\n\r\n\t/\r\n\t link Title\r\n\t /\r\n\t@Prop() linkTitle?: string = undefined;\r\n\r\n\t/\r\n\t Link target\r\n\t * /\r\n\t@Prop() target?: string = \"_self\";\r\n\t/\r\n\t Link rel\r\n\t * /\r\n\t@Prop() rel?: string = undefined;\r\n\t/\r\n\t (optional) tab-nav.\r\n\t * indicates that its element can be focused, and where it participates in sequential keyboard navigation.\r\n\t * A negative value (usually tabindex=\"-1\") means that the element is not reachable via sequential keyboard navigation\r\n\t /\r\n\t@Prop() tabNav: number = 0;\r\n\t/\r\n\t (optional) Injected CSS Styles\r\n\t /\r\n\t@Prop() styles?: string;\r\n\r\n\t/\r\n\t Text Align\r\n\t /\r\n\t@Prop() textAlign?: \"left\" \| \"right\" \| \"center\";\r\n\r\n\t/\r\n\t Enable Accessibility Alternate Styling\r\n\t /\r\n\t@Prop() enableAccessibilityAltStyle: boolean = false;\r\n\r\n\t/\r\n\t Button theme color\r\n\t /\r\n\t@Prop()\r\n\tsize: \"small\" \| \"medium\" \| \"large\";\r\n\t/\r\n\t Emitted when the button has focus.\r\n\t /\r\n\t@Event() clickEvent: EventEmitter<void>;\r\n\tclickEventHandler() {\r\n\t\tthis.clickEvent.emit();\r\n\t}\r\n\t// Properties for accessibilty / aria\r\n\t@Prop() buttonTitle?: string;\r\n\t@Prop() ariaLabel: string = \"\";\r\n\t/\r\n\t (optional) enable support for seo tools that can only view source\r\n\t /\r\n\t@Prop() seoCompatibilityMode: boolean = false;\r\n\t/\r\n\t when support for seo tools is enabled will take inner element content and dublicate to slot for browser translation compatibility\r\n\t /\r\n\t@Prop() maintainContent: boolean = false;\r\n\t@Prop() trackerId?: string;\r\n\r\n\t/\r\n\t Add dark-focus-state property where button is present on dark backgrounds\r\n\t */\r\n\t@Prop() darkFocusState: boolean = false;\r\n\r\n\t@Prop() ctaWidth: \"full-width\" \| \"default\" = \"default\";\r\n\r\n\tcomponentWillLoad() {\r\n\t\tconsole.log(\"FeF v4 test\");\r\n\t\tCheckDarkFocusState(this, this.el);\r\n\t}\r\n\r\n\tseoCompRender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\tconst Tag = !!this.linkHref ? \"a\" : \"button\";\r\n\t\tconst [TagType, firstChild] = getSeoTagType(this.el, Tag);\r\n\t\tconst html = firstChild && firstChild.innerHTML;\r\n\r\n\t\tif (this.el == firstChild) {\r\n\t\t\tthis.el.innerHTML = \"\";\r\n\t\t}\r\n\r\n\t\tif (this.maintainContent) {\r\n\t\t\tthis.el.innerHTML = html;\r\n\t\t}\r\n\r\n\t\treturn (\r\n\t\t\t<Host>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\tclass=\"tracker-div mf-listen\"\r\n\t\t\t\t\t{...(this.ctaWidth === \"full-width\"\r\n\t\t\t\t\t\t? { style: { display: \"block\" } }\r\n\t\t\t\t\t\t: {})}\r\n\t\t\t\t>\r\n\t\t\t\t\t<TagType\r\n\t\t\t\t\t\tclass={classMap}\r\n\t\t\t\t\t\tonClick={this.clickEventHandler.bind(this)}\r\n\t\t\t\t\t\t{...(!!this.linkHref ? { href: this.linkHref } : {})}\r\n\t\t\t\t\t\t{...(!this.linkHref ? { type: this.type } : {})}\r\n\t\t\t\t\t\t{...(!!this.target && !!this.linkHref\r\n\t\t\t\t\t\t\t? { target: this.target }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.rel && !!this.linkHref\r\n\t\t\t\t\t\t\t? { rel: this.rel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.linkHref\r\n\t\t\t\t\t\t\t? {\r\n\t\t\t\t\t\t\t\t\ttitle: this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t? this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t: this.linkHref,\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.tabNav\r\n\t\t\t\t\t\t\t? { tabindex: -1 }\r\n\t\t\t\t\t\t\t: { tabindex: 0 })}\r\n\t\t\t\t\t\ttitle={this.buttonTitle}\r\n\t\t\t\t\t\t{...(this.ariaLabel !== \"\"\r\n\t\t\t\t\t\t\t? { ariaLabel: this.ariaLabel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t<span innerHTML={html} class={\"cta-content-wrap\"}>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-before-text\"></slot>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-after-text\"></slot>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t</TagType>\r\n\t\t\t\t</div>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tstandardRender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\tconst Tag = !!this.linkHref ? \"a\" : \"button\";\r\n\r\n\t\treturn (\r\n\t\t\t<Host>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div id={this.trackerId} class=\"tracker-div mf-listen\">\r\n\t\t\t\t\t<Tag\r\n\t\t\t\t\t\tclass={classMap}\r\n\t\t\t\t\t\tonClick={this.clickEventHandler.bind(this)}\r\n\t\t\t\t\t\t{...(!!this.linkHref ? { href: this.linkHref } : {})}\r\n\t\t\t\t\t\t{...(!this.linkHref ? { type: this.type } : {})}\r\n\t\t\t\t\t\t{...(!!this.target && !!this.linkHref\r\n\t\t\t\t\t\t\t? { target: this.target }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.rel && !!this.linkHref\r\n\t\t\t\t\t\t\t? { rel: this.rel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.linkHref\r\n\t\t\t\t\t\t\t? {\r\n\t\t\t\t\t\t\t\t\ttitle: this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t? this.linkTitle\r\n\t\t\t\t\t\t\t\t\t\t: this.linkHref,\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t{...(!!this.tabNav\r\n\t\t\t\t\t\t\t? { tabindex: -1 }\r\n\t\t\t\t\t\t\t: { tabindex: 0 })}\r\n\t\t\t\t\t\ttitle={this.buttonTitle}\r\n\t\t\t\t\t\t{...(this.ariaLabel !== \"\"\r\n\t\t\t\t\t\t\t? { ariaLabel: this.ariaLabel }\r\n\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t{this.iconAnimation == \"reveal-down\" ? (\r\n\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t<div class=\"content\">\r\n\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"icon-wrapper\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"icon\">\r\n\t\t\t\t\t\t\t\t\t\t<slot name=\"slot-after-text\"></slot>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t<span>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-before-text\"></slot>\r\n\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t<slot name=\"slot-after-text\"></slot>\r\n\t\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</Tag>\r\n\t\t\t\t</div>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\trender() {\r\n\t\tif (this.seoCompatibilityMode) {\r\n\t\t\treturn this.seoCompRender();\r\n\t\t} else {\r\n\t\t\treturn this.standardRender();\r\n\t\t}\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.color]: true,\r\n\t\t\t[this.iconAnimation]: true,\r\n\t\t\t[this.iconPosition]: true,\r\n\t\t\t[\"disabled\"]: this.disabled ? true : false,\r\n\t\t\t[\"active\"]: this.active ? true : false,\r\n\t\t\t[this.textAlign]: true,\r\n\t\t\t[this.size]: true,\r\n\t\t\t[\"acc-alt-style\"]: this.enableAccessibilityAltStyle,\r\n\t\t\t[\"focus-state-dark-background\"]: this.darkFocusState,\r\n\t\t\t[this.ctaWidth]: true,\r\n\t\t};\r\n\t}\r\n}\r\n"],"version":3}

package/dist/components/{p-ClbXfq8R.js → p-Dx5dcQtA.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h } from './p-BvGlmU4v.js';
+import { c as proxyCustomElement, H, h } from './p-C2SefPLt.js';
 const ptcSkeletonCss = ".content{display:flex;align-items:center;justify-content:center;height:100%;}.placeholder{width:100%;height:100%;min-height:1em;background:linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.08) 100%);background-size:400% 100%}@keyframes loading{0%{background-position:200% 0}100%{background-position:-200% 0}}.animated .placeholder{animation:loading 2.5s ease-in-out infinite}@media (prefers-reduced-motion: reduce){.animated .placeholder{animation:none}}";
@@ -51,6 +51,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { PtcSkeleton as P, defineCustomElement as d };
-//# sourceMappingURL=p-ClbXfq8R.js.map
+//# sourceMappingURL=p-Dx5dcQtA.js.map
-//# sourceMappingURL=p-ClbXfq8R.js.map
+//# sourceMappingURL=p-Dx5dcQtA.js.map

package/dist/components/{p-ClbXfq8R.js.map → p-Dx5dcQtA.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~ClbXfq8R~~.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;MCO1gB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAEf,SAAS,GAAY,IAAI;IACzB,QAAQ,GAAY,KAAK;IACzB,KAAK,GAAW,MAAM;AACtB,IAAA,YAAY;IACZ,SAAS,GAAW,KAAK;IACzB,SAAS,GAAW,KAAK;IAEjC,MAAM,GAAA;AACL,QAAA,MAAM,iBAAiB,GACtB,IAAI,CAAC,YAAY;YACjB,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAC1D,2BAA2B,CAC3B;AACF,QAAA,QACC,4DACC,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EACrE,KAAK,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC5B,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,IACd,CAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAA,CACpC,KAEP,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACR,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-skeleton/ptc-skeleton.scss?tag=ptc-skeleton&encapsulation=shadow","src/components/molecules/ptc-skeleton/ptc-skeleton.tsx"],"sourcesContent":["/* :host {\r\n display: block;\r\n} /\r\n/ :root{\r\n --skeleton-text-border-radius: 5px;\r\n} /\r\n.content {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\theight: 100%;\r\n\t/ border-radius: 10px; /\r\n}\r\n\r\n.placeholder {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tmin-height: 1em;\r\n\tbackground: linear-gradient(\r\n\t\t90deg,\r\n\t\trgba(255, 255, 255, 0.08) 0%,\r\n\t\trgba(255, 255, 255, 0.04) 50%,\r\n\t\trgba(255, 255, 255, 0.08) 100%\r\n\t);\r\n\t/ background-size: 300%; */\r\n\tbackground-size: 400% 100%;\r\n}\r\n\r\n@keyframes loading {\r\n\t0% {\r\n\t\tbackground-position: 200% 0;\r\n\t}\r\n\r\n\t100% {\r\n\t\tbackground-position: -200% 0;\r\n\t}\r\n}\r\n\r\n.animated .placeholder {\r\n\tanimation: loading 2.5s ease-in-out infinite;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n\t.animated .placeholder {\r\n\t\tanimation: none;\r\n\t}\r\n}","import { Component, h, Prop, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n\ttag: \"ptc-skeleton\",\r\n\tstyleUrl: \"ptc-skeleton.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcSkeleton {\r\n\t@Element() el: HTMLElement;\r\n\t@Prop() isLoading: boolean = true;\r\n\t@Prop() animated: boolean = false;\r\n\t@Prop() width: string = \"100%\";\r\n\t@Prop() borderRadius: string;\r\n\t@Prop() topMargin: string = \"0px\";\r\n\t@Prop() btmMargin: string = \"0px\";\r\n\r\n\trender() {\r\n\t\tconst borderRadiusValue =\r\n\t\t\tthis.borderRadius \|\|\r\n\t\t\tgetComputedStyle(document.documentElement).getPropertyValue(\r\n\t\t\t\t\"--ptc-border-radius-large\",\r\n\t\t\t);\r\n\t\treturn (\r\n\t\t\t<div\r\n\t\t\t\tclass={`content ${this.animated && this.isLoading ? \"animated\" : \"\"}`}\r\n\t\t\t\tstyle={{\r\n\t\t\t\t\twidth: this.width,\r\n\t\t\t\t\tmarginTop: this.topMargin,\r\n\t\t\t\t\tmarginBottom: this.btmMargin,\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t{this.isLoading ? (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"placeholder\"\r\n\t\t\t\t\t\tstyle={{ borderRadius: borderRadiusValue }}\r\n\t\t\t\t\t></div>\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<slot />\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n}\r\n"],"version":3}
1	+ {"file":"p-Dx5dcQtA.js","mappings":";;AAAA,MAAM,cAAc,GAAG,ggBAAggB;;MCO1gB,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;;IAEf,SAAS,GAAY,IAAI;IACzB,QAAQ,GAAY,KAAK;IACzB,KAAK,GAAW,MAAM;AACtB,IAAA,YAAY;IACZ,SAAS,GAAW,KAAK;IACzB,SAAS,GAAW,KAAK;IAEjC,MAAM,GAAA;AACL,QAAA,MAAM,iBAAiB,GACtB,IAAI,CAAC,YAAY;YACjB,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAC1D,2BAA2B,CAC3B;AACF,QAAA,QACC,4DACC,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,SAAS,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EACrE,KAAK,EAAE;gBACN,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,YAAY,EAAE,IAAI,CAAC,SAAS;AAC5B,aAAA,EAAA,EAEA,IAAI,CAAC,SAAS,IACd,CAAA,CAAA,KAAA,EAAA,EACC,KAAK,EAAC,aAAa,EACnB,KAAK,EAAE,EAAE,YAAY,EAAE,iBAAiB,EAAE,EAAA,CACpC,KAEP,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACR,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-skeleton/ptc-skeleton.scss?tag=ptc-skeleton&encapsulation=shadow","src/components/molecules/ptc-skeleton/ptc-skeleton.tsx"],"sourcesContent":["/* :host {\r\n display: block;\r\n} /\r\n/ :root{\r\n --skeleton-text-border-radius: 5px;\r\n} /\r\n.content {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\theight: 100%;\r\n\t/ border-radius: 10px; /\r\n}\r\n\r\n.placeholder {\r\n\twidth: 100%;\r\n\theight: 100%;\r\n\tmin-height: 1em;\r\n\tbackground: linear-gradient(\r\n\t\t90deg,\r\n\t\trgba(255, 255, 255, 0.08) 0%,\r\n\t\trgba(255, 255, 255, 0.04) 50%,\r\n\t\trgba(255, 255, 255, 0.08) 100%\r\n\t);\r\n\t/ background-size: 300%; */\r\n\tbackground-size: 400% 100%;\r\n}\r\n\r\n@keyframes loading {\r\n\t0% {\r\n\t\tbackground-position: 200% 0;\r\n\t}\r\n\r\n\t100% {\r\n\t\tbackground-position: -200% 0;\r\n\t}\r\n}\r\n\r\n.animated .placeholder {\r\n\tanimation: loading 2.5s ease-in-out infinite;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n\t.animated .placeholder {\r\n\t\tanimation: none;\r\n\t}\r\n}","import { Component, h, Prop, Element } from \"@stencil/core\";\r\n\r\n@Component({\r\n\ttag: \"ptc-skeleton\",\r\n\tstyleUrl: \"ptc-skeleton.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcSkeleton {\r\n\t@Element() el: HTMLElement;\r\n\t@Prop() isLoading: boolean = true;\r\n\t@Prop() animated: boolean = false;\r\n\t@Prop() width: string = \"100%\";\r\n\t@Prop() borderRadius: string;\r\n\t@Prop() topMargin: string = \"0px\";\r\n\t@Prop() btmMargin: string = \"0px\";\r\n\r\n\trender() {\r\n\t\tconst borderRadiusValue =\r\n\t\t\tthis.borderRadius \|\|\r\n\t\t\tgetComputedStyle(document.documentElement).getPropertyValue(\r\n\t\t\t\t\"--ptc-border-radius-large\",\r\n\t\t\t);\r\n\t\treturn (\r\n\t\t\t<div\r\n\t\t\t\tclass={`content ${this.animated && this.isLoading ? \"animated\" : \"\"}`}\r\n\t\t\t\tstyle={{\r\n\t\t\t\t\twidth: this.width,\r\n\t\t\t\t\tmarginTop: this.topMargin,\r\n\t\t\t\t\tmarginBottom: this.btmMargin,\r\n\t\t\t\t}}\r\n\t\t\t>\r\n\t\t\t\t{this.isLoading ? (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"placeholder\"\r\n\t\t\t\t\t\tstyle={{ borderRadius: borderRadiusValue }}\r\n\t\t\t\t\t></div>\r\n\t\t\t\t) : (\r\n\t\t\t\t\t<slot />\r\n\t\t\t\t)}\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n}\r\n"],"version":3}

package/dist/components/{p-gC9OfbBZ.js → p-GJ6ZG3yB.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BvGlmU4v.js';
+import { c as proxyCustomElement, H, h, d as Host } from './p-C2SefPLt.js';
 const listItemCss = ":host(.list-primary){display:block}:host(.flush-before) li::before{content:\"\" !important}:host(.breadcrumb){display:inline-block}:host(.breadcrumb) li{position:relative;display:inline-block;color:var(--color-white);font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-xxx-small);line-height:var(--ptc-line-height-densest);display:flex;align-items:baseline}:host(.breadcrumb) li::before{content:\"/\";top:0;left:0;margin-left:2px}:host(.breadcrumb) li a.item-link{color:var(--color-white);font-weight:var(--ptc-font-weight-bold) !important;font-size:var(--ptc-font-size-xxx-small) !important;line-height:var(--ptc-line-height-densest);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:2px;text-decoration-thickness:1px;outline:none;transition:text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout)}:host(.breadcrumb) li a.item-link:hover{text-decoration:underline;text-decoration-color:var(--color-green-07);outline:none}:host(.breadcrumb) li a.item-link:focus-visible{transition:none;border-radius:var(--ptc-border-radius-standard);border:2px solid rgb(255, 255, 255);outline:5px solid var(--keyboard-nav-outline);padding-bottom:5px;padding-right:5px}:host(.breadcrumb-center) li{display:inline}:host(.list-green){display:block;margin-bottom:16px}:host(.list-green) li a{font-size:var(--ptc-font-size-xx-small);color:var(--color-gray-10);text-decoration:underline;text-decoration-thickness:1.5px;text-decoration-color:var(--color-green-04);font-weight:var(--ptc-font-weight-bold);transition:color var(--ptc-transition-medium) var(--ptc-ease-inout);line-height:var(--ptc-line-height-p);text-underline-offset:4px}:host(.list-green) li a:hover{color:var(--color-green-04)}:host(:not(.flush-before)) li::before{margin-right:2px}:host(.list-footer) li{display:inline-block;font-size:var(--ptc-font-size-xx-small);font-weight:var(--ptc-font-weight-regular);font-style:normal;font-stretch:normal;line-height:var(--ptc-line-height-denser);letter-spacing:normal;color:var(--color-white);margin:0 0.5rem}:host(.list-footer) li a{color:var(--color-white-grey);border-bottom:1px solid transparent;display:inline-block;text-decoration:none}:host(.list-footer) li a:hover,:host(.list-footer) li a:focus{text-decoration:none;border-bottom:1px solid var(--color-green-06);color:var(--color-white-grey);transition:border var(--ptc-ease-inout) var(--ptc-transition-medium)}:host(.list-footer) li a:active{text-decoration:none;border-bottom:1px solid var(--color-green-06);color:var(--color-white-grey)}:host(.list-footer) li a:focus{outline:3px solid var(--color-blue-07);outline-offset:2px;border-radius:var(--ptc-border-radius-standard);text-decoration:none;border-color:transparent !important}:host(.list-footer) li a:focus-visible{border-radius:var(--ptc-border-radius-standard);border:2px solid rgb(255, 255, 255);outline:5px solid var(--keyboard-nav-outline);transition:none !important;border-color:white !important}:host(.white) li{color:var(--color-white)}:host(.white) li a.item-link{color:var(--color-white)}:host(.light-gray) li{color:var(--color-gray-01)}:host(.light-gray) li a.item-link{color:var(--color-gray-01)}:host(.primary-gray) li{color:var(--color-gray-10)}:host(.primary-gray) li a.item-link{color:var(--color-gray-10)}:host(.list-underline) li{color:var(--color-gray-10);list-style:none;-webkit-text-decoration:underline 1px solid;text-decoration:underline 1px solid;text-underline-offset:2px;line-height:var(--ptc-line-height-p)}:host(.list-underline) li a{display:inline-block;padding:4px 0}:host(.list-underline) li a.item-link{color:var(--color-gray-10)}:host(.list-underline) li a:focus-visible{border-radius:var(--ptc-border-radius-standard);outline:5px solid var(--keyboard-nav-outline)}:host li .has-before-home-icon{display:block}@media only screen and (min-width: 480px){:host li .has-before-home-icon{display:none}}";
@@ -81,6 +81,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { ListItem as L, defineCustomElement as d };
-//# sourceMappingURL=p-gC9OfbBZ.js.map
+//# sourceMappingURL=p-GJ6ZG3yB.js.map
-//# sourceMappingURL=p-gC9OfbBZ.js.map
+//# sourceMappingURL=p-GJ6ZG3yB.js.map

package/dist/components/{p-gC9OfbBZ.js.map → p-GJ6ZG3yB.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~gC9OfbBZ~~.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+zHAA+zH;;MCQt0H,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;IACZ,QAAQ,GAKM,cAAc;IAE5B,QAAQ,GAAY,SAAS;IAE7B,WAAW,GAAY,KAAK;IAE5B,UAAU,GAAuB,OAAO;IAExC,iBAAiB,GAAY,KAAK;AAElC,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEI;AACI,IAAA,MAAM;;IAGN,SAAS,GAAW,EAAE;;IAI9B,MAAM,GAAA;AACL,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE;QACtC,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,QAAQ,EAAA,EACnB,IAAI,CAAC,MAAM,IAAI,gEAAQ,IAAI,CAAC,MAAM,CAAS,EAC5C,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,SAAS,EAEpB,EAAA,IAAI,CAAC,QAAQ,IACb,CAAA,CAAA,GAAA,EAAA,EACC,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,IAClB,IAAI,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAA,IAC7C,IAAI,CAAC,SAAS,KAAK;AACvB,kBAAE,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS;AAChC,kBAAE,EAAE,CAAC,EACN,QAAQ,EAAC,GAAG,EAAA,EAEZ,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACV,KAEJ,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACb,CACG,CACC;;IAID,cAAc,GAAA;QACrB,IAAI,QAAQ,GAAG,KAAK;QACpB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE;AACvD,YAAA,IAAI;gBACH,QAAQ;oBACP,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAChD,QAAQ,CACR;wBACD,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,KAAK,gBAAgB;;YAC3D,OAAO,GAAG,EAAE;AACb,gBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;;;QAGlB,OAAO;AACN,YAAA,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI;AACrB,YAAA,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,KAAK;AACjD,YAAA,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK;YACzC,CAAC,mBAAmB,GAAG,QAAQ;YAC/B,CAAC,WAAW,GAAG,IAAI;SACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/list-item/list-item.scss?tag=list-item&encapsulation=shadow","src/components/atoms/list-item/list-item.tsx"],"sourcesContent":["@use 'mixins' as ;\r\n:host(.list-primary) {\r\n display: block;\r\n}\r\n\r\n:host(.flush-before) {\r\n li::before {\r\n content: '' !important;\r\n }\r\n}\r\n\r\n:host(.breadcrumb) {\r\n display: inline-block;\r\n\r\n li {\r\n position: relative;\r\n display: inline-block;\r\n color: var(--color-white);\r\n font-weight: var(--ptc-font-weight-bold);\r\n font-size: var(--ptc-font-size-xxx-small);\r\n line-height: var(--ptc-line-height-densest);\r\n display: flex;\r\n align-items: baseline;\r\n &::before {\r\n content: '/';\r\n top: 0;\r\n left: 0;\r\n margin-left: 2px;\r\n }\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-white);\r\n font-weight: var(--ptc-font-weight-bold) !important;\r\n font-size: var(--ptc-font-size-xxx-small) !important;\r\n line-height: var(--ptc-line-height-densest);\r\n text-decoration: underline;\r\n text-decoration-color: transparent;\r\n text-underline-offset: 2px;\r\n text-decoration-thickness: 1px;\r\n outline: none;\r\n transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n text-decoration-color: var(--color-green-07);\r\n outline: none;\r\n }\r\n &:focus-visible {\r\n transition: none;\r\n @include focus-state;\r\n padding-bottom: 5px;\r\n padding-right: 5px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.breadcrumb-center) {\r\n li {\r\n display: inline;\r\n }\r\n}\r\n\r\n:host(.list-green) {\r\n display: block;\r\n margin-bottom: 16px;\r\n\r\n li {\r\n a {\r\n font-size: var(--ptc-font-size-xx-small);\r\n color: var(--color-gray-10);\r\n text-decoration: underline;\r\n text-decoration-thickness: 1.5px;\r\n text-decoration-color: var(--color-green-04);\r\n font-weight: var(--ptc-font-weight-bold);\r\n transition: color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n line-height: var(--ptc-line-height-p);\r\n text-underline-offset: 4px;\r\n\r\n &:hover {\r\n color: var(--color-green-04);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(:not(.flush-before)) {\r\n li::before {\r\n margin-right: 2px;\r\n }\r\n}\r\n\r\n:host(.list-footer) {\r\n li {\r\n display: inline-block;\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-weight: var(--ptc-font-weight-regular);\r\n font-style: normal;\r\n font-stretch: normal;\r\n line-height: var(--ptc-line-height-denser);\r\n letter-spacing: normal;\r\n color: var(--color-white);\r\n margin: 0 0.5rem;\r\n\r\n a {\r\n color: var(--color-white-grey);\r\n border-bottom: 1px solid transparent;\r\n display: inline-block;\r\n text-decoration: none;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n border-bottom: 1px solid var(--color-green-06);\r\n color: var(--color-white-grey);\r\n transition: border var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n }\r\n\r\n &:active {\r\n text-decoration: none;\r\n border-bottom: 1px solid var(--color-green-06);\r\n color: var(--color-white-grey);\r\n }\r\n\r\n &:focus {\r\n outline: 3px solid var(--color-blue-07);\r\n outline-offset: 2px;\r\n border-radius: var(--ptc-border-radius-standard);\r\n text-decoration: none;\r\n border-color: transparent !important;\r\n }\r\n &:focus-visible {\r\n @include focus-state;\r\n transition: none !important;\r\n border-color: white !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.white) {\r\n li {\r\n color: var(--color-white);\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-white);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.light-gray) {\r\n li {\r\n color: var(--color-gray-01);\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-gray-01);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.primary-gray) {\r\n li {\r\n color: var(--color-gray-10);\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-gray-10);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.list-underline) {\r\n li {\r\n color: var(--color-gray-10);\r\n list-style: none;\r\n text-decoration: underline 1px solid;\r\n text-underline-offset: 2px;\r\n line-height: var(--ptc-line-height-p);\r\n a {\r\n display: inline-block;\r\n padding: 4px 0;\r\n &.item-link {\r\n color: var(--color-gray-10);\r\n }\r\n &:focus-visible {\r\n @include base-focus-state;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host {\r\n li {\r\n .has-before-home-icon {\r\n display: block;\r\n @include screen-xs {\r\n display: none;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n\ttag: \"list-item\",\r\n\tstyleUrl: \"list-item.scss\",\r\n\tshadow: true,\r\n})\r\nexport class ListItem {\r\n\t@Prop() listType:\r\n\t\t\| \"list-primary\"\r\n\t\t\| \"list-footer\"\r\n\t\t\| \"breadcrumb\"\r\n\t\t\| \"list-green\"\r\n\t\t\| \"list-underline\" = \"list-primary\";\r\n\r\n\t@Prop() linkHref?: string = undefined;\r\n\r\n\t@Prop() flushBefore: boolean = false;\r\n\r\n\t@Prop() linkTarget: string \| undefined = \"_self\";\r\n\r\n\t@Prop() hasBeforeHomeIcon: boolean = false;\r\n\r\n\t@Prop() trackerId: string;\r\n\r\n\t/\r\n\t Theme color\r\n\t /\r\n\t@Prop() color?: \"white\" \| \"primary-gray\" \| \"light-gray\";\r\n\r\n\t/\r\n\t (optional) Injected CSS styles\r\n\t */\r\n\t@Prop() styles?: string;\r\n\r\n\t// Properties for accessibilty / aria\r\n\t@Prop() ariaLabel: string = \"\";\r\n\r\n\t@Element() hostElement: HTMLElement;\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\treturn (\r\n\t\t\t<Host class={classMap}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<li id={this.trackerId}>\r\n\t\t\t\t\t{/ {this.hasBeforeHomeIcon ? <icon-asset class=\"has-before-home-icon\" type=\"ptc\" size=\"medium\" name=\"icon-home\" color={this.color}></icon-asset> : null} */}\r\n\t\t\t\t\t{this.linkHref ? (\r\n\t\t\t\t\t\t<a\r\n\t\t\t\t\t\t\tclass=\"item-link\"\r\n\t\t\t\t\t\t\ttarget={this.linkTarget}\r\n\t\t\t\t\t\t\t{...(this.linkHref ? { href: this.linkHref } : {})}\r\n\t\t\t\t\t\t\t{...(this.ariaLabel !== \"\"\r\n\t\t\t\t\t\t\t\t? { \"aria-label\": this.ariaLabel }\r\n\t\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</li>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\tlet bcEnable = false;\r\n\t\tif (this.hostElement && this.hostElement.parentElement) {\r\n\t\t\ttry {\r\n\t\t\t\tbcEnable =\r\n\t\t\t\t\tthis.hostElement.parentElement.classList.contains(\r\n\t\t\t\t\t\t\"center\",\r\n\t\t\t\t\t) &&\r\n\t\t\t\t\tthis.hostElement.parentElement.tagName === \"PTC-BREADCRUMB\";\r\n\t\t\t} catch (err) {\r\n\t\t\t\tconsole.log(err);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn {\r\n\t\t\t[this.listType]: true,\r\n\t\t\t[\"flush-before\"]: this.flushBefore ? true : false,\r\n\t\t\t[this.color]: !!this.color ? true : false,\r\n\t\t\t[\"breadcrumb-center\"]: bcEnable,\r\n\t\t\t[\"mf-listen\"]: true,\r\n\t\t};\r\n\t}\r\n}\r\n"],"version":3}
1	+ {"file":"p-GJ6ZG3yB.js","mappings":";;AAAA,MAAM,WAAW,GAAG,+zHAA+zH;;MCQt0H,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;IACZ,QAAQ,GAKM,cAAc;IAE5B,QAAQ,GAAY,SAAS;IAE7B,WAAW,GAAY,KAAK;IAE5B,UAAU,GAAuB,OAAO;IAExC,iBAAiB,GAAY,KAAK;AAElC,IAAA,SAAS;AAEjB;;AAEG;AACK,IAAA,KAAK;AAEb;;AAEI;AACI,IAAA,MAAM;;IAGN,SAAS,GAAW,EAAE;;IAI9B,MAAM,GAAA;AACL,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE;QACtC,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,QAAQ,EAAA,EACnB,IAAI,CAAC,MAAM,IAAI,gEAAQ,IAAI,CAAC,MAAM,CAAS,EAC5C,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAE,IAAI,CAAC,SAAS,EAEpB,EAAA,IAAI,CAAC,QAAQ,IACb,CAAA,CAAA,GAAA,EAAA,EACC,KAAK,EAAC,WAAW,EACjB,MAAM,EAAE,IAAI,CAAC,UAAU,EAAA,IAClB,IAAI,CAAC,QAAQ,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAA,IAC7C,IAAI,CAAC,SAAS,KAAK;AACvB,kBAAE,EAAE,YAAY,EAAE,IAAI,CAAC,SAAS;AAChC,kBAAE,EAAE,CAAC,EACN,QAAQ,EAAC,GAAG,EAAA,EAEZ,CAAa,CAAA,MAAA,EAAA,IAAA,CAAA,CACV,KAEJ,CAAA,CAAA,MAAA,EAAA,IAAA,CAAa,CACb,CACG,CACC;;IAID,cAAc,GAAA;QACrB,IAAI,QAAQ,GAAG,KAAK;QACpB,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE;AACvD,YAAA,IAAI;gBACH,QAAQ;oBACP,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,SAAS,CAAC,QAAQ,CAChD,QAAQ,CACR;wBACD,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,KAAK,gBAAgB;;YAC3D,OAAO,GAAG,EAAE;AACb,gBAAA,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC;;;QAGlB,OAAO;AACN,YAAA,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI;AACrB,YAAA,CAAC,cAAc,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,GAAG,KAAK;AACjD,YAAA,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK;YACzC,CAAC,mBAAmB,GAAG,QAAQ;YAC/B,CAAC,WAAW,GAAG,IAAI;SACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/list-item/list-item.scss?tag=list-item&encapsulation=shadow","src/components/atoms/list-item/list-item.tsx"],"sourcesContent":["@use 'mixins' as ;\r\n:host(.list-primary) {\r\n display: block;\r\n}\r\n\r\n:host(.flush-before) {\r\n li::before {\r\n content: '' !important;\r\n }\r\n}\r\n\r\n:host(.breadcrumb) {\r\n display: inline-block;\r\n\r\n li {\r\n position: relative;\r\n display: inline-block;\r\n color: var(--color-white);\r\n font-weight: var(--ptc-font-weight-bold);\r\n font-size: var(--ptc-font-size-xxx-small);\r\n line-height: var(--ptc-line-height-densest);\r\n display: flex;\r\n align-items: baseline;\r\n &::before {\r\n content: '/';\r\n top: 0;\r\n left: 0;\r\n margin-left: 2px;\r\n }\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-white);\r\n font-weight: var(--ptc-font-weight-bold) !important;\r\n font-size: var(--ptc-font-size-xxx-small) !important;\r\n line-height: var(--ptc-line-height-densest);\r\n text-decoration: underline;\r\n text-decoration-color: transparent;\r\n text-underline-offset: 2px;\r\n text-decoration-thickness: 1px;\r\n outline: none;\r\n transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n text-decoration-color: var(--color-green-07);\r\n outline: none;\r\n }\r\n &:focus-visible {\r\n transition: none;\r\n @include focus-state;\r\n padding-bottom: 5px;\r\n padding-right: 5px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.breadcrumb-center) {\r\n li {\r\n display: inline;\r\n }\r\n}\r\n\r\n:host(.list-green) {\r\n display: block;\r\n margin-bottom: 16px;\r\n\r\n li {\r\n a {\r\n font-size: var(--ptc-font-size-xx-small);\r\n color: var(--color-gray-10);\r\n text-decoration: underline;\r\n text-decoration-thickness: 1.5px;\r\n text-decoration-color: var(--color-green-04);\r\n font-weight: var(--ptc-font-weight-bold);\r\n transition: color var(--ptc-transition-medium) var(--ptc-ease-inout);\r\n line-height: var(--ptc-line-height-p);\r\n text-underline-offset: 4px;\r\n\r\n &:hover {\r\n color: var(--color-green-04);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(:not(.flush-before)) {\r\n li::before {\r\n margin-right: 2px;\r\n }\r\n}\r\n\r\n:host(.list-footer) {\r\n li {\r\n display: inline-block;\r\n font-size: var(--ptc-font-size-xx-small);\r\n font-weight: var(--ptc-font-weight-regular);\r\n font-style: normal;\r\n font-stretch: normal;\r\n line-height: var(--ptc-line-height-denser);\r\n letter-spacing: normal;\r\n color: var(--color-white);\r\n margin: 0 0.5rem;\r\n\r\n a {\r\n color: var(--color-white-grey);\r\n border-bottom: 1px solid transparent;\r\n display: inline-block;\r\n text-decoration: none;\r\n\r\n &:hover,\r\n &:focus {\r\n text-decoration: none;\r\n border-bottom: 1px solid var(--color-green-06);\r\n color: var(--color-white-grey);\r\n transition: border var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n }\r\n\r\n &:active {\r\n text-decoration: none;\r\n border-bottom: 1px solid var(--color-green-06);\r\n color: var(--color-white-grey);\r\n }\r\n\r\n &:focus {\r\n outline: 3px solid var(--color-blue-07);\r\n outline-offset: 2px;\r\n border-radius: var(--ptc-border-radius-standard);\r\n text-decoration: none;\r\n border-color: transparent !important;\r\n }\r\n &:focus-visible {\r\n @include focus-state;\r\n transition: none !important;\r\n border-color: white !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.white) {\r\n li {\r\n color: var(--color-white);\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-white);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.light-gray) {\r\n li {\r\n color: var(--color-gray-01);\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-gray-01);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.primary-gray) {\r\n li {\r\n color: var(--color-gray-10);\r\n\r\n a {\r\n &.item-link {\r\n color: var(--color-gray-10);\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host(.list-underline) {\r\n li {\r\n color: var(--color-gray-10);\r\n list-style: none;\r\n text-decoration: underline 1px solid;\r\n text-underline-offset: 2px;\r\n line-height: var(--ptc-line-height-p);\r\n a {\r\n display: inline-block;\r\n padding: 4px 0;\r\n &.item-link {\r\n color: var(--color-gray-10);\r\n }\r\n &:focus-visible {\r\n @include base-focus-state;\r\n }\r\n }\r\n }\r\n}\r\n\r\n:host {\r\n li {\r\n .has-before-home-icon {\r\n display: block;\r\n @include screen-xs {\r\n display: none;\r\n }\r\n }\r\n }\r\n}\r\n","import { Component, Host, h, Prop, Element } from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n\ttag: \"list-item\",\r\n\tstyleUrl: \"list-item.scss\",\r\n\tshadow: true,\r\n})\r\nexport class ListItem {\r\n\t@Prop() listType:\r\n\t\t\| \"list-primary\"\r\n\t\t\| \"list-footer\"\r\n\t\t\| \"breadcrumb\"\r\n\t\t\| \"list-green\"\r\n\t\t\| \"list-underline\" = \"list-primary\";\r\n\r\n\t@Prop() linkHref?: string = undefined;\r\n\r\n\t@Prop() flushBefore: boolean = false;\r\n\r\n\t@Prop() linkTarget: string \| undefined = \"_self\";\r\n\r\n\t@Prop() hasBeforeHomeIcon: boolean = false;\r\n\r\n\t@Prop() trackerId: string;\r\n\r\n\t/\r\n\t Theme color\r\n\t /\r\n\t@Prop() color?: \"white\" \| \"primary-gray\" \| \"light-gray\";\r\n\r\n\t/\r\n\t (optional) Injected CSS styles\r\n\t */\r\n\t@Prop() styles?: string;\r\n\r\n\t// Properties for accessibilty / aria\r\n\t@Prop() ariaLabel: string = \"\";\r\n\r\n\t@Element() hostElement: HTMLElement;\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\treturn (\r\n\t\t\t<Host class={classMap}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<li id={this.trackerId}>\r\n\t\t\t\t\t{/ {this.hasBeforeHomeIcon ? <icon-asset class=\"has-before-home-icon\" type=\"ptc\" size=\"medium\" name=\"icon-home\" color={this.color}></icon-asset> : null} */}\r\n\t\t\t\t\t{this.linkHref ? (\r\n\t\t\t\t\t\t<a\r\n\t\t\t\t\t\t\tclass=\"item-link\"\r\n\t\t\t\t\t\t\ttarget={this.linkTarget}\r\n\t\t\t\t\t\t\t{...(this.linkHref ? { href: this.linkHref } : {})}\r\n\t\t\t\t\t\t\t{...(this.ariaLabel !== \"\"\r\n\t\t\t\t\t\t\t\t? { \"aria-label\": this.ariaLabel }\r\n\t\t\t\t\t\t\t\t: {})}\r\n\t\t\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t</a>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</li>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\tlet bcEnable = false;\r\n\t\tif (this.hostElement && this.hostElement.parentElement) {\r\n\t\t\ttry {\r\n\t\t\t\tbcEnable =\r\n\t\t\t\t\tthis.hostElement.parentElement.classList.contains(\r\n\t\t\t\t\t\t\"center\",\r\n\t\t\t\t\t) &&\r\n\t\t\t\t\tthis.hostElement.parentElement.tagName === \"PTC-BREADCRUMB\";\r\n\t\t\t} catch (err) {\r\n\t\t\t\tconsole.log(err);\r\n\t\t\t}\r\n\t\t}\r\n\t\treturn {\r\n\t\t\t[this.listType]: true,\r\n\t\t\t[\"flush-before\"]: this.flushBefore ? true : false,\r\n\t\t\t[this.color]: !!this.color ? true : false,\r\n\t\t\t[\"breadcrumb-center\"]: bcEnable,\r\n\t\t\t[\"mf-listen\"]: true,\r\n\t\t};\r\n\t}\r\n}\r\n"],"version":3}

package/dist/components/{p-DpJkvZ-n.js → p-MZCUZNNi.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BvGlmU4v.js';
+import { c as proxyCustomElement, H, h, d as Host } from './p-C2SefPLt.js';
 const ptcTooltipV2Css = ":host(.block){display:block}:host(.inline-block){display:inline-block}:host(.inline){display:inline}.tooltip-container{display:inherit;position:relative}.tooltip-text{width:100%}.description{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.tooltip-content{display:none;position:absolute;padding:8px;color:var(--color-white);font-size:var(--ptc-font-size-xxx-small);font-weight:var(--ptc-font-weight-semibold);background:var(--color-gray-09);box-shadow:0px 2px 4px rgba(0, 0, 0, 0.3);border:none;border-radius:2px;width:auto;height:-moz-fit-content;height:fit-content;text-align:left;text-shadow:none;white-space:normal}@media only screen and (min-width: 480px){.tooltip-content{width:273px}}.tooltip-content::after{content:\" \";position:absolute;top:1px;left:50%;transform:translate(-50%, -100%);border:8px solid transparent;border-bottom:8px solid var(--color-gray-09)}.tooltip-content.bottom{transform:translate(50%, 12px)}.tooltip-content.top::after{top:auto;bottom:0;left:50%;transform:translate(-50%, 100%);border-top:8px solid var(--color-gray-09);border-bottom:unset}.tooltip-content.top{transform:translate(-50%, 0%);top:-70%;left:50%}.tooltip-content.left::after{left:5%}.tooltip-content.left{transform:translate(95%, 12px)}.tooltip-content.right{bottom:-12px;transform:translateY(100%);right:0px}.tooltip-container.with-tip:hover .tooltip-content{display:block}@media (max-width: 767px){.hide-on-mobile .tooltip-content{display:none !important}}";
@@ -107,6 +107,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { PtcTooltipV2 as P, defineCustomElement as d };
-//# sourceMappingURL=p-DpJkvZ-n.js.map
+//# sourceMappingURL=p-MZCUZNNi.js.map
-//# sourceMappingURL=p-DpJkvZ-n.js.map
+//# sourceMappingURL=p-MZCUZNNi.js.map

package/dist/components/{p-DpJkvZ-n.js.map → p-MZCUZNNi.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~DpJkvZ-n~~.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/ptc-tooltip-v2/ptc-tooltip-v2.scss?tag=ptc-tooltip-v2&encapsulation=shadow","src/components/atoms/ptc-tooltip-v2/ptc-tooltip-v2.tsx"],"sourcesContent":["@use 'mixins' as ;\r\n:host(.block) {\r\n display: block;\r\n}\r\n:host(.inline-block) {\r\n display: inline-block;\r\n}\r\n:host(.inline) {\r\n display: inline;\r\n}\r\n\r\n.tooltip-container {\r\n display: inherit;\r\n position: relative;\r\n}\r\n\r\n.tooltip-text {\r\n width: 100%;\r\n}\r\n\r\n.description {\r\n display: -webkit-box;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.tooltip-content {\r\n display: none;\r\n position: absolute;\r\n padding: 8px;\r\n color: var(--color-white);\r\n font-size: var(--ptc-font-size-xxx-small);\r\n font-weight: var(--ptc-font-weight-semibold);\r\n background: var(--color-gray-09);\r\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\r\n border: none;\r\n border-radius: 2px;\r\n width: auto;\r\n height: fit-content;\r\n text-align: left;\r\n text-shadow: none;\r\n white-space: normal;\r\n\r\n @include screen-xs {\r\n width: 273px;\r\n }\r\n\r\n &::after {\r\n content: ' ';\r\n position: absolute;\r\n top: 1px;\r\n left: 50%;\r\n transform: translate(-50%, -100%);\r\n border: 8px solid transparent;\r\n border-bottom: 8px solid var(--color-gray-09);\r\n }\r\n\r\n &.bottom {\r\n transform: translate(50%, 12px);\r\n }\r\n\r\n &.top {\r\n &::after {\r\n top: auto;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translate(-50%, 100%);\r\n border-top: 8px solid var(--color-gray-09);\r\n border-bottom: unset;\r\n }\r\n\r\n transform: translate(-50%, 0%);\r\n top: -70%;\r\n left: 50%;\r\n }\r\n\r\n &.left {\r\n &::after {\r\n left: 5%;\r\n }\r\n\r\n transform: translate(95%, 12px);\r\n }\r\n\r\n &.right {\r\n bottom: -12px;\r\n transform: translateY(100%);\r\n right: 0px;\r\n }\r\n}\r\n\r\n.tooltip-container.with-tip:hover .tooltip-content {\r\n display: block;\r\n}\r\n\r\n.hide-on-mobile {\r\n @media (max-width: 767px) {\r\n .tooltip-content {\r\n display: none !important;\r\n }\r\n }\r\n}\r\n","import {\r\n\tComponent,\r\n\tProp,\r\n\tState,\r\n\tElement,\r\n\th,\r\n\tListen,\r\n\tHost,\r\n} from \"@stencil/core\";\r\n\r\n@Component({\r\n\ttag: \"ptc-tooltip-v2\",\r\n\tstyleUrl: \"ptc-tooltip-v2.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcTooltipV2 {\r\n\t@Element() el: HTMLElement;\r\n\t@Prop() elementDisplay: \"block\" \| \"inline-block\" \| \"inline\" = \"block\";\r\n\t@Prop() maxLength: number = 45;\r\n\t@Prop() maxLines: number;\r\n\t@Prop() zIndex: number = 1000;\r\n\t@Prop() width: \"full-width\" \| \"default\" = \"default\";\r\n\t@Prop() position: \"top\" \| \"bottom\" \| \"left\" \| \"right\" = \"bottom\";\r\n\t@Prop() hideOnMobile: boolean = false;\r\n\t@State() fullText: string = \"\";\r\n\t@State() displayText: string = \"\";\r\n\t@State() showTip: boolean = false;\r\n\t/\r\n\t (optional) Injected CSS Styles\r\n\t */\r\n\t@Prop() styles?: string;\r\n\t@Listen(\"slotchange\")\r\n\tslotChangeHandler(event: Event) {\r\n\t\tconst slot = event.target as HTMLSlotElement;\r\n\t\tconst nodes = slot.assignedNodes({ flatten: true });\r\n\t\tthis.fullText = nodes.map((node) => node.textContent).join(\"\");\r\n\t\tthis.processText();\r\n\t}\r\n\tcomponentWillLoad() {\r\n\t\t// Process text initially in case slotchange does not fire on load\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tthis.processText(true);\r\n\t\t});\r\n\t}\r\n\tprocessText(initial: boolean = false) {\r\n\t\tif (initial) {\r\n\t\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\");\r\n\t\t\tif (slot) {\r\n\t\t\t\tconst nodes = slot.assignedNodes({ flatten: true });\r\n\t\t\t\tthis.fullText = nodes\r\n\t\t\t\t\t.map((node) => node.textContent)\r\n\t\t\t\t\t.join(\"\")\r\n\t\t\t\t\t.trim();\r\n\t\t\t}\r\n\t\t}\r\n\t\tthis.displayText = this.fullText;\r\n\r\n\t\tif (\r\n\t\t\tthis.fullText.length > this.maxLength &&\r\n\t\t\tthis.maxLines === undefined\r\n\t\t) {\r\n\t\t\tconst trimmedText = this.fullText\r\n\t\t\t\t.substring(0, this.maxLength)\r\n\t\t\t\t.trim();\r\n\t\t\tconst lastSpace = trimmedText.lastIndexOf(\" \");\r\n\t\t\tthis.displayText = trimmedText.substring(0, lastSpace) + \"...\";\r\n\t\t\tthis.showTip = true;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst style = {\r\n\t\t\tzIndex: this.zIndex.toString(),\r\n\t\t\twidth: this.width === \"full-width\" ? \"100%\" : \"auto\",\r\n\t\t\toverflow: \"hidden\",\r\n\t\t\tdisplay: this.maxLines ? \"-webkit-box !important\" : \"inherit\",\r\n\t\t\tWebkitBoxOrient: \"vertical\",\r\n\t\t\tWebkitLineClamp: this.maxLines ? this.maxLines.toString() : \"none\",\r\n\t\t};\r\n\t\tconst tooltipClass = {\r\n\t\t\t\"tooltip-container\": true,\r\n\t\t\t\"with-tip\": this.showTip, // Conditionally applying the 'with-tip' class\r\n\t\t};\r\n\t\treturn (\r\n\t\t\t<Host class={this.elementDisplay}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass={tooltipClass}\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\tzIndex: this.zIndex.toString(),\r\n\t\t\t\t\t\twidth: this.width === \"full-width\" ? \"100%\" : \"auto\",\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<div class=\"tooltip-text\" style={style}>\r\n\t\t\t\t\t\t{this.displayText}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class={`tooltip-content ${this.position}`}>\r\n\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n}\r\n"],"version":3}
1	+ {"file":"p-MZCUZNNi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/ptc-tooltip-v2/ptc-tooltip-v2.scss?tag=ptc-tooltip-v2&encapsulation=shadow","src/components/atoms/ptc-tooltip-v2/ptc-tooltip-v2.tsx"],"sourcesContent":["@use 'mixins' as ;\r\n:host(.block) {\r\n display: block;\r\n}\r\n:host(.inline-block) {\r\n display: inline-block;\r\n}\r\n:host(.inline) {\r\n display: inline;\r\n}\r\n\r\n.tooltip-container {\r\n display: inherit;\r\n position: relative;\r\n}\r\n\r\n.tooltip-text {\r\n width: 100%;\r\n}\r\n\r\n.description {\r\n display: -webkit-box;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.tooltip-content {\r\n display: none;\r\n position: absolute;\r\n padding: 8px;\r\n color: var(--color-white);\r\n font-size: var(--ptc-font-size-xxx-small);\r\n font-weight: var(--ptc-font-weight-semibold);\r\n background: var(--color-gray-09);\r\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);\r\n border: none;\r\n border-radius: 2px;\r\n width: auto;\r\n height: fit-content;\r\n text-align: left;\r\n text-shadow: none;\r\n white-space: normal;\r\n\r\n @include screen-xs {\r\n width: 273px;\r\n }\r\n\r\n &::after {\r\n content: ' ';\r\n position: absolute;\r\n top: 1px;\r\n left: 50%;\r\n transform: translate(-50%, -100%);\r\n border: 8px solid transparent;\r\n border-bottom: 8px solid var(--color-gray-09);\r\n }\r\n\r\n &.bottom {\r\n transform: translate(50%, 12px);\r\n }\r\n\r\n &.top {\r\n &::after {\r\n top: auto;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translate(-50%, 100%);\r\n border-top: 8px solid var(--color-gray-09);\r\n border-bottom: unset;\r\n }\r\n\r\n transform: translate(-50%, 0%);\r\n top: -70%;\r\n left: 50%;\r\n }\r\n\r\n &.left {\r\n &::after {\r\n left: 5%;\r\n }\r\n\r\n transform: translate(95%, 12px);\r\n }\r\n\r\n &.right {\r\n bottom: -12px;\r\n transform: translateY(100%);\r\n right: 0px;\r\n }\r\n}\r\n\r\n.tooltip-container.with-tip:hover .tooltip-content {\r\n display: block;\r\n}\r\n\r\n.hide-on-mobile {\r\n @media (max-width: 767px) {\r\n .tooltip-content {\r\n display: none !important;\r\n }\r\n }\r\n}\r\n","import {\r\n\tComponent,\r\n\tProp,\r\n\tState,\r\n\tElement,\r\n\th,\r\n\tListen,\r\n\tHost,\r\n} from \"@stencil/core\";\r\n\r\n@Component({\r\n\ttag: \"ptc-tooltip-v2\",\r\n\tstyleUrl: \"ptc-tooltip-v2.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcTooltipV2 {\r\n\t@Element() el: HTMLElement;\r\n\t@Prop() elementDisplay: \"block\" \| \"inline-block\" \| \"inline\" = \"block\";\r\n\t@Prop() maxLength: number = 45;\r\n\t@Prop() maxLines: number;\r\n\t@Prop() zIndex: number = 1000;\r\n\t@Prop() width: \"full-width\" \| \"default\" = \"default\";\r\n\t@Prop() position: \"top\" \| \"bottom\" \| \"left\" \| \"right\" = \"bottom\";\r\n\t@Prop() hideOnMobile: boolean = false;\r\n\t@State() fullText: string = \"\";\r\n\t@State() displayText: string = \"\";\r\n\t@State() showTip: boolean = false;\r\n\t/\r\n\t (optional) Injected CSS Styles\r\n\t */\r\n\t@Prop() styles?: string;\r\n\t@Listen(\"slotchange\")\r\n\tslotChangeHandler(event: Event) {\r\n\t\tconst slot = event.target as HTMLSlotElement;\r\n\t\tconst nodes = slot.assignedNodes({ flatten: true });\r\n\t\tthis.fullText = nodes.map((node) => node.textContent).join(\"\");\r\n\t\tthis.processText();\r\n\t}\r\n\tcomponentWillLoad() {\r\n\t\t// Process text initially in case slotchange does not fire on load\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tthis.processText(true);\r\n\t\t});\r\n\t}\r\n\tprocessText(initial: boolean = false) {\r\n\t\tif (initial) {\r\n\t\t\tconst slot = this.el.shadowRoot.querySelector(\"slot\");\r\n\t\t\tif (slot) {\r\n\t\t\t\tconst nodes = slot.assignedNodes({ flatten: true });\r\n\t\t\t\tthis.fullText = nodes\r\n\t\t\t\t\t.map((node) => node.textContent)\r\n\t\t\t\t\t.join(\"\")\r\n\t\t\t\t\t.trim();\r\n\t\t\t}\r\n\t\t}\r\n\t\tthis.displayText = this.fullText;\r\n\r\n\t\tif (\r\n\t\t\tthis.fullText.length > this.maxLength &&\r\n\t\t\tthis.maxLines === undefined\r\n\t\t) {\r\n\t\t\tconst trimmedText = this.fullText\r\n\t\t\t\t.substring(0, this.maxLength)\r\n\t\t\t\t.trim();\r\n\t\t\tconst lastSpace = trimmedText.lastIndexOf(\" \");\r\n\t\t\tthis.displayText = trimmedText.substring(0, lastSpace) + \"...\";\r\n\t\t\tthis.showTip = true;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst style = {\r\n\t\t\tzIndex: this.zIndex.toString(),\r\n\t\t\twidth: this.width === \"full-width\" ? \"100%\" : \"auto\",\r\n\t\t\toverflow: \"hidden\",\r\n\t\t\tdisplay: this.maxLines ? \"-webkit-box !important\" : \"inherit\",\r\n\t\t\tWebkitBoxOrient: \"vertical\",\r\n\t\t\tWebkitLineClamp: this.maxLines ? this.maxLines.toString() : \"none\",\r\n\t\t};\r\n\t\tconst tooltipClass = {\r\n\t\t\t\"tooltip-container\": true,\r\n\t\t\t\"with-tip\": this.showTip, // Conditionally applying the 'with-tip' class\r\n\t\t};\r\n\t\treturn (\r\n\t\t\t<Host class={this.elementDisplay}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass={tooltipClass}\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\tzIndex: this.zIndex.toString(),\r\n\t\t\t\t\t\twidth: this.width === \"full-width\" ? \"100%\" : \"auto\",\r\n\t\t\t\t\t}}\r\n\t\t\t\t>\r\n\t\t\t\t\t<div class=\"tooltip-text\" style={style}>\r\n\t\t\t\t\t\t{this.displayText}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div class={`tooltip-content ${this.position}`}>\r\n\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n}\r\n"],"version":3}

package/dist/components/{p-CUXDowVt.js → p-SaYc7Kjd.js} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BvGlmU4v.js';
+import { c as proxyCustomElement, H, h, d as Host } from './p-C2SefPLt.js';
 import { a as ResponsivePictureVariables } from './p-La9TS7bL.js';
 const ptcPictureCss = ":host{display:block;overflow:hidden}:host .inline{display:inline}:host .inline-block{display:inline-block}:host .block{display:block}:host(.relative){position:relative}:host(.static){position:static}:host(.absoltue){position:absolute}img{max-width:100%}.cover{-o-object-fit:cover;object-fit:cover}.fill{-o-object-fit:fill;object-fit:fill}.contain{-o-object-fit:contain;object-fit:contain}.scale-down{-o-object-fit:scale-down;object-fit:scale-down}.none{-o-object-fit:none;object-fit:none}.initial{-o-object-fit:initial;object-fit:initial}.inherit{-o-object-fit:inherit;object-fit:inherit}.radius-standard{border-radius:var(--ptc-border-radius-standard)}.radius-large{border-radius:var(--ptc-border-radius-large)}.radius-pill{border-radius:var(--ptc-border-radius-pill)}.radius-circle{border-radius:var(--ptc-border-radius-circle)}.is-full-height{height:100%}.is-full-width{width:100%}:host(.left){text-align:left}:host(.right){text-align:right}:host(.center){text-align:center}";
@@ -290,6 +290,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { PtcPicture as P, defineCustomElement as d };
-//# sourceMappingURL=p-CUXDowVt.js.map
+//# sourceMappingURL=p-SaYc7Kjd.js.map
-//# sourceMappingURL=p-CUXDowVt.js.map
+//# sourceMappingURL=p-SaYc7Kjd.js.map

package/dist/components/{p-CUXDowVt.js.map → p-SaYc7Kjd.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-CUXDowVt.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/ptc-picture/ptc-picture.scss?tag=ptc-picture&encapsulation=shadow","src/components/atoms/ptc-picture/ptc-picture.tsx"],"sourcesContent":[":host {\r\n\tdisplay: block;\r\n\toverflow: hidden;\r\n\t.inline {\r\n\t\tdisplay: inline;\r\n\t}\r\n\t.inline-block {\r\n\t\tdisplay: inline-block;\r\n\t}\r\n\t.block {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n:host(.relative) {\r\n\tposition: relative;\r\n}\r\n:host(.static) {\r\n\tposition: static;\r\n}\r\n:host(.absoltue) {\r\n\tposition: absolute;\r\n}\r\nimg {\r\n\tmax-width: 100%;\r\n}\r\n.cover {\r\n\tobject-fit: cover;\r\n}\r\n.fill {\r\n\tobject-fit: fill;\r\n}\r\n.contain {\r\n\tobject-fit: contain;\r\n}\r\n.scale-down {\r\n\tobject-fit: scale-down;\r\n}\r\n.none {\r\n\tobject-fit: none;\r\n}\r\n.initial {\r\n\tobject-fit: initial;\r\n}\r\n.inherit {\r\n\tobject-fit: inherit;\r\n}\r\n\r\n.radius-standard {\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n}\r\n.radius-large {\r\n\tborder-radius: var(--ptc-border-radius-large);\r\n}\r\n.radius-pill {\r\n\tborder-radius: var(--ptc-border-radius-pill);\r\n}\r\n.radius-circle {\r\n\tborder-radius: var(--ptc-border-radius-circle);\r\n}\r\n.is-full-height {\r\n\theight: 100%;\r\n}\r\n.is-full-width {\r\n\twidth: 100%;\r\n}\r\n:host(.left) {\r\n\ttext-align: left;\r\n}\r\n:host(.right) {\r\n\ttext-align: right;\r\n}\r\n:host(.center) {\r\n\ttext-align: center;\r\n}\r\n","import {\r\n\tComponent,\r\n\tProp,\r\n\th,\r\n\tElement,\r\n\tListen,\r\n\tState,\r\n\tHost,\r\n\tMethod,\r\n} from \"@stencil/core\";\r\nimport {\r\n\tCssClassMap,\r\n\tResponsivePictureVariables,\r\n} from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n\ttag: \"ptc-picture\",\r\n\tstyleUrl: \"ptc-picture.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcPicture {\r\n\t@Element() el: HTMLElement;\r\n\r\n\t/*\r\n\t Image Render Src\r\n\t /\r\n\t@Prop() src: string;\r\n\t/\r\n\t Image alt\r\n\t /\r\n\t@Prop() alt: string = \"image\";\r\n\t/\r\n\t Image size for smallest screen\r\n\t * <=767px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeXs: string = \"510x340\";\r\n\t/\r\n\t Image size for small screen\r\n\t * >=768px and <=991px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeSm: string = \"1240x496\";\r\n\t/\r\n\t Image size for medium screen\r\n\t * >=992px and <=1199px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeMd: string = \"1366x500\";\r\n\t/\r\n\t Image solution for large screen\r\n\t * >=1200px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeLg: string = \"1920x1080\";\r\n\t/\r\n\t Disable Image resizing solution\r\n\t /\r\n\t@Prop({ mutable: true }) disableResize: boolean = false;\r\n\t/\r\n\t Image Src\r\n\t /\r\n\t@State() oldSrc: string;\r\n\t/\r\n\t * Image Position\r\n\t /\r\n\t@Prop() imagePosition: \"relative\" \| \"absolute\" \| \"static\" = \"static\";\r\n\t/\r\n\t Image border shape\r\n\t /\r\n\t@Prop() borderRadius:\r\n\t\t\| \"radius-standard\"\r\n\t\t\| \"radius-large\"\r\n\t\t\| \"radius-pill\"\r\n\t\t\| \"radius-circle\";\r\n\t/\r\n\t Set height\r\n\t * Value unit: pixles\r\n\t * Just put numbers without unit\r\n\t /\r\n\t@Prop() height?: string;\r\n\t/\r\n\t Set Width\r\n\t * value unit: pixles\r\n\t * Just put numbers without unit\r\n\t /\r\n\t@Prop() width?: string;\r\n\t/\r\n\t Object Fit\r\n\t * Default: cover\r\n\t /\r\n\t@Prop() objectFit:\r\n\t\t\| \"cover\"\r\n\t\t\| \"fill\"\r\n\t\t\| \"contain\"\r\n\t\t\| \"scale-down\"\r\n\t\t\| \"none\"\r\n\t\t\| \"initial\"\r\n\t\t\| \"inherit\" = \"cover\";\r\n\t/\r\n\t Stretch height to 100%?\r\n\t /\r\n\t@Prop() isFullHeight: boolean = false;\r\n\t/\r\n\t Stretch width to 100%?\r\n\t /\r\n\t@Prop() isFullWidth: boolean = false;\r\n\t/\r\n\t (optional) Injected CSS styles\r\n\t /\r\n\t@Prop() styles?: string;\r\n\t/\r\n\t * (optional) Image alignment\r\n\t /\r\n\t@Prop() imageAlignment?: \"left\" \| \"right\" \| \"center\" = \"left\";\r\n\t/\r\n\t * (optional) Set max-width\r\n\t * value unit: pixles\r\n\t * Just put numbers without unit\r\n\t /\r\n\t@Prop() maxWidth?: string;\r\n\r\n\t/\r\n\t * Display image: inline, inline-block, block\r\n\t **/\r\n\t@Prop() displayImage?: \"inline\" \| \"inline-block\" \| \"block\" = \"block\";\r\n\r\n\tobserver: IntersectionObserver;\r\n\r\n\t@Listen(\"resize\", { target: \"window\" })\r\n\tWindowResize() {\r\n\t\tthis.addIntersectionObserver();\r\n\t}\r\n\r\n\tio: IntersectionObserver;\r\n\r\n\tcomponentWillLoad() {\r\n\t\tif (this.disableResize) {\r\n\t\t\tthis.sizeXs = undefined;\r\n\t\t\tthis.sizeSm = undefined;\r\n\t\t\tthis.sizeMd = undefined;\r\n\t\t\tthis.sizeLg = undefined;\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidLoad() {\r\n\t\tthis.addIntersectionObserver();\r\n\t}\r\n\r\n\tcomponentWillUpdate() {\r\n\t\tif (this.src !== this.oldSrc) {\r\n\t\t\tthis.addIntersectionObserver();\r\n\t\t}\r\n\t\tthis.oldSrc = this.src;\r\n\t}\r\n\r\n\t//lazy-loading\r\n\taddIntersectionObserver() {\r\n\t\tif (!this.src) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (\"IntersectionObserver\" in window) {\r\n\t\t\tlet lazyLoadImages = new IntersectionObserver((entries) => {\r\n\t\t\t\tentries.forEach((entry) => {\r\n\t\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\t\tconst image: HTMLImageElement =\r\n\t\t\t\t\t\t\tthis.el.shadowRoot.querySelector(\"img\");\r\n\t\t\t\t\t\timage.src = this.setResponsiveBg();\r\n\t\t\t\t\t\tlazyLoadImages.unobserve(image);\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t\tlet tempImg = this.el.shadowRoot.querySelector(\"img\");\r\n\t\t\tif (tempImg) {\r\n\t\t\t\tlazyLoadImages.observe(tempImg);\r\n\t\t\t}\r\n\r\n\t\t\tthis.observer = lazyLoadImages;\r\n\t\t} else {\r\n\t\t\t// fall back to setTimeout for Safari and IE\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tconst image: HTMLImageElement =\r\n\t\t\t\t\tthis.el.shadowRoot.querySelector(\"img\");\r\n\t\t\t\timage.src = this.setResponsiveBg();\r\n\t\t\t\timage.onload = () => {\r\n\t\t\t\t\timage.removeAttribute(\"data-src\");\r\n\t\t\t\t};\r\n\t\t\t}, 5000);\r\n\t\t}\r\n\t}\r\n\r\n\t//responsive image\r\n\tsetResponsiveBg() {\r\n\t\t// Define local variables\r\n\t\tlet backgrounds = (\r\n\t\t\t\tthis.el.shadowRoot \|\| document\r\n\t\t\t).querySelectorAll<HTMLElement>(\"img\"),\r\n\t\t\tel: HTMLElement,\r\n\t\t\telData: string,\r\n\t\t\tcurrentBreakpoint = this.getCurrentBreakPoints();\r\n\r\n\t\tfor (var i = 0, len = backgrounds.length; i < len; i++) {\r\n\t\t\t// Set current variables\r\n\t\t\tel = backgrounds[i];\r\n\t\t\telData = el.getAttribute(\"data-\" + currentBreakpoint);\r\n\t\t\tif (elData !== null) {\r\n\t\t\t\treturn elData;\r\n\t\t\t} else {\r\n\t\t\t\tif (typeof console == \"object\") {\r\n\t\t\t\t\tconsole.warn(\r\n\t\t\t\t\t\t\"Data attribute: data-\" +\r\n\t\t\t\t\t\t\tcurrentBreakpoint +\r\n\t\t\t\t\t\t\t\" not found on element:\\n\\n\" +\r\n\t\t\t\t\t\t\tel.outerHTML +\r\n\t\t\t\t\t\t\t\"\\n\\n\\n\",\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t//manually load image\r\n\t@Method()\r\n\tasync LoadImage() {\r\n\t\tconst image: HTMLImageElement =\r\n\t\t\tthis.el.shadowRoot.querySelector(\"img\");\r\n\r\n\t\tif(!image) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif(!image.src) {\r\n\t\t\timage.src = this.setResponsiveBg();\r\n\t\t\timage.onload = () => {\r\n\t\t\t\timage.removeAttribute(\"data-src\");\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tif(this.observer) {\r\n\t\t\tthis.observer.unobserve(image);\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\tconst classMapHost = this.getCssClassMapHost();\r\n\t\treturn (\r\n\t\t\t<Host class={classMapHost}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<img\r\n\t\t\t\t\tclass={classMap}\r\n\t\t\t\t\tdata-xs={!!this.sizeXs ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\tdata-sm={!!this.sizeSm ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\tdata-md={!!this.sizeMd ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\tdata-lg={!!this.sizeLg ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\t// data-xs={`${this.src}:${this.sizeXs}`}\r\n\t\t\t\t\t// data-sm={`${this.src}:${this.sizeSm}`}\r\n\t\t\t\t\t// data-md={`${this.src}:${this.sizeMd}`}\r\n\t\t\t\t\t// data-lg={`${this.src}:${this.sizeLg}`}\r\n\t\t\t\t\t{...(!!this.width ? { width: this.width } : {})}\r\n\t\t\t\t\t{...(!!this.height ? { height: this.height } : {})}\r\n\t\t\t\t\talt={this.alt}\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t...(!!this.maxWidth\r\n\t\t\t\t\t\t\t? { maxWidth: this.maxWidth + \"px\" }\r\n\t\t\t\t\t\t\t: {}),\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t\t<slot />\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate getCurrentBreakPoints(): string {\r\n\t\t// Define local variables\r\n\t\tlet doc = window.document,\r\n\t\t\ttemp = doc.createElement(\"div\"),\r\n\t\t\tenv: any;\r\n\r\n\t\t// Append test node\r\n\t\tdoc.body.appendChild(temp);\r\n\r\n\t\t// Loop through breakpoints\r\n\t\tfor (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {\r\n\t\t\tenv = ResponsivePictureVariables.envs[i];\r\n\r\n\t\t\t// Add classes\r\n\t\t\ttemp.className = \"hidden-\" + env;\r\n\r\n\t\t\t// Found breakpoint\r\n\t\t\tif (temp.offsetParent === null) {\r\n\t\t\t\t// Remove our test node\r\n\t\t\t\tdoc.body.removeChild(temp);\r\n\r\n\t\t\t\t// Return current breakpoint\r\n\t\t\t\treturn env;\r\n\t\t\t}\r\n\t\t}\r\n\t\t// Breakpoint not found, try fallback\r\n\t\tdoc.body.removeChild(temp);\r\n\t\treturn this.getFallbackBreakpoint();\r\n\t}\r\n\r\n\tprivate getFallbackBreakpoint(): string {\r\n\t\tif (window.matchMedia(\"(min-width: 992px)\").matches) {\r\n\t\t\treturn \"lg\";\r\n\t\t} else if (window.matchMedia(\"(min-width: 768px)\").matches) {\r\n\t\t\treturn \"md\";\r\n\t\t} else if (window.matchMedia(\"(min-width: 576px)\").matches) {\r\n\t\t\treturn \"sm\";\r\n\t\t} else {\r\n\t\t\treturn \"xs\";\r\n\t\t}\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.borderRadius]: this.borderRadius ? true : false,\r\n\t\t\t[this.objectFit]: true,\r\n\t\t\t[this.isFullHeight ? \"is-full-height\" : \"is-normal-height\"]: true,\r\n\t\t\t[this.isFullWidth ? \"is-full-width\" : \"is-normal-width\"]: true,\r\n\t\t\t[this.displayImage]: true,\r\n\t\t};\r\n\t}\r\n\tprivate getCssClassMapHost(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.imagePosition]: true,\r\n\t\t\t[this.imageAlignment]: true,\r\n\t\t};\r\n\t}\r\n}\r\n"],"version":3}
1	+ {"file":"p-SaYc7Kjd.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,m9BAAm9B;;MCoB59B,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;;;;;;;;;AAGtB;;AAEG;AACK,IAAA,GAAG;AACX;;AAEG;IACK,GAAG,GAAW,OAAO;AAC7B;;;AAGG;IACsB,MAAM,GAAW,SAAS;AACnD;;;AAGG;IACsB,MAAM,GAAW,UAAU;AACpD;;;AAGG;IACsB,MAAM,GAAW,UAAU;AACpD;;;AAGG;IACsB,MAAM,GAAW,WAAW;AACrD;;AAEG;IACsB,aAAa,GAAY,KAAK;AACvD;;AAEI;AACK,IAAA,MAAM;AACf;;AAEG;IACK,aAAa,GAAuC,QAAQ;AACpE;;AAEG;AACK,IAAA,YAAY;AAKpB;;;;AAIG;AACK,IAAA,MAAM;AACd;;;;AAIG;AACK,IAAA,KAAK;AACb;;;AAGG;IACK,SAAS,GAOF,OAAO;AACtB;;AAEG;IACK,YAAY,GAAY,KAAK;AACrC;;AAEG;IACK,WAAW,GAAY,KAAK;AACpC;;AAEI;AACI,IAAA,MAAM;AACd;;AAEI;IACI,cAAc,GAAiC,MAAM;AAC7D;;;;AAII;AACI,IAAA,QAAQ;AAEhB;;AAEI;IACI,YAAY,GAAyC,OAAO;AAEpE,IAAA,QAAQ;IAGR,YAAY,GAAA;QACX,IAAI,CAAC,uBAAuB,EAAE;;AAG/B,IAAA,EAAE;IAEF,iBAAiB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACvB,YAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,YAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,YAAA,IAAI,CAAC,MAAM,GAAG,SAAS;AACvB,YAAA,IAAI,CAAC,MAAM,GAAG,SAAS;;;IAIzB,gBAAgB,GAAA;QACf,IAAI,CAAC,uBAAuB,EAAE;;IAG/B,mBAAmB,GAAA;QAClB,IAAI,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,MAAM,EAAE;YAC7B,IAAI,CAAC,uBAAuB,EAAE;;AAE/B,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG;;;IAIvB,uBAAuB,GAAA;AACtB,QAAA,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACd;;AAED,QAAA,IAAI,sBAAsB,IAAI,MAAM,EAAE;YACrC,IAAI,cAAc,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,KAAI;AACzD,gBAAA,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AACzB,oBAAA,IAAI,KAAK,CAAC,cAAc,EAAE;AACzB,wBAAA,MAAM,KAAK,GACV,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,wBAAA,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE;AAClC,wBAAA,cAAc,CAAC,SAAS,CAAC,KAAK,CAAC;;AAEjC,iBAAC,CAAC;AACH,aAAC,CAAC;AACF,YAAA,IAAI,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;YACrD,IAAI,OAAO,EAAE;AACZ,gBAAA,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC;;AAGhC,YAAA,IAAI,CAAC,QAAQ,GAAG,cAAc;;aACxB;;YAEN,UAAU,CAAC,MAAK;AACf,gBAAA,MAAM,KAAK,GACV,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;AACxC,gBAAA,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE;AAClC,gBAAA,KAAK,CAAC,MAAM,GAAG,MAAK;AACnB,oBAAA,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC;AAClC,iBAAC;aACD,EAAE,IAAI,CAAC;;;;IAKV,eAAe,GAAA;;QAEd,IAAI,WAAW,GAAG,CAChB,IAAI,CAAC,EAAE,CAAC,UAAU,IAAI,QAAQ,EAC7B,gBAAgB,CAAc,KAAK,CAAC,EACtC,EAAe,EACf,MAAc,EACd,iBAAiB,GAAG,IAAI,CAAC,qBAAqB,EAAE;AAEjD,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,GAAG,WAAW,CAAC,MAAM,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,EAAE;;AAEvD,YAAA,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC;YACnB,MAAM,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,GAAG,iBAAiB,CAAC;AACrD,YAAA,IAAI,MAAM,KAAK,IAAI,EAAE;AACpB,gBAAA,OAAO,MAAM;;iBACP;AACN,gBAAA,IAAI,OAAO,OAAO,IAAI,QAAQ,EAAE;oBAC/B,OAAO,CAAC,IAAI,CACX,uBAAuB;wBACtB,iBAAiB;wBACjB,4BAA4B;AAC5B,wBAAA,EAAE,CAAC,SAAS;AACZ,wBAAA,QAAQ,CACT;;;;;;AAQL,IAAA,MAAM,SAAS,GAAA;AACd,QAAA,MAAM,KAAK,GACV,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC;QAExC,IAAG,CAAC,KAAK,EAAE;YACV;;AAGD,QAAA,IAAG,CAAC,KAAK,CAAC,GAAG,EAAE;AACd,YAAA,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,EAAE;AAClC,YAAA,KAAK,CAAC,MAAM,GAAG,MAAK;AACnB,gBAAA,KAAK,CAAC,eAAe,CAAC,UAAU,CAAC;AAClC,aAAC;;AAGF,QAAA,IAAG,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,KAAK,CAAC;;;IAIhC,MAAM,GAAA;AACL,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,EAAE;AACtC,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,EAAE;QAC9C,QACC,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,YAAY,EAAA,EACvB,IAAI,CAAC,MAAM,IAAI,gEAAQ,IAAI,CAAC,MAAM,CAAS,EAC5C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACC,KAAK,EAAE,QAAQ,EAAA,SAAA,EACN,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAE,CAAA,GAAG,CAAA,EAAG,IAAI,CAAC,GAAG,CAAE,CAAA,EAC7C,SAAA,EAAA,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAA,EAAG,IAAI,CAAC,GAAG,EAAE,GAAG,CAAG,EAAA,IAAI,CAAC,GAAG,CAAA,CAAE,EAC7C,SAAA,EAAA,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAG,EAAA,IAAI,CAAC,GAAG,CAAA,CAAE,GAAG,GAAG,IAAI,CAAC,GAAG,CAAE,CAAA,EAC7C,SAAA,EAAA,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAE,CAAA,GAAG,CAAA,EAAG,IAAI,CAAC,GAAG,EAAE,EAKlD,IAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,EAAA,IAC1C,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAClD,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE;AACN,gBAAA,IAAI,CAAC,CAAC,IAAI,CAAC;sBACR,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,IAAI;sBAChC,EAAE,CAAC;AACN,aAAA,EACA,CAAA,EACF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF;;IAID,qBAAqB,GAAA;;AAE5B,QAAA,IAAI,GAAG,GAAG,MAAM,CAAC,QAAQ,EACxB,IAAI,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,EAC/B,GAAQ;;AAGT,QAAA,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;AAG1B,QAAA,KAAK,IAAI,CAAC,GAAG,0BAA0B,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;AACrE,YAAA,GAAG,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC,CAAC;;AAGxC,YAAA,IAAI,CAAC,SAAS,GAAG,SAAS,GAAG,GAAG;;AAGhC,YAAA,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,EAAE;;AAE/B,gBAAA,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;;AAG1B,gBAAA,OAAO,GAAG;;;;AAIZ,QAAA,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;AAC1B,QAAA,OAAO,IAAI,CAAC,qBAAqB,EAAE;;IAG5B,qBAAqB,GAAA;QAC5B,IAAI,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,EAAE;AACpD,YAAA,OAAO,IAAI;;aACL,IAAI,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,EAAE;AAC3D,YAAA,OAAO,IAAI;;aACL,IAAI,MAAM,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,OAAO,EAAE;AAC3D,YAAA,OAAO,IAAI;;aACL;AACN,YAAA,OAAO,IAAI;;;IAIL,cAAc,GAAA;QACrB,OAAO;AACN,YAAA,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,KAAK;AACrD,YAAA,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI;AACtB,YAAA,CAAC,IAAI,CAAC,YAAY,GAAG,gBAAgB,GAAG,kBAAkB,GAAG,IAAI;AACjE,YAAA,CAAC,IAAI,CAAC,WAAW,GAAG,eAAe,GAAG,iBAAiB,GAAG,IAAI;AAC9D,YAAA,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI;SACzB;;IAEM,kBAAkB,GAAA;QACzB,OAAO;AACN,YAAA,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI;AAC1B,YAAA,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI;SAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/atoms/ptc-picture/ptc-picture.scss?tag=ptc-picture&encapsulation=shadow","src/components/atoms/ptc-picture/ptc-picture.tsx"],"sourcesContent":[":host {\r\n\tdisplay: block;\r\n\toverflow: hidden;\r\n\t.inline {\r\n\t\tdisplay: inline;\r\n\t}\r\n\t.inline-block {\r\n\t\tdisplay: inline-block;\r\n\t}\r\n\t.block {\r\n\t\tdisplay: block;\r\n\t}\r\n}\r\n:host(.relative) {\r\n\tposition: relative;\r\n}\r\n:host(.static) {\r\n\tposition: static;\r\n}\r\n:host(.absoltue) {\r\n\tposition: absolute;\r\n}\r\nimg {\r\n\tmax-width: 100%;\r\n}\r\n.cover {\r\n\tobject-fit: cover;\r\n}\r\n.fill {\r\n\tobject-fit: fill;\r\n}\r\n.contain {\r\n\tobject-fit: contain;\r\n}\r\n.scale-down {\r\n\tobject-fit: scale-down;\r\n}\r\n.none {\r\n\tobject-fit: none;\r\n}\r\n.initial {\r\n\tobject-fit: initial;\r\n}\r\n.inherit {\r\n\tobject-fit: inherit;\r\n}\r\n\r\n.radius-standard {\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n}\r\n.radius-large {\r\n\tborder-radius: var(--ptc-border-radius-large);\r\n}\r\n.radius-pill {\r\n\tborder-radius: var(--ptc-border-radius-pill);\r\n}\r\n.radius-circle {\r\n\tborder-radius: var(--ptc-border-radius-circle);\r\n}\r\n.is-full-height {\r\n\theight: 100%;\r\n}\r\n.is-full-width {\r\n\twidth: 100%;\r\n}\r\n:host(.left) {\r\n\ttext-align: left;\r\n}\r\n:host(.right) {\r\n\ttext-align: right;\r\n}\r\n:host(.center) {\r\n\ttext-align: center;\r\n}\r\n","import {\r\n\tComponent,\r\n\tProp,\r\n\th,\r\n\tElement,\r\n\tListen,\r\n\tState,\r\n\tHost,\r\n\tMethod,\r\n} from \"@stencil/core\";\r\nimport {\r\n\tCssClassMap,\r\n\tResponsivePictureVariables,\r\n} from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n\ttag: \"ptc-picture\",\r\n\tstyleUrl: \"ptc-picture.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcPicture {\r\n\t@Element() el: HTMLElement;\r\n\r\n\t/*\r\n\t Image Render Src\r\n\t /\r\n\t@Prop() src: string;\r\n\t/\r\n\t Image alt\r\n\t /\r\n\t@Prop() alt: string = \"image\";\r\n\t/\r\n\t Image size for smallest screen\r\n\t * <=767px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeXs: string = \"510x340\";\r\n\t/\r\n\t Image size for small screen\r\n\t * >=768px and <=991px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeSm: string = \"1240x496\";\r\n\t/\r\n\t Image size for medium screen\r\n\t * >=992px and <=1199px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeMd: string = \"1366x500\";\r\n\t/\r\n\t Image solution for large screen\r\n\t * >=1200px\r\n\t /\r\n\t@Prop({ mutable: true }) sizeLg: string = \"1920x1080\";\r\n\t/\r\n\t Disable Image resizing solution\r\n\t /\r\n\t@Prop({ mutable: true }) disableResize: boolean = false;\r\n\t/\r\n\t Image Src\r\n\t /\r\n\t@State() oldSrc: string;\r\n\t/\r\n\t * Image Position\r\n\t /\r\n\t@Prop() imagePosition: \"relative\" \| \"absolute\" \| \"static\" = \"static\";\r\n\t/\r\n\t Image border shape\r\n\t /\r\n\t@Prop() borderRadius:\r\n\t\t\| \"radius-standard\"\r\n\t\t\| \"radius-large\"\r\n\t\t\| \"radius-pill\"\r\n\t\t\| \"radius-circle\";\r\n\t/\r\n\t Set height\r\n\t * Value unit: pixles\r\n\t * Just put numbers without unit\r\n\t /\r\n\t@Prop() height?: string;\r\n\t/\r\n\t Set Width\r\n\t * value unit: pixles\r\n\t * Just put numbers without unit\r\n\t /\r\n\t@Prop() width?: string;\r\n\t/\r\n\t Object Fit\r\n\t * Default: cover\r\n\t /\r\n\t@Prop() objectFit:\r\n\t\t\| \"cover\"\r\n\t\t\| \"fill\"\r\n\t\t\| \"contain\"\r\n\t\t\| \"scale-down\"\r\n\t\t\| \"none\"\r\n\t\t\| \"initial\"\r\n\t\t\| \"inherit\" = \"cover\";\r\n\t/\r\n\t Stretch height to 100%?\r\n\t /\r\n\t@Prop() isFullHeight: boolean = false;\r\n\t/\r\n\t Stretch width to 100%?\r\n\t /\r\n\t@Prop() isFullWidth: boolean = false;\r\n\t/\r\n\t (optional) Injected CSS styles\r\n\t /\r\n\t@Prop() styles?: string;\r\n\t/\r\n\t * (optional) Image alignment\r\n\t /\r\n\t@Prop() imageAlignment?: \"left\" \| \"right\" \| \"center\" = \"left\";\r\n\t/\r\n\t * (optional) Set max-width\r\n\t * value unit: pixles\r\n\t * Just put numbers without unit\r\n\t /\r\n\t@Prop() maxWidth?: string;\r\n\r\n\t/\r\n\t * Display image: inline, inline-block, block\r\n\t **/\r\n\t@Prop() displayImage?: \"inline\" \| \"inline-block\" \| \"block\" = \"block\";\r\n\r\n\tobserver: IntersectionObserver;\r\n\r\n\t@Listen(\"resize\", { target: \"window\" })\r\n\tWindowResize() {\r\n\t\tthis.addIntersectionObserver();\r\n\t}\r\n\r\n\tio: IntersectionObserver;\r\n\r\n\tcomponentWillLoad() {\r\n\t\tif (this.disableResize) {\r\n\t\t\tthis.sizeXs = undefined;\r\n\t\t\tthis.sizeSm = undefined;\r\n\t\t\tthis.sizeMd = undefined;\r\n\t\t\tthis.sizeLg = undefined;\r\n\t\t}\r\n\t}\r\n\r\n\tcomponentDidLoad() {\r\n\t\tthis.addIntersectionObserver();\r\n\t}\r\n\r\n\tcomponentWillUpdate() {\r\n\t\tif (this.src !== this.oldSrc) {\r\n\t\t\tthis.addIntersectionObserver();\r\n\t\t}\r\n\t\tthis.oldSrc = this.src;\r\n\t}\r\n\r\n\t//lazy-loading\r\n\taddIntersectionObserver() {\r\n\t\tif (!this.src) {\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif (\"IntersectionObserver\" in window) {\r\n\t\t\tlet lazyLoadImages = new IntersectionObserver((entries) => {\r\n\t\t\t\tentries.forEach((entry) => {\r\n\t\t\t\t\tif (entry.isIntersecting) {\r\n\t\t\t\t\t\tconst image: HTMLImageElement =\r\n\t\t\t\t\t\t\tthis.el.shadowRoot.querySelector(\"img\");\r\n\t\t\t\t\t\timage.src = this.setResponsiveBg();\r\n\t\t\t\t\t\tlazyLoadImages.unobserve(image);\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t});\r\n\t\t\tlet tempImg = this.el.shadowRoot.querySelector(\"img\");\r\n\t\t\tif (tempImg) {\r\n\t\t\t\tlazyLoadImages.observe(tempImg);\r\n\t\t\t}\r\n\r\n\t\t\tthis.observer = lazyLoadImages;\r\n\t\t} else {\r\n\t\t\t// fall back to setTimeout for Safari and IE\r\n\t\t\tsetTimeout(() => {\r\n\t\t\t\tconst image: HTMLImageElement =\r\n\t\t\t\t\tthis.el.shadowRoot.querySelector(\"img\");\r\n\t\t\t\timage.src = this.setResponsiveBg();\r\n\t\t\t\timage.onload = () => {\r\n\t\t\t\t\timage.removeAttribute(\"data-src\");\r\n\t\t\t\t};\r\n\t\t\t}, 5000);\r\n\t\t}\r\n\t}\r\n\r\n\t//responsive image\r\n\tsetResponsiveBg() {\r\n\t\t// Define local variables\r\n\t\tlet backgrounds = (\r\n\t\t\t\tthis.el.shadowRoot \|\| document\r\n\t\t\t).querySelectorAll<HTMLElement>(\"img\"),\r\n\t\t\tel: HTMLElement,\r\n\t\t\telData: string,\r\n\t\t\tcurrentBreakpoint = this.getCurrentBreakPoints();\r\n\r\n\t\tfor (var i = 0, len = backgrounds.length; i < len; i++) {\r\n\t\t\t// Set current variables\r\n\t\t\tel = backgrounds[i];\r\n\t\t\telData = el.getAttribute(\"data-\" + currentBreakpoint);\r\n\t\t\tif (elData !== null) {\r\n\t\t\t\treturn elData;\r\n\t\t\t} else {\r\n\t\t\t\tif (typeof console == \"object\") {\r\n\t\t\t\t\tconsole.warn(\r\n\t\t\t\t\t\t\"Data attribute: data-\" +\r\n\t\t\t\t\t\t\tcurrentBreakpoint +\r\n\t\t\t\t\t\t\t\" not found on element:\\n\\n\" +\r\n\t\t\t\t\t\t\tel.outerHTML +\r\n\t\t\t\t\t\t\t\"\\n\\n\\n\",\r\n\t\t\t\t\t);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t//manually load image\r\n\t@Method()\r\n\tasync LoadImage() {\r\n\t\tconst image: HTMLImageElement =\r\n\t\t\tthis.el.shadowRoot.querySelector(\"img\");\r\n\r\n\t\tif(!image) {\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tif(!image.src) {\r\n\t\t\timage.src = this.setResponsiveBg();\r\n\t\t\timage.onload = () => {\r\n\t\t\t\timage.removeAttribute(\"data-src\");\r\n\t\t\t};\r\n\t\t}\r\n\r\n\t\tif(this.observer) {\r\n\t\t\tthis.observer.unobserve(image);\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\tconst classMapHost = this.getCssClassMapHost();\r\n\t\treturn (\r\n\t\t\t<Host class={classMapHost}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<img\r\n\t\t\t\t\tclass={classMap}\r\n\t\t\t\t\tdata-xs={!!this.sizeXs ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\tdata-sm={!!this.sizeSm ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\tdata-md={!!this.sizeMd ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\tdata-lg={!!this.sizeLg ? `${this.src}` : `${this.src}`}\r\n\t\t\t\t\t// data-xs={`${this.src}:${this.sizeXs}`}\r\n\t\t\t\t\t// data-sm={`${this.src}:${this.sizeSm}`}\r\n\t\t\t\t\t// data-md={`${this.src}:${this.sizeMd}`}\r\n\t\t\t\t\t// data-lg={`${this.src}:${this.sizeLg}`}\r\n\t\t\t\t\t{...(!!this.width ? { width: this.width } : {})}\r\n\t\t\t\t\t{...(!!this.height ? { height: this.height } : {})}\r\n\t\t\t\t\talt={this.alt}\r\n\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t...(!!this.maxWidth\r\n\t\t\t\t\t\t\t? { maxWidth: this.maxWidth + \"px\" }\r\n\t\t\t\t\t\t\t: {}),\r\n\t\t\t\t\t}}\r\n\t\t\t\t/>\r\n\t\t\t\t<slot />\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate getCurrentBreakPoints(): string {\r\n\t\t// Define local variables\r\n\t\tlet doc = window.document,\r\n\t\t\ttemp = doc.createElement(\"div\"),\r\n\t\t\tenv: any;\r\n\r\n\t\t// Append test node\r\n\t\tdoc.body.appendChild(temp);\r\n\r\n\t\t// Loop through breakpoints\r\n\t\tfor (let i = ResponsivePictureVariables.envs.length - 1; i >= 0; i--) {\r\n\t\t\tenv = ResponsivePictureVariables.envs[i];\r\n\r\n\t\t\t// Add classes\r\n\t\t\ttemp.className = \"hidden-\" + env;\r\n\r\n\t\t\t// Found breakpoint\r\n\t\t\tif (temp.offsetParent === null) {\r\n\t\t\t\t// Remove our test node\r\n\t\t\t\tdoc.body.removeChild(temp);\r\n\r\n\t\t\t\t// Return current breakpoint\r\n\t\t\t\treturn env;\r\n\t\t\t}\r\n\t\t}\r\n\t\t// Breakpoint not found, try fallback\r\n\t\tdoc.body.removeChild(temp);\r\n\t\treturn this.getFallbackBreakpoint();\r\n\t}\r\n\r\n\tprivate getFallbackBreakpoint(): string {\r\n\t\tif (window.matchMedia(\"(min-width: 992px)\").matches) {\r\n\t\t\treturn \"lg\";\r\n\t\t} else if (window.matchMedia(\"(min-width: 768px)\").matches) {\r\n\t\t\treturn \"md\";\r\n\t\t} else if (window.matchMedia(\"(min-width: 576px)\").matches) {\r\n\t\t\treturn \"sm\";\r\n\t\t} else {\r\n\t\t\treturn \"xs\";\r\n\t\t}\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.borderRadius]: this.borderRadius ? true : false,\r\n\t\t\t[this.objectFit]: true,\r\n\t\t\t[this.isFullHeight ? \"is-full-height\" : \"is-normal-height\"]: true,\r\n\t\t\t[this.isFullWidth ? \"is-full-width\" : \"is-normal-width\"]: true,\r\n\t\t\t[this.displayImage]: true,\r\n\t\t};\r\n\t}\r\n\tprivate getCssClassMapHost(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.imagePosition]: true,\r\n\t\t\t[this.imageAlignment]: true,\r\n\t\t};\r\n\t}\r\n}\r\n"],"version":3}

package/dist/components/{p-5HxxZO1g.js → p-UM5LphbN.js} RENAMED Viewed

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, h, d as Host } from './p-BvGlmU4v.js';
-import { r as renderSvg } from './p-BG9NFXDY.js';
+import { c as proxyCustomElement, H, h, d as Host } from './p-C2SefPLt.js';
+import { r as renderSvg } from './p-D48KXt4a.js';
 const ptcBadgeCss = ".number-badge,.svg-badge{position:absolute;top:0;left:0;transform:translate(-50%, -50%);z-index:2}.number-badge{background-color:var(--color-green-08);color:white;border-radius:50%;padding:0.5em;min-width:1.18em;text-align:center;font-weight:var(--ptc-font-weight-bold);font-size:var(--ptc-font-size-x-small);display:inline-block;height:1.18rem;line-height:1rem}.svg-badge{width:35px;height:35px}";
@@ -47,6 +47,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { PtcBadge as P, defineCustomElement as d };
-//# sourceMappingURL=p-5HxxZO1g.js.map
+//# sourceMappingURL=p-UM5LphbN.js.map
-//# sourceMappingURL=p-5HxxZO1g.js.map
+//# sourceMappingURL=p-UM5LphbN.js.map

package/dist/components/{p-5HxxZO1g.js.map → p-UM5LphbN.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~5HxxZO1g~~.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,8YAA8Y;;MCQrZ,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;IACZ,MAAM,CAAS;AAEf,IAAA,OAAO;IAEP,IAAI,GAAqB,QAAQ;IAEzC,aAAa,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;YAC1C,OAAO,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,CAAC;;AAC9C,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,YAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,MAAM,CAAO;;;IAItD,MAAM,GAAA;AACL,QAAA,OAAO,CAAA,CAAC,IAAI,EAAE,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,aAAa,EAAE,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-badge/ptc-badge.scss?tag=ptc-badge&encapsulation=shadow","src/components/molecules/ptc-badge/ptc-badge.tsx"],"sourcesContent":[".number-badge,\r\n.svg-badge {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\ttransform: translate(-50%, -50%);\r\n\tz-index: 2;\r\n}\r\n\r\n.number-badge {\r\n\tbackground-color: var(--color-green-08);\r\n\tcolor: white;\r\n\tborder-radius: 50%;\r\n\tpadding: 0.5em;\r\n\tmin-width: 1.18em;\r\n\ttext-align: center;\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tfont-size: var(--ptc-font-size-x-small);\r\n\tdisplay: inline-block;\r\n\theight: 1.18rem;\r\n\tline-height: 1rem;\r\n}\r\n\r\n.svg-badge {\r\n\twidth: 35px;\r\n\theight: 35px;\r\n}\r\n","import { Component, Host, h, Prop } from \"@stencil/core\";\r\nimport { renderSvg } from \"../../../utils/svg\";\r\n\r\n@Component({\r\n\ttag: \"ptc-badge\",\r\n\tstyleUrl: \"ptc-badge.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcBadge {\r\n\t@Prop() number: number; // the number\r\n\r\n\t@Prop() svgCode: string;\r\n\r\n\t@Prop() type: \"svg\" \| \"number\" = \"number\";\r\n\r\n\trenderContent() {\r\n\t\tif (this.type === \"svg\" && !!this.svgCode) {\r\n\t\t\treturn renderSvg(this.svgCode, \"svg-badge\", \"badge\");\r\n\t\t} else if (this.type === \"number\" && !!this.number) {\r\n\t\t\treturn <div class=\"number-badge\">{this.number}</div>;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn <Host>{this.renderContent()}</Host>;\r\n\t}\r\n}\r\n"],"version":3}
1	+ {"file":"p-UM5LphbN.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,8YAA8Y;;MCQrZ,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;;;;;;;;IACZ,MAAM,CAAS;AAEf,IAAA,OAAO;IAEP,IAAI,GAAqB,QAAQ;IAEzC,aAAa,GAAA;AACZ,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,EAAE;YAC1C,OAAO,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,CAAC;;AAC9C,aAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE;AACnD,YAAA,OAAO,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,MAAM,CAAO;;;IAItD,MAAM,GAAA;AACL,QAAA,OAAO,CAAA,CAAC,IAAI,EAAE,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,aAAa,EAAE,CAAQ;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-badge/ptc-badge.scss?tag=ptc-badge&encapsulation=shadow","src/components/molecules/ptc-badge/ptc-badge.tsx"],"sourcesContent":[".number-badge,\r\n.svg-badge {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\ttransform: translate(-50%, -50%);\r\n\tz-index: 2;\r\n}\r\n\r\n.number-badge {\r\n\tbackground-color: var(--color-green-08);\r\n\tcolor: white;\r\n\tborder-radius: 50%;\r\n\tpadding: 0.5em;\r\n\tmin-width: 1.18em;\r\n\ttext-align: center;\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tfont-size: var(--ptc-font-size-x-small);\r\n\tdisplay: inline-block;\r\n\theight: 1.18rem;\r\n\tline-height: 1rem;\r\n}\r\n\r\n.svg-badge {\r\n\twidth: 35px;\r\n\theight: 35px;\r\n}\r\n","import { Component, Host, h, Prop } from \"@stencil/core\";\r\nimport { renderSvg } from \"../../../utils/svg\";\r\n\r\n@Component({\r\n\ttag: \"ptc-badge\",\r\n\tstyleUrl: \"ptc-badge.scss\",\r\n\tshadow: true,\r\n})\r\nexport class PtcBadge {\r\n\t@Prop() number: number; // the number\r\n\r\n\t@Prop() svgCode: string;\r\n\r\n\t@Prop() type: \"svg\" \| \"number\" = \"number\";\r\n\r\n\trenderContent() {\r\n\t\tif (this.type === \"svg\" && !!this.svgCode) {\r\n\t\t\treturn renderSvg(this.svgCode, \"svg-badge\", \"badge\");\r\n\t\t} else if (this.type === \"number\" && !!this.number) {\r\n\t\t\treturn <div class=\"number-badge\">{this.number}</div>;\r\n\t\t}\r\n\t}\r\n\r\n\trender() {\r\n\t\treturn <Host>{this.renderContent()}</Host>;\r\n\t}\r\n}\r\n"],"version":3}

package/dist/components/{p-C42Dg7zS.js → p-WLFTWNrK.js} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host, a as getAssetPath } from './p-BvGlmU4v.js';
-import { d as defineCustomElement$3 } from './p-EcTA3sjE.js';
-import { d as defineCustomElement$2 } from './p-Cmek7vlD.js';
-import { d as defineCustomElement$1 } from './p-CUXDowVt.js';
+import { c as proxyCustomElement, H, e as createEvent, h, d as Host, g as getAssetPath } from './p-C2SefPLt.js';
+import { d as defineCustomElement$3 } from './p-CmtcG8H9.js';
+import { d as defineCustomElement$2 } from './p-Cj1vpVKf.js';
+import { d as defineCustomElement$1 } from './p-SaYc7Kjd.js';
 const ptcDynamicCardCss = ":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.hide{display:none}:host(.sequential) .card.show{display:block}: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;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) .card-dt-open:not([hidden]){height:480px}@media only screen and (min-width: 1200px){:host(.sequential) .card-dt-open:not([hidden]){min-width:600px}}:host(.sequential):host(.active) .card-mobile::before{background-color:var(--color-green-05)}";
@@ -203,6 +203,6 @@ function defineCustomElement() {
 defineCustomElement();
 export { PtcDynamicCard as P, defineCustomElement as d };
-//# sourceMappingURL=p-C42Dg7zS.js.map
+//# sourceMappingURL=p-WLFTWNrK.js.map
-//# sourceMappingURL=p-C42Dg7zS.js.map
+//# sourceMappingURL=p-WLFTWNrK.js.map

package/dist/components/{p-C42Dg7zS.js.map → p-WLFTWNrK.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-C42Dg7zS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.scss?tag=ptc-dynamic-card&encapsulation=shadow","src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.tsx"],"sourcesContent":["@use \"mixins\" as ;\r\n\r\n:host {\r\n\tdisplay: block;\r\n}\r\n\r\n:host(.sequential) {\r\n\t.card-wrapper {\r\n\t\tposition: relative;\r\n\t\tcursor: pointer;\r\n\t\toutline: none;\r\n\r\n\t\t&:focus-visible {\r\n\t\t\ttransition: none;\r\n\t\t\t@include base-focus-state;\r\n\t\t\tz-index: 1;\r\n\t\t}\r\n\t}\r\n\r\n\t.card {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t\toverflow: hidden;\r\n\r\n\t\t&.hide {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\r\n\t\t&.show {\r\n\t\t\tdisplay: block;\r\n\t\t}\r\n\t}\r\n\r\n\t.card-mobile,\r\n\t.card-dt-open {\r\n\t\tdisplay: block;\r\n\r\n\t\tptc-card-content {\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-basis: 38%;\r\n\t\t\tjustify-content: flex-start;\r\n\t\t\talign-items: center;\r\n\t\t\tpadding: var(--ptc-element-spacing-06);\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\theight: unset;\r\n\t\t\t\tflex: 0 0 310px;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tptc-picture {\r\n\t\t\t// flex-basis: 62%;\r\n\t\t\tflex: 1 1 auto;\r\n\t\t}\r\n\r\n\t\t.card-title {\r\n\t\t\th3 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-medium);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\r\n\t\t\t\t@include screen-sm {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-large);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.card-content {\r\n\t\t\tmargin-top: var(--ptc-element-spacing-03);\r\n\t\t}\r\n\t}\r\n\t.card-mobile {\r\n\t\tmax-width: 320px;\r\n\t\tmin-width: 226px;\r\n\t\tposition: relative;\r\n\r\n\t\t@include screen-xs {\r\n\t\t\tmax-width: 350px;\r\n\t\t}\r\n\r\n\t\t&::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tdisplay: block;\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 5px;\r\n\t\t\ttransition: background-color var(--ptc-transition-medium)\r\n\t\t\t\tvar(--ptc-ease-out);\r\n\t\t\tbackground-color: transparent;\r\n\t\t}\r\n\r\n\t\tptc-card-content {\r\n\t\t\talign-items: flex-start;\r\n\t\t}\r\n\t}\r\n\t.card-dt-closed {\r\n\t\twidth: 135px;\r\n\t\theight: 424px;\r\n\t\tposition: relative;\r\n\r\n\t\t.closed-content {\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 100%;\r\n\t\t\ttop: 0;\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\t\t}\r\n\t\t.card-title {\r\n\t\t\ttext-align: center;\r\n\t\t\th2 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\t\t\t\tpadding-left: var(--ptc-element-spacing-02);\r\n\t\t\t\tpadding-right: var(--ptc-element-spacing-02);\r\n\r\n\t\t\t\t@include screen-xl {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.card-dt-open {\r\n\t\tborder-top: 5px solid var(--color-green-05);\r\n\t\tdisplay: flex;\r\n\t\tmax-width: 790px;\r\n\t\ttransition: width var(--ptc-transition-x-fast) var(--ptc-ease-out);\r\n\r\n\t\t@include screen-xl {\r\n\t\t\tmax-width: 825px;\r\n\t\t}\r\n\r\n\t\t&:not([hidden]) {\r\n\t\t\theight: 480px;\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\tmin-width: 600px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&:host(.active) {\r\n\t\t.card-mobile {\r\n\t\t\t&::before {\r\n\t\t\t\tbackground-color: var(--color-green-05);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import {\r\n\tComponent,\r\n\tHost,\r\n\th,\r\n\tProp,\r\n\tState,\r\n\tgetAssetPath,\r\n\tElement,\r\n\tListen,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tMethod,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n//import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';\r\n\r\n@Component({\r\n\ttag: \"ptc-dynamic-card\",\r\n\tstyleUrl: \"ptc-dynamic-card.scss\",\r\n\tassetsDirs: [\"media\"],\r\n\tshadow: true,\r\n})\r\nexport class PtcDynamicCard {\r\n\t@Element() el: HTMLElement;\r\n\r\n\t/* Dynamic Card Type /\r\n\t@Prop() cardType: \"sequential\" = \"sequential\";\r\n\r\n\t/* Card Title /\r\n\t@Prop() cardTitle: string = \"Card Title Goes Here\";\r\n\r\n\t/* Card Image Src/\r\n\t@Prop() cardImgSrc?: string;\r\n\r\n\t/* Card Image Alt/\r\n\t@Prop() cardImgAlt?: string;\r\n\t/* Public card state /\r\n\t//@Prop({ mutable: true }) outCardState: string;\r\n\r\n\t/* Card varients /\r\n\t@Prop() cardScreen: \"mobile\" \| \"desktop\" = \"desktop\";\r\n\r\n\t/* is card expanded? /\r\n\t@Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n\t/* Internal Overlay Status /\r\n\t@State() overlayExists: boolean = true;\r\n\r\n\t/\r\n\t (optional) Injected CSS Styles\r\n\t /\r\n\t@Prop() styles?: string;\r\n\r\n\t/\r\n\t Tracker ID\r\n\t /\r\n\t@Prop() trackerId?: string;\r\n\r\n\t// handleClick() {\r\n\t// this.isExpanded = !this.isExpanded;\r\n\t// }\r\n\t/\r\n\t Event emitted when this card is opened\r\n\t /\r\n\t@Event({ bubbles: true, composed: true }) cardOpened: EventEmitter<string>;\r\n\tcomponentDidLoad() {\r\n\t\t// Handle mouse enter and leave for overlay\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseenter\",\r\n\t\t\t() => (this.overlayExists = false),\r\n\t\t);\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseleave\",\r\n\t\t\t() => (this.overlayExists = true),\r\n\t\t);\r\n\t}\r\n\r\n\t/\r\n\t Open the card\r\n\t /\r\n\topenCard = () => {\r\n\t\tif (!this.isExpanded) {\r\n\t\t\tthis.isExpanded = true;\r\n\t\t\tthis.cardOpened.emit(this.trackerId);\r\n\t\t}\r\n\t\t// If already expanded, do nothing to ensure at least one card remains open\r\n\t};\r\n\r\n\t/\r\n\t Handle keyboard interactions\r\n\t /\r\n\thandleKeyDown = (event: KeyboardEvent) => {\r\n\t\tswitch (event.key) {\r\n\t\t\tcase \"Enter\":\r\n\t\t\t\t//event.preventDefault();\r\n\t\t\t\tthis.openCard();\r\n\t\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t};\r\n\r\n\t/\r\n\t Listen for 'cardOpened' events on the document to close other cards\r\n\t /\r\n\t@Listen(\"cardOpened\", { target: \"document\" })\r\n\thandleCardOpened(event: CustomEvent<string>) {\r\n\t\tconst openedTrackerId = event.detail;\r\n\t\tif (openedTrackerId !== this.trackerId && this.isExpanded) {\r\n\t\t\tthis.isExpanded = false;\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Focus the card-wrapper element\r\n\t /\r\n\t@Method()\r\n\tasync focusCardWrapper() {\r\n\t\tconst cardWrapper = this.el.querySelector(\r\n\t\t\t\".card-wrapper\",\r\n\t\t) as HTMLElement;\r\n\t\tif (cardWrapper) {\r\n\t\t\tcardWrapper.focus();\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Get CSS class map\r\n\t /\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.cardType]: true,\r\n\t\t};\r\n\t}\r\n\r\n\t/\r\n\t Get desktop card based on expansion state\r\n\t /\r\n\t// getDesktopCard() {\r\n\t// if (this.cardScreen === 'desktop' && this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-open mf-listen\" id={this.trackerId}>\r\n\t// <ptc-card-content card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h3>{this.cardTitle}</h3>\r\n\t// </div>\r\n\t// <div class=\"card-content\">\r\n\t// <slot></slot>\r\n\t// </div>\r\n\t// </ptc-card-content>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// is-full-width=\"true\"\r\n\t// is-full-height=\"true\"\r\n\t// image-alignment=\"center\"\r\n\t// ></ptc-picture>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else if (this.cardScreen === 'desktop' && !this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-closed mf-listen\" id={this.trackerId}>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// image-position=\"relative\"\r\n\t// is-full-width\r\n\t// height=\"424\"\r\n\t// >\r\n\t// {this.overlayExists ? (\r\n\t// <ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t// ) : (\r\n\t// <ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t// )}\r\n\t// </ptc-picture>\r\n\t// <div class=\"closed-content\" card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h2>{this.cardTitle}</h2>\r\n\t// </div>\r\n\t// </div>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else {\r\n\t// return null;\r\n\t// }\r\n\t// }\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\r\n\t\treturn (\r\n\t\t\t<Host class={classMap}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"card-wrapper mf-listen\"\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\taria-expanded={this.isExpanded}\r\n\t\t\t\t\tonClick={this.openCard}\r\n\t\t\t\t\tonKeyDown={this.handleKeyDown}\r\n\t\t\t\t>\r\n\t\t\t\t\t{this.cardScreen === \"mobile\" ? (\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"card card-mobile mf-listen\"\r\n\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\theight=\"287\"\r\n\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t<ptc-card-content\r\n\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\tstyles=\":host(.card-dynamic){height: auto;}\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t{...(!this.isExpanded && {\r\n\t\t\t\t\t\t\t\t\thidden: \"until-found\",\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t/ @ts-ignore */\r\n\t\t\t\t\t\t\t\tonBeforeMatch={this.openCard.bind(this)}\r\n\t\t\t\t\t\t\t\tclass={`card mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded && \"card-dt-open\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-card-content card-type=\"card-dynamic\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\tis-full-width=\"true\"\r\n\t\t\t\t\t\t\t\t\tis-full-height=\"true\"\r\n\t\t\t\t\t\t\t\t\timage-alignment=\"center\"\r\n\t\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass={`card card-dt-closed mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded ? \"hide\" : \"show\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\timage-position=\"relative\"\r\n\t\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\t\theight=\"424\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{this.overlayExists ? (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</ptc-picture>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\tclass=\"closed-content\"\r\n\t\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h2>{this.cardTitle}</h2>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t\t{this.cardScreen === \"desktop\" && (\r\n\t\t\t\t\t<div hidden>\r\n\t\t\t\t\t\t<svg>\r\n\t\t\t\t\t\t\t<use href={`${this.dotSvg}`}></use>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate dotSvg: string = getAssetPath(\"./media/nav-active-dotslick.svg\");\r\n}\r\n"],"version":3}
1	+ {"file":"p-WLFTWNrK.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.scss?tag=ptc-dynamic-card&encapsulation=shadow","src/components/molecules/ptc-dynamic-card/ptc-dynamic-card.tsx"],"sourcesContent":["@use \"mixins\" as ;\r\n\r\n:host {\r\n\tdisplay: block;\r\n}\r\n\r\n:host(.sequential) {\r\n\t.card-wrapper {\r\n\t\tposition: relative;\r\n\t\tcursor: pointer;\r\n\t\toutline: none;\r\n\r\n\t\t&:focus-visible {\r\n\t\t\ttransition: none;\r\n\t\t\t@include base-focus-state;\r\n\t\t\tz-index: 1;\r\n\t\t}\r\n\t}\r\n\r\n\t.card {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t\toverflow: hidden;\r\n\r\n\t\t&.hide {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\r\n\t\t&.show {\r\n\t\t\tdisplay: block;\r\n\t\t}\r\n\t}\r\n\r\n\t.card-mobile,\r\n\t.card-dt-open {\r\n\t\tdisplay: block;\r\n\r\n\t\tptc-card-content {\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-basis: 38%;\r\n\t\t\tjustify-content: flex-start;\r\n\t\t\talign-items: center;\r\n\t\t\tpadding: var(--ptc-element-spacing-06);\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\theight: unset;\r\n\t\t\t\tflex: 0 0 310px;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\tptc-picture {\r\n\t\t\t// flex-basis: 62%;\r\n\t\t\tflex: 1 1 auto;\r\n\t\t}\r\n\r\n\t\t.card-title {\r\n\t\t\th3 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-medium);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\r\n\t\t\t\t@include screen-sm {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-large);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t.card-content {\r\n\t\t\tmargin-top: var(--ptc-element-spacing-03);\r\n\t\t}\r\n\t}\r\n\t.card-mobile {\r\n\t\tmax-width: 320px;\r\n\t\tmin-width: 226px;\r\n\t\tposition: relative;\r\n\r\n\t\t@include screen-xs {\r\n\t\t\tmax-width: 350px;\r\n\t\t}\r\n\r\n\t\t&::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tdisplay: block;\r\n\t\t\tposition: absolute;\r\n\t\t\ttop: 0;\r\n\t\t\tleft: 0;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 5px;\r\n\t\t\ttransition: background-color var(--ptc-transition-medium)\r\n\t\t\t\tvar(--ptc-ease-out);\r\n\t\t\tbackground-color: transparent;\r\n\t\t}\r\n\r\n\t\tptc-card-content {\r\n\t\t\talign-items: flex-start;\r\n\t\t}\r\n\t}\r\n\t.card-dt-closed {\r\n\t\twidth: 135px;\r\n\t\theight: 424px;\r\n\t\tposition: relative;\r\n\r\n\t\t.closed-content {\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: 100%;\r\n\t\t\theight: 100%;\r\n\t\t\ttop: 0;\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\t\t}\r\n\t\t.card-title {\r\n\t\t\ttext-align: center;\r\n\t\t\th2 {\r\n\t\t\t\tcolor: var(--color-white);\r\n\t\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\t\t\tline-height: var(--ptc-line-height-densest);\r\n\t\t\t\tmargin-bottom: 0rem;\r\n\t\t\t\tmargin-block-start: 0rem;\r\n\t\t\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\t\t\t\tpadding-left: var(--ptc-element-spacing-02);\r\n\t\t\t\tpadding-right: var(--ptc-element-spacing-02);\r\n\r\n\t\t\t\t@include screen-xl {\r\n\t\t\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.card-dt-open {\r\n\t\tborder-top: 5px solid var(--color-green-05);\r\n\t\tdisplay: flex;\r\n\t\tmax-width: 790px;\r\n\t\ttransition: width var(--ptc-transition-x-fast) var(--ptc-ease-out);\r\n\r\n\t\t@include screen-xl {\r\n\t\t\tmax-width: 825px;\r\n\t\t}\r\n\r\n\t\t&:not([hidden]) {\r\n\t\t\theight: 480px;\r\n\r\n\t\t\t@include screen-lg {\r\n\t\t\t\tmin-width: 600px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&:host(.active) {\r\n\t\t.card-mobile {\r\n\t\t\t&::before {\r\n\t\t\t\tbackground-color: var(--color-green-05);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n","import {\r\n\tComponent,\r\n\tHost,\r\n\th,\r\n\tProp,\r\n\tState,\r\n\tgetAssetPath,\r\n\tElement,\r\n\tListen,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tMethod,\r\n} from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n//import navDotSlick from '../../media/svg-imgs/nav-active-dotslick.svg';\r\n\r\n@Component({\r\n\ttag: \"ptc-dynamic-card\",\r\n\tstyleUrl: \"ptc-dynamic-card.scss\",\r\n\tassetsDirs: [\"media\"],\r\n\tshadow: true,\r\n})\r\nexport class PtcDynamicCard {\r\n\t@Element() el: HTMLElement;\r\n\r\n\t/* Dynamic Card Type /\r\n\t@Prop() cardType: \"sequential\" = \"sequential\";\r\n\r\n\t/* Card Title /\r\n\t@Prop() cardTitle: string = \"Card Title Goes Here\";\r\n\r\n\t/* Card Image Src/\r\n\t@Prop() cardImgSrc?: string;\r\n\r\n\t/* Card Image Alt/\r\n\t@Prop() cardImgAlt?: string;\r\n\t/* Public card state /\r\n\t//@Prop({ mutable: true }) outCardState: string;\r\n\r\n\t/* Card varients /\r\n\t@Prop() cardScreen: \"mobile\" \| \"desktop\" = \"desktop\";\r\n\r\n\t/* is card expanded? /\r\n\t@Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n\t/* Internal Overlay Status /\r\n\t@State() overlayExists: boolean = true;\r\n\r\n\t/\r\n\t (optional) Injected CSS Styles\r\n\t /\r\n\t@Prop() styles?: string;\r\n\r\n\t/\r\n\t Tracker ID\r\n\t /\r\n\t@Prop() trackerId?: string;\r\n\r\n\t// handleClick() {\r\n\t// this.isExpanded = !this.isExpanded;\r\n\t// }\r\n\t/\r\n\t Event emitted when this card is opened\r\n\t /\r\n\t@Event({ bubbles: true, composed: true }) cardOpened: EventEmitter<string>;\r\n\tcomponentDidLoad() {\r\n\t\t// Handle mouse enter and leave for overlay\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseenter\",\r\n\t\t\t() => (this.overlayExists = false),\r\n\t\t);\r\n\t\tthis.el.addEventListener(\r\n\t\t\t\"mouseleave\",\r\n\t\t\t() => (this.overlayExists = true),\r\n\t\t);\r\n\t}\r\n\r\n\t/\r\n\t Open the card\r\n\t /\r\n\topenCard = () => {\r\n\t\tif (!this.isExpanded) {\r\n\t\t\tthis.isExpanded = true;\r\n\t\t\tthis.cardOpened.emit(this.trackerId);\r\n\t\t}\r\n\t\t// If already expanded, do nothing to ensure at least one card remains open\r\n\t};\r\n\r\n\t/\r\n\t Handle keyboard interactions\r\n\t /\r\n\thandleKeyDown = (event: KeyboardEvent) => {\r\n\t\tswitch (event.key) {\r\n\t\t\tcase \"Enter\":\r\n\t\t\t\t//event.preventDefault();\r\n\t\t\t\tthis.openCard();\r\n\t\t\t\tbreak;\r\n\t\t\tdefault:\r\n\t\t\t\tbreak;\r\n\t\t}\r\n\t};\r\n\r\n\t/\r\n\t Listen for 'cardOpened' events on the document to close other cards\r\n\t /\r\n\t@Listen(\"cardOpened\", { target: \"document\" })\r\n\thandleCardOpened(event: CustomEvent<string>) {\r\n\t\tconst openedTrackerId = event.detail;\r\n\t\tif (openedTrackerId !== this.trackerId && this.isExpanded) {\r\n\t\t\tthis.isExpanded = false;\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Focus the card-wrapper element\r\n\t /\r\n\t@Method()\r\n\tasync focusCardWrapper() {\r\n\t\tconst cardWrapper = this.el.querySelector(\r\n\t\t\t\".card-wrapper\",\r\n\t\t) as HTMLElement;\r\n\t\tif (cardWrapper) {\r\n\t\t\tcardWrapper.focus();\r\n\t\t}\r\n\t}\r\n\r\n\t/\r\n\t Get CSS class map\r\n\t /\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.cardType]: true,\r\n\t\t};\r\n\t}\r\n\r\n\t/\r\n\t Get desktop card based on expansion state\r\n\t /\r\n\t// getDesktopCard() {\r\n\t// if (this.cardScreen === 'desktop' && this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-open mf-listen\" id={this.trackerId}>\r\n\t// <ptc-card-content card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h3>{this.cardTitle}</h3>\r\n\t// </div>\r\n\t// <div class=\"card-content\">\r\n\t// <slot></slot>\r\n\t// </div>\r\n\t// </ptc-card-content>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// is-full-width=\"true\"\r\n\t// is-full-height=\"true\"\r\n\t// image-alignment=\"center\"\r\n\t// ></ptc-picture>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else if (this.cardScreen === 'desktop' && !this.isExpanded) {\r\n\t// return [\r\n\t// <div class=\"card card-dt-closed mf-listen\" id={this.trackerId}>\r\n\t// <ptc-picture\r\n\t// alt={this.cardImgAlt}\r\n\t// src={this.cardImgSrc}\r\n\t// image-position=\"relative\"\r\n\t// is-full-width\r\n\t// height=\"424\"\r\n\t// >\r\n\t// {this.overlayExists ? (\r\n\t// <ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t// ) : (\r\n\t// <ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t// )}\r\n\t// </ptc-picture>\r\n\t// <div class=\"closed-content\" card-type=\"card-dynamic\">\r\n\t// <div class=\"card-title\">\r\n\t// <h2>{this.cardTitle}</h2>\r\n\t// </div>\r\n\t// </div>\r\n\t// </div>,\r\n\t// ];\r\n\t// } else {\r\n\t// return null;\r\n\t// }\r\n\t// }\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\r\n\t\treturn (\r\n\t\t\t<Host class={classMap}>\r\n\t\t\t\t{this.styles && <style>{this.styles}</style>}\r\n\t\t\t\t<div\r\n\t\t\t\t\tclass=\"card-wrapper mf-listen\"\r\n\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\taria-expanded={this.isExpanded}\r\n\t\t\t\t\tonClick={this.openCard}\r\n\t\t\t\t\tonKeyDown={this.handleKeyDown}\r\n\t\t\t\t>\r\n\t\t\t\t\t{this.cardScreen === \"mobile\" ? (\r\n\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\tclass=\"card card-mobile mf-listen\"\r\n\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\theight=\"287\"\r\n\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t<ptc-card-content\r\n\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\tstyles=\":host(.card-dynamic){height: auto;}\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t{...(!this.isExpanded && {\r\n\t\t\t\t\t\t\t\t\thidden: \"until-found\",\r\n\t\t\t\t\t\t\t\t})}\r\n\t\t\t\t\t\t\t\t/ @ts-ignore */\r\n\t\t\t\t\t\t\t\tonBeforeMatch={this.openCard.bind(this)}\r\n\t\t\t\t\t\t\t\tclass={`card mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded && \"card-dt-open\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-card-content card-type=\"card-dynamic\">\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h3>{this.cardTitle}</h3>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-content\">\r\n\t\t\t\t\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</ptc-card-content>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\tis-full-width=\"true\"\r\n\t\t\t\t\t\t\t\t\tis-full-height=\"true\"\r\n\t\t\t\t\t\t\t\t\timage-alignment=\"center\"\r\n\t\t\t\t\t\t\t\t></ptc-picture>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclass={`card card-dt-closed mf-listen ${\r\n\t\t\t\t\t\t\t\t\tthis.isExpanded ? \"hide\" : \"show\"\r\n\t\t\t\t\t\t\t\t}`}\r\n\t\t\t\t\t\t\t\tid={this.trackerId}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<ptc-picture\r\n\t\t\t\t\t\t\t\t\talt={this.cardImgAlt}\r\n\t\t\t\t\t\t\t\t\tsrc={this.cardImgSrc}\r\n\t\t\t\t\t\t\t\t\timage-position=\"relative\"\r\n\t\t\t\t\t\t\t\t\tis-full-width\r\n\t\t\t\t\t\t\t\t\theight=\"424\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{this.overlayExists ? (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-1\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t) : (\r\n\t\t\t\t\t\t\t\t\t\t<ptc-overlay filter-color=\"solid-black-2\"></ptc-overlay>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</ptc-picture>\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\tclass=\"closed-content\"\r\n\t\t\t\t\t\t\t\t\tcard-type=\"card-dynamic\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div class=\"card-title\">\r\n\t\t\t\t\t\t\t\t\t\t<h2>{this.cardTitle}</h2>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t\t{this.cardScreen === \"desktop\" && (\r\n\t\t\t\t\t<div hidden>\r\n\t\t\t\t\t\t<svg>\r\n\t\t\t\t\t\t\t<use href={`${this.dotSvg}`}></use>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t)}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n\r\n\tprivate dotSvg: string = getAssetPath(\"./media/nav-active-dotslick.svg\");\r\n}\r\n"],"version":3}