@ptcwebops/ptcw-design 7.0.5-upgrade → 7.0.6-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 (20) hide show
  1. package/dist/cjs/my-component.ptc-button.ptc-select.ptc-spacer.entry.cjs.js.map +1 -1
  2. package/dist/cjs/my-component_4.cjs.entry.js +28 -1
  3. package/dist/collection/components/atoms/ptc-select/ptc-select.js +28 -1
  4. package/dist/collection/components/atoms/ptc-select/ptc-select.js.map +1 -1
  5. package/dist/components/academic-form-test.js +1 -1
  6. package/dist/components/embedded-form.js +1 -1
  7. package/dist/components/{p-1BqkHLLN.js → p-fZY9ayoy.js} +30 -3
  8. package/dist/components/p-fZY9ayoy.js.map +1 -0
  9. package/dist/components/ptc-form.js +1 -1
  10. package/dist/components/ptc-select.js +1 -1
  11. package/dist/esm/my-component.ptc-button.ptc-select.ptc-spacer.entry.js.map +1 -1
  12. package/dist/esm/my-component_4.entry.js +28 -1
  13. package/dist/ptcw-design/my-component.ptc-button.ptc-select.ptc-spacer.entry.esm.js.map +1 -1
  14. package/dist/ptcw-design/{p-4ffc00bc.entry.js → p-433d8427.entry.js} +2 -2
  15. package/dist/ptcw-design/p-433d8427.entry.js.map +1 -0
  16. package/dist/ptcw-design/ptcw-design.esm.js +1 -1
  17. package/dist/types/components/atoms/ptc-select/ptc-select.d.ts +2 -0
  18. package/package.json +1 -1
  19. package/dist/components/p-1BqkHLLN.js.map +0 -1
  20. package/dist/ptcw-design/p-4ffc00bc.entry.js.map +0 -1
package/dist/esm/my-component.ptc-button.ptc-select.ptc-spacer.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"my-component.ptc-button.ptc-select.ptc-spacer.entry.js","sources":["src/components/atoms/my-component/my-component.css?tag=my-component&encapsulation=shadow","src/components/atoms/my-component/my-component.tsx","src/components/atoms/ptc-button/ptc-button.scss?tag=ptc-button&encapsulation=shadow","src/components/atoms/ptc-button/ptc-button.tsx","src/components/atoms/ptc-select/ptc-select.scss?tag=ptc-select","src/components/atoms/ptc-select/ptc-select.tsx","src/components/utilities/ptc-spacer/ptc-spacer.css?tag=ptc-spacer&encapsulation=shadow","src/components/utilities/ptc-spacer/ptc-spacer.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { format } from '../../../utils/utils';\n\n@Component({\n tag: 'my-component',\n styleUrl: 'my-component.css',\n shadow: true,\n})\nexport class MyComponent {\n /**\n * The first name\n */\n @Prop() first: string;\n\n /**\n * The middle name\n */\n @Prop() middle: string;\n\n /**\n * The last name\n */\n @Prop() last: string;\n\n private getText(): string {\n return format(this.first, this.middle, this.last);\n }\n\n render() {\n return <div>Hello, World! I'm {this.getText()}</div>;\n }\n}\n","@use \"mixins\" as *;\r\n\r\nbutton.disabled {\r\n\tpointer-events: none;\r\n\topacity: 0.6;\r\n}\r\n\r\nbutton {\r\n\tbackground-color: var(--color-gray-10);\r\n\tdisplay: inline-block;\r\n\tborder-style: solid;\r\n\tborder-width: 1px;\r\n\twhite-space: normal;\r\n\tposition: relative;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\tcursor: pointer;\r\n\tpadding: 9.4px 17.5px;\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&.reveal-down {\r\n\t\t.content {\r\n\t\t\ttransition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\r\n\t\t\topacity: 0;\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t}\r\n\t\t.icon-wrapper {\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-content: center;\r\n\t\t\theight: 16px;\r\n\r\n\t\t\t.icon {\r\n\t\t\t\ttransition: top var(--ptc-transition-fast) var(--ptc-ease-out);\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\tdisplay: inline-block;\r\n\t\t\t\ttop: -12px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\t&.reveal-down {\r\n\t\t\t.content {\r\n\t\t\t\topacity: 1;\r\n\t\t\t}\r\n\r\n\t\t\t.icon-wrapper {\r\n\t\t\t\t.icon {\r\n\t\t\t\t\ttop: 4px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&.animation-right,\r\n\t&.animation-down {\r\n\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\ttransition: transform var(--ptc-transition-medium)\r\n\t\t\t\tvar(--ptc-ease-inout);\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: inline-block;\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\t&.animation-right {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateX(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.animation-down {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateY(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tspan {\r\n\t\tfont-family: var(--ptc-font-latin);\r\n\t\tfont-size: var(--ptc-font-size-small);\r\n\t\tfont-weight: bold;\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t}\r\n\t&.left {\r\n\t\ttext-align: left;\r\n\t}\r\n\t&.right {\r\n\t\ttext-align: right;\r\n\t}\r\n\t&.center {\r\n\t\ttext-align: center;\r\n\t}\r\n}\r\n\r\n.icon-left {\r\n\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\tmargin-right: var(--ptc-element-spacing-01);\r\n\t}\r\n}\r\n\r\n.icon-right {\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tmargin-left: var(--ptc-element-spacing-01);\r\n\t}\r\n}\r\n\r\n.blackgrey {\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\t}\r\n\r\n\tbox-shadow: var(--ptc-shadow-x-small);\r\n\tborder: solid 1px var(--color-gray-10);\r\n\tbackground-image: linear-gradient(\r\n\t\t285deg,\r\n\t\tvar(--color-gray-10) 155%,\r\n\t\tvar(--color-gray-07) 62%\r\n\t);\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n}\r\n\r\n.turtlegreen {\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\t}\r\n\r\n\tbox-shadow: var(--ptc-shadow-x-small);\r\n\tborder: solid 1px var(--color-green-07);\r\n\tbackground-image: linear-gradient(\r\n\t\t285deg,\r\n\t\tvar(--color-green-07) 155%,\r\n\t\tvar(--color-green-07) 62%\r\n\t);\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n}\r\n\r\n.offwhite {\r\n\tbox-shadow: var(--ptc-shadow-x-small);\r\n\tborder: solid 1px var(--color-gray-10);\r\n\tbackground-image: linear-gradient(\r\n\t\tto right,\r\n\t\tvar(--color-white),\r\n\t\tvar(--color-gray-02),\r\n\t\tvar(--color-gray-01)\r\n\t);\r\n\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-gray-10);\r\n\t}\r\n}\r\n\r\n.legacy-green {\r\n\tmargin-left: 10px;\r\n\tpadding: 10px 20px;\r\n\tmargin-bottom: var(--ptc-element-spacing-01);\r\n\tmargin-top: var(--ptc-element-spacing-01);\r\n\r\n\t&:after {\r\n\t\tposition: absolute;\r\n\t\tcontent: \"\";\r\n\t\ttop: -1px;\r\n\t\tleft: 0;\r\n\t\tbottom: 0;\r\n\t\tright: 0;\r\n\t\twidth: 100%;\r\n\t\theight: 103%;\r\n\t\tbackground-image: linear-gradient(\r\n\t\t\tto right,\r\n\t\t\tvar(--color-green-08),\r\n\t\t\tvar(--color-green-06)\r\n\t\t);\r\n\t\topacity: 0;\r\n\t\ttransition: opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);\r\n\t\tborder-radius: 2px;\r\n\t}\r\n\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\r\n\t\tspan {\r\n\t\t\tcolor: var(--color-white);\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover:after {\r\n\t\topacity: 1;\r\n\t}\r\n\r\n\tbox-shadow: var(--ptc-shadow-large);\r\n\tborder: solid 2.5px var(--color-green-08);\r\n\tbackground-image: linear-gradient(\r\n\t\tto right,\r\n\t\tvar(--color-green-06),\r\n\t\tvar(--color-green-08)\r\n\t);\r\n\r\n\tspan {\r\n\t\tfont-family: var(--ptc-font-secondary-latin);\r\n\t\tcolor: var(--color-white);\r\n\t\tz-index: 100;\r\n\t\tposition: relative;\r\n\t\ttext-transform: uppercase;\r\n\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\t\tfont-size: var(--ptc-font-size-x-small);\r\n\r\n\t\t@include screen-sm {\r\n\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t\tletter-spacing: var(--ptc-letter-spacing-loose);\r\n\t\t}\r\n\t}\r\n\r\n\ticon-asset {\r\n\t\tdisplay: inline;\r\n\t}\r\n}\r\n\r\n//Link style adjustments\r\na {\r\n\tborder-style: solid;\r\n\tborder-width: 1px;\r\n\tposition: relative;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\tpadding: 9.4px 17.5px;\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tdisplay: inline-block;\r\n\tposition: relative;\r\n\r\n\t&.animation-right,\r\n\t&.animation-down {\r\n\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\ttransition: all var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: inline-block;\r\n\t\t\tmargin-left: 5px;\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\t&.animation-right {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateX(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.animation-down {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateY(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&.left {\r\n\t\ttext-align: left;\r\n\t}\r\n\t&.right {\r\n\t\ttext-align: right;\r\n\t}\r\n\t&.center {\r\n\t\ttext-align: center;\r\n\t}\r\n}\r\n\r\n.nav {\r\n\tfont-family: var(--ptc-font-latin);\r\n\tbackground-color: var(--color-gray-10);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tborder: 1px solid var(--color-white);\r\n\tborder-bottom-style: solid;\r\n\tborder-bottom-width: 1px;\r\n\tbox-sizing: border-box;\r\n\tcolor: var(--color-white);\r\n\tdisplay: inline-block;\r\n\tfont-size: var(--ptc-font-size-xx-small);\r\n\tfont-stretch: 100%; //undefined value\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tline-height: var(--ptc-line-height-loose);\r\n\tlist-style: none;\r\n\tpadding: 3px var(--ptc-element-spacing-04);\r\n\tposition: relative;\r\n\ttext-align: center;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\ttransition: background-color var(--ptc-transition-medium)\r\n\t\tvar(--ptc-ease-inout);\r\n\r\n\t&:focus-visible {\r\n\t\tborder-radius: 4px !important;\r\n\t\tborder: 2px solid #fff !important;\r\n\t\toutline: 5px solid #003dd6 !important;\r\n\t\tbackground-color: transparent !important;\r\n\t\toutline-offset: 0px !important;\r\n\t}\r\n\r\n\t&:focus {\r\n\t\ttext-decoration: none;\r\n\t\tborder: solid 2px transparent;\r\n\t\toutline: none;\r\n\t}\r\n\r\n\t// &:focus {\r\n\t// outline: 3px solid var(--color-blue-07);\r\n\t// outline-offset: 2px;\r\n\t// }\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t}\r\n}\r\n\r\n.nav-store-btn {\r\n\tfont-family: var(--ptc-font-latin);\r\n\tbackground-color: var(--color-green-07);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tborder: 1px solid var(--color-green-07);\r\n\tborder-bottom-style: solid;\r\n\tborder-bottom-width: 1px;\r\n\tbox-sizing: border-box;\r\n\tcolor: var(--color-white);\r\n\tdisplay: inline-block;\r\n\tfont-size: var(--ptc-font-size-xx-small);\r\n\tfont-stretch: 100%; //undefined value\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tline-height: var(--ptc-line-height-loose);\r\n\tlist-style: none;\r\n\tpadding: 3px var(--ptc-element-spacing-04);\r\n\tposition: relative;\r\n\ttext-align: center;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\ttransition: background-color var(--ptc-transition-medium)\r\n\t\tvar(--ptc-ease-inout);\r\n\r\n\t&:focus-visible {\r\n\t\tborder-radius: 4px !important;\r\n\t\tborder: 2px solid #fff !important;\r\n\t\toutline: 5px solid #003dd6 !important;\r\n\t\tbackground-color: var(--color-green-07) !important;\r\n\t\toutline-offset: 0px !important;\r\n\t}\r\n\r\n\t&:focus {\r\n\t\ttext-decoration: none;\r\n\t\tborder: solid 2px transparent;\r\n\t\toutline: none;\r\n\t}\r\n\r\n\t// &:focus {\r\n\t// outline: 3px solid var(--color-blue-07);\r\n\t// outline-offset: 2px;\r\n\t// }\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-green-08);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-green-09);\r\n\t\ttransition: none;\r\n\t}\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\tpadding: var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);\r\n\ttransition: background-color var(--ptc-ease-inout)\r\n\t\tvar(--ptc-transition-medium);\r\n\tline-height: 20px; //undefined size\r\n\r\n\t&.disabled {\r\n\t\tpointer-events: none;\r\n\t\tborder-color: var(--color-gray-03);\r\n\t\tbackground: var(--color-gray-02);\r\n\r\n\t\tspan {\r\n\t\t\tcolor: var(--color-gray-03);\r\n\t\t}\r\n\r\n\t\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\t\tfill: var(--color-gray-03) !important;\r\n\t\t}\r\n\t}\r\n\r\n\t// &:focus {\r\n\t// outline: 3px solid var(--color-blue-07);\r\n\t// outline-offset: 2px;\r\n\t// }\r\n\r\n\t&:focus-visible {\r\n\t\t@include base-focus-state;\r\n\t}\r\n\r\n\tspan {\r\n\t\tfont-family: var(--ptc-font-latin);\r\n\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\tfont-size: var(--ptc-font-size-small);\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t\tletter-spacing: normal;\r\n\t}\r\n\t&.small {\r\n\t\tpadding: var(--ptc-element-spacing-03) var(--ptc-element-spacing-04);\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t}\r\n\t}\r\n\t&.medium {\r\n\t\tpadding: 14px 20px;\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t}\r\n\t}\r\n\t&.large {\r\n\t\tpadding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-large);\r\n\t\t}\r\n\t}\r\n\r\n\t&.acc-alt-style {\r\n\t\t&:focus-visible {\r\n\t\t\t@include focus-state;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.ptc-primary {\r\n\tbackground: var(--color-gray-12); //--color-primary\r\n\tborder: 2px solid var(--color-green-07); //--color-primary-green\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-10);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-black);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-white) !important;\r\n\t}\r\n}\r\n\r\n.ptc-secondary {\r\n\tbackground: var(--color-gray-12);\r\n\tborder: 2px solid var(--color-gray-08);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-10);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-black);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-white) !important;\r\n\t}\r\n}\r\n\r\n.ptc-tertiary {\r\n\tbackground: var(--color-white);\r\n\tborder: 2px solid var(--color-gray-10);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-02);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-gray-03);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-gray-10);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-gray-10) !important;\r\n\t}\r\n\r\n\t::slotted(a) {\r\n\t\tcolor: var(--color-gray-10) !important;\r\n\t\ttext-decoration-line: none !important;\r\n\t}\r\n}\r\n\r\n.ptc-quaternary {\r\n\tbackground: var(--color-green-07);\r\n\tborder: 2px solid var(--color-green-07);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tcursor: pointer;\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-green-08);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-green-09);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-white) !important;\r\n\t}\r\n}\r\n\r\n.icon-toggle {\r\n\tbackground: var(--color-white);\r\n\tborder: 1px solid var(--color-gray-10);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tpadding: 0;\r\n\theight: 2.125rem;\r\n\twidth: 2.125rem;\r\n\tbox-shadow: var(--ptc-shadow-medium);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-02);\r\n\t}\r\n\r\n\t&:active {\r\n\t\ttransition: none;\r\n\t\tbackground-color: var(--color-gray-03);\r\n\t}\r\n\r\n\t&.active {\r\n\t\tbackground-color: var(--color-gray-04);\r\n\r\n\t\t&:hover {\r\n\t\t\tbackground-color: var(--color-gray-05);\r\n\t\t}\r\n\r\n\t\t&:active {\r\n\t\t\ttransition: none;\r\n\t\t\tbackground-color: var(--color-gray-03);\r\n\t\t}\r\n\t}\r\n\r\n\t&:focus {\r\n\t\toutline: 2px solid var(--color-blue-07);\r\n\t\toutline-offset: 1px;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-gray-10);\r\n\t\tpadding: 0;\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-gray-10) !important;\r\n\t}\r\n\r\n\t::slotted(icon-asset) {\r\n\t\tdisplay: block;\r\n\t\tmargin: auto;\r\n\t\theight: 18px;\r\n\t\twidth: 18px;\r\n\t}\r\n}\r\n\r\n.clear-search {\r\n\tborder: none;\r\n\tpadding: 0px;\r\n\tline-height: var(----ptc-line-height-densest);\r\n\tbackground-color: transparent;\r\n\r\n\t&:hover {\r\n\t\ttext-decoration: underline;\r\n\t\ttext-decoration-color: var(--color-white);\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\tfont-size: var(--ptc-font-size-x-small);\r\n\t\t-moz-osx-font-smoothing: grayscale;\r\n\t\t-webkit-font-smoothing: antialiased;\r\n\t}\r\n}\r\n\r\n.tracker-div {\r\n\t@include div-tracker;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.focus-state-dark-background {\r\n\t&:focus-visible {\r\n\t\t@include focus-state;\r\n\t}\r\n}\r\n\r\n// New CTA's\r\n// Common CTA base styles\r\n%cta-base {\r\n\tpadding: 0.875rem 1.25rem;\r\n\tfont-size: var(--ptc-font-size-small);\r\n\tfont-style: normal;\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tline-height: var(--ptc-line-height-densest);\r\n\tcolor: var(--color-white);\r\n\tborder: 2px solid transparent;\r\n\ttext-decoration: none;\r\n\r\n\t&.medium {\r\n\t\tpadding: 0.75rem 1rem;\r\n\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\tfont-weight: var(--ptc-font-weight-extrabold);\r\n\t\t}\r\n\t}\r\n\r\n\t&.small {\r\n\t\tpadding: 0.5rem 0.75rem;\r\n\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\tfont-weight: var(--ptc-font-weight-extrabold);\r\n\t\t}\r\n\t}\r\n\r\n\t&.disabled {\r\n\t\tpointer-events: none;\r\n\t\tcolor: var(--color-gray-03);\r\n\t\tborder-color: var(--color-gray-03);\r\n\t\tbackground-color: var(--color-gray-02);\r\n\r\n\t\ticon-asset svg {\r\n\t\t\tfill: var(--color-gray-03);\r\n\t\t}\r\n\r\n\t\t&:focus-visible {\r\n\t\t\tbackground-color: var(--color-gray-02);\r\n\t\t}\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\t@include focus-state;\r\n\t}\r\n\r\n\t&.full-width {\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.cta-content-wrap {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\r\n\t\ticon-asset {\r\n\t\t\tmargin-right: 8px;\r\n\t\t\tline-height: 0;\r\n\t\t\t& + span {\r\n\t\t\t\ttext-align: left;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Primary CTA\r\n.primary-cta {\r\n\t@extend %cta-base;\r\n\tbackground-color: var(--color-green-07);\r\n\tborder-color: var(--color-green-07);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-green-08);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-green-09);\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\tbackground-color: var(--color-green-07);\r\n\t}\r\n}\r\n\r\n// Secondary CTA (dark theme)\r\n.secondary-cta-dark {\r\n\t@extend %cta-base;\r\n\tbackground-color: var(--color-gray-12);\r\n\tborder-color: var(--color-gray-08);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-10);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-black);\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t}\r\n}\r\n\r\n// Secondary CTA (light theme)\r\n.secondary-cta-light {\r\n\t@extend %cta-base;\r\n\tbackground-color: var(--color-white);\r\n\tborder-color: var(--color-gray-10);\r\n\tcolor: var(--color-gray-10);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-02);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-gray-03);\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\tbackground-color: var(--color-white);\r\n\t}\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","@import \"~@material/select/dist/mdc.select.css\";\r\n@import \"~@material/list/dist/mdc.list.css\";\r\n@import \"~@material/menu/dist/mdc.menu.css\";\r\n@import \"~@material/menu-surface/dist/mdc.menu-surface.css\";\r\n\r\n:host {\r\n\tdisplay: block;\r\n}\r\n\r\n.ptc-select {\r\n\t.ptc-label-select {\r\n\t\tdisplay: block;\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\tline-height: normal;\r\n\t\tmargin-bottom: var(--ptc-element-spacing-01);\r\n\t\tz-index: 1;\r\n\t\tposition: relative;\r\n\t\tcolor: #40434a;\r\n\t}\r\n\r\n\t.mdc-select {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tmargin-bottom: var(--ptc-element-spacing-04);\r\n\t}\r\n\r\n\t.mdc-select--invalid {\r\n\t\t&::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: calc(100% + 16px);\r\n\t\t\theight: calc(100% + 8px);\r\n\t\t\tbackground: #fef3f3;\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: column;\r\n\t\t\tjustify-content: center;\r\n\t\t\tz-index: 0;\r\n\t\t\tleft: 50%;\r\n\t\t\ttop: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t}\r\n\r\n\t\t.mdc-select__anchor {\r\n\t\t\tbackground-color: var(--color-white) !important;\r\n\t\t\tpadding-left: 8px;\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select--outlined {\r\n\t\twidth: 273px;\r\n\r\n\t\t.mdc-select__anchor {\r\n\t\t\theight: 34px;\r\n\t\t\twidth: 273px;\r\n\t\t\tpadding-left: 8px;\r\n\t\t}\r\n\r\n\t\t.mdc-notched-outline__trailing {\r\n\t\t\tborder-radius: 0px !important;\r\n\t\t}\r\n\r\n\t\t.mdc-notched-outline__leading {\r\n\t\t\tborder-radius: 0px !important;\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select-helper-text {\r\n\t\tz-index: 1;\r\n\t\tposition: relative;\r\n\t\topacity: 0;\r\n\t\tmargin-top: var(--ptc-element-spacing-02);\r\n\t\t//margin-bottom: var(--ptc-element-spacing-01);\r\n\t}\r\n\r\n\t.select-error-svg {\r\n\t\ttransform: translate(-8px, 3px);\r\n\t}\r\n\r\n\t.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid\r\n\t\t.mdc-select-helper-text--validation-msg {\r\n\t\tcolor: #af3231;\r\n\t\tfont-family: Raleway;\r\n\t\tfont-size: 14px;\r\n\t\tfont-style: normal;\r\n\t\tfont-weight: 600;\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t\topacity: 1;\r\n\t\theight: auto;\r\n\t\tmargin-left: 8px;\r\n\t}\r\n\r\n\t.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid\r\n\t\t.mdc-select-helper-text--info-msg {\r\n\t\tcolor: #40434a;\r\n\t\tfont-family: var(--ptc-font-latin);\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-style: normal;\r\n\t\tfont-weight: var(--ptc-font-weight-medium);\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t\tmax-width: 240px;\r\n\t\topacity: 1;\r\n\t\theight: auto;\r\n\t\ttransform: translateX(8px);\r\n\t}\r\n\r\n\t.mdc-select-helper-text--validation-msg,\r\n\t.mdc-select-helper-text--info-msg {\r\n\t\tline-height: 0.66;\r\n\t\theight: 0;\r\n\t}\r\n\r\n\t.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused {\r\n\t\t.mdc-notched-outline {\r\n\t\t\t.mdc-notched-outline__leading,\r\n\t\t\t.mdc-notched-outline__notch,\r\n\t\t\t.mdc-notched-outline__trailing {\r\n\t\t\t\tborder-color: var(--color-hyperlink);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select--outlined:not(\r\n\t\t\t.mdc-select--disabled\r\n\t\t).mdc-select--focused.keyboard-focus {\r\n\t\t.mdc-notched-outline {\r\n\t\t\t.mdc-notched-outline__leading,\r\n\t\t\t.mdc-notched-outline__notch,\r\n\t\t\t.mdc-notched-outline__trailing {\r\n\t\t\t\t//Update for tab navigation\r\n\t\t\t\tborder-color: var(--keyboard-nav-outline);\r\n\t\t\t\tborder-width: 5px;\r\n\t\t\t}\r\n\t\t\t.mdc-notched-outline__leading {\r\n\t\t\t\tborder-top-left-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t\tborder-bottom-left-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t}\r\n\t\t\t.mdc-notched-outline__trailing {\r\n\t\t\t\tborder-top-right-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t\tborder-bottom-right-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select:not(.mdc-select--disabled).mdc-select--focused {\r\n\t\t.mdc-select__dropdown-icon {\r\n\t\t\tfill: var(--color-hyperlink);\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select {\r\n\t\t.mdc-select__dropdown-icon {\r\n\t\t\twidth: 18px;\r\n\t\t\theight: 18px;\r\n\t\t\tmargin-right: 8px;\r\n\t\t}\r\n\t}\r\n\r\n\t// .placehoder-li {\r\n\t// color: var(--color-gray-07);\r\n\t// font-family: Raleway;\r\n\t// font-size: var(--ptc-font-size-xx-small);\r\n\t// font-weight: var(--ptc-font-weight-regular);\r\n\t// line-height:var(--ptc-line-height-normal);\r\n\t// }\r\n\r\n\t.mdc-list {\r\n\t\tfont-family: \"Open Sans\", Arial, sans-serif;\r\n\t}\r\n\r\n\t.mdc-list-item {\r\n\t\tpadding: 5px 8px;\r\n\r\n\t\t&:hover {\r\n\t\t\t.mdc-list-item__ripple::before,\r\n\t\t\t.mdc-list-item__ripple::after {\r\n\t\t\t\tbackground-color: var(--color-gray-02) !important;\r\n\t\t\t\topacity: 1;\r\n\t\t\t\tz-index: -1;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&:focus,\r\n\t\t&:focus-visible {\r\n\t\t\tbackground-color: var(--color-gray-02);\r\n\t\t\toutline: none;\r\n\t\t}\r\n\r\n\t\t&:focus .mdc-list-item__ripple::before,\r\n\t\t&:focus .mdc-list-item__ripple::after,\r\n\t\t&:focus-visible .mdc-list-item__ripple::before,\r\n\t\t&:focus-visible .mdc-list-item__ripple::after {\r\n\t\t\tbackground-color: var(--color-gray-02) !important;\r\n\t\t\topacity: 1;\r\n\t\t\tz-index: -1;\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-list-item--selected {\r\n\t\t.mdc-list-item__ripple::before,\r\n\t\t.mdc-list-item__ripple::after {\r\n\t\t\tbackground-color: var(--color-gray-02) !important;\r\n\t\t\topacity: 1;\r\n\t\t\tz-index: -1;\r\n\t\t}\r\n\r\n\t\t&:hover {\r\n\t\t\t.mdc-list-item__ripple::before,\r\n\t\t\t.mdc-list-item__ripple::after {\r\n\t\t\t\tbackground-color: var(--color-gray-04) !important;\r\n\t\t\t\topacity: 1;\r\n\t\t\t\tz-index: -1;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-list-item__text,\r\n\t.mdc-select__selected-text {\r\n\t\tcolor: var(--color-gray-12);\r\n\t\tfont-family: \"Open Sans\", Arial, sans-serif;\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-weight: var(--ptc-font-weight-regular);\r\n\t\tline-height: 24px;\r\n\t\t/* 171.429% */\r\n\t}\r\n\r\n\t:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple::before,\r\n\t:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple::after {\r\n\t\tbackground-color: unset;\r\n\t}\r\n}\r\n","import {\r\n\tComponent,\r\n\th,\r\n\tElement,\r\n\tProp,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tHost,\r\n\tState,\r\n} from \"@stencil/core\";\r\nimport { MDCSelect } from \"@material/select\";\r\nimport { ValidationMessages } from \"../../../utils/validation-messages\";\r\nimport { getLanguageFromURL } from \"../../../utils/utils\";\r\n\r\ninterface ExtendedMDCSelect extends MDCSelect {\r\n\topen: boolean;\r\n}\r\n\r\n@Component({\r\n\ttag: \"ptc-select\",\r\n\tstyleUrl: \"ptc-select.scss\",\r\n\tshadow: false,\r\n})\r\nexport class PtcSelect {\r\n\t@Element() el: HTMLElement;\r\n\t@Prop() fieldId: string;\r\n\t@Prop() label: string;\r\n\t@Prop() isRequired: boolean = true;\r\n\t@Prop({ mutable: true }) helpertext: string = \"Please select a value.\";\r\n\t@Prop() fieldName: string;\r\n\t@Prop() disabled: boolean = false;\r\n\t@Prop({ mutable: true }) selectedValue: string = \"\";\r\n\t@Prop({ mutable: true }) defaultValue: string = \"\";\r\n\t@Prop() infoText: string;\r\n\t/**\r\n\t * Eloqua Data\r\n\t */\r\n\t@Prop() ptcDataEloquaName: string;\r\n\t@Prop() ptcDataTargetEloquaName: string;\r\n\t@State() language: string = \"en\";\r\n\r\n\t@Event() valueChange: EventEmitter<string>;\r\n\r\n\tdefaultSelect: ExtendedMDCSelect;\r\n\tlastInteraction: \"mouse\" | \"keyboard\" = \"mouse\";\r\n\tprivate documentMousedownHandler: () => void;\r\n\tprivate documentKeydownHandler: (e: KeyboardEvent) => void;\r\n\r\n\tasync setValue() {\r\n\t\tthis.defaultSelect.value = this.defaultValue;\r\n\t}\r\n\r\n\tcomponentWillLoad() {\r\n\t\tthis.language = getLanguageFromURL();\r\n\t\tthis.helpertext = this.getValidationMessage(\"select\");\r\n\t}\r\n\r\n\tcomponentDidLoad() {\r\n\t\t// Use requestAnimationFrame to ensure slotted content is fully rendered\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tthis.initializeMDCSelect();\r\n\t\t});\r\n\t}\r\n\r\n\tprivate initializeMDCSelect() {\r\n\t\tconsole.log(\"[ptc-select DEBUG] Starting initialization for field:\", this.fieldId);\r\n\t\t\r\n\t\tconst selectElement = this.el.querySelector(\".mdc-select\");\r\n\t\tif (!selectElement) {\r\n\t\t\tconsole.warn(\"[ptc-select DEBUG] Unable to find .mdc-select element.\");\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconsole.log(\"[ptc-select DEBUG] Found .mdc-select element:\", selectElement);\r\n\r\n\t\t// Ensure the menu has the mdc-list inside it\r\n\t\tconst menu = selectElement.querySelector(\".mdc-select__menu\");\r\n\t\tconst list = menu?.querySelector(\".mdc-list\");\r\n\t\tconsole.log(\"[ptc-select DEBUG] Menu element:\", menu);\r\n\t\tconsole.log(\"[ptc-select DEBUG] List element:\", list);\r\n\t\t\r\n\t\tif (!list) {\r\n\t\t\tconsole.warn(\"[ptc-select DEBUG] Unable to find .mdc-list inside menu. Retrying...\");\r\n\t\t\t// Retry after a short delay if list is not found (slot content may not be ready)\r\n\t\t\tsetTimeout(() => this.initializeMDCSelect(), 100);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\ttry {\r\n\t\t\tthis.defaultSelect = new MDCSelect(selectElement) as ExtendedMDCSelect;\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] MDCSelect initialized successfully:\", this.defaultSelect);\r\n\t\t} catch (error) {\r\n\t\t\tconsole.error(\"[ptc-select DEBUG] Error initializing MDCSelect:\", error);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Add click listener for debugging\r\n\t\tconst anchor = selectElement.querySelector(\".mdc-select__anchor\");\r\n\t\tif (anchor) {\r\n\t\t\tanchor.addEventListener(\"click\", (e) => {\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] Anchor clicked!\", e);\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] MDCSelect open state:\", this.defaultSelect?.open);\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] Menu classes:\", menu?.className);\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] Select classes:\", selectElement.className);\r\n\t\t\t});\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] Click listener added to anchor\");\r\n\t\t}\r\n\r\n\t\t// Listen for MDCSelect events\r\n\t\tthis.defaultSelect.listen(\"MDCSelect:change\", () => {\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] MDCSelect:change event fired, value:\", this.defaultSelect.value);\r\n\t\t});\r\n\r\n\t\tthis.defaultSelect.listen(\"MDCMenuSurface:opened\", () => {\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] Menu opened!\");\r\n\t\t});\r\n\r\n\t\tthis.defaultSelect.listen(\"MDCMenuSurface:closed\", () => {\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] Menu closed!\");\r\n\t\t});\r\n\r\n\t\tif (this.defaultValue) this.setValue();\r\n\r\n\t\tthis.defaultSelect.listen(\"MDCSelect:change\", () => {\r\n\t\t\tif (this.selectedValue !== this.defaultSelect.value) {\r\n\t\t\t\tthis.valueChange.emit(this.defaultSelect.value);\r\n\t\t\t\tthis.selectedValue = this.defaultSelect.value;\r\n //PUT BACK IN WHEN WE CAN FIGURE OUT WHY IT'S NOT WORKING\r\n\t\t\t\t// if (this.fieldId === \"contact-country\") {\r\n\t\t\t\t// \tconst countryCode = this.selectedValue\r\n\t\t\t\t// \t\t? this.map[this.selectedValue]\r\n\t\t\t\t// \t\t: \"\";\r\n\t\t\t\t// \tconst telField = document.querySelector(\r\n\t\t\t\t// \t\t'ptc-textfield[field-id=\"contact-phone\"]',\r\n\t\t\t\t// \t) as HTMLPtcTextfieldElement;\r\n\t\t\t\t// \t// if (telField && countryCode) {\r\n\t\t\t\t// \t// \ttelField.syncCountry(countryCode);\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\tthis.addKeyboardAccessibility();\r\n\r\n\t\tthis.setupFocusHandlers();\r\n\t}\r\n\r\n\tdisconnectedCallback() {\r\n\t\t// Remove document event listeners to prevent memory leaks\r\n\t\tif (this.documentMousedownHandler) {\r\n\t\t\tdocument.removeEventListener(\"mousedown\", this.documentMousedownHandler);\r\n\t\t}\r\n\t\tif (this.documentKeydownHandler) {\r\n\t\t\tdocument.removeEventListener(\"keydown\", this.documentKeydownHandler);\r\n\t\t}\r\n\t\tif (this.defaultSelect) {\r\n\t\t\tthis.defaultSelect.destroy();\r\n\t\t}\r\n\t}\r\n\r\n\taddKeyboardAccessibility() {\r\n\t\tconst selectAnchor = this.el.querySelector(\r\n\t\t\t\".mdc-select__anchor\",\r\n\t\t) as HTMLElement;\r\n\t\tconst menu = this.el.querySelector(\".mdc-select__menu\") as HTMLElement;\r\n\r\n\t\tif (!selectAnchor || !menu) {\r\n\t\t\tconsole.warn(\r\n\t\t\t\t\"ptc-select: Unable to find select anchor or menu elements.\",\r\n\t\t\t);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tselectAnchor.addEventListener(\"keydown\", (event: KeyboardEvent) => {\r\n\t\t\tconst key = event.key;\r\n\r\n\t\t\tswitch (key) {\r\n\t\t\t\tcase \"Enter\":\r\n\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\tthis.defaultSelect.open = !this.defaultSelect.open;\r\n\t\t\t\t\tif (this.defaultSelect.open) {\r\n\t\t\t\t\t\tthis.setFocusToFirstMenuitem();\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase \"ArrowDown\":\r\n\t\t\t\tcase \"ArrowUp\":\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase \"Escape\":\r\n\t\t\t\t\tif (this.defaultSelect.open) {\r\n\t\t\t\t\t\tthis.defaultSelect.open = false;\r\n\t\t\t\t\t\tselectAnchor.focus();\r\n\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase \"Tab\":\r\n\t\t\t\t\tif (this.defaultSelect.open) {\r\n\t\t\t\t\t\tthis.defaultSelect.open = false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tdefault:\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\t// Focus the first menu item in the dropdown\r\n\tsetFocusToFirstMenuitem() {\r\n\t\tconst firstMenuItem = this.el.querySelector(\r\n\t\t\t\".mdc-list-item\",\r\n\t\t) as HTMLElement;\r\n\t\tif (firstMenuItem) {\r\n\t\t\tfirstMenuItem.focus();\r\n\t\t}\r\n\t}\r\n\r\n\tsetFocusToNextMenuitem(currentMenuitem: HTMLElement) {\r\n\t\tconst menuItems = Array.from(\r\n\t\t\tthis.el.querySelectorAll(\".mdc-list-item\"),\r\n\t\t) as HTMLElement[];\r\n\t\tconst currentIndex = menuItems.indexOf(currentMenuitem);\r\n\t\tconst nextIndex = (currentIndex + 1) % menuItems.length;\r\n\t\tmenuItems[nextIndex].focus();\r\n\t}\r\n\r\n\tsetFocusToPreviousMenuitem(currentMenuitem: HTMLElement) {\r\n\t\tconst menuItems = Array.from(\r\n\t\t\tthis.el.querySelectorAll(\".mdc-list-item\"),\r\n\t\t) as HTMLElement[];\r\n\t\tconst currentIndex = menuItems.indexOf(currentMenuitem);\r\n\t\tconst previousIndex =\r\n\t\t\t(currentIndex - 1 + menuItems.length) % menuItems.length;\r\n\t\tmenuItems[previousIndex].focus();\r\n\t}\r\n\r\n\tgetValidationMessage(type: string) {\r\n\t\treturn ValidationMessages[this.language][type];\r\n\t}\r\n\r\n\tgetSelectClassName() {\r\n\t\tlet className =\r\n\t\t\t\"mdc-select mdc-select--outlined mdc-select--no-label mf-listen\";\r\n\t\tif (this.isRequired) {\r\n\t\t\tclassName = `${className} mdc-select--required`;\r\n\t\t}\r\n\t\treturn className;\r\n\t}\r\n\r\n\tsetupFocusHandlers() {\r\n\t\t// Track the last interaction type - use bound handlers for proper cleanup\r\n\t\tthis.documentMousedownHandler = () => {\r\n\t\t\tthis.lastInteraction = \"mouse\";\r\n\t\t};\r\n\t\tthis.documentKeydownHandler = (e: KeyboardEvent) => {\r\n\t\t\tif (e.key === \"Tab\") {\r\n\t\t\t\tthis.lastInteraction = \"keyboard\";\r\n\t\t\t}\r\n\t\t};\r\n\t\tdocument.addEventListener(\"mousedown\", this.documentMousedownHandler);\r\n\t\tdocument.addEventListener(\"keydown\", this.documentKeydownHandler);\r\n\r\n\t\t// Only query select fields within this component, not globally\r\n\t\tconst selectField = this.el.querySelector(\r\n\t\t\t\".mdc-select\",\r\n\t\t) as HTMLElement;\r\n\t\tif (selectField) {\r\n\t\t\tconst select = selectField.querySelector(\".mdc-select__anchor\");\r\n\t\t\tif (select) {\r\n\t\t\t\tselect.addEventListener(\"focus\", () => {\r\n\t\t\t\t\tif (this.lastInteraction === \"keyboard\") {\r\n\t\t\t\t\t\tselectField.classList.add(\"keyboard-focus\");\r\n\t\t\t\t\t\tselectField.classList.remove(\"mouse-focus\");\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tselectField.classList.add(\"mouse-focus\");\r\n\t\t\t\t\t\tselectField.classList.remove(\"keyboard-focus\");\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t\tselect.addEventListener(\"blur\", () => {\r\n\t\t\t\t\tselectField.classList.remove(\r\n\t\t\t\t\t\t\"keyboard-focus\",\r\n\t\t\t\t\t\t\"mouse-focus\",\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\trender() {\r\n\t\treturn (\r\n\t\t\t<Host class=\"ptc-select mf-listen\">\r\n\t\t\t\t<div class={this.getSelectClassName()}>\r\n\t\t\t\t\t<label class=\"ptc-label-select\" htmlFor={this.fieldId}>\r\n\t\t\t\t\t\t{this.label}\r\n\t\t\t\t\t</label>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"mdc-select__anchor\"\r\n\t\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t\taria-haspopup=\"listbox\"\r\n\t\t\t\t\t\taria-labelledby=\"outlined-select-label\"\r\n\t\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\t\t{...(this.isRequired ? { ariaRequired: true } : null)}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"mdc-notched-outline\">\r\n\t\t\t\t\t\t\t<span class=\"mdc-notched-outline__leading\"></span>\r\n\t\t\t\t\t\t\t<span class=\"mdc-notched-outline__trailing\"></span>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<span class=\"mdc-select__selected-text-container\">\r\n\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\tid={this.fieldId}\r\n\t\t\t\t\t\t\t\tclass=\"mdc-select__selected-text\"\r\n\t\t\t\t\t\t\t\taria-controls={this.fieldName}\r\n\t\t\t\t\t\t\t\taria-describedby={this.fieldName}\r\n\t\t\t\t\t\t\t\tdata-eloqua-name={this.ptcDataEloquaName}\r\n\t\t\t\t\t\t\t\tdata-target-eloqua-name={\r\n\t\t\t\t\t\t\t\t\tthis.ptcDataTargetEloquaName\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t></span>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<span class=\"mdc-select__dropdown-icon\">\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\tclass=\"\"\r\n\t\t\t\t\t\t\t\twidth=\"10\"\r\n\t\t\t\t\t\t\t\theight=\"10\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 10 10\"\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<path d=\"M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z\" />\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\"\r\n\t\t\t\t\t\trole=\"listbox\"\r\n\t\t\t\t\t\taria-label={this.label}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<p\r\n\t\t\t\t\t\tid={this.fieldName}\r\n\t\t\t\t\t\tclass=\"mdc-select-helper-text mdc-select-helper-text--validation-msg\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\tclass=\"select-error-svg\"\r\n\t\t\t\t\t\t\twidth=\"16\"\r\n\t\t\t\t\t\t\theight=\"16\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<g clip-path=\"url(#clip0_12_1424)\">\r\n\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\td=\"M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z\"\r\n\t\t\t\t\t\t\t\t\tfill=\"#AF3231\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t<defs>\r\n\t\t\t\t\t\t\t\t<clipPath id=\"clip0_12_1424\">\r\n\t\t\t\t\t\t\t\t\t<rect width=\"16\" height=\"16\" fill=\"white\" />\r\n\t\t\t\t\t\t\t\t</clipPath>\r\n\t\t\t\t\t\t\t</defs>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t{this.helpertext}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t{this.infoText ? (\r\n\t\t\t\t\t\t<p class=\"mdc-select-helper-text mdc-select-helper-text--info-msg\">\r\n\t\t\t\t\t\t\t{this.infoText}\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t) : null}\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t{/* helper text */}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n}\r\n",":host {\r\n\tbox-sizing: border-box;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tbackground: transparent;\r\n\tborder: 0;\r\n\t-moz-appearance: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\twidth: 12px;\r\n\tmin-width: 12px;\r\n\theight: 12px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host {\r\n\t\twidth: 16px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal) {\r\n\tdisplay: inline-block;\r\n\theight: 100% !important\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xx-small) {\r\n\twidth: 4px;\r\n\tmin-width: 4px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xx-small) {\r\n\t\twidth: 4px;\r\n\t\tmin-width: 4px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.x-small) {\r\n\twidth: 4px;\r\n\tmin-width: 4px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.x-small) {\r\n\t\twidth: 8px;\r\n\t\tmin-width: 8px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.small) {\r\n\twidth: 8px;\r\n\tmin-width: 8px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.small) {\r\n\t\twidth: 12px;\r\n\t\tmin-width: 12px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.medium) {\r\n\theight: 100%\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.large) {\r\n\twidth: 16px;\r\n\tmin-width: 16px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.large) {\r\n\t\twidth: 20px;\r\n\t\tmin-width: 20px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.x-large) {\r\n\twidth: 20px;\r\n\tmin-width: 20px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.x-large) {\r\n\t\twidth: 28px;\r\n\t\tmin-width: 28px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xx-large) {\r\n\twidth: 28px;\r\n\tmin-width: 28px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xx-large) {\r\n\t\twidth: 36px;\r\n\t\tmin-width: 36px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xxx-large) {\r\n\twidth: 36px;\r\n\tmin-width: 36px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xxx-large) {\r\n\t\twidth: 48px;\r\n\t\tmin-width: 48px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xxxx-large) {\r\n\twidth: 48px;\r\n\tmin-width: 48px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xxxx-large) {\r\n\t\twidth: 72px;\r\n\t\tmin-width: 72px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xx-small) {\r\n\twidth: 100%;\r\n\theight: 4px;\r\n\tmin-height: 4px\r\n}\r\n\r\n:host(.ptc-spacer-vertical.x-small) {\r\n\twidth: 100%;\r\n\theight: 4px;\r\n\tmin-height: 4px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.x-small) {\r\n\t\theight: 8px;\r\n\t\tmin-height: 8px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.small) {\r\n\twidth: 100%;\r\n\theight: 8px;\r\n\tmin-height: 8px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.small) {\r\n\t\theight: 12px;\r\n\t\tmin-height: 12px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.medium) {\r\n\twidth: 100%\r\n}\r\n\r\n:host(.ptc-spacer-vertical.large) {\r\n\twidth: 100%;\r\n\theight: 16px;\r\n\tmin-height: 16px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.large) {\r\n\t\theight: 20px;\r\n\t\tmin-height: 20px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.x-large) {\r\n\twidth: 100%;\r\n\theight: 20px;\r\n\tmin-height: 20px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.x-large) {\r\n\t\theight: 28px;\r\n\t\tmin-height: 28px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xx-large) {\r\n\twidth: 100%;\r\n\theight: 28px;\r\n\tmin-height: 28px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.xx-large) {\r\n\t\theight: 36px;\r\n\t\tmin-height: 36px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xxx-large) {\r\n\twidth: 100%;\r\n\theight: 36px;\r\n\tmin-height: 36px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.xxx-large) {\r\n\t\theight: 48px;\r\n\t\tmin-height: 48px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xxxx-large) {\r\n\twidth: 100%;\r\n\theight: 48px;\r\n\tmin-height: 48px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.xxxx-large) {\r\n\t\theight: 72px;\r\n\t\tmin-height: 72px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.space-144){\r\n\twidth: 100%;\r\n\theight: 144px;\r\n\tmin-height: 144px;\r\n}\r\n:host(.ptc-spacer-vertical.space-120){\r\n\twidth: 100%;\r\n\theight: 120px;\r\n\tmin-height: 120px;\r\n}\r\n:host(.ptc-spacer-vertical.space-128){\r\n\twidth: 100%;\r\n\theight: 128px;\r\n\tmin-height: 128px;\r\n}\r\n\r\n:host(.ptc-spacer-xx-small) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (max-width: 22.5em) {\r\n\t:host(.ptc-spacer-xx-small) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-x-small) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (max-width: 35.99em) {\r\n\t:host(.ptc-spacer-x-small) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-small) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-small) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-medium) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 48em) {\r\n\t:host(.ptc-spacer-medium) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 62em) {\r\n\t:host(.ptc-spacer-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-x-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 64.0625em) {\r\n\t:host(.ptc-spacer-x-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-xx-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 75em) {\r\n\t:host(.ptc-spacer-xx-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-xxx-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 90em) {\r\n\t:host(.ptc-spacer-xxx-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}","import { Component, Host, h, Prop } from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n\ttag: \"ptc-spacer\",\r\n\tstyleUrl: \"ptc-spacer.css\",\r\n\tshadow: true,\r\n})\r\nexport class PtcSpacer {\r\n\t/**\r\n\t * Breakpoint\r\n\t */\r\n\t@Prop() breakpoint:\r\n\t\t| \"\"\r\n\t\t| \"medium\"\r\n\t\t| \"small\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"x-small\"\r\n\t\t| \"xx-small\"\r\n\t\t| \"xxx-large\" = \"\";\r\n\t/**\r\n\t * Spacing Size\r\n\t */\r\n\t@Prop() size:\r\n\t\t| \"large\"\r\n\t\t| \"medium\"\r\n\t\t| \"small\"\r\n\t\t| \"x-large\"\r\n\t\t| \"x-small\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xx-small\"\r\n\t\t| \"xxx-large\"\r\n\t\t| \"xxxx-large\"\r\n\t\t| \"space-144\"\r\n\t\t| \"space-120\"\r\n\t\t| \"space-128\" = \"medium\";\r\n\t/**\r\n\t * Direction\r\n\t */\r\n\t@Prop() direction: \"vertical\" | \"horizontal\" = \"vertical\";\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\treturn <Host class={classMap}></Host>;\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.size]: true,\r\n\t\t\t[\"ptc-spacer-horizontal\"]: this.direction === \"horizontal\",\r\n\t\t\t[\"ptc-spacer-vertical\"]: this.direction === \"vertical\",\r\n\t\t\t[\"ptc-spacer-xx-small\"]: this.breakpoint === \"xx-small\",\r\n\t\t\t[\"ptc-spacer-x-small\"]: this.breakpoint === \"x-small\",\r\n\t\t\t[\"ptc-spacer-small\"]: this.breakpoint === \"small\",\r\n\t\t\t[\"ptc-spacer-medium\"]: this.breakpoint === \"medium\",\r\n\t\t\t[\"ptc-spacer-large\"]: this.breakpoint === \"large\",\r\n\t\t\t[\"ptc-spacer-x-large\"]: this.breakpoint === \"x-large\",\r\n\t\t\t[\"ptc-spacer-xx-large\"]: this.breakpoint === \"xx-large\",\r\n\t\t\t[\"ptc-spacer-xxx-large\"]: this.breakpoint === \"xxx-large\",\r\n\t\t};\r\n\t}\r\n}\r\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"my-component.ptc-button.ptc-select.ptc-spacer.entry.js","sources":["src/components/atoms/my-component/my-component.css?tag=my-component&encapsulation=shadow","src/components/atoms/my-component/my-component.tsx","src/components/atoms/ptc-button/ptc-button.scss?tag=ptc-button&encapsulation=shadow","src/components/atoms/ptc-button/ptc-button.tsx","src/components/atoms/ptc-select/ptc-select.scss?tag=ptc-select","src/components/atoms/ptc-select/ptc-select.tsx","src/components/utilities/ptc-spacer/ptc-spacer.css?tag=ptc-spacer&encapsulation=shadow","src/components/utilities/ptc-spacer/ptc-spacer.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport { format } from '../../../utils/utils';\n\n@Component({\n tag: 'my-component',\n styleUrl: 'my-component.css',\n shadow: true,\n})\nexport class MyComponent {\n /**\n * The first name\n */\n @Prop() first: string;\n\n /**\n * The middle name\n */\n @Prop() middle: string;\n\n /**\n * The last name\n */\n @Prop() last: string;\n\n private getText(): string {\n return format(this.first, this.middle, this.last);\n }\n\n render() {\n return <div>Hello, World! I'm {this.getText()}</div>;\n }\n}\n","@use \"mixins\" as *;\r\n\r\nbutton.disabled {\r\n\tpointer-events: none;\r\n\topacity: 0.6;\r\n}\r\n\r\nbutton {\r\n\tbackground-color: var(--color-gray-10);\r\n\tdisplay: inline-block;\r\n\tborder-style: solid;\r\n\tborder-width: 1px;\r\n\twhite-space: normal;\r\n\tposition: relative;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\tcursor: pointer;\r\n\tpadding: 9.4px 17.5px;\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&.reveal-down {\r\n\t\t.content {\r\n\t\t\ttransition: opacity var(--ptc-transition-medium) var(--ptc-ease-out);\r\n\t\t\topacity: 0;\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t}\r\n\t\t.icon-wrapper {\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: flex;\r\n\t\t\talign-items: center;\r\n\t\t\tjustify-content: center;\r\n\t\t\talign-content: center;\r\n\t\t\theight: 16px;\r\n\r\n\t\t\t.icon {\r\n\t\t\t\ttransition: top var(--ptc-transition-fast) var(--ptc-ease-out);\r\n\t\t\t\tposition: absolute;\r\n\t\t\t\tdisplay: inline-block;\r\n\t\t\t\ttop: -12px;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\t&.reveal-down {\r\n\t\t\t.content {\r\n\t\t\t\topacity: 1;\r\n\t\t\t}\r\n\r\n\t\t\t.icon-wrapper {\r\n\t\t\t\t.icon {\r\n\t\t\t\t\ttop: 4px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t&.animation-right,\r\n\t&.animation-down {\r\n\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\ttransition: transform var(--ptc-transition-medium)\r\n\t\t\t\tvar(--ptc-ease-inout);\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: inline-block;\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\t&.animation-right {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateX(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.animation-down {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateY(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\tspan {\r\n\t\tfont-family: var(--ptc-font-latin);\r\n\t\tfont-size: var(--ptc-font-size-small);\r\n\t\tfont-weight: bold;\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t}\r\n\t&.left {\r\n\t\ttext-align: left;\r\n\t}\r\n\t&.right {\r\n\t\ttext-align: right;\r\n\t}\r\n\t&.center {\r\n\t\ttext-align: center;\r\n\t}\r\n}\r\n\r\n.icon-left {\r\n\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\tmargin-right: var(--ptc-element-spacing-01);\r\n\t}\r\n}\r\n\r\n.icon-right {\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tmargin-left: var(--ptc-element-spacing-01);\r\n\t}\r\n}\r\n\r\n.blackgrey {\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\t}\r\n\r\n\tbox-shadow: var(--ptc-shadow-x-small);\r\n\tborder: solid 1px var(--color-gray-10);\r\n\tbackground-image: linear-gradient(\r\n\t\t285deg,\r\n\t\tvar(--color-gray-10) 155%,\r\n\t\tvar(--color-gray-07) 62%\r\n\t);\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n}\r\n\r\n.turtlegreen {\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\t}\r\n\r\n\tbox-shadow: var(--ptc-shadow-x-small);\r\n\tborder: solid 1px var(--color-green-07);\r\n\tbackground-image: linear-gradient(\r\n\t\t285deg,\r\n\t\tvar(--color-green-07) 155%,\r\n\t\tvar(--color-green-07) 62%\r\n\t);\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n}\r\n\r\n.offwhite {\r\n\tbox-shadow: var(--ptc-shadow-x-small);\r\n\tborder: solid 1px var(--color-gray-10);\r\n\tbackground-image: linear-gradient(\r\n\t\tto right,\r\n\t\tvar(--color-white),\r\n\t\tvar(--color-gray-02),\r\n\t\tvar(--color-gray-01)\r\n\t);\r\n\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-gray-10);\r\n\t}\r\n}\r\n\r\n.legacy-green {\r\n\tmargin-left: 10px;\r\n\tpadding: 10px 20px;\r\n\tmargin-bottom: var(--ptc-element-spacing-01);\r\n\tmargin-top: var(--ptc-element-spacing-01);\r\n\r\n\t&:after {\r\n\t\tposition: absolute;\r\n\t\tcontent: \"\";\r\n\t\ttop: -1px;\r\n\t\tleft: 0;\r\n\t\tbottom: 0;\r\n\t\tright: 0;\r\n\t\twidth: 100%;\r\n\t\theight: 103%;\r\n\t\tbackground-image: linear-gradient(\r\n\t\t\tto right,\r\n\t\t\tvar(--color-green-08),\r\n\t\t\tvar(--color-green-06)\r\n\t\t);\r\n\t\topacity: 0;\r\n\t\ttransition: opacity var(--ptc-transition-x-slow) var(--ptc-ease-inout);\r\n\t\tborder-radius: 2px;\r\n\t}\r\n\r\n\t&:hover {\r\n\t\tbox-shadow: var(--ptc-shadow-x-large);\r\n\r\n\t\tspan {\r\n\t\t\tcolor: var(--color-white);\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover:after {\r\n\t\topacity: 1;\r\n\t}\r\n\r\n\tbox-shadow: var(--ptc-shadow-large);\r\n\tborder: solid 2.5px var(--color-green-08);\r\n\tbackground-image: linear-gradient(\r\n\t\tto right,\r\n\t\tvar(--color-green-06),\r\n\t\tvar(--color-green-08)\r\n\t);\r\n\r\n\tspan {\r\n\t\tfont-family: var(--ptc-font-secondary-latin);\r\n\t\tcolor: var(--color-white);\r\n\t\tz-index: 100;\r\n\t\tposition: relative;\r\n\t\ttext-transform: uppercase;\r\n\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\tletter-spacing: var(--ptc-letter-spacing-normal);\r\n\t\tfont-size: var(--ptc-font-size-x-small);\r\n\r\n\t\t@include screen-sm {\r\n\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t\tletter-spacing: var(--ptc-letter-spacing-loose);\r\n\t\t}\r\n\t}\r\n\r\n\ticon-asset {\r\n\t\tdisplay: inline;\r\n\t}\r\n}\r\n\r\n//Link style adjustments\r\na {\r\n\tborder-style: solid;\r\n\tborder-width: 1px;\r\n\tposition: relative;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\tpadding: 9.4px 17.5px;\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tdisplay: inline-block;\r\n\tposition: relative;\r\n\r\n\t&.animation-right,\r\n\t&.animation-down {\r\n\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\ttransition: all var(--ptc-ease-inout) var(--ptc-transition-medium);\r\n\t\t\tposition: relative;\r\n\t\t\tdisplay: inline-block;\r\n\t\t\tmargin-left: 5px;\r\n\t\t}\r\n\t}\r\n\r\n\t&:hover {\r\n\t\t&.animation-right {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateX(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&.animation-down {\r\n\t\t\t::slotted([slot=\"slot-after-text\"]),\r\n\t\t\t::slotted([slot=\"slot-before-text\"]) {\r\n\t\t\t\ttransform: translateY(var(--ptc-element-spacing-02));\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&.left {\r\n\t\ttext-align: left;\r\n\t}\r\n\t&.right {\r\n\t\ttext-align: right;\r\n\t}\r\n\t&.center {\r\n\t\ttext-align: center;\r\n\t}\r\n}\r\n\r\n.nav {\r\n\tfont-family: var(--ptc-font-latin);\r\n\tbackground-color: var(--color-gray-10);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tborder: 1px solid var(--color-white);\r\n\tborder-bottom-style: solid;\r\n\tborder-bottom-width: 1px;\r\n\tbox-sizing: border-box;\r\n\tcolor: var(--color-white);\r\n\tdisplay: inline-block;\r\n\tfont-size: var(--ptc-font-size-xx-small);\r\n\tfont-stretch: 100%; //undefined value\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tline-height: var(--ptc-line-height-loose);\r\n\tlist-style: none;\r\n\tpadding: 3px var(--ptc-element-spacing-04);\r\n\tposition: relative;\r\n\ttext-align: center;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\ttransition: background-color var(--ptc-transition-medium)\r\n\t\tvar(--ptc-ease-inout);\r\n\r\n\t&:focus-visible {\r\n\t\tborder-radius: 4px !important;\r\n\t\tborder: 2px solid #fff !important;\r\n\t\toutline: 5px solid #003dd6 !important;\r\n\t\tbackground-color: transparent !important;\r\n\t\toutline-offset: 0px !important;\r\n\t}\r\n\r\n\t&:focus {\r\n\t\ttext-decoration: none;\r\n\t\tborder: solid 2px transparent;\r\n\t\toutline: none;\r\n\t}\r\n\r\n\t// &:focus {\r\n\t// outline: 3px solid var(--color-blue-07);\r\n\t// outline-offset: 2px;\r\n\t// }\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t}\r\n}\r\n\r\n.nav-store-btn {\r\n\tfont-family: var(--ptc-font-latin);\r\n\tbackground-color: var(--color-green-07);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tborder: 1px solid var(--color-green-07);\r\n\tborder-bottom-style: solid;\r\n\tborder-bottom-width: 1px;\r\n\tbox-sizing: border-box;\r\n\tcolor: var(--color-white);\r\n\tdisplay: inline-block;\r\n\tfont-size: var(--ptc-font-size-xx-small);\r\n\tfont-stretch: 100%; //undefined value\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tline-height: var(--ptc-line-height-loose);\r\n\tlist-style: none;\r\n\tpadding: 3px var(--ptc-element-spacing-04);\r\n\tposition: relative;\r\n\ttext-align: center;\r\n\ttext-decoration: none;\r\n\t-moz-osx-font-smoothing: grayscale;\r\n\t/*(For Firefox)*/\r\n\t-webkit-font-smoothing: antialiased;\r\n\t/*(For Chrome and Safari)*/\r\n\ttransition: background-color var(--ptc-transition-medium)\r\n\t\tvar(--ptc-ease-inout);\r\n\r\n\t&:focus-visible {\r\n\t\tborder-radius: 4px !important;\r\n\t\tborder: 2px solid #fff !important;\r\n\t\toutline: 5px solid #003dd6 !important;\r\n\t\tbackground-color: var(--color-green-07) !important;\r\n\t\toutline-offset: 0px !important;\r\n\t}\r\n\r\n\t&:focus {\r\n\t\ttext-decoration: none;\r\n\t\tborder: solid 2px transparent;\r\n\t\toutline: none;\r\n\t}\r\n\r\n\t// &:focus {\r\n\t// outline: 3px solid var(--color-blue-07);\r\n\t// outline-offset: 2px;\r\n\t// }\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-green-08);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-green-09);\r\n\t\ttransition: none;\r\n\t}\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\tpadding: var(--ptc-font-size-xx-small) var(--ptc-font-size-medium);\r\n\ttransition: background-color var(--ptc-ease-inout)\r\n\t\tvar(--ptc-transition-medium);\r\n\tline-height: 20px; //undefined size\r\n\r\n\t&.disabled {\r\n\t\tpointer-events: none;\r\n\t\tborder-color: var(--color-gray-03);\r\n\t\tbackground: var(--color-gray-02);\r\n\r\n\t\tspan {\r\n\t\t\tcolor: var(--color-gray-03);\r\n\t\t}\r\n\r\n\t\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\t\tfill: var(--color-gray-03) !important;\r\n\t\t}\r\n\t}\r\n\r\n\t// &:focus {\r\n\t// outline: 3px solid var(--color-blue-07);\r\n\t// outline-offset: 2px;\r\n\t// }\r\n\r\n\t&:focus-visible {\r\n\t\t@include base-focus-state;\r\n\t}\r\n\r\n\tspan {\r\n\t\tfont-family: var(--ptc-font-latin);\r\n\t\tfont-weight: var(--ptc-font-weight-bold);\r\n\t\tfont-size: var(--ptc-font-size-small);\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t\tletter-spacing: normal;\r\n\t}\r\n\t&.small {\r\n\t\tpadding: var(--ptc-element-spacing-03) var(--ptc-element-spacing-04);\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t}\r\n\t}\r\n\t&.medium {\r\n\t\tpadding: 14px 20px;\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-small);\r\n\t\t}\r\n\t}\r\n\t&.large {\r\n\t\tpadding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06);\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-large);\r\n\t\t}\r\n\t}\r\n\r\n\t&.acc-alt-style {\r\n\t\t&:focus-visible {\r\n\t\t\t@include focus-state;\r\n\t\t}\r\n\t}\r\n}\r\n\r\n.ptc-primary {\r\n\tbackground: var(--color-gray-12); //--color-primary\r\n\tborder: 2px solid var(--color-green-07); //--color-primary-green\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-10);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-black);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-white) !important;\r\n\t}\r\n}\r\n\r\n.ptc-secondary {\r\n\tbackground: var(--color-gray-12);\r\n\tborder: 2px solid var(--color-gray-08);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-10);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-black);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-white) !important;\r\n\t}\r\n}\r\n\r\n.ptc-tertiary {\r\n\tbackground: var(--color-white);\r\n\tborder: 2px solid var(--color-gray-10);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-02);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-gray-03);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-gray-10);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-gray-10) !important;\r\n\t}\r\n\r\n\t::slotted(a) {\r\n\t\tcolor: var(--color-gray-10) !important;\r\n\t\ttext-decoration-line: none !important;\r\n\t}\r\n}\r\n\r\n.ptc-quaternary {\r\n\tbackground: var(--color-green-07);\r\n\tborder: 2px solid var(--color-green-07);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tcursor: pointer;\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-green-08);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-green-09);\r\n\t\ttransition: none;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-white) !important;\r\n\t}\r\n}\r\n\r\n.icon-toggle {\r\n\tbackground: var(--color-white);\r\n\tborder: 1px solid var(--color-gray-10);\r\n\tborder-radius: var(--ptc-border-radius-standard);\r\n\tpadding: 0;\r\n\theight: 2.125rem;\r\n\twidth: 2.125rem;\r\n\tbox-shadow: var(--ptc-shadow-medium);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-02);\r\n\t}\r\n\r\n\t&:active {\r\n\t\ttransition: none;\r\n\t\tbackground-color: var(--color-gray-03);\r\n\t}\r\n\r\n\t&.active {\r\n\t\tbackground-color: var(--color-gray-04);\r\n\r\n\t\t&:hover {\r\n\t\t\tbackground-color: var(--color-gray-05);\r\n\t\t}\r\n\r\n\t\t&:active {\r\n\t\t\ttransition: none;\r\n\t\t\tbackground-color: var(--color-gray-03);\r\n\t\t}\r\n\t}\r\n\r\n\t&:focus {\r\n\t\toutline: 2px solid var(--color-blue-07);\r\n\t\toutline-offset: 1px;\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-gray-10);\r\n\t\tpadding: 0;\r\n\t}\r\n\r\n\t::slotted([slot=\"slot-after-text\"]) {\r\n\t\tfill: var(--color-gray-10) !important;\r\n\t}\r\n\r\n\t::slotted(icon-asset) {\r\n\t\tdisplay: block;\r\n\t\tmargin: auto;\r\n\t\theight: 18px;\r\n\t\twidth: 18px;\r\n\t}\r\n}\r\n\r\n.clear-search {\r\n\tborder: none;\r\n\tpadding: 0px;\r\n\tline-height: var(----ptc-line-height-densest);\r\n\tbackground-color: transparent;\r\n\r\n\t&:hover {\r\n\t\ttext-decoration: underline;\r\n\t\ttext-decoration-color: var(--color-white);\r\n\t}\r\n\r\n\tspan {\r\n\t\tcolor: var(--color-white);\r\n\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\tfont-size: var(--ptc-font-size-x-small);\r\n\t\t-moz-osx-font-smoothing: grayscale;\r\n\t\t-webkit-font-smoothing: antialiased;\r\n\t}\r\n}\r\n\r\n.tracker-div {\r\n\t@include div-tracker;\r\n\tdisplay: inline-block;\r\n}\r\n\r\n.focus-state-dark-background {\r\n\t&:focus-visible {\r\n\t\t@include focus-state;\r\n\t}\r\n}\r\n\r\n// New CTA's\r\n// Common CTA base styles\r\n%cta-base {\r\n\tpadding: 0.875rem 1.25rem;\r\n\tfont-size: var(--ptc-font-size-small);\r\n\tfont-style: normal;\r\n\tfont-weight: var(--ptc-font-weight-bold);\r\n\tline-height: var(--ptc-line-height-densest);\r\n\tcolor: var(--color-white);\r\n\tborder: 2px solid transparent;\r\n\ttext-decoration: none;\r\n\r\n\t&.medium {\r\n\t\tpadding: 0.75rem 1rem;\r\n\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\tfont-weight: var(--ptc-font-weight-extrabold);\r\n\t\t}\r\n\t}\r\n\r\n\t&.small {\r\n\t\tpadding: 0.5rem 0.75rem;\r\n\r\n\t\tspan {\r\n\t\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\t\tfont-weight: var(--ptc-font-weight-extrabold);\r\n\t\t}\r\n\t}\r\n\r\n\t&.disabled {\r\n\t\tpointer-events: none;\r\n\t\tcolor: var(--color-gray-03);\r\n\t\tborder-color: var(--color-gray-03);\r\n\t\tbackground-color: var(--color-gray-02);\r\n\r\n\t\ticon-asset svg {\r\n\t\t\tfill: var(--color-gray-03);\r\n\t\t}\r\n\r\n\t\t&:focus-visible {\r\n\t\t\tbackground-color: var(--color-gray-02);\r\n\t\t}\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\t@include focus-state;\r\n\t}\r\n\r\n\t&.full-width {\r\n\t\twidth: 100%;\r\n\t}\r\n\r\n\t.cta-content-wrap {\r\n\t\tdisplay: flex;\r\n\t\tjustify-content: center;\r\n\t\talign-items: center;\r\n\r\n\t\ticon-asset {\r\n\t\t\tmargin-right: 8px;\r\n\t\t\tline-height: 0;\r\n\t\t\t& + span {\r\n\t\t\t\ttext-align: left;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n// Primary CTA\r\n.primary-cta {\r\n\t@extend %cta-base;\r\n\tbackground-color: var(--color-green-07);\r\n\tborder-color: var(--color-green-07);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-green-08);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-green-09);\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\tbackground-color: var(--color-green-07);\r\n\t}\r\n}\r\n\r\n// Secondary CTA (dark theme)\r\n.secondary-cta-dark {\r\n\t@extend %cta-base;\r\n\tbackground-color: var(--color-gray-12);\r\n\tborder-color: var(--color-gray-08);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-10);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-black);\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\tbackground-color: var(--color-gray-12);\r\n\t}\r\n}\r\n\r\n// Secondary CTA (light theme)\r\n.secondary-cta-light {\r\n\t@extend %cta-base;\r\n\tbackground-color: var(--color-white);\r\n\tborder-color: var(--color-gray-10);\r\n\tcolor: var(--color-gray-10);\r\n\r\n\t&:hover {\r\n\t\tbackground-color: var(--color-gray-02);\r\n\t}\r\n\r\n\t&:active {\r\n\t\tbackground-color: var(--color-gray-03);\r\n\t}\r\n\r\n\t&:focus-visible {\r\n\t\tbackground-color: var(--color-white);\r\n\t}\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","@import \"~@material/select/dist/mdc.select.css\";\r\n@import \"~@material/list/dist/mdc.list.css\";\r\n@import \"~@material/menu/dist/mdc.menu.css\";\r\n@import \"~@material/menu-surface/dist/mdc.menu-surface.css\";\r\n\r\n:host {\r\n\tdisplay: block;\r\n}\r\n\r\n.ptc-select {\r\n\t.ptc-label-select {\r\n\t\tdisplay: block;\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-weight: var(--ptc-font-weight-semibold);\r\n\t\tline-height: normal;\r\n\t\tmargin-bottom: var(--ptc-element-spacing-01);\r\n\t\tz-index: 1;\r\n\t\tposition: relative;\r\n\t\tcolor: #40434a;\r\n\t}\r\n\r\n\t.mdc-select {\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\tmargin-bottom: var(--ptc-element-spacing-04);\r\n\t}\r\n\r\n\t.mdc-select--invalid {\r\n\t\t&::before {\r\n\t\t\tcontent: \"\";\r\n\t\t\tposition: absolute;\r\n\t\t\twidth: calc(100% + 16px);\r\n\t\t\theight: calc(100% + 8px);\r\n\t\t\tbackground: #fef3f3;\r\n\t\t\tdisplay: flex;\r\n\t\t\tflex-direction: column;\r\n\t\t\tjustify-content: center;\r\n\t\t\tz-index: 0;\r\n\t\t\tleft: 50%;\r\n\t\t\ttop: 50%;\r\n\t\t\ttransform: translate(-50%, -50%);\r\n\t\t}\r\n\r\n\t\t.mdc-select__anchor {\r\n\t\t\tbackground-color: var(--color-white) !important;\r\n\t\t\tpadding-left: 8px;\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select--outlined {\r\n\t\twidth: 273px;\r\n\r\n\t\t.mdc-select__anchor {\r\n\t\t\theight: 34px;\r\n\t\t\twidth: 273px;\r\n\t\t\tpadding-left: 8px;\r\n\t\t}\r\n\r\n\t\t.mdc-notched-outline__trailing {\r\n\t\t\tborder-radius: 0px !important;\r\n\t\t}\r\n\r\n\t\t.mdc-notched-outline__leading {\r\n\t\t\tborder-radius: 0px !important;\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select-helper-text {\r\n\t\tz-index: 1;\r\n\t\tposition: relative;\r\n\t\topacity: 0;\r\n\t\tmargin-top: var(--ptc-element-spacing-02);\r\n\t\t//margin-bottom: var(--ptc-element-spacing-01);\r\n\t}\r\n\r\n\t.select-error-svg {\r\n\t\ttransform: translate(-8px, 3px);\r\n\t}\r\n\r\n\t.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid\r\n\t\t.mdc-select-helper-text--validation-msg {\r\n\t\tcolor: #af3231;\r\n\t\tfont-family: Raleway;\r\n\t\tfont-size: 14px;\r\n\t\tfont-style: normal;\r\n\t\tfont-weight: 600;\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t\topacity: 1;\r\n\t\theight: auto;\r\n\t\tmargin-left: 8px;\r\n\t}\r\n\r\n\t.mdc-select--invalid:not(.mdc-select--disabled).mdc-select--invalid\r\n\t\t.mdc-select-helper-text--info-msg {\r\n\t\tcolor: #40434a;\r\n\t\tfont-family: var(--ptc-font-latin);\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-style: normal;\r\n\t\tfont-weight: var(--ptc-font-weight-medium);\r\n\t\tline-height: var(--ptc-line-height-densest);\r\n\t\tmax-width: 240px;\r\n\t\topacity: 1;\r\n\t\theight: auto;\r\n\t\ttransform: translateX(8px);\r\n\t}\r\n\r\n\t.mdc-select-helper-text--validation-msg,\r\n\t.mdc-select-helper-text--info-msg {\r\n\t\tline-height: 0.66;\r\n\t\theight: 0;\r\n\t}\r\n\r\n\t.mdc-select--outlined:not(.mdc-select--disabled).mdc-select--focused {\r\n\t\t.mdc-notched-outline {\r\n\t\t\t.mdc-notched-outline__leading,\r\n\t\t\t.mdc-notched-outline__notch,\r\n\t\t\t.mdc-notched-outline__trailing {\r\n\t\t\t\tborder-color: var(--color-hyperlink);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select--outlined:not(\r\n\t\t\t.mdc-select--disabled\r\n\t\t).mdc-select--focused.keyboard-focus {\r\n\t\t.mdc-notched-outline {\r\n\t\t\t.mdc-notched-outline__leading,\r\n\t\t\t.mdc-notched-outline__notch,\r\n\t\t\t.mdc-notched-outline__trailing {\r\n\t\t\t\t//Update for tab navigation\r\n\t\t\t\tborder-color: var(--keyboard-nav-outline);\r\n\t\t\t\tborder-width: 5px;\r\n\t\t\t}\r\n\t\t\t.mdc-notched-outline__leading {\r\n\t\t\t\tborder-top-left-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t\tborder-bottom-left-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t}\r\n\t\t\t.mdc-notched-outline__trailing {\r\n\t\t\t\tborder-top-right-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t\tborder-bottom-right-radius: var(\r\n\t\t\t\t\t--ptc-border-radius-standard\r\n\t\t\t\t) !important;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select:not(.mdc-select--disabled).mdc-select--focused {\r\n\t\t.mdc-select__dropdown-icon {\r\n\t\t\tfill: var(--color-hyperlink);\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-select {\r\n\t\t.mdc-select__dropdown-icon {\r\n\t\t\twidth: 18px;\r\n\t\t\theight: 18px;\r\n\t\t\tmargin-right: 8px;\r\n\t\t}\r\n\t}\r\n\r\n\t// .placehoder-li {\r\n\t// color: var(--color-gray-07);\r\n\t// font-family: Raleway;\r\n\t// font-size: var(--ptc-font-size-xx-small);\r\n\t// font-weight: var(--ptc-font-weight-regular);\r\n\t// line-height:var(--ptc-line-height-normal);\r\n\t// }\r\n\r\n\t.mdc-list {\r\n\t\tfont-family: \"Open Sans\", Arial, sans-serif;\r\n\t}\r\n\r\n\t.mdc-list-item {\r\n\t\tpadding: 5px 8px;\r\n\r\n\t\t&:hover {\r\n\t\t\t.mdc-list-item__ripple::before,\r\n\t\t\t.mdc-list-item__ripple::after {\r\n\t\t\t\tbackground-color: var(--color-gray-02) !important;\r\n\t\t\t\topacity: 1;\r\n\t\t\t\tz-index: -1;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t&:focus,\r\n\t\t&:focus-visible {\r\n\t\t\tbackground-color: var(--color-gray-02);\r\n\t\t\toutline: none;\r\n\t\t}\r\n\r\n\t\t&:focus .mdc-list-item__ripple::before,\r\n\t\t&:focus .mdc-list-item__ripple::after,\r\n\t\t&:focus-visible .mdc-list-item__ripple::before,\r\n\t\t&:focus-visible .mdc-list-item__ripple::after {\r\n\t\t\tbackground-color: var(--color-gray-02) !important;\r\n\t\t\topacity: 1;\r\n\t\t\tz-index: -1;\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-list-item--selected {\r\n\t\t.mdc-list-item__ripple::before,\r\n\t\t.mdc-list-item__ripple::after {\r\n\t\t\tbackground-color: var(--color-gray-02) !important;\r\n\t\t\topacity: 1;\r\n\t\t\tz-index: -1;\r\n\t\t}\r\n\r\n\t\t&:hover {\r\n\t\t\t.mdc-list-item__ripple::before,\r\n\t\t\t.mdc-list-item__ripple::after {\r\n\t\t\t\tbackground-color: var(--color-gray-04) !important;\r\n\t\t\t\topacity: 1;\r\n\t\t\t\tz-index: -1;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\r\n\t.mdc-list-item__text,\r\n\t.mdc-select__selected-text {\r\n\t\tcolor: var(--color-gray-12);\r\n\t\tfont-family: \"Open Sans\", Arial, sans-serif;\r\n\t\tfont-size: var(--ptc-font-size-xx-small);\r\n\t\tfont-weight: var(--ptc-font-weight-regular);\r\n\t\tline-height: 24px;\r\n\t\t/* 171.429% */\r\n\t}\r\n\r\n\t:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple::before,\r\n\t:not(.mdc-list-item--disabled).mdc-list-item .mdc-list-item__ripple::after {\r\n\t\tbackground-color: unset;\r\n\t}\r\n}\r\n","import {\r\n\tComponent,\r\n\th,\r\n\tElement,\r\n\tProp,\r\n\tEvent,\r\n\tEventEmitter,\r\n\tHost,\r\n\tState,\r\n} from \"@stencil/core\";\r\nimport { MDCSelect } from \"@material/select\";\r\nimport { ValidationMessages } from \"../../../utils/validation-messages\";\r\nimport { getLanguageFromURL } from \"../../../utils/utils\";\r\n\r\ninterface ExtendedMDCSelect extends MDCSelect {\r\n\topen: boolean;\r\n}\r\n\r\n@Component({\r\n\ttag: \"ptc-select\",\r\n\tstyleUrl: \"ptc-select.scss\",\r\n\tshadow: false,\r\n})\r\nexport class PtcSelect {\r\n\t@Element() el: HTMLElement;\r\n\t@Prop() fieldId: string;\r\n\t@Prop() label: string;\r\n\t@Prop() isRequired: boolean = true;\r\n\t@Prop({ mutable: true }) helpertext: string = \"Please select a value.\";\r\n\t@Prop() fieldName: string;\r\n\t@Prop() disabled: boolean = false;\r\n\t@Prop({ mutable: true }) selectedValue: string = \"\";\r\n\t@Prop({ mutable: true }) defaultValue: string = \"\";\r\n\t@Prop() infoText: string;\r\n\t/**\r\n\t * Eloqua Data\r\n\t */\r\n\t@Prop() ptcDataEloquaName: string;\r\n\t@Prop() ptcDataTargetEloquaName: string;\r\n\t@State() language: string = \"en\";\r\n\r\n\t@Event() valueChange: EventEmitter<string>;\r\n\r\n\tdefaultSelect: ExtendedMDCSelect;\r\n\tlastInteraction: \"mouse\" | \"keyboard\" = \"mouse\";\r\n\tprivate documentMousedownHandler: () => void;\r\n\tprivate documentKeydownHandler: (e: KeyboardEvent) => void;\r\n\tprivate windowResizeHandler: () => void;\r\n\r\n\tasync setValue() {\r\n\t\tthis.defaultSelect.value = this.defaultValue;\r\n\t}\r\n\r\n\tcomponentWillLoad() {\r\n\t\tthis.language = getLanguageFromURL();\r\n\t\tthis.helpertext = this.getValidationMessage(\"select\");\r\n\t}\r\n\r\n\tcomponentDidLoad() {\r\n\t\t// Use requestAnimationFrame to ensure slotted content is fully rendered\r\n\t\trequestAnimationFrame(() => {\r\n\t\t\tthis.initializeMDCSelect();\r\n\t\t});\r\n\t}\r\n\r\n\tprivate initializeMDCSelect() {\r\n\t\tconsole.log(\"[ptc-select DEBUG] Starting initialization for field:\", this.fieldId);\r\n\t\t\r\n\t\tconst selectElement = this.el.querySelector(\".mdc-select\");\r\n\t\tif (!selectElement) {\r\n\t\t\tconsole.warn(\"[ptc-select DEBUG] Unable to find .mdc-select element.\");\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tconsole.log(\"[ptc-select DEBUG] Found .mdc-select element:\", selectElement);\r\n\r\n\t\t// Ensure the menu has the mdc-list inside it\r\n\t\tconst menu = selectElement.querySelector(\".mdc-select__menu\");\r\n\t\tconst list = menu?.querySelector(\".mdc-list\");\r\n\t\tconsole.log(\"[ptc-select DEBUG] Menu element:\", menu);\r\n\t\tconsole.log(\"[ptc-select DEBUG] List element:\", list);\r\n\t\t\r\n\t\tif (!list) {\r\n\t\t\tconsole.warn(\"[ptc-select DEBUG] Unable to find .mdc-list inside menu. Retrying...\");\r\n\t\t\t// Retry after a short delay if list is not found (slot content may not be ready)\r\n\t\t\tsetTimeout(() => this.initializeMDCSelect(), 100);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\ttry {\r\n\t\t\tthis.defaultSelect = new MDCSelect(selectElement) as ExtendedMDCSelect;\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] MDCSelect initialized successfully:\", this.defaultSelect);\r\n\t\t} catch (error) {\r\n\t\t\tconsole.error(\"[ptc-select DEBUG] Error initializing MDCSelect:\", error);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\t// Add click listener for debugging\r\n\t\tconst anchor = selectElement.querySelector(\".mdc-select__anchor\");\r\n\t\tif (anchor) {\r\n\t\t\tanchor.addEventListener(\"click\", (e) => {\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] Anchor clicked!\", e);\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] MDCSelect open state:\", this.defaultSelect?.open);\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] Menu classes:\", menu?.className);\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] Select classes:\", selectElement.className);\r\n\t\t\t});\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] Click listener added to anchor\");\r\n\t\t}\r\n\r\n\t\t// Listen for MDCSelect events\r\n\t\tthis.defaultSelect.listen(\"MDCSelect:change\", () => {\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] MDCSelect:change event fired, value:\", this.defaultSelect.value);\r\n\t\t});\r\n\r\n\t\tthis.defaultSelect.listen(\"MDCMenuSurface:opened\", () => {\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] Menu opened!\");\r\n\t\t});\r\n\r\n\t\tthis.defaultSelect.listen(\"MDCMenuSurface:closed\", () => {\r\n\t\t\tconsole.log(\"[ptc-select DEBUG] Menu closed!\");\r\n\t\t});\r\n\r\n\t\tif (this.defaultValue) this.setValue();\r\n\r\n\t\tthis.defaultSelect.listen(\"MDCSelect:change\", () => {\r\n\t\t\tif (this.selectedValue !== this.defaultSelect.value) {\r\n\t\t\t\tthis.valueChange.emit(this.defaultSelect.value);\r\n\t\t\t\tthis.selectedValue = this.defaultSelect.value;\r\n //PUT BACK IN WHEN WE CAN FIGURE OUT WHY IT'S NOT WORKING\r\n\t\t\t\t// if (this.fieldId === \"contact-country\") {\r\n\t\t\t\t// \tconst countryCode = this.selectedValue\r\n\t\t\t\t// \t\t? this.map[this.selectedValue]\r\n\t\t\t\t// \t\t: \"\";\r\n\t\t\t\t// \tconst telField = document.querySelector(\r\n\t\t\t\t// \t\t'ptc-textfield[field-id=\"contact-phone\"]',\r\n\t\t\t\t// \t) as HTMLPtcTextfieldElement;\r\n\t\t\t\t// \t// if (telField && countryCode) {\r\n\t\t\t\t// \t// \ttelField.syncCountry(countryCode);\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\tthis.addKeyboardAccessibility();\r\n\r\n\t\tthis.setupFocusHandlers();\r\n\t\t\r\n\t\tthis.setupResizeHandler();\r\n\t}\r\n\t\r\n\tprivate setupResizeHandler() {\r\n\t\t// Debounce resize to avoid excessive re-initialization\r\n\t\tlet resizeTimeout: ReturnType<typeof setTimeout>;\r\n\t\t\r\n\t\tthis.windowResizeHandler = () => {\r\n\t\t\tclearTimeout(resizeTimeout);\r\n\t\t\tresizeTimeout = setTimeout(() => {\r\n\t\t\t\tconsole.log(\"[ptc-select DEBUG] Window resized, re-laying out MDCSelect for field:\", this.fieldId);\r\n\t\t\t\tif (this.defaultSelect) {\r\n\t\t\t\t\t// Force the menu surface to recalculate its position\r\n\t\t\t\t\ttry {\r\n\t\t\t\t\t\tthis.defaultSelect.layout();\r\n\t\t\t\t\t\tconsole.log(\"[ptc-select DEBUG] MDCSelect layout() called successfully\");\r\n\t\t\t\t\t} catch (error) {\r\n\t\t\t\t\t\tconsole.error(\"[ptc-select DEBUG] Error calling layout():\", error);\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}, 150);\r\n\t\t};\r\n\t\t\r\n\t\twindow.addEventListener(\"resize\", this.windowResizeHandler);\r\n\t\tconsole.log(\"[ptc-select DEBUG] Resize handler added for field:\", this.fieldId);\r\n\t}\r\n\r\n\tdisconnectedCallback() {\r\n\t\t// Remove document event listeners to prevent memory leaks\r\n\t\tif (this.documentMousedownHandler) {\r\n\t\t\tdocument.removeEventListener(\"mousedown\", this.documentMousedownHandler);\r\n\t\t}\r\n\t\tif (this.documentKeydownHandler) {\r\n\t\t\tdocument.removeEventListener(\"keydown\", this.documentKeydownHandler);\r\n\t\t}\r\n\t\tif (this.windowResizeHandler) {\r\n\t\t\twindow.removeEventListener(\"resize\", this.windowResizeHandler);\r\n\t\t}\r\n\t\tif (this.defaultSelect) {\r\n\t\t\tthis.defaultSelect.destroy();\r\n\t\t}\r\n\t}\r\n\r\n\taddKeyboardAccessibility() {\r\n\t\tconst selectAnchor = this.el.querySelector(\r\n\t\t\t\".mdc-select__anchor\",\r\n\t\t) as HTMLElement;\r\n\t\tconst menu = this.el.querySelector(\".mdc-select__menu\") as HTMLElement;\r\n\r\n\t\tif (!selectAnchor || !menu) {\r\n\t\t\tconsole.warn(\r\n\t\t\t\t\"ptc-select: Unable to find select anchor or menu elements.\",\r\n\t\t\t);\r\n\t\t\treturn;\r\n\t\t}\r\n\r\n\t\tselectAnchor.addEventListener(\"keydown\", (event: KeyboardEvent) => {\r\n\t\t\tconst key = event.key;\r\n\r\n\t\t\tswitch (key) {\r\n\t\t\t\tcase \"Enter\":\r\n\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\tthis.defaultSelect.open = !this.defaultSelect.open;\r\n\t\t\t\t\tif (this.defaultSelect.open) {\r\n\t\t\t\t\t\tthis.setFocusToFirstMenuitem();\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase \"ArrowDown\":\r\n\t\t\t\tcase \"ArrowUp\":\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase \"Escape\":\r\n\t\t\t\t\tif (this.defaultSelect.open) {\r\n\t\t\t\t\t\tthis.defaultSelect.open = false;\r\n\t\t\t\t\t\tselectAnchor.focus();\r\n\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tcase \"Tab\":\r\n\t\t\t\t\tif (this.defaultSelect.open) {\r\n\t\t\t\t\t\tthis.defaultSelect.open = false;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tbreak;\r\n\t\t\t\tdefault:\r\n\t\t\t\t\tbreak;\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\t// Focus the first menu item in the dropdown\r\n\tsetFocusToFirstMenuitem() {\r\n\t\tconst firstMenuItem = this.el.querySelector(\r\n\t\t\t\".mdc-list-item\",\r\n\t\t) as HTMLElement;\r\n\t\tif (firstMenuItem) {\r\n\t\t\tfirstMenuItem.focus();\r\n\t\t}\r\n\t}\r\n\r\n\tsetFocusToNextMenuitem(currentMenuitem: HTMLElement) {\r\n\t\tconst menuItems = Array.from(\r\n\t\t\tthis.el.querySelectorAll(\".mdc-list-item\"),\r\n\t\t) as HTMLElement[];\r\n\t\tconst currentIndex = menuItems.indexOf(currentMenuitem);\r\n\t\tconst nextIndex = (currentIndex + 1) % menuItems.length;\r\n\t\tmenuItems[nextIndex].focus();\r\n\t}\r\n\r\n\tsetFocusToPreviousMenuitem(currentMenuitem: HTMLElement) {\r\n\t\tconst menuItems = Array.from(\r\n\t\t\tthis.el.querySelectorAll(\".mdc-list-item\"),\r\n\t\t) as HTMLElement[];\r\n\t\tconst currentIndex = menuItems.indexOf(currentMenuitem);\r\n\t\tconst previousIndex =\r\n\t\t\t(currentIndex - 1 + menuItems.length) % menuItems.length;\r\n\t\tmenuItems[previousIndex].focus();\r\n\t}\r\n\r\n\tgetValidationMessage(type: string) {\r\n\t\treturn ValidationMessages[this.language][type];\r\n\t}\r\n\r\n\tgetSelectClassName() {\r\n\t\tlet className =\r\n\t\t\t\"mdc-select mdc-select--outlined mdc-select--no-label mf-listen\";\r\n\t\tif (this.isRequired) {\r\n\t\t\tclassName = `${className} mdc-select--required`;\r\n\t\t}\r\n\t\treturn className;\r\n\t}\r\n\r\n\tsetupFocusHandlers() {\r\n\t\t// Track the last interaction type - use bound handlers for proper cleanup\r\n\t\tthis.documentMousedownHandler = () => {\r\n\t\t\tthis.lastInteraction = \"mouse\";\r\n\t\t};\r\n\t\tthis.documentKeydownHandler = (e: KeyboardEvent) => {\r\n\t\t\tif (e.key === \"Tab\") {\r\n\t\t\t\tthis.lastInteraction = \"keyboard\";\r\n\t\t\t}\r\n\t\t};\r\n\t\tdocument.addEventListener(\"mousedown\", this.documentMousedownHandler);\r\n\t\tdocument.addEventListener(\"keydown\", this.documentKeydownHandler);\r\n\r\n\t\t// Only query select fields within this component, not globally\r\n\t\tconst selectField = this.el.querySelector(\r\n\t\t\t\".mdc-select\",\r\n\t\t) as HTMLElement;\r\n\t\tif (selectField) {\r\n\t\t\tconst select = selectField.querySelector(\".mdc-select__anchor\");\r\n\t\t\tif (select) {\r\n\t\t\t\tselect.addEventListener(\"focus\", () => {\r\n\t\t\t\t\tif (this.lastInteraction === \"keyboard\") {\r\n\t\t\t\t\t\tselectField.classList.add(\"keyboard-focus\");\r\n\t\t\t\t\t\tselectField.classList.remove(\"mouse-focus\");\r\n\t\t\t\t\t} else {\r\n\t\t\t\t\t\tselectField.classList.add(\"mouse-focus\");\r\n\t\t\t\t\t\tselectField.classList.remove(\"keyboard-focus\");\r\n\t\t\t\t\t}\r\n\t\t\t\t});\r\n\t\t\t\tselect.addEventListener(\"blur\", () => {\r\n\t\t\t\t\tselectField.classList.remove(\r\n\t\t\t\t\t\t\"keyboard-focus\",\r\n\t\t\t\t\t\t\"mouse-focus\",\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\trender() {\r\n\t\treturn (\r\n\t\t\t<Host class=\"ptc-select mf-listen\">\r\n\t\t\t\t<div class={this.getSelectClassName()}>\r\n\t\t\t\t\t<label class=\"ptc-label-select\" htmlFor={this.fieldId}>\r\n\t\t\t\t\t\t{this.label}\r\n\t\t\t\t\t</label>\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"mdc-select__anchor\"\r\n\t\t\t\t\t\trole=\"button\"\r\n\t\t\t\t\t\taria-haspopup=\"listbox\"\r\n\t\t\t\t\t\taria-labelledby=\"outlined-select-label\"\r\n\t\t\t\t\t\ttabindex=\"0\"\r\n\t\t\t\t\t\t{...(this.isRequired ? { ariaRequired: true } : null)}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span class=\"mdc-notched-outline\">\r\n\t\t\t\t\t\t\t<span class=\"mdc-notched-outline__leading\"></span>\r\n\t\t\t\t\t\t\t<span class=\"mdc-notched-outline__trailing\"></span>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<span class=\"mdc-select__selected-text-container\">\r\n\t\t\t\t\t\t\t<span\r\n\t\t\t\t\t\t\t\tid={this.fieldId}\r\n\t\t\t\t\t\t\t\tclass=\"mdc-select__selected-text\"\r\n\t\t\t\t\t\t\t\taria-controls={this.fieldName}\r\n\t\t\t\t\t\t\t\taria-describedby={this.fieldName}\r\n\t\t\t\t\t\t\t\tdata-eloqua-name={this.ptcDataEloquaName}\r\n\t\t\t\t\t\t\t\tdata-target-eloqua-name={\r\n\t\t\t\t\t\t\t\t\tthis.ptcDataTargetEloquaName\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t></span>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t\t<span class=\"mdc-select__dropdown-icon\">\r\n\t\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\t\tclass=\"\"\r\n\t\t\t\t\t\t\t\twidth=\"10\"\r\n\t\t\t\t\t\t\t\theight=\"10\"\r\n\t\t\t\t\t\t\t\tviewBox=\"0 0 10 10\"\r\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<path d=\"M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z\" />\r\n\t\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t</span>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tclass=\"mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth\"\r\n\t\t\t\t\t\trole=\"listbox\"\r\n\t\t\t\t\t\taria-label={this.label}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<slot></slot>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<p\r\n\t\t\t\t\t\tid={this.fieldName}\r\n\t\t\t\t\t\tclass=\"mdc-select-helper-text mdc-select-helper-text--validation-msg\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<svg\r\n\t\t\t\t\t\t\tclass=\"select-error-svg\"\r\n\t\t\t\t\t\t\twidth=\"16\"\r\n\t\t\t\t\t\t\theight=\"16\"\r\n\t\t\t\t\t\t\tviewBox=\"0 0 16 16\"\r\n\t\t\t\t\t\t\tfill=\"none\"\r\n\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<g clip-path=\"url(#clip0_12_1424)\">\r\n\t\t\t\t\t\t\t\t<path\r\n\t\t\t\t\t\t\t\t\tfill-rule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\tclip-rule=\"evenodd\"\r\n\t\t\t\t\t\t\t\t\td=\"M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z\"\r\n\t\t\t\t\t\t\t\t\tfill=\"#AF3231\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</g>\r\n\t\t\t\t\t\t\t<defs>\r\n\t\t\t\t\t\t\t\t<clipPath id=\"clip0_12_1424\">\r\n\t\t\t\t\t\t\t\t\t<rect width=\"16\" height=\"16\" fill=\"white\" />\r\n\t\t\t\t\t\t\t\t</clipPath>\r\n\t\t\t\t\t\t\t</defs>\r\n\t\t\t\t\t\t</svg>\r\n\t\t\t\t\t\t{this.helpertext}\r\n\t\t\t\t\t</p>\r\n\t\t\t\t\t{this.infoText ? (\r\n\t\t\t\t\t\t<p class=\"mdc-select-helper-text mdc-select-helper-text--info-msg\">\r\n\t\t\t\t\t\t\t{this.infoText}\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t) : null}\r\n\t\t\t\t</div>\r\n\r\n\t\t\t\t{/* helper text */}\r\n\t\t\t</Host>\r\n\t\t);\r\n\t}\r\n}\r\n",":host {\r\n\tbox-sizing: border-box;\r\n\tpadding: 0;\r\n\tmargin: 0;\r\n\tbackground: transparent;\r\n\tborder: 0;\r\n\t-moz-appearance: none;\r\n\t-webkit-appearance: none;\r\n\tappearance: none;\r\n\tposition: relative;\r\n\tdisplay: block;\r\n\twidth: 12px;\r\n\tmin-width: 12px;\r\n\theight: 12px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host {\r\n\t\twidth: 16px;\r\n\t\tmin-width: 16px;\r\n\t\theight: 16px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal) {\r\n\tdisplay: inline-block;\r\n\theight: 100% !important\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xx-small) {\r\n\twidth: 4px;\r\n\tmin-width: 4px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xx-small) {\r\n\t\twidth: 4px;\r\n\t\tmin-width: 4px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.x-small) {\r\n\twidth: 4px;\r\n\tmin-width: 4px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.x-small) {\r\n\t\twidth: 8px;\r\n\t\tmin-width: 8px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.small) {\r\n\twidth: 8px;\r\n\tmin-width: 8px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.small) {\r\n\t\twidth: 12px;\r\n\t\tmin-width: 12px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.medium) {\r\n\theight: 100%\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.large) {\r\n\twidth: 16px;\r\n\tmin-width: 16px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.large) {\r\n\t\twidth: 20px;\r\n\t\tmin-width: 20px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.x-large) {\r\n\twidth: 20px;\r\n\tmin-width: 20px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.x-large) {\r\n\t\twidth: 28px;\r\n\t\tmin-width: 28px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xx-large) {\r\n\twidth: 28px;\r\n\tmin-width: 28px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xx-large) {\r\n\t\twidth: 36px;\r\n\t\tmin-width: 36px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xxx-large) {\r\n\twidth: 36px;\r\n\tmin-width: 36px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xxx-large) {\r\n\t\twidth: 48px;\r\n\t\tmin-width: 48px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-horizontal.xxxx-large) {\r\n\twidth: 48px;\r\n\tmin-width: 48px;\r\n\theight: 100%\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-horizontal.xxxx-large) {\r\n\t\twidth: 72px;\r\n\t\tmin-width: 72px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xx-small) {\r\n\twidth: 100%;\r\n\theight: 4px;\r\n\tmin-height: 4px\r\n}\r\n\r\n:host(.ptc-spacer-vertical.x-small) {\r\n\twidth: 100%;\r\n\theight: 4px;\r\n\tmin-height: 4px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.x-small) {\r\n\t\theight: 8px;\r\n\t\tmin-height: 8px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.small) {\r\n\twidth: 100%;\r\n\theight: 8px;\r\n\tmin-height: 8px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.small) {\r\n\t\theight: 12px;\r\n\t\tmin-height: 12px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.medium) {\r\n\twidth: 100%\r\n}\r\n\r\n:host(.ptc-spacer-vertical.large) {\r\n\twidth: 100%;\r\n\theight: 16px;\r\n\tmin-height: 16px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.large) {\r\n\t\theight: 20px;\r\n\t\tmin-height: 20px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.x-large) {\r\n\twidth: 100%;\r\n\theight: 20px;\r\n\tmin-height: 20px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.x-large) {\r\n\t\theight: 28px;\r\n\t\tmin-height: 28px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xx-large) {\r\n\twidth: 100%;\r\n\theight: 28px;\r\n\tmin-height: 28px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.xx-large) {\r\n\t\theight: 36px;\r\n\t\tmin-height: 36px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xxx-large) {\r\n\twidth: 100%;\r\n\theight: 36px;\r\n\tmin-height: 36px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.xxx-large) {\r\n\t\theight: 48px;\r\n\t\tmin-height: 48px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.xxxx-large) {\r\n\twidth: 100%;\r\n\theight: 48px;\r\n\tmin-height: 48px\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-vertical.xxxx-large) {\r\n\t\theight: 72px;\r\n\t\tmin-height: 72px\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-vertical.space-144){\r\n\twidth: 100%;\r\n\theight: 144px;\r\n\tmin-height: 144px;\r\n}\r\n:host(.ptc-spacer-vertical.space-120){\r\n\twidth: 100%;\r\n\theight: 120px;\r\n\tmin-height: 120px;\r\n}\r\n:host(.ptc-spacer-vertical.space-128){\r\n\twidth: 100%;\r\n\theight: 128px;\r\n\tmin-height: 128px;\r\n}\r\n\r\n:host(.ptc-spacer-xx-small) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (max-width: 22.5em) {\r\n\t:host(.ptc-spacer-xx-small) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-x-small) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (max-width: 35.99em) {\r\n\t:host(.ptc-spacer-x-small) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-small) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 36em) {\r\n\t:host(.ptc-spacer-small) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-medium) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 48em) {\r\n\t:host(.ptc-spacer-medium) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 62em) {\r\n\t:host(.ptc-spacer-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-x-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 64.0625em) {\r\n\t:host(.ptc-spacer-x-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-xx-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 75em) {\r\n\t:host(.ptc-spacer-xx-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}\r\n\r\n:host(.ptc-spacer-xxx-large) {\r\n\tdisplay: none\r\n}\r\n\r\n@media (min-width: 90em) {\r\n\t:host(.ptc-spacer-xxx-large) {\r\n\t\tdisplay: block\r\n\t}\r\n}","import { Component, Host, h, Prop } from \"@stencil/core\";\r\nimport { CssClassMap } from \"../../../utils/interfaces\";\r\n\r\n@Component({\r\n\ttag: \"ptc-spacer\",\r\n\tstyleUrl: \"ptc-spacer.css\",\r\n\tshadow: true,\r\n})\r\nexport class PtcSpacer {\r\n\t/**\r\n\t * Breakpoint\r\n\t */\r\n\t@Prop() breakpoint:\r\n\t\t| \"\"\r\n\t\t| \"medium\"\r\n\t\t| \"small\"\r\n\t\t| \"large\"\r\n\t\t| \"x-large\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"x-small\"\r\n\t\t| \"xx-small\"\r\n\t\t| \"xxx-large\" = \"\";\r\n\t/**\r\n\t * Spacing Size\r\n\t */\r\n\t@Prop() size:\r\n\t\t| \"large\"\r\n\t\t| \"medium\"\r\n\t\t| \"small\"\r\n\t\t| \"x-large\"\r\n\t\t| \"x-small\"\r\n\t\t| \"xx-large\"\r\n\t\t| \"xx-small\"\r\n\t\t| \"xxx-large\"\r\n\t\t| \"xxxx-large\"\r\n\t\t| \"space-144\"\r\n\t\t| \"space-120\"\r\n\t\t| \"space-128\" = \"medium\";\r\n\t/**\r\n\t * Direction\r\n\t */\r\n\t@Prop() direction: \"vertical\" | \"horizontal\" = \"vertical\";\r\n\r\n\trender() {\r\n\t\tconst classMap = this.getCssClassMap();\r\n\t\treturn <Host class={classMap}></Host>;\r\n\t}\r\n\r\n\tprivate getCssClassMap(): CssClassMap {\r\n\t\treturn {\r\n\t\t\t[this.size]: true,\r\n\t\t\t[\"ptc-spacer-horizontal\"]: this.direction === \"horizontal\",\r\n\t\t\t[\"ptc-spacer-vertical\"]: this.direction === \"vertical\",\r\n\t\t\t[\"ptc-spacer-xx-small\"]: this.breakpoint === \"xx-small\",\r\n\t\t\t[\"ptc-spacer-x-small\"]: this.breakpoint === \"x-small\",\r\n\t\t\t[\"ptc-spacer-small\"]: this.breakpoint === \"small\",\r\n\t\t\t[\"ptc-spacer-medium\"]: this.breakpoint === \"medium\",\r\n\t\t\t[\"ptc-spacer-large\"]: this.breakpoint === \"large\",\r\n\t\t\t[\"ptc-spacer-x-large\"]: this.breakpoint === \"x-large\",\r\n\t\t\t[\"ptc-spacer-xx-large\"]: this.breakpoint === \"xx-large\",\r\n\t\t\t[\"ptc-spacer-xxx-large\"]: this.breakpoint === \"xxx-large\",\r\n\t\t};\r\n\t}\r\n}\r\n"],"names":[],"mappings":"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"}
package/dist/esm/my-component_4.entry.js CHANGED
@@ -229,6 +229,7 @@ const PtcSelect = class {
229
229
  lastInteraction = "mouse";
230
230
  documentMousedownHandler;
231
231
  documentKeydownHandler;
232
+ windowResizeHandler;
232
233
  async setValue() {
233
234
  this.defaultSelect.value = this.defaultValue;
234
235
  }
@@ -312,6 +313,29 @@ const PtcSelect = class {
312
313
  });
313
314
  this.addKeyboardAccessibility();
314
315
  this.setupFocusHandlers();
316
+ this.setupResizeHandler();
317
+ }
318
+ setupResizeHandler() {
319
+ // Debounce resize to avoid excessive re-initialization
320
+ let resizeTimeout;
321
+ this.windowResizeHandler = () => {
322
+ clearTimeout(resizeTimeout);
323
+ resizeTimeout = setTimeout(() => {
324
+ console.log("[ptc-select DEBUG] Window resized, re-laying out MDCSelect for field:", this.fieldId);
325
+ if (this.defaultSelect) {
326
+ // Force the menu surface to recalculate its position
327
+ try {
328
+ this.defaultSelect.layout();
329
+ console.log("[ptc-select DEBUG] MDCSelect layout() called successfully");
330
+ }
331
+ catch (error) {
332
+ console.error("[ptc-select DEBUG] Error calling layout():", error);
333
+ }
334
+ }
335
+ }, 150);
336
+ };
337
+ window.addEventListener("resize", this.windowResizeHandler);
338
+ console.log("[ptc-select DEBUG] Resize handler added for field:", this.fieldId);
315
339
  }
316
340
  disconnectedCallback() {
317
341
  // Remove document event listeners to prevent memory leaks
@@ -321,6 +345,9 @@ const PtcSelect = class {
321
345
  if (this.documentKeydownHandler) {
322
346
  document.removeEventListener("keydown", this.documentKeydownHandler);
323
347
  }
348
+ if (this.windowResizeHandler) {
349
+ window.removeEventListener("resize", this.windowResizeHandler);
350
+ }
324
351
  if (this.defaultSelect) {
325
352
  this.defaultSelect.destroy();
326
353
  }
@@ -423,7 +450,7 @@ const PtcSelect = class {
423
450
  }
424
451
  }
425
452
  render() {
426
- return (h(Host, { key: '5dea3cd63999abed37acc8b38be2946ff45ad7f1', class: "ptc-select mf-listen" }, h("div", { key: 'da6aa2cbf6cdb1a84b4790649fc65755717de577', class: this.getSelectClassName() }, h("label", { key: '93403f7bb19deda1e1df8c1ab6676cda07b92a4d', class: "ptc-label-select", htmlFor: this.fieldId }, this.label), h("div", { key: '2643b2c6ce677f7b2adf037f3f5a11fd91a095b3', class: "mdc-select__anchor", role: "button", "aria-haspopup": "listbox", "aria-labelledby": "outlined-select-label", tabindex: "0", ...(this.isRequired ? { ariaRequired: true } : null) }, h("span", { key: 'f628892254eaa59d33f9c82a65e7337897eeddb4', class: "mdc-notched-outline" }, h("span", { key: '5b2118226c33cc9b36585b71e809a5dea59f8b96', class: "mdc-notched-outline__leading" }), h("span", { key: '1dea00f993b89193440884991eb64bdb1a73781d', class: "mdc-notched-outline__trailing" })), h("span", { key: 'e8afa796285e70c7fa2da52569027cce7c08aa30', class: "mdc-select__selected-text-container" }, h("span", { key: '65bab74b86a67dd734ad59f9261926ab26933e72', id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { key: 'a12c76ac9edf2ac082c398c068370a01bc1dad86', class: "mdc-select__dropdown-icon" }, h("svg", { key: 'ef5de1a331e53f750f105f84927a5ba85b1094ea', class: "", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '336956f92d89d0f57c85074209557152f393d238', d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { key: 'cfb86117e32b4c2ecbfe54c3fe719b0dec0e6007', class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth", role: "listbox", "aria-label": this.label }, h("slot", { key: '08cab225d17cb45edf3981e94d4840e6842dafb2' })), h("p", { key: '62cfd867b5f5e7191ce3182f66e06d4fcb53a8b9', id: this.fieldName, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { key: '7eb6f4da067582e5cccffa2212c1bbae0f103df8', class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '18668c906b1b8c354dabdbbba80c6f2a47c81a59', "clip-path": "url(#clip0_12_1424)" }, h("path", { key: '7d2429f54a525aa29b3120884fb0c1c56ba33d06', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", { key: 'cefa25992fa43eb762a407461f3f1f7cb76b545a' }, h("clipPath", { key: '06cf1a1e1af53f69ac92d5018ea968e99d382c8b', id: "clip0_12_1424" }, h("rect", { key: '7e2936db88aad178046c62a5276ffedac4a1840b', width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? (h("p", { class: "mdc-select-helper-text mdc-select-helper-text--info-msg" }, this.infoText)) : null)));
453
+ return (h(Host, { key: 'e99bacec7aca3a41898bae23b593afa8751fa991', class: "ptc-select mf-listen" }, h("div", { key: '110ec4d611893e1dd061c2a3e62c14417ecac557', class: this.getSelectClassName() }, h("label", { key: '9ddb75312d6e7dbe9b8a6edc197b586bd21b8a5b', class: "ptc-label-select", htmlFor: this.fieldId }, this.label), h("div", { key: '85c000bba1782047393122502fda93260739589e', class: "mdc-select__anchor", role: "button", "aria-haspopup": "listbox", "aria-labelledby": "outlined-select-label", tabindex: "0", ...(this.isRequired ? { ariaRequired: true } : null) }, h("span", { key: '25861513873626707e124b113911fcd3d355e277', class: "mdc-notched-outline" }, h("span", { key: '18c01170edd8c79560100189e057a5affb100eee', class: "mdc-notched-outline__leading" }), h("span", { key: '201f09dccda4ef9d771cdc041d800b9a68d752d7', class: "mdc-notched-outline__trailing" })), h("span", { key: 'd935a8fef5a8d990671536d4db48911c26f7c84a', class: "mdc-select__selected-text-container" }, h("span", { key: '9481e6dd9b87fb345dcfe7f675fd1f195b5f401a', id: this.fieldId, class: "mdc-select__selected-text", "aria-controls": this.fieldName, "aria-describedby": this.fieldName, "data-eloqua-name": this.ptcDataEloquaName, "data-target-eloqua-name": this.ptcDataTargetEloquaName })), h("span", { key: '89eba24e0f2e49e87f6184afe540b87c3419d479', class: "mdc-select__dropdown-icon" }, h("svg", { key: '3f0b78d76aabeb2acf17d2d0e7193dfad3b55ddc', class: "", width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'ef137d5521e2fa79377672dcec623bc2c91bfa33', d: "M1.375 1.875L5 5.5L8.625 1.875L9.9375 3.1875L5 8.125L0.0625 3.1875L1.375 1.875Z" })))), h("div", { key: '2f744c2a1e3808de6d874a5afd8407b1db75a466', class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth", role: "listbox", "aria-label": this.label }, h("slot", { key: 'af1ee943a5d6b5ff91dd6da544c62c0b7ba64b1c' })), h("p", { key: '2a639f12c98f95cb2cfc829ca6d85359ad6fb287', id: this.fieldName, class: "mdc-select-helper-text mdc-select-helper-text--validation-msg" }, h("svg", { key: '987a719376ed44efee830fc9839954a815363db3', class: "select-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '83f0e03ecb53090eb302a63774ce443e563c8376', "clip-path": "url(#clip0_12_1424)" }, h("path", { key: '08e7e26ff04dabbcfaff7e445f2f88f2ef49a86d', "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", { key: '52b5fe4314f2d5ad4069d688fce37325a48ebba7' }, h("clipPath", { key: '5165022e5fe8547ad8da1ee2f69bcaa7fad7d175', id: "clip0_12_1424" }, h("rect", { key: '74babcef004eae9fcb6e586c81c0f382553d642e', width: "16", height: "16", fill: "white" })))), this.helpertext), this.infoText ? (h("p", { class: "mdc-select-helper-text mdc-select-helper-text--info-msg" }, this.infoText)) : null)));
427
454
  }
428
455
  };
429
456
  PtcSelect.style = ptcSelectCss;