@pine-ds/core 3.12.0 → 3.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/index2.js +1 -1
- package/components/index2.js.map +1 -1
- package/components/pds-alert.js +1 -1
- package/components/pds-alert.js.map +1 -1
- package/components/pds-avatar.js +3 -3
- package/components/pds-avatar.js.map +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-checkbox2.js.map +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-copytext.js.map +1 -1
- package/components/pds-input.js +1 -1
- package/components/pds-input.js.map +1 -1
- package/components/pds-modal-content.js +3 -19
- package/components/pds-modal-content.js.map +1 -1
- package/dist/cjs/{index-BIrlTMGo.js → index-CMeuo765.js} +3 -3
- package/dist/cjs/index-CMeuo765.js.map +1 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
- package/dist/cjs/pds-alert.cjs.entry.js +1 -1
- package/dist/cjs/pds-alert.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +4 -4
- package/dist/cjs/pds-avatar.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-button.cjs.entry.js +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/pds-checkbox.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +1 -1
- package/dist/cjs/pds-copytext.cjs.entry.js +2 -2
- package/dist/cjs/pds-copytext.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-filter.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +2 -2
- package/dist/cjs/pds-input.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-content.cjs.entry.js +2 -18
- package/dist/cjs/pds-modal-content.entry.cjs.js.map +1 -1
- package/dist/cjs/pds-radio-group.cjs.entry.js +1 -1
- package/dist/cjs/pds-radio.cjs.entry.js +1 -1
- package/dist/cjs/pds-select.cjs.entry.js +1 -1
- package/dist/cjs/pds-sortable-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +1 -1
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/collection/components/pds-alert/pds-alert.tokens.css +10 -0
- package/dist/collection/components/pds-avatar/pds-avatar.css +1 -1
- package/dist/collection/components/pds-avatar/pds-avatar.js +2 -2
- package/dist/collection/components/pds-avatar/pds-avatar.js.map +1 -1
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +1 -2
- package/dist/collection/components/pds-copytext/pds-copytext.css +1 -1
- package/dist/collection/components/pds-input/pds-input.css +1 -1
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +3 -19
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js.map +1 -1
- package/dist/docs.json +2 -2
- package/dist/esm/{index-CShvJnsl.js → index-xbb79yLt.js} +3 -3
- package/dist/esm/index-xbb79yLt.js.map +1 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-accordion.entry.js +1 -1
- package/dist/esm/pds-alert.entry.js +1 -1
- package/dist/esm/pds-alert.entry.js.map +1 -1
- package/dist/esm/pds-avatar.entry.js +4 -4
- package/dist/esm/pds-avatar.entry.js.map +1 -1
- package/dist/esm/pds-button.entry.js +1 -1
- package/dist/esm/pds-checkbox.entry.js +2 -2
- package/dist/esm/pds-checkbox.entry.js.map +1 -1
- package/dist/esm/pds-chip.entry.js +1 -1
- package/dist/esm/pds-copytext.entry.js +2 -2
- package/dist/esm/pds-copytext.entry.js.map +1 -1
- package/dist/esm/pds-filter.entry.js +1 -1
- package/dist/esm/pds-input.entry.js +2 -2
- package/dist/esm/pds-input.entry.js.map +1 -1
- package/dist/esm/pds-link.entry.js +1 -1
- package/dist/esm/pds-modal-content.entry.js +2 -18
- package/dist/esm/pds-modal-content.entry.js.map +1 -1
- package/dist/esm/pds-radio-group.entry.js +1 -1
- package/dist/esm/pds-radio.entry.js +1 -1
- package/dist/esm/pds-select.entry.js +1 -1
- package/dist/esm/pds-sortable-item.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +1 -1
- package/dist/esm/pds-textarea.entry.js +1 -1
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm-es5/{index-CShvJnsl.js → index-xbb79yLt.js} +1 -1
- package/dist/esm-es5/index-xbb79yLt.js.map +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js.map +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js.map +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js.map +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js.map +1 -1
- package/dist/esm-es5/pds-filter.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js.map +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js.map +1 -1
- package/dist/esm-es5/pds-radio-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/pine-core/{p-CsVpJw_i.system.js.map → p--gPqixhD.system.js.map} +1 -1
- package/dist/pine-core/{p-847fc77b.system.entry.js → p-11d69ad5.system.entry.js} +2 -2
- package/dist/pine-core/p-1282026f.entry.js +2 -0
- package/dist/pine-core/{p-be647b2a.entry.js.map → p-1282026f.entry.js.map} +1 -1
- package/dist/pine-core/{p-b64407a4.entry.js → p-15202869.entry.js} +2 -2
- package/dist/pine-core/{p-cd564179.entry.js → p-15650db8.entry.js} +2 -2
- package/dist/pine-core/{p-9998c2a0.entry.js → p-1daf66d1.entry.js} +2 -2
- package/dist/pine-core/{p-e6b39ec1.entry.js → p-233a6680.entry.js} +2 -2
- package/dist/pine-core/p-36ad78b5.system.entry.js +2 -0
- package/dist/pine-core/{p-cf910e8b.system.entry.js.map → p-36ad78b5.system.entry.js.map} +1 -1
- package/dist/pine-core/p-3f0a6a75.system.entry.js +2 -0
- package/dist/pine-core/p-3f0a6a75.system.entry.js.map +1 -0
- package/dist/pine-core/{p-dba5ca37.system.entry.js → p-3fd0f8a9.system.entry.js} +2 -2
- package/dist/pine-core/{p-0398f6e3.entry.js → p-41cc9270.entry.js} +2 -2
- package/dist/pine-core/p-426e90cb.entry.js +2 -0
- package/dist/pine-core/p-426e90cb.entry.js.map +1 -0
- package/dist/pine-core/{p-80017aa5.entry.js → p-46e5a568.entry.js} +2 -2
- package/dist/pine-core/{p-1f5ed7bb.system.entry.js → p-6150fb43.system.entry.js} +2 -2
- package/dist/pine-core/{p-e837b577.entry.js → p-66597ea5.entry.js} +2 -2
- package/dist/pine-core/{p-a226ecdb.system.entry.js → p-6bc81a5b.system.entry.js} +2 -2
- package/dist/pine-core/{p-670b1551.system.entry.js → p-6c3299f9.system.entry.js} +2 -2
- package/dist/pine-core/{p-670b1551.system.entry.js.map → p-6c3299f9.system.entry.js.map} +1 -1
- package/dist/pine-core/{p-428a96f9.entry.js → p-6cba6806.entry.js} +2 -2
- package/dist/pine-core/{p-03209958.system.entry.js → p-732e2564.system.entry.js} +2 -2
- package/dist/pine-core/{p-58fa5c8f.entry.js → p-8d6fa6f7.entry.js} +2 -2
- package/dist/pine-core/{p-91954848.entry.js → p-95f2782c.entry.js} +2 -2
- package/dist/pine-core/{p-91954848.entry.js.map → p-95f2782c.entry.js.map} +1 -1
- package/dist/pine-core/p-96be2d57.entry.js +2 -0
- package/dist/pine-core/{p-8007f4de.entry.js.map → p-96be2d57.entry.js.map} +1 -1
- package/dist/pine-core/{p-e08503a7.entry.js → p-9ddf4f1f.entry.js} +2 -2
- package/dist/pine-core/{p-e08503a7.entry.js.map → p-9ddf4f1f.entry.js.map} +1 -1
- package/dist/pine-core/{p-dfcdd55d.system.entry.js → p-9f53eb94.system.entry.js} +2 -2
- package/dist/pine-core/{p-Bp1qn6CS.system.js.map → p-B81sAPMq.system.js.map} +1 -1
- package/dist/pine-core/p-B8OHXU49.system.js.map +1 -0
- package/dist/pine-core/p-C9T6sYau.system.js.map +1 -0
- package/dist/pine-core/{p-BjRES1T-.system.js.map → p-CGo2P4Fr.system.js.map} +1 -1
- package/dist/pine-core/{p-e50YjICS.system.js → p-CKzDRRgx.system.js} +1 -1
- package/dist/pine-core/p-CKzDRRgx.system.js.map +1 -0
- package/dist/pine-core/{p-CJJ3xfku.system.js.map → p-CWaidsBR.system.js.map} +1 -1
- package/dist/pine-core/p-CXGuX44q.system.js.map +1 -0
- package/dist/pine-core/{p-D2aexWnE.system.js.map → p-Ch7MRoFE.system.js.map} +1 -1
- package/dist/pine-core/p-ChiYqN-p.system.js.map +1 -0
- package/dist/pine-core/{p-Drfvoxcd.system.js.map → p-CiqRCskL.system.js.map} +1 -1
- package/dist/pine-core/{p-D8bibuWO.system.js.map → p-CoF_9_BM.system.js.map} +1 -1
- package/dist/pine-core/{p-BK-Kji1Y.system.js.map → p-DB45WSlG.system.js.map} +1 -1
- package/dist/pine-core/{p-PAmjcE4m.system.js.map → p-DC2NZwtk.system.js.map} +1 -1
- package/dist/pine-core/p-JAVnELnm.system.js +1 -1
- package/dist/pine-core/{p-D_LvnDUT.system.js.map → p-Ma8AuMzD.system.js.map} +1 -1
- package/dist/pine-core/{p-BQImnLWy.system.js.map → p-WhfStK1C.system.js.map} +1 -1
- package/dist/pine-core/{p-5b2b3e8a.entry.js → p-a08b60ae.entry.js} +2 -2
- package/dist/pine-core/{p-bd53ca9a.system.entry.js → p-a4d094da.system.entry.js} +2 -2
- package/dist/pine-core/{p-934229d8.entry.js → p-ac050f83.entry.js} +2 -2
- package/dist/pine-core/{p-65db991d.entry.js → p-b02936d2.entry.js} +2 -2
- package/dist/pine-core/{p-04a7b66c.system.entry.js → p-c03e2c5d.system.entry.js} +2 -2
- package/dist/pine-core/p-c2d17093.system.entry.js +2 -0
- package/dist/pine-core/{p-3a231ae4.system.entry.js.map → p-c2d17093.system.entry.js.map} +1 -1
- package/dist/pine-core/{p-6ace63a3.system.entry.js → p-cd335ec2.system.entry.js} +2 -2
- package/dist/pine-core/{p-0869fe00.entry.js → p-d5731a05.entry.js} +2 -2
- package/dist/pine-core/{p-c9f97ccb.system.entry.js → p-dad604e4.system.entry.js} +2 -2
- package/dist/pine-core/{p-676f1f32.system.entry.js → p-e31ea2ae.system.entry.js} +2 -2
- package/dist/pine-core/{p-94788439.system.entry.js → p-e5bc22b6.system.entry.js} +2 -2
- package/dist/pine-core/{p-C56crVDC.system.js.map → p-eHySdsWM.system.js.map} +1 -1
- package/dist/pine-core/{p-7ccd2fd6.system.entry.js → p-f9ef2f74.system.entry.js} +2 -2
- package/dist/pine-core/{p-c08ab042.system.entry.js → p-ff182316.system.entry.js} +2 -2
- package/dist/pine-core/{p-c08ab042.system.entry.js.map → p-ff182316.system.entry.js.map} +1 -1
- package/dist/pine-core/{p-B1wJrRWz.system.js.map → p-s-tFgs4I.system.js.map} +1 -1
- package/dist/pine-core/p-uv97KtT8.system.js.map +1 -0
- package/dist/pine-core/{p-CShvJnsl.js → p-xbb79yLt.js} +1 -1
- package/dist/pine-core/p-xbb79yLt.js.map +1 -0
- package/dist/pine-core/pds-alert.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-avatar.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-checkbox.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-copytext.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-input.entry.esm.js.map +1 -1
- package/dist/pine-core/pds-modal-content.entry.esm.js.map +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/hydrate/index.js +11 -27
- package/hydrate/index.mjs +11 -27
- package/package.json +9 -9
- package/dist/cjs/index-BIrlTMGo.js.map +0 -1
- package/dist/esm/index-CShvJnsl.js.map +0 -1
- package/dist/esm-es5/index-CShvJnsl.js.map +0 -1
- package/dist/pine-core/p-227d5375.entry.js +0 -2
- package/dist/pine-core/p-227d5375.entry.js.map +0 -1
- package/dist/pine-core/p-3a231ae4.system.entry.js +0 -2
- package/dist/pine-core/p-8007f4de.entry.js +0 -2
- package/dist/pine-core/p-BZj284A2.system.js.map +0 -1
- package/dist/pine-core/p-CShvJnsl.js.map +0 -1
- package/dist/pine-core/p-CgF-S6vZ.system.js.map +0 -1
- package/dist/pine-core/p-CrjhL65U.system.js.map +0 -1
- package/dist/pine-core/p-DBdgdjLr.system.js.map +0 -1
- package/dist/pine-core/p-a54f4dfd.system.entry.js +0 -2
- package/dist/pine-core/p-a54f4dfd.system.entry.js.map +0 -1
- package/dist/pine-core/p-be647b2a.entry.js +0 -2
- package/dist/pine-core/p-cf910e8b.system.entry.js +0 -2
- package/dist/pine-core/p-e50YjICS.system.js.map +0 -1
- package/dist/pine-core/p-ejoWgOZK.system.js.map +0 -1
- /package/dist/pine-core/{p-847fc77b.system.entry.js.map → p-11d69ad5.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-b64407a4.entry.js.map → p-15202869.entry.js.map} +0 -0
- /package/dist/pine-core/{p-cd564179.entry.js.map → p-15650db8.entry.js.map} +0 -0
- /package/dist/pine-core/{p-9998c2a0.entry.js.map → p-1daf66d1.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e6b39ec1.entry.js.map → p-233a6680.entry.js.map} +0 -0
- /package/dist/pine-core/{p-dba5ca37.system.entry.js.map → p-3fd0f8a9.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0398f6e3.entry.js.map → p-41cc9270.entry.js.map} +0 -0
- /package/dist/pine-core/{p-80017aa5.entry.js.map → p-46e5a568.entry.js.map} +0 -0
- /package/dist/pine-core/{p-1f5ed7bb.system.entry.js.map → p-6150fb43.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-e837b577.entry.js.map → p-66597ea5.entry.js.map} +0 -0
- /package/dist/pine-core/{p-a226ecdb.system.entry.js.map → p-6bc81a5b.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-428a96f9.entry.js.map → p-6cba6806.entry.js.map} +0 -0
- /package/dist/pine-core/{p-03209958.system.entry.js.map → p-732e2564.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-58fa5c8f.entry.js.map → p-8d6fa6f7.entry.js.map} +0 -0
- /package/dist/pine-core/{p-dfcdd55d.system.entry.js.map → p-9f53eb94.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-5b2b3e8a.entry.js.map → p-a08b60ae.entry.js.map} +0 -0
- /package/dist/pine-core/{p-bd53ca9a.system.entry.js.map → p-a4d094da.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-934229d8.entry.js.map → p-ac050f83.entry.js.map} +0 -0
- /package/dist/pine-core/{p-65db991d.entry.js.map → p-b02936d2.entry.js.map} +0 -0
- /package/dist/pine-core/{p-04a7b66c.system.entry.js.map → p-c03e2c5d.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-6ace63a3.system.entry.js.map → p-cd335ec2.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-0869fe00.entry.js.map → p-d5731a05.entry.js.map} +0 -0
- /package/dist/pine-core/{p-c9f97ccb.system.entry.js.map → p-dad604e4.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-676f1f32.system.entry.js.map → p-e31ea2ae.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-94788439.system.entry.js.map → p-e5bc22b6.system.entry.js.map} +0 -0
- /package/dist/pine-core/{p-7ccd2fd6.system.entry.js.map → p-f9ef2f74.system.entry.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-D8bibuWO.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n display: inline-block;\n width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n textarea {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])) {\n .pds-textarea__field:not(.is-invalid) {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n\n ~ .pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);\n color: var(--pine-color-text-accent);\n }\n }\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n align-items: center;\n display: flex;\n justify-content: space-between;\n}\n\n.pds-textarea__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n display: block;\n margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n font: var(--pine-typography-body-sm-medium);\n gap: var(--pine-dimension-2xs);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__field-wrapper {\n display: inline-block;\n position: relative;\n width: 100%;\n}\n\n.pds-textarea__field {\n background-color: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-sizing: border-box;\n color: var(--pine-color-text);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n min-height: calc(var(--pine-dimension-xl) * 2);\n min-width: calc(var(--pine-dimension-xl) * 2);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n resize: both;\n width: 100%;\n\n // Add bottom padding when character counter is present\n :host([max-length]) & {\n padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n }\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--pine-border-hover);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &::placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &.is-invalid {\n background-color: var(--pine-input-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n color: var(--pine-color-text-muted);\n font: var(--pine-typography-body-sm-medium);\n padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n pointer-events: none;\n position: absolute;\n user-select: none;\n white-space: nowrap;\n z-index: var(--pine-z-index);\n\n // Match textarea disabled state\n :host([aria-disabled=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n }\n\n // Match textarea readonly state\n :host([aria-readonly=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n\n // Match textarea invalid state - target when field has is-invalid class\n .pds-textarea__field.is-invalid ~ & {\n background-color: var(--pine-input-color-background-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n tag: 'pds-textarea',\n styleUrls: [\n '../../global/styles/utils/label.scss',\n '../pds-input/pds-input.tokens.scss',\n 'pds-textarea.scss'\n ],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsTextarea {\n\n private nativeTextarea?: HTMLTextAreaElement\n private focusedValue?: string | null;\n private inheritedAttributes: Attributes = {};\n private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n private internals?: ElementInternals;\n private resizeObserver?: ResizeObserver;\n private characterCounter?: HTMLElement;\n private readonly _type = 'textarea' as const;\n\n @Element() el: HTMLPdsTextareaElement;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when a keyboard input occurs.\n *\n * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n */\n @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n /**\n * Event emitted whenever the value of the textarea changes.\n *\n * This event will not emit when programmatically setting the `value` property.\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n /**\n * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n * `textarea.focus()`.\n */\n @Method()\n async setFocus() {\n if (this.nativeTextarea) {\n this.nativeTextarea.focus();\n }\n }\n\n /**\n * Specifies if and how the browser provides `autocomplete` assistance for the field.\n */\n @Prop() autocomplete: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines whether or not the textarea is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n */\n @Prop() debounce?: number;\n\n /**\n * Displays an error message below the textarea field.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a message or hint below the textarea field.\n */\n @Prop() helperMessage?: string;\n\n /**\n * Determines whether or not the textarea is invalid or throws an error.\n * @defaultValue false\n */\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /**\n * Text to be displayed as the textarea label.\n */\n @Prop() label?: string;\n\n /**\n * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n */\n @Prop() name: string = this.componentId;\n\n /**\n * Specifies a short hint that describes the expected value of the textarea.\n */\n @Prop() placeholder?: string;\n\n /**\n * Determines whether or not the textarea is readonly.\n * @defaultValue false\n */\n @Prop() readonly = false;\n\n /**\n * Determines whether or not the textarea is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Sets number of rows of text visible without needing to scroll in the textarea.\n */\n @Prop() rows?: number;\n\n /**\n * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n */\n @Prop({ reflect: true }) maxLength?: number;\n\n /**\n * Applies highlight styling to the textarea field.\n */\n @Prop({ reflect: true }) highlight?: boolean;\n\n /**\n * The value of the textarea.\n */\n @Prop({mutable: true}) value?: string | null = '';\n\n @State() hasFocus = false;\n\n\n /**\n * If true, the textarea has action content in the label area\n */\n @State() hasAction = false;\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeTextarea = this.nativeTextarea;\n const value = this.getValue();\n\n if (nativeTextarea && nativeTextarea.value !== value) {\n nativeTextarea.value = value;\n }\n\n // Update form value for Form Associated Custom Elements API\n this.updateFormValue();\n\n // Update character counter position in case content changes affect sizing\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n this.updateCharacterCounterPosition();\n }\n }\n\n @Watch('maxLength')\n protected maxLengthChanged() {\n // Setup or teardown ResizeObserver based on maxLength\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.maxLength && this.nativeTextarea) {\n this.setupResizeObserver();\n }\n\n // Update ElementInternals validity when maxLength changes\n if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n this.internals.setValidity(\n { tooLong: isTooLong },\n isTooLong ? 'Value exceeds maxLength' : '',\n this.nativeTextarea\n );\n }\n }\n\n /**\n * Emits an `pdsInput` event.\n */\n private emitInputChange(event?: Event) {\n const { value } = this;\n this.pdsInput.emit({ value, event });\n }\n\n /**\n * Emits an `pdsTextareaChange` event.\n */\n private emitValueChange(event?: Event) {\n const textarea = event.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n const { value } = textarea;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n this.focusedValue = newValue;\n this.pdsTextareaChange.emit({ value: newValue, event });\n }\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLTextAreaElement | null;\n if (input) {\n // Handle maxLength validation\n if (this.maxLength && input.value.length > this.maxLength) {\n // Prevent input beyond maxLength\n input.value = input.value.substring(0, this.maxLength);\n }\n this.value = input.value || '';\n }\n this.emitInputChange(ev);\n\n // Update counter position when content changes\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n // Use requestAnimationFrame to ensure DOM is updated\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n };\n\n private onTextareaChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n this.debounceChanged();\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n disconnectedCallback() {\n // Clean up ResizeObserver\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el),\n };\n this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n }\n\n componentDidLoad() {\n this.originalPdsInput = this.pdsInput;\n // Set initial form value\n this.updateFormValue();\n\n // Setup ResizeObserver for character counter positioning\n this.setupResizeObserver();\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n /**\n * Sets up ResizeObserver to track textarea resize for character counter positioning\n */\n private setupResizeObserver() {\n if (!this.maxLength || !this.nativeTextarea) return;\n\n // ResizeObserver may not be available in test environments\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => {\n // Use requestAnimationFrame to ensure DOM updates are complete\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n });\n\n this.resizeObserver.observe(this.nativeTextarea);\n\n // Initial positioning with a small delay to ensure counter is rendered\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n }\n\n /**\n * Updates character counter position to stay within textarea boundaries during resize\n */\n private updateCharacterCounterPosition() {\n if (!this.characterCounter || !this.nativeTextarea) return;\n\n // Skip positioning in test environments where ResizeObserver isn't available\n if (typeof ResizeObserver === 'undefined') return;\n\n // Ensure the character counter has been rendered and has dimensions\n if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n return;\n }\n\n // Position based on textarea's actual dimensions (which change during manual resize)\n const textareaWidth = this.nativeTextarea.offsetWidth;\n const textareaHeight = this.nativeTextarea.offsetHeight;\n const counterWidth = this.characterCounter.offsetWidth;\n const counterHeight = this.characterCounter.offsetHeight;\n\n // Calculate position within textarea boundaries with padding from edges\n const rightPosition = textareaWidth - counterWidth - 8;\n const bottomPosition = textareaHeight - counterHeight - 8;\n\n // Ensure counter stays within textarea boundaries even when resized very small\n const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n // Apply absolute positioning within the field wrapper\n this.characterCounter.style.position = 'absolute';\n this.characterCounter.style.left = `${finalLeft}px`;\n this.characterCounter.style.top = `${finalTop}px`;\n this.characterCounter.style.right = 'auto';\n this.characterCounter.style.bottom = 'auto';\n }\n\n /**\n * Renders the character counter when maxLength is set\n */\n private renderCharacterCounter() {\n if (!this.maxLength) {\n return null;\n }\n\n const currentLength = this.getValue().length;\n return (\n <div\n class=\"pds-textarea__character-counter\"\n ref={(el) => this.characterCounter = el}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${currentLength} of ${this.maxLength} characters`}\n >\n {currentLength} / {this.maxLength}\n </div>\n );\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-textarea__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /**\n * Updates the form value using ElementInternals API\n */\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.getValue();\n this.internals.setFormValue(value || null);\n\n // Set validity based on native textarea validation\n if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.nativeTextarea.validity,\n this.nativeTextarea.validationMessage,\n this.nativeTextarea\n );\n }\n }\n }\n\n\n /**\n * Form Associated Custom Elements API: Called when the form is reset\n */\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /**\n * Form Associated Custom Elements API: Called when the form is disabled\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /**\n * Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string | FormData | null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value from FormData using the textarea's name\n const value = state.get(this.name);\n if (typeof value === 'string') {\n this.value = value;\n }\n }\n }\n\n render() {\n const value = this.getValue();\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <div class=\"pds-textarea__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {!this.hideLabel && this.renderAction()}\n </div>\n }\n <div class=\"pds-textarea__field-wrapper\">\n <textarea\n ref={(el) => this.nativeTextarea = el }\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n maxlength={this.maxLength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onBlur={this.onBlur}\n onChange={this.onTextareaChange}\n onFocus={this.onFocus}\n onInput={this.onInput}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n {this.renderCharacterCounter()}\n </div>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"p-CoF_9_BM.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-input/pds-input.tokens.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.scss?tag=pds-textarea&encapsulation=shadow","src/components/pds-textarea/pds-textarea.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n","@use '~@kajabi-ui/styles/dist/pine/components/pds-input/pds-input.tokens'\n",":host {\n display: inline-block;\n width: 100%;\n}\n\n:host([aria-readonly=\"true\"]) {\n textarea {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n}\n\n:host([highlight]:not([disabled]):not([aria-disabled=\"true\"]):not([aria-readonly=\"true\"])) {\n .pds-textarea__field:not(.is-invalid) {\n background-color: var(--pine-color-accent-disabled);\n border-color: var(--pine-color-accent);\n color: var(--pine-color-text-accent);\n\n &:hover {\n border-color: var(--pine-color-accent-hover);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring);\n }\n\n ~ .pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-accent-disabled) 80%, transparent);\n color: var(--pine-color-text-accent);\n }\n }\n}\n\n.pds-textarea {\n display: flex;\n flex-direction: column;\n}\n\n.pds-textarea__label-wrapper {\n align-items: center;\n display: flex;\n justify-content: space-between;\n}\n\n.pds-textarea__action {\n align-items: center;\n display: flex;\n gap: var(--pine-dimension-xs);\n margin-inline-start: var(--pine-dimension-xs);\n}\n\nlabel {\n display: block;\n margin-block-end: var(--pine-dimension-xs);\n}\n\n// When label is inside wrapper, remove its margin\n.pds-textarea__label-wrapper label {\n margin-block-end: 0;\n}\n\n.pds-textarea__helper-message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__error-message {\n align-items: center;\n color: var(--pine-color-text-message-danger);\n display: flex;\n font: var(--pine-typography-body-sm-medium);\n gap: var(--pine-dimension-2xs);\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-textarea__field-wrapper {\n display: inline-block;\n position: relative;\n width: 100%;\n}\n\n.pds-textarea__field {\n background-color: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: calc(var(--pine-dimension-xs) * 1.25);\n box-sizing: border-box;\n color: var(--pine-color-text);\n font: var(--pine-typography-body);\n letter-spacing: var(--pine-letter-spacing);\n min-height: calc(var(--pine-dimension-xl) * 2);\n min-width: calc(var(--pine-dimension-xl) * 2);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n resize: both;\n width: 100%;\n\n // Add bottom padding when character counter is present\n :host([max-length]) & {\n padding-bottom: calc(var(--pine-dimension-xs) + var(--pine-dimension-md));\n }\n\n &:hover:not(:disabled, .is-invalid) {\n border: var(--pine-border-hover);\n }\n\n &:disabled {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n cursor: not-allowed;\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n &::placeholder {\n color: var(--pine-color-text-placeholder);\n }\n\n &.is-invalid {\n background-color: var(--pine-input-color-background-danger);\n border-color: var(--pine-color-border-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n\n &:focus-visible {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n }\n}\n\n.pds-textarea__character-counter {\n background: color-mix(in srgb, var(--pine-color-background-container) 80%, transparent);\n border-radius: calc(var(--pine-dimension-2xs) * 0.5);\n color: var(--pine-color-text-muted);\n font: var(--pine-typography-body-sm-medium);\n padding: calc(var(--pine-dimension-2xs) * 0.5) var(--pine-dimension-2xs);\n pointer-events: none;\n position: absolute;\n user-select: none;\n white-space: nowrap;\n z-index: var(--pine-z-index);\n\n // Match textarea disabled state\n :host([aria-disabled=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-disabled);\n }\n\n // Match textarea readonly state\n :host([aria-readonly=\"true\"]) & {\n background-color: var(--pine-color-background-container-disabled);\n color: var(--pine-color-text-readonly);\n }\n\n // Match textarea invalid state - target when field has is-invalid class\n .pds-textarea__field.is-invalid ~ & {\n background-color: var(--pine-input-color-background-danger);\n\n :host-context([data-theme=\"dark\"]) & {\n background-color: var(--pine-color-red-950);\n }\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { assignDescription, isRequired, messageId, exposeTypeProperty } from '../../utils/form';\nimport { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';\nimport { debounceEvent } from '@utils/utils';\nimport type { Attributes } from '@utils/attributes';\nimport { inheritAttributes, inheritAriaAttributes } from '@utils/attributes';\nimport { danger } from '@pine-ds/icons/icons';\n\n/**\n * @slot action - Content to be displayed in the label area, typically for help icons or links\n */\n@Component({\n tag: 'pds-textarea',\n styleUrls: [\n '../../global/styles/utils/label.scss',\n '../pds-input/pds-input.tokens.scss',\n 'pds-textarea.scss'\n ],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsTextarea {\n\n private nativeTextarea?: HTMLTextAreaElement\n private focusedValue?: string | null;\n private inheritedAttributes: Attributes = {};\n private originalPdsInput?: EventEmitter<TextareaInputEventDetail>;\n private internals?: ElementInternals;\n private resizeObserver?: ResizeObserver;\n private characterCounter?: HTMLElement;\n private readonly _type = 'textarea' as const;\n\n @Element() el: HTMLPdsTextareaElement;\n\n /**\n * Emitted when the input loses focus.\n */\n @Event() pdsBlur!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when the input has focus.\n */\n @Event() pdsFocus!: EventEmitter<FocusEvent>;\n\n /**\n * Emitted when a keyboard input occurs.\n *\n * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface\n * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,\n * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If\n * the input is cleared on edit, the type is `null`.\n */\n @Event() pdsInput: EventEmitter<TextareaInputEventDetail>;\n\n /**\n * Event emitted whenever the value of the textarea changes.\n *\n * This event will not emit when programmatically setting the `value` property.\n */\n @Event() pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;\n\n /**\n * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global\n * `textarea.focus()`.\n */\n @Method()\n async setFocus() {\n if (this.nativeTextarea) {\n this.nativeTextarea.focus();\n }\n }\n\n /**\n * Specifies if and how the browser provides `autocomplete` assistance for the field.\n */\n @Prop() autocomplete: string;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines whether or not the textarea is disabled.\n * @defaultValue false\n */\n @Prop() disabled = false;\n\n /**\n * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.\n */\n @Prop() debounce?: number;\n\n /**\n * Displays an error message below the textarea field.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Displays a message or hint below the textarea field.\n */\n @Prop() helperMessage?: string;\n\n /**\n * Determines whether or not the textarea is invalid or throws an error.\n * @defaultValue false\n */\n @Prop({mutable: true}) invalid = false; // eslint-disable-line @stencil-community/strict-mutable\n\n /**\n * Text to be displayed as the textarea label.\n */\n @Prop() label?: string;\n\n /**\n * Visually hides the label text for instances where only the textarea should be displayed. Label remains accessible to assistive technology such as screen readers.\n * Note: When true, the action slot is also hidden to maintain a minimal UI.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.\n */\n @Prop() name: string = this.componentId;\n\n /**\n * Specifies a short hint that describes the expected value of the textarea.\n */\n @Prop() placeholder?: string;\n\n /**\n * Determines whether or not the textarea is readonly.\n * @defaultValue false\n */\n @Prop() readonly = false;\n\n /**\n * Determines whether or not the textarea is required.\n * @defaultValue false\n */\n @Prop() required = false;\n\n /**\n * Sets number of rows of text visible without needing to scroll in the textarea.\n */\n @Prop() rows?: number;\n\n /**\n * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.\n */\n @Prop({ reflect: true }) maxLength?: number;\n\n /**\n * Applies highlight styling to the textarea field.\n */\n @Prop({ reflect: true }) highlight?: boolean;\n\n /**\n * The value of the textarea.\n */\n @Prop({mutable: true}) value?: string | null = '';\n\n @State() hasFocus = false;\n\n\n /**\n * If true, the textarea has action content in the label area\n */\n @State() hasAction = false;\n\n @Watch('debounce')\n protected debounceChanged() {\n const { pdsInput, debounce, originalPdsInput } = this;\n\n this.pdsInput = debounce === undefined ? originalPdsInput ?? pdsInput : debounceEvent(pdsInput, debounce);\n }\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeTextarea = this.nativeTextarea;\n const value = this.getValue();\n\n if (nativeTextarea && nativeTextarea.value !== value) {\n nativeTextarea.value = value;\n }\n\n // Update form value for Form Associated Custom Elements API\n this.updateFormValue();\n\n // Update character counter position in case content changes affect sizing\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n this.updateCharacterCounterPosition();\n }\n }\n\n @Watch('maxLength')\n protected maxLengthChanged() {\n // Setup or teardown ResizeObserver based on maxLength\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.maxLength && this.nativeTextarea) {\n this.setupResizeObserver();\n }\n\n // Update ElementInternals validity when maxLength changes\n if (this.internals && this.internals.setValidity && this.nativeTextarea) {\n const isTooLong = this.nativeTextarea.value.length > (this.maxLength || 0);\n this.internals.setValidity(\n { tooLong: isTooLong },\n isTooLong ? 'Value exceeds maxLength' : '',\n this.nativeTextarea\n );\n }\n }\n\n /**\n * Emits an `pdsInput` event.\n */\n private emitInputChange(event?: Event) {\n const { value } = this;\n this.pdsInput.emit({ value, event });\n }\n\n /**\n * Emits an `pdsTextareaChange` event.\n */\n private emitValueChange(event?: Event) {\n const textarea = event.target as HTMLTextAreaElement;\n isRequired(textarea, this);\n\n const { value } = textarea;\n\n // Checks for both null and undefined values\n const newValue = value == null ? value : value.toString();\n this.focusedValue = newValue;\n this.pdsTextareaChange.emit({ value: newValue, event });\n }\n\n private getValue(): string {\n return this.value || '';\n }\n\n private onBlur = (ev: FocusEvent) => {\n this.hasFocus = false;\n\n if (this.focusedValue !== this.value) {\n this.emitValueChange(ev);\n }\n\n this.pdsBlur.emit(ev);\n };\n\n private onFocus = (ev: FocusEvent) => {\n this.hasFocus = true;\n this.focusedValue = this.value;\n\n this.pdsFocus.emit(ev);\n };\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLTextAreaElement | null;\n if (input) {\n // Handle maxLength validation\n if (this.maxLength && input.value.length > this.maxLength) {\n // Prevent input beyond maxLength\n input.value = input.value.substring(0, this.maxLength);\n }\n this.value = input.value || '';\n }\n this.emitInputChange(ev);\n\n // Update counter position when content changes\n if (this.maxLength && typeof ResizeObserver !== 'undefined') {\n // Use requestAnimationFrame to ensure DOM is updated\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n };\n\n private onTextareaChange = (ev: Event) => {\n this.emitValueChange(ev);\n };\n\n private textareaClassNames() {\n const classNames = ['pds-textarea__field'];\n\n if (this.invalid && this.invalid === true) {\n classNames.push('is-invalid');\n }\n\n return classNames.join(' ');\n }\n\n connectedCallback() {\n this.debounceChanged();\n // Initialize ElementInternals for form association\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n }\n\n disconnectedCallback() {\n // Clean up ResizeObserver\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el),\n ...inheritAttributes(this.el),\n };\n this.hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n }\n\n componentDidLoad() {\n this.originalPdsInput = this.pdsInput;\n // Set initial form value\n this.updateFormValue();\n\n // Setup ResizeObserver for character counter positioning\n this.setupResizeObserver();\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n /**\n * Sets up ResizeObserver to track textarea resize for character counter positioning\n */\n private setupResizeObserver() {\n if (!this.maxLength || !this.nativeTextarea) return;\n\n // ResizeObserver may not be available in test environments\n if (typeof ResizeObserver !== 'undefined') {\n this.resizeObserver = new ResizeObserver(() => {\n // Use requestAnimationFrame to ensure DOM updates are complete\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n });\n\n this.resizeObserver.observe(this.nativeTextarea);\n\n // Initial positioning with a small delay to ensure counter is rendered\n requestAnimationFrame(() => {\n this.updateCharacterCounterPosition();\n });\n }\n }\n\n /**\n * Updates character counter position to stay within textarea boundaries during resize\n */\n private updateCharacterCounterPosition() {\n if (!this.characterCounter || !this.nativeTextarea) return;\n\n // Skip positioning in test environments where ResizeObserver isn't available\n if (typeof ResizeObserver === 'undefined') return;\n\n // Ensure the character counter has been rendered and has dimensions\n if (this.characterCounter.offsetWidth === 0 || this.characterCounter.offsetHeight === 0) {\n // Counter not ready or component hidden - return and let resize/input observers handle positioning later\n return;\n }\n\n // Position based on textarea's actual dimensions (which change during manual resize)\n const textareaWidth = this.nativeTextarea.offsetWidth;\n const textareaHeight = this.nativeTextarea.offsetHeight;\n const counterWidth = this.characterCounter.offsetWidth;\n const counterHeight = this.characterCounter.offsetHeight;\n\n // Calculate position within textarea boundaries with padding from edges\n const rightPosition = textareaWidth - counterWidth - 8;\n const bottomPosition = textareaHeight - counterHeight - 8;\n\n // Ensure counter stays within textarea boundaries even when resized very small\n const finalLeft = Math.max(8, Math.min(rightPosition, textareaWidth - counterWidth - 8));\n const finalTop = Math.max(8, Math.min(bottomPosition, textareaHeight - counterHeight - 8));\n\n // Apply absolute positioning within the field wrapper\n this.characterCounter.style.position = 'absolute';\n this.characterCounter.style.left = `${finalLeft}px`;\n this.characterCounter.style.top = `${finalTop}px`;\n this.characterCounter.style.right = 'auto';\n this.characterCounter.style.bottom = 'auto';\n }\n\n /**\n * Renders the character counter when maxLength is set\n */\n private renderCharacterCounter() {\n if (!this.maxLength) {\n return null;\n }\n\n const currentLength = this.getValue().length;\n return (\n <div\n class=\"pds-textarea__character-counter\"\n ref={(el) => this.characterCounter = el}\n role=\"status\"\n aria-live=\"polite\"\n aria-label={`${currentLength} of ${this.maxLength} characters`}\n >\n {currentLength} / {this.maxLength}\n </div>\n );\n }\n\n private renderAction() {\n const hasAction = this.el.querySelector('[slot=\"action\"]') !== null;\n if (hasAction) {\n return (\n <div class=\"pds-textarea__action\" part=\"action\">\n <slot name=\"action\"></slot>\n </div>\n );\n }\n return null;\n }\n\n /**\n * Updates the form value using ElementInternals API\n */\n private updateFormValue() {\n if (this.internals && this.internals.setFormValue) {\n const value = this.getValue();\n this.internals.setFormValue(value || null);\n\n // Set validity based on native textarea validation\n if (this.nativeTextarea && this.internals && this.internals.setValidity) {\n this.internals.setValidity(\n this.nativeTextarea.validity,\n this.nativeTextarea.validationMessage,\n this.nativeTextarea\n );\n }\n }\n }\n\n\n /**\n * Form Associated Custom Elements API: Called when the form is reset\n */\n formResetCallback() {\n this.value = '';\n this.updateFormValue();\n }\n\n /**\n * Form Associated Custom Elements API: Called when the form is disabled\n */\n formDisabledCallback(disabled: boolean) {\n this.disabled = disabled;\n }\n\n /**\n * Form Associated Custom Elements API: Called to restore form state\n */\n formStateRestoreCallback(state: string | FormData | null) {\n if (typeof state === 'string') {\n this.value = state;\n } else if (state instanceof FormData && this.name) {\n // Extract value from FormData using the textarea's name\n const value = state.get(this.name);\n if (typeof value === 'string') {\n this.value = value;\n }\n }\n }\n\n render() {\n const value = this.getValue();\n\n return (\n <Host\n aria-disabled={this.disabled ? 'true' : null}\n aria-readonly={this.readonly ? 'true' : null}\n has-action={this.hasAction && !this.hideLabel ? 'true' : null}\n >\n <div class=\"pds-textarea\">\n {this.label &&\n <div class=\"pds-textarea__label-wrapper\">\n <label htmlFor={this.componentId}>\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {!this.hideLabel && this.renderAction()}\n </div>\n }\n <div class=\"pds-textarea__field-wrapper\">\n <textarea\n ref={(el) => this.nativeTextarea = el }\n aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n autocomplete={this.autocomplete}\n class={this.textareaClassNames()}\n disabled={this.disabled}\n id={this.componentId}\n maxlength={this.maxLength}\n name={this.name}\n placeholder={this.placeholder}\n readOnly={this.readonly}\n required={this.required}\n rows={this.rows}\n onBlur={this.onBlur}\n onChange={this.onTextareaChange}\n onFocus={this.onFocus}\n onInput={this.onInput}\n {...this.inheritedAttributes}\n >\n {value}\n </textarea>\n {this.renderCharacterCounter()}\n </div>\n {this.helperMessage &&\n <p\n class=\"pds-textarea__helper-message\"\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </p>\n }\n {this.invalid &&\n <p\n aria-live=\"assertive\"\n class=\"pds-textarea__error-message\"\n id={messageId(this.componentId, 'error')}\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </p>\n }\n </div>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MAAA,MAAM,QAAQ,GAAG,oTAAoT;;MCArU,MAAM,iBAAiB,GAAG,uEAAuE;;MCAjG,MAAM,cAAc,GAAG,0rKAA0rK;;YCqBpsK,WAAW,2BAAA,MAAA;MAVxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;;;MAcU,QAAA,IAAmB,CAAA,mBAAA,GAAe,EAAE;MAK3B,QAAA,IAAK,CAAA,KAAA,GAAG,UAAmB;MAoD5C;;;MAGG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;MAiBxB;;;MAGG;MACoB,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC;MAavC;;MAEG;MACK,QAAA,IAAA,CAAA,IAAI,GAAW,IAAI,CAAC,WAAW;MAOvC;;;MAGG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;MAExB;;;MAGG;MACK,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;MAiBxB;;MAEG;MACoB,QAAA,IAAK,CAAA,KAAA,GAAmB,EAAE;MAExC,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;MAGzB;;MAEG;MACM,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;MA+ElB,QAAA,IAAA,CAAA,MAAM,GAAG,CAAC,EAAc,KAAI;MAClC,YAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;kBAErB,IAAI,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,KAAK,EAAE;MACpC,gBAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;;MAG1B,YAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;MACvB,SAAC;MAEO,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAc,KAAI;MACnC,YAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;MACpB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK;MAE9B,YAAA,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;MACxB,SAAC;MAEO,QAAA,IAAA,CAAA,OAAO,GAAG,CAAC,EAAS,KAAI;MAC9B,YAAA,MAAM,KAAK,GAAG,EAAE,CAAC,MAAoC;kBACrD,IAAI,KAAK,EAAE;;MAET,gBAAA,IAAI,IAAI,CAAC,SAAS,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,EAAE;;MAEzD,oBAAA,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC,SAAS,CAAC;;sBAExD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE;;MAEhC,YAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;;kBAGxB,IAAI,IAAI,CAAC,SAAS,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;;sBAE3D,qBAAqB,CAAC,MAAK;0BACzB,IAAI,CAAC,8BAA8B,EAAE;MACvC,iBAAC,CAAC;;MAEN,SAAC;MAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,EAAS,KAAI;MACvC,YAAA,IAAI,CAAC,eAAe,CAAC,EAAE,CAAC;MAC1B,SAAC;MAmQF;MAreC;;;MAGG;MAEH,IAAA,MAAM,QAAQ,GAAA;MACZ,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,YAAA,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE;;;UAuGrB,eAAe,GAAA;cACvB,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI;MAErD,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ,KAAK,SAAS,GAAG,gBAAgB,KAAhB,IAAA,IAAA,gBAAgB,cAAhB,gBAAgB,GAAI,QAAQ,GAAG,aAAa,CAAC,QAAQ,EAAE,QAAQ,CAAC;;MAG3G;;MAEG;UAEO,YAAY,GAAA;MACpB,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc;MAC1C,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;cAE7B,IAAI,cAAc,IAAI,cAAc,CAAC,KAAK,KAAK,KAAK,EAAE;MACpD,YAAA,cAAc,CAAC,KAAK,GAAG,KAAK;;;cAI9B,IAAI,CAAC,eAAe,EAAE;;cAGtB,IAAI,IAAI,CAAC,SAAS,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;kBAC3D,IAAI,CAAC,8BAA8B,EAAE;;;UAK/B,gBAAgB,GAAA;;MAExB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;cAGlC,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,cAAc,EAAE;kBACzC,IAAI,CAAC,mBAAmB,EAAE;;;MAI5B,QAAA,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,IAAI,IAAI,CAAC,cAAc,EAAE;MACvE,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC;kBAC1E,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,EAAE,OAAO,EAAE,SAAS,EAAE,EACtB,SAAS,GAAG,yBAAyB,GAAG,EAAE,EAC1C,IAAI,CAAC,cAAc,CACpB;;;MAIL;;MAEG;MACK,IAAA,eAAe,CAAC,KAAa,EAAA;MACnC,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI;cACtB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;;MAGtC;;MAEG;MACK,IAAA,eAAe,CAAC,KAAa,EAAA;MACnC,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAA6B;MACpD,QAAA,UAAU,CAAC,QAAQ,EAAE,IAAI,CAAC;MAE1B,QAAA,MAAM,EAAE,KAAK,EAAE,GAAG,QAAQ;;MAG1B,QAAA,MAAM,QAAQ,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC,QAAQ,EAAE;MACzD,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;MAC5B,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;;UAGjD,QAAQ,GAAA;MACd,QAAA,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE;;UA6CjB,kBAAkB,GAAA;MACxB,QAAA,MAAM,UAAU,GAAG,CAAC,qBAAqB,CAAC;cAE1C,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,KAAK,IAAI,EAAE;MACzC,YAAA,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC;;MAG/B,QAAA,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;UAG9B,iBAAiB,GAAA;cACf,IAAI,CAAC,eAAe,EAAE;;MAEtB,QAAA,IAAI,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE;kBAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,eAAe,EAAE;;;UAI9C,oBAAoB,GAAA;;MAElB,QAAA,IAAI,IAAI,CAAC,cAAc,EAAE;MACvB,YAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;;UAIpC,iBAAiB,GAAA;MACf,QAAA,IAAI,CAAC,mBAAmB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACnB,qBAAqB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA,EAC9B,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAC9B;MACD,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;;UAGpE,gBAAgB,GAAA;MACd,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ;;cAErC,IAAI,CAAC,eAAe,EAAE;;cAGtB,IAAI,CAAC,mBAAmB,EAAE;;MAG1B,QAAA,kBAAkB,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC;;MAG/C;;MAEG;UACK,mBAAmB,GAAA;cACzB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,cAAc;kBAAE;;MAG7C,QAAA,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;MACzC,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;;sBAE5C,qBAAqB,CAAC,MAAK;0BACzB,IAAI,CAAC,8BAA8B,EAAE;MACvC,iBAAC,CAAC;MACJ,aAAC,CAAC;kBAEF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC;;kBAGhD,qBAAqB,CAAC,MAAK;sBACzB,IAAI,CAAC,8BAA8B,EAAE;MACvC,aAAC,CAAC;;;MAIN;;MAEG;UACK,8BAA8B,GAAA;cACpC,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,cAAc;kBAAE;;cAGpD,IAAI,OAAO,cAAc,KAAK,WAAW;kBAAE;;MAG3C,QAAA,IAAI,IAAI,CAAC,gBAAgB,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,gBAAgB,CAAC,YAAY,KAAK,CAAC,EAAE;;kBAEvF;;;MAIF,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW;MACrD,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY;MACvD,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,gBAAgB,CAAC,WAAW;MACtD,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,gBAAgB,CAAC,YAAY;;MAGxD,QAAA,MAAM,aAAa,GAAG,aAAa,GAAG,YAAY,GAAG,CAAC;MACtD,QAAA,MAAM,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,CAAC;;cAGzD,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,aAAa,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC;cACxF,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,cAAc,EAAE,cAAc,GAAG,aAAa,GAAG,CAAC,CAAC,CAAC;;cAG1F,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;cACjD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,GAAG,CAAA,EAAG,SAAS,CAAA,EAAA,CAAI;cACnD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,GAAG,GAAG,CAAA,EAAG,QAAQ,CAAA,EAAA,CAAI;cACjD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM;cAC1C,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM;;MAG7C;;MAEG;UACK,sBAAsB,GAAA;MAC5B,QAAA,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACnB,YAAA,OAAO,IAAI;;cAGb,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM;cAC5C,QACE,CAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAC,iCAAiC,EACvC,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAE,EACvC,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EACN,YAAA,EAAA,CAAG,EAAA,aAAa,CAAO,IAAA,EAAA,IAAI,CAAC,SAAS,aAAa,EAAA,EAE7D,aAAa,SAAK,IAAI,CAAC,SAAS,CAC7B;;UAIF,YAAY,GAAA;MAClB,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI;cACnE,IAAI,SAAS,EAAE;kBACb,QACE,WAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC7C,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAQ,CAAA,CACvB;;MAGV,QAAA,OAAO,IAAI;;MAGb;;MAEG;UACK,eAAe,GAAA;cACrB,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,YAAY,EAAE;MACjD,YAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;kBAC7B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,KAAK,IAAI,IAAI,CAAC;;MAG1C,YAAA,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;sBACvE,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,IAAI,CAAC,cAAc,CAAC,QAAQ,EAC5B,IAAI,CAAC,cAAc,CAAC,iBAAiB,EACrC,IAAI,CAAC,cAAc,CACpB;;;;MAMP;;MAEG;UACH,iBAAiB,GAAA;MACf,QAAA,IAAI,CAAC,KAAK,GAAG,EAAE;cACf,IAAI,CAAC,eAAe,EAAE;;MAGxB;;MAEG;MACH,IAAA,oBAAoB,CAAC,QAAiB,EAAA;MACpC,QAAA,IAAI,CAAC,QAAQ,GAAG,QAAQ;;MAG1B;;MAEG;MACH,IAAA,wBAAwB,CAAC,KAA+B,EAAA;MACtD,QAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;MAC7B,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;mBACb,IAAI,KAAK,YAAY,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;;kBAEjD,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;MAClC,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;MAC7B,gBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;;;;UAKxB,MAAM,GAAA;MACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE;MAE7B,QAAA,QACE,CAAC,CAAA,IAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,mBAC7B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,gBAChC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,MAAM,GAAG,IAAI,EAAA,EAE7D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACtB,IAAI,CAAC,KAAK;kBACT,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAO,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,IAAI,CAAC,SAAS,GAAG,iBAAiB,GAAG,EAAE,EAAA,EACjD,IAAI,CAAC,KAAK,CACN,CACD,EACP,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,YAAY,EAAE,CACnC,EAER,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6BAA6B,EAAA,EACtC,CAAA,CAAA,UAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EACE,GAAG,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC,cAAc,GAAG,EAAE,EACnB,kBAAA,EAAA,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,EAAA,cAAA,EACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAAE,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,gBAAgB,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EACjB,IAAI,CAAC,mBAAmB,CAAA,EAE3B,KAAK,CACG,EACV,IAAI,CAAC,sBAAsB,EAAE,CAC1B,EACL,IAAI,CAAC,aAAa;MACjB,YAAA,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,8BAA8B,EACpC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACjB,EAEL,IAAI,CAAC,OAAO;kBACX,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EACY,WAAW,EACrB,KAAK,EAAC,6BAA6B,EACnC,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,EAAA,EAExC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,EAAG,CAAA,EACtC,IAAI,CAAC,YAAY,CAChB,CAEF,CACD;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-
|
|
1
|
+
{"version":3,"file":"p-DB45WSlG.system.js","sources":["src/components/pds-accordion/pds-accordion.scss?tag=pds-accordion&encapsulation=shadow","src/components/pds-accordion/pds-accordion.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\ndetails {\n --number-animation-transform-timing: 200ms;\n\n border-radius: var(--pine-dimension-xs);\n\n pds-icon {\n transform: scaleY(1);\n }\n}\n\n/* stylelint-disable-next-line */\ndetails[open] {\n background-color: var(--pine-color-background-container);\n\n summary {\n color: var(--pine-color-text-active);\n font-weight: var(--pine-font-weight-semi-bold);\n\n pds-icon {\n transform: scaleY(-1);\n }\n }\n}\n\nsummary {\n background-color: var(--pine-color-background-container);\n border-radius: var(--pine-dimension-xs);\n color: var(--pine-color-text-muted);\n font-family: var(--pine-font-family-body);\n font-size: var(--pine-font-size-body-md);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing);\n line-height: var(--pine-line-height-body);\n padding-block: calc(var(--pine-dimension-2xs) * 1.5);\n padding-inline-end: var(--pine-dimension-2xs);\n padding-inline-start: var(--pine-dimension-xs);\n\n // Removes marker on Firefox/Chrome\n /* stylelint-disable-next-line */\n align-items: center;\n display: flex;\n\n // Removes marker on Safari\n &::-webkit-details-marker {\n display: none;\n }\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n color: var(--pine-color-text);\n cursor: pointer;\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n position: relative;\n }\n\n pds-icon {\n margin-inline-start: auto;\n }\n}\n\n.pds-accordion__body {\n padding-block-end: calc(var(--pine-dimension-sm) + 2);\n padding-inline: calc(var(--pine-dimension-2xs) * 1.5);\n}\n","import { Component, h, Host, Prop, Watch } from '@stencil/core';\nimport { downSmall } from '@pine-ds/icons/icons';\n\n/**\n * @part accordion-body - Accordion body styles.\n * @part accordion-button - Accordion button/trigger styles.\n * @part accordion-icon - Accordion icon styles.\n * @slot (default) - Accordion body content.\n * @slot label - Accordion trigger button content.\n */\n@Component({\n tag: 'pds-accordion',\n styleUrls: ['pds-accordion.scss'],\n shadow: true,\n})\nexport class PdsAccordion {\n private detailsEl: HTMLDetailsElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n * @defaultValue null\n */\n @Prop() componentId: string;\n\n /**\n * Can be used to manually set the open state of the accordion.\n * @defaultValue false\n */\n @Prop({\n attribute: 'open',\n mutable: true,\n reflect: true,\n }) isOpen: boolean = false;\n\n @Watch('isOpen')\n handleOpenState(newValue: boolean) {\n this.isOpen = newValue;\n }\n\n private handleToggle = () => {\n this.isOpen = this.detailsEl.open;\n };\n\n private getOpenAttribute = () => {\n if (this.isOpen !== false) {\n return { open: true };\n }\n return '';\n };\n\n componentDidLoad() {\n this.detailsEl.addEventListener('toggle', this.handleToggle);\n }\n\n render() {\n return (\n <Host class=\"pds-accordion\" id={this.componentId}>\n <details {...this.getOpenAttribute()} ref={(el) => (this.detailsEl = el as HTMLDetailsElement)}>\n <summary part=\"accordion-button\">\n <slot name=\"label\">Details</slot>\n <pds-icon icon={downSmall} part=\"accordion-icon\" />\n </summary>\n <div part=\"accordion-body\" class=\"pds-accordion__body\">\n <slot />\n </div>\n </details>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;MAAA,MAAM,eAAe,GAAG,miDAAmiD;;YCe9iD,YAAY,4BAAA,MAAA;MALzB,IAAA,WAAA,CAAA,OAAA,EAAA;;MAcE;;;MAGG;MAKA,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;MAOlB,QAAA,IAAY,CAAA,YAAA,GAAG,MAAK;kBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI;MACnC,SAAC;MAEO,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;MAC9B,YAAA,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE;MACzB,gBAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE;;MAEvB,YAAA,OAAO,EAAE;MACX,SAAC;MAqBF;MAlCC,IAAA,eAAe,CAAC,QAAiB,EAAA;MAC/B,QAAA,IAAI,CAAC,MAAM,GAAG,QAAQ;;UAcxB,gBAAgB,GAAA;cACd,IAAI,CAAC,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC;;UAG9D,MAAM,GAAA;MACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,eAAe,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EAC9C,CAAA,CAAA,SAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAa,IAAI,CAAC,gBAAgB,EAAE,EAAE,EAAA,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAwB,CAAC,EAAA,CAAA,EAC5F,CAAS,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,kBAAkB,EAAA,EAC9B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAe,EAAA,SAAA,CAAA,EACjC,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,SAAS,EAAE,IAAI,EAAC,gBAAgB,GAAG,CAC3C,EACV,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,IAAI,EAAC,gBAAgB,EAAC,KAAK,EAAC,qBAAqB,EAAA,EACpD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,CACE,CACL;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-PAmjcE4m.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n// Need discussions\n --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n --pine-dimension-025: 2px;\n --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n --number-transition-timing: 0.15s ease-out;\n\n align-items: flex-start;\n color: var(--pine-color-text);\n display: inline-flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--pine-color-text-message-danger);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--pine-color-danger);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n\n label {\n color: var(--color-text-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--pine-color-neutral);\n border: 0;\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: var(--pine-dimension-250);\n margin: 0;\n padding: 0;\n position: relative;\n transition: var(--number-transition-timing);\n transition-property: background, border, color;\n width: var(--pine-dimension-450);\n\n // switch toggle\n &::after {\n background: var(--pine-color-secondary);\n border-radius: var(--pine-border-radius-full);\n box-shadow: var(--pine-box-shadow);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--number-transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-150);\n\n .pds-switch--error & {\n color: inherit;\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Help and error messages\n.pds-switch__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-xs);\n margin-inline-start: var(--spacing-message-inline);\n width: 100%;\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-inline);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--pine-color-neutral-disabled);\n cursor: not-allowed;\n\n ~ label {\n cursor: initial;\n }\n\n &:hover::after {\n background-color: var(--pine-color-secondary);\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--pine-color-accent);\n\n &:hover {\n border-color: currentColor;\n color: var(--pine-color-accent-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsSwitchElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines the input 'checked' state.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * Determines the input 'disabled' state, preventing user interaction.\n */\n @Prop() disabled? = false;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * Displays help text for additional description of an input.\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines the input 'invalid' state, signifying an error is present.\n */\n @Prop() invalid? = false;\n\n /**\n * Displays text to describe the input.\n */\n @Prop() label!: string;\n\n /**\n * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n */\n @Prop() name: string;\n\n /**\n * Determines the 'required' state of the input.\n */\n @Prop() required? = false;\n\n /**\n * Provides input with a string submitted in form data.\n */\n @Prop() value: string;\n\n\n /**\n * Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n\n this.updateFormValue();\n\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n connectedCallback() {\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For switches, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value || 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string | FormData | null) {\n if (state instanceof FormData) {\n // For switches, restore if the value exists in FormData\n const value = this.value || 'on';\n this.checked = state.get(this.name || this.componentId) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value || 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"p-DC2NZwtk.system.js","sources":["src/global/styles/utils/label.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.scss?tag=pds-switch&encapsulation=shadow","src/components/pds-switch/pds-switch.tsx"],"sourcesContent":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n// Need discussions\n --sizing-input-toggle-size: calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));\n --pine-dimension-025: 2px;\n --spacing-message-inline: calc(var(--pine-dimension-450) + var(--pine-dimension-150));\n --number-transition-timing: 0.15s ease-out;\n\n align-items: flex-start;\n color: var(--pine-color-text);\n display: inline-flex;\n flex-flow: row wrap;\n position: relative;\n}\n\n:host(.pds-switch--error) {\n color: var(--pine-color-text-message-danger);\n\n input,\n input:checked,\n input:hover:not(:disabled):not(:checked) {\n background-color: var(--pine-color-danger);\n }\n\n input:focus-visible:not(:disabled):not(:checked) {\n outline-color: var(--pine-color-focus-ring-danger);\n }\n\n label {\n color: var(--color-text-error);\n }\n}\n\n// switch container\ninput {\n appearance: none;\n background: var(--pine-color-neutral);\n border: 0;\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: inline-block;\n flex-shrink: 0;\n height: var(--pine-dimension-250);\n margin: 0;\n padding: 0;\n position: relative;\n transition: var(--number-transition-timing);\n transition-property: background, border, color;\n width: var(--pine-dimension-450);\n\n // switch toggle\n &::after {\n background: var(--pine-color-secondary);\n border-radius: var(--pine-border-radius-full);\n box-shadow: var(--pine-box-shadow);\n content: \"\";\n display: block;\n height: var(--sizing-input-toggle-size);\n inset-block-start: 50%;\n inset-inline-start: 50%;\n position: absolute;\n transform: translate3d(-100%, -50%, 0);\n transition: transform var(--number-transition-timing);\n width: var(--sizing-input-toggle-size);\n }\n}\n\nlabel {\n display: flex;\n gap: var(--pine-dimension-150);\n\n .pds-switch--error & {\n color: inherit;\n }\n}\n\n.visually-hidden {\n border: 0;\n clip: rect(0 0 0 0);\n clip-path: polygon(0 0, 0 0, 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n}\n\n// Help and error messages\n.pds-switch__message {\n color: var(--pine-color-text-message);\n font: var(--pine-typography-body-sm-medium);\n margin-block-start: var(--pine-dimension-xs);\n margin-inline-start: var(--spacing-message-inline);\n width: 100%;\n\n + .pds-switch__message {\n margin-block-start: var(--spacing-message-inline);\n }\n}\n\n.pds-switch__message--error {\n color: inherit;\n display: flex;\n gap: var(--pine-dimension-2xs);\n\n pds-icon {\n margin-block-start: var(--pine-dimension-025);\n }\n}\n\n// Disabled state\ninput:disabled {\n background-color: var(--pine-color-neutral-disabled);\n cursor: not-allowed;\n\n ~ label {\n cursor: initial;\n }\n\n &:hover::after {\n background-color: var(--pine-color-secondary);\n }\n\n .pds-switch__message {\n color: initial;\n }\n}\n\n// Hover state\ninput:hover:not(:disabled) {\n background-color: var(--pine-color-neutral-hover);\n}\n\n // Focus state\ninput:focus-visible:not(:disabled) {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n}\n\n// 'Checked' state\n// switch toggle\ninput:checked::after {\n transform: translate3d(0, -50%, 0);\n}\n\n// switch container\ninput:checked:not(:disabled) {\n background-color: currentColor;\n color: var(--pine-color-accent);\n\n &:hover {\n border-color: currentColor;\n color: var(--pine-color-accent-hover);\n }\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop, Watch } from '@stencil/core';\nimport { assignDescription, messageId, exposeTypeProperty } from '../../utils/form';\nimport { danger } from '@pine-ds/icons/icons';\n\nimport { inheritAriaAttributes } from '@utils/attributes';\nimport type { Attributes } from '@utils/attributes';\n\n@Component({\n tag: 'pds-switch',\n styleUrls: ['../../global/styles/utils/label.scss', 'pds-switch.scss'],\n shadow: true,\n formAssociated: true,\n})\nexport class PdsSwitch {\n private inheritedAttributes: Attributes = {};\n private internals?: ElementInternals;\n private readonly _type = 'checkbox' as const;\n\n @Element() el: HTMLPdsSwitchElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n */\n @Prop() componentId!: string;\n\n /**\n * Determines the input 'checked' state.\n */\n @Prop({ mutable: true }) checked = false;\n\n /**\n * Determines the input 'disabled' state, preventing user interaction.\n */\n @Prop() disabled? = false;\n\n /**\n * Displays message text describing an invalid state.\n */\n @Prop() errorMessage?: string;\n\n /**\n * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.\n */\n @Prop() hideLabel: boolean;\n\n /**\n * Displays help text for additional description of an input.\n */\n @Prop() helperMessage: string;\n\n /**\n * Determines the input 'invalid' state, signifying an error is present.\n */\n @Prop() invalid? = false;\n\n /**\n * Displays text to describe the input.\n */\n @Prop() label!: string;\n\n /**\n * Identifies form data and unifies a group of radio inputs for toggling a single property/value.\n */\n @Prop() name: string;\n\n /**\n * Determines the 'required' state of the input.\n */\n @Prop() required? = false;\n\n /**\n * Provides input with a string submitted in form data.\n */\n @Prop() value: string;\n\n\n /**\n * Emits an event on input change.\n */\n @Event() pdsSwitchChange: EventEmitter<InputEvent>;\n\n private onSwitchUpdate = (e: Event) => {\n if (this.disabled) return;\n\n const input = e.target as HTMLInputElement;\n this.checked = input.checked;\n\n this.updateFormValue();\n\n this.pdsSwitchChange.emit(e as InputEvent);\n };\n\n private switchClassNames = () => {\n let switchClasses = `pds-switch`;\n\n if (this.invalid === true) {\n switchClasses += \" pds-switch--error\";\n }\n if (this.helperMessage !== undefined) {\n switchClasses += \" pds-switch--message\";\n }\n return switchClasses;\n };\n\n connectedCallback() {\n if (this.el.attachInternals) {\n this.internals = this.el.attachInternals();\n }\n\n // Expose type property on the element instance to match native form element behavior\n exposeTypeProperty(this.el, () => this._type);\n }\n\n componentDidLoad() {\n this.updateFormValue();\n }\n\n @Watch('checked')\n checkedChanged() {\n this.updateFormValue();\n }\n\n private updateFormValue() {\n if (typeof jest !== 'undefined' || typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {\n return;\n }\n\n if (this.internals && this.internals.setFormValue) {\n // For switches, only send the value when checked, otherwise send null\n const formValue = this.checked ? (this.value || 'on') : null;\n this.internals.setFormValue(formValue);\n }\n\n if (this.internals && this.internals.setValidity) {\n this.internals.setValidity({});\n }\n }\n\n formStateRestoreCallback(state: string | FormData | null) {\n if (state instanceof FormData) {\n // For switches, restore if the value exists in FormData\n const value = this.value || 'on';\n this.checked = state.get(this.name || this.componentId) === value;\n } else if (typeof state === 'string') {\n // Restore from string state\n this.checked = state === (this.value || 'on');\n }\n }\n\n componentWillLoad() {\n this.inheritedAttributes = {\n ...inheritAriaAttributes(this.el)\n }\n }\n\n render() {\n return (\n <Host class={this.switchClassNames()} aria-disabled={this.disabled ? 'true' : null}>\n <label htmlFor={this.componentId}>\n <input\n aria-describedby={assignDescription(this.componentId, this.invalid, this.errorMessage || this.helperMessage)}\n aria-invalid={this.invalid ? \"true\" : undefined}\n checked={this.checked}\n class=\"pds-switch__input\"\n disabled={this.disabled}\n id={this.componentId}\n name={this.name ? this.name : this.componentId}\n onChange={this.onSwitchUpdate}\n required={this.required}\n type=\"checkbox\"\n value={this.value}\n {...this.inheritedAttributes}\n />\n <span class={this.hideLabel ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={`pds-switch__message`}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-switch__message pds-switch__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var __awaiter=this&&this.__awaiter||function(e,n,t,a){function i(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,d){function o(e){try{s(a.next(e))}catch(e){d(e)}}function l(e){try{s(a["throw"](e))}catch(e){d(e)}}function s(e){e.done?t(e.value):i(e.value).then(o,l)}s((a=a.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(d[0]&1)throw d[1];return d[1]},trys:[],ops:[]},a,i,d,o=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return o.next=l(0),o["throw"]=l(1),o["return"]=l(2),typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function l(e){return function(n){return s([e,n])}}function s(l){if(a)throw new TypeError("Generator is already executing.");while(o&&(o=0,l[0]&&(t=0)),t)try{if(a=1,i&&(d=l[0]&2?i["return"]:l[0]?i["throw"]||((d=i["return"])&&d.call(i),0):i.next)&&!(d=d.call(i,l[1])).done)return d;if(i=0,d)l=[l[0]&2,d.value];switch(l[0]){case 0:case 1:d=l;break;case 4:t.label++;return{value:l[1],done:false};case 5:t.label++;i=l[1];l=[0];continue;case 7:l=t.ops.pop();t.trys.pop();continue;default:if(!(d=t.trys,d=d.length>0&&d[d.length-1])&&(l[0]===6||l[0]===2)){t=0;continue}if(l[0]===3&&(!d||l[1]>d[0]&&l[1]<d[3])){t.label=l[1];break}if(l[0]===6&&t.label<d[1]){t.label=d[1];d=l;break}if(d&&t.label<d[2]){t.label=d[2];t.ops.push(l);break}if(d[2])t.ops.pop();t.trys.pop();continue}l=n.call(e,t)}catch(e){l=[6,e];i=0}finally{a=d=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-5D9wXQuJ.system.js"],(function(e,n){"use strict";var t,a,i;return{setters:[function(n){t=n.p;a=n.g;i=n.b;e("setNonce",n.s)}],execute:function(){var e=this;var d=function(){var e=n.meta.url;var a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return t(a)};d().then((function(n){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,a()];case 1:e.sent();return[2,i(JSON.parse('[["p-cf910e8b.system",[[257,"pds-alert",{"componentId":[1,"component-id"],"heading":[1],"small":[4],"dismissible":[4],"variant":[1],"hasActionsContent":[32]}]]],["p-bee8d4b8.system",[[321,"pds-combobox",{"componentId":[1,"component-id"],"name":[513],"customOptionLayouts":[4,"custom-option-layouts"],"customTriggerContent":[4,"custom-trigger-content"],"disabled":[4],"dropdownPlacement":[1,"dropdown-placement"],"dropdownWidth":[1,"dropdown-width"],"hideLabel":[4,"hide-label"],"label":[1],"maxHeight":[1,"max-height"],"mode":[1],"placeholder":[1],"trigger":[1],"triggerWidth":[1,"trigger-width"],"triggerVariant":[1,"trigger-variant"],"chipSentiment":[1,"chip-sentiment"],"chipLarge":[4,"chip-large"],"chipIcon":[1,"chip-icon"],"chipDot":[4,"chip-dot"],"value":[1025],"displayText":[32],"filteredItems":[32],"highlightedIndex":[32],"isOpen":[32],"selectedOption":[32],"selectedOptionLayoutContent":[32],"selectedOptionChipProps":[32],"setFocus":[64],"getSelectedValue":[64]},null,{"value":["handleValueChange"],"selectedOption":["handleSelectedOptionChange"]}]]],["p-94788439.system",[[257,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["p-b6a503cc.system",[[257,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["p-65c566a2.system",[[257,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["p-b8047816.system",[[257,"pds-dropdown-menu-item",{"componentId":[1,"component-id"],"destructive":[4],"disabled":[4],"href":[1],"hasFocus":[32],"clickItem":[64]}]]],["p-1df25b57.system",[[257,"pds-property",{"componentId":[1,"component-id"],"icon":[1]}]]],["p-7ccd2fd6.system",[[257,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["p-3a231ae4.system",[[257,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["p-5f6cd30d.system",[[257,"pds-dropdown-menu",{"componentId":[1,"component-id"],"placement":[1],"currentFocusIndex":[32]},[[8,"keydown","handleKeyDown"],[8,"click","handleWindowClick"]]]]],["p-04a7b66c.system",[[257,"pds-filter",{"componentId":[1,"component-id"],"variant":[1],"icon":[1],"text":[1],"isOpen":[32],"showFilter":[64],"hideFilter":[64]},[[9,"resize","handleWindowResize"],[9,"scroll","handleWindowScroll"],[4,"toggle","handlePopoverToggle"],[4,"click","handleDocumentClick"],[4,"keydown","handleEscapeKey"]]]]],["p-670b1551.system",[[321,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"debounce":[2],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"hideLabel":[4,"hide-label"],"max":[1],"maxlength":[1],"min":[1],"minlength":[1],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"step":[1],"type":[1],"value":[1032],"fullWidth":[4,"full-width"],"highlight":[516],"hasPrefix":[32],"hasSuffix":[32],"hasPrepend":[32],"hasAppend":[32],"hasAction":[32],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-bd53ca9a.system",[[262,"pds-radio",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"hasBorder":[4,"has-border"],"invalid":[4],"label":[1],"hideLabel":[4,"hide-label"],"name":[1],"required":[4],"value":[1],"_hasImage":[32]}]]],["p-676f1f32.system",[[262,"pds-radio-group",{"componentId":[1,"component-id"],"direction":[1],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"gap":[1],"disabled":[4],"invalid":[4],"groupLabel":[1,"group-label"],"name":[1],"required":[4]},[[0,"change","handleRadioChange"]],{"name":["handlePropsChange"],"disabled":["handlePropsChange"],"invalid":["handlePropsChange"],"required":["handlePropsChange"]}]]],["p-847fc77b.system",[[321,"pds-select",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"hideLabel":[4,"hide-label"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"multiple":[4],"name":[1],"required":[4],"highlight":[516],"value":[1025]},null,{"value":["valueChanged"],"multiple":["multipleChanged"]}]]],["p-03209958.system",[[262,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["p-c9f97ccb.system",[[321,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"hideLabel":[4,"hide-label"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-dba5ca37.system",[[321,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"debounce":[2],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"hideLabel":[4,"hide-label"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"maxLength":[514,"max-length"],"highlight":[516],"value":[1025],"hasFocus":[32],"hasAction":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"],"maxLength":["maxLengthChanged"]}]]],["p-00568c20.system",[[257,"pds-toast",{"componentId":[1,"component-id"],"dismissible":[4],"duration":[2],"icon":[1],"type":[1],"isVisible":[32],"isAnimatingOut":[32],"dismiss":[64]},null,{"duration":["handleDurationChange"]}]]],["p-2d3da08b.system",[[260,"mock-pds-modal",{"componentId":[1,"component-id"],"size":[1],"scrollable":[4],"backdropDismiss":[4,"backdrop-dismiss"],"open":[1028],"showModal":[64],"hideModal":[64]}]]],["p-6dcd7876.system",[[257,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["p-6be19a23.system",[[257,"pds-dropdown-menu-separator",{"componentId":[1,"component-id"],"disabled":[4]}]]],["p-ac186cd4.system",[[257,"pds-filters",{"componentId":[1,"component-id"]}]]],["p-d1313dd6.system",[[257,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["p-3f8a5f3d.system",[[260,"pds-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"componentId":[1,"component-id"],"open":[1028],"size":[1],"scrollable":[4],"focusableElementsArray":[32],"showModal":[64],"hideModal":[64]},null,{"open":["handleOpenChange"]}]]],["p-a54f4dfd.system",[[260,"pds-modal-content",{"border":[513],"contentMaxHeight":[32]}]]],["p-fa21e054.system",[[260,"pds-modal-footer"]]],["p-a11c3642.system",[[260,"pds-modal-header"]]],["p-2319298c.system",[[257,"pds-popover",{"popoverTargetAction":[1,"popover-target-action"],"popoverType":[1,"popover-type"],"componentId":[1,"component-id"],"maxWidth":[2,"max-width"],"placement":[513],"active":[32],"show":[64],"hide":[64],"toggle":[64]}]]],["p-a4b16b32.system",[[257,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["p-3f8b0885.system",[[256,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"colGapBlock":[1,"col-gap-block"],"colGapInline":[1,"col-gap-inline"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["p-ac14c8e3.system",[[262,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["p-04f92b5a.system",[[260,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["p-b9a14564.system",[[257,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-d0e336b7.system",[[257,"pds-table-body"]]],["p-b59a0c6b.system",[[260,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["p-232e4282.system",[[257,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-bdf8bff3.system",[[260,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"_isInteractiveOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["p-ec32c44f.system",[[257,"pds-icon",{"color":[1],"flipRtl":[4,"flip-rtl"],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["onIconPropertyChange"],"src":["onIconPropertyChange"],"icon":["onIconPropertyChange"]}]]],["p-dfcdd55d.system",[[257,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"fullWidth":[4,"full-width"],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"loading":[4],"name":[1],"target":[1],"type":[1],"value":[1],"size":[1],"variant":[1]},[[16,"keydown","handleFormKeyDown"]]]]],["p-6ace63a3.system",[[257,"pds-chip",{"componentId":[1,"component-id"],"dot":[4],"icon":[1],"large":[4],"sentiment":[1],"variant":[1]}]]],["p-a226ecdb.system",[[257,"pds-link",{"color":[1],"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["p-1f5ed7bb.system",[[257,"pds-table-head-cell",{"cellAlign":[1,"cell-align"],"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["p-94b1997d.system",[[257,"pds-table-cell",{"cellAlign":[1,"cell-align"],"truncate":[4],"tableScrolling":[32]}]]],["p-04294b28.system",[[257,"pds-text",{"align":[1],"color":[1],"decoration":[1],"gutter":[1],"italic":[4],"size":[1],"weight":[1],"tag":[1],"truncate":[516]}]]],["p-c08ab042.system",[[321,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"hideLabel":[4,"hide-label"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate","checkedChanged"]}]]],["p-8323fe69.system",[[257,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["p-8c7fdaf5.system",[[256,"pds-box",{"alignItems":[1,"align-items"],"alignItemsXs":[1,"align-items-xs"],"alignItemsSm":[1,"align-items-sm"],"alignItemsMd":[1,"align-items-md"],"alignItemsLg":[1,"align-items-lg"],"alignItemsXl":[1,"align-items-xl"],"alignSelf":[1,"align-self"],"alignSelfXs":[1,"align-self-xs"],"alignSelfSm":[1,"align-self-sm"],"alignSelfMd":[1,"align-self-md"],"alignSelfLg":[1,"align-self-lg"],"alignSelfXl":[1,"align-self-xl"],"auto":[4],"autoXs":[4,"auto-xs"],"autoSm":[4,"auto-sm"],"autoMd":[4,"auto-md"],"autoLg":[4,"auto-lg"],"autoXl":[4,"auto-xl"],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"fitXs":[4,"fit-xs"],"fitSm":[4,"fit-sm"],"fitMd":[4,"fit-md"],"fitLg":[4,"fit-lg"],"fitXl":[4,"fit-xl"],"gap":[1],"gapXs":[1,"gap-xs"],"gapSm":[1,"gap-sm"],"gapMd":[1,"gap-md"],"gapLg":[1,"gap-lg"],"gapXl":[1,"gap-xl"],"wrap":[4],"wrapXs":[4,"wrap-xs"],"wrapSm":[4,"wrap-sm"],"wrapMd":[4,"wrap-md"],"wrapLg":[4,"wrap-lg"],"wrapXl":[4,"wrap-xl"],"flex":[1],"justifyContent":[1,"justify-content"],"justifyContentXs":[1,"justify-content-xs"],"justifyContentSm":[1,"justify-content-sm"],"justifyContentMd":[1,"justify-content-md"],"justifyContentLg":[1,"justify-content-lg"],"justifyContentXl":[1,"justify-content-xl"],"marginBlockStart":[1,"margin-block-start"],"marginBlockStartXs":[1,"margin-block-start-xs"],"marginBlockStartSm":[1,"margin-block-start-sm"],"marginBlockStartMd":[1,"margin-block-start-md"],"marginBlockStartLg":[1,"margin-block-start-lg"],"marginBlockStartXl":[1,"margin-block-start-xl"],"marginInlineStart":[1,"margin-inline-start"],"marginInlineStartXs":[1,"margin-inline-start-xs"],"marginInlineStartSm":[1,"margin-inline-start-sm"],"marginInlineStartMd":[1,"margin-inline-start-md"],"marginInlineStartLg":[1,"margin-inline-start-lg"],"marginInlineStartXl":[1,"margin-inline-start-xl"],"marginInlineEnd":[1,"margin-inline-end"],"marginInlineEndXs":[1,"margin-inline-end-xs"],"marginInlineEndSm":[1,"margin-inline-end-sm"],"marginInlineEndMd":[1,"margin-inline-end-md"],"marginInlineEndLg":[1,"margin-inline-end-lg"],"marginInlineEndXl":[1,"margin-inline-end-xl"],"marginBlockEnd":[1,"margin-block-end"],"marginBlockEndXs":[1,"margin-block-end-xs"],"marginBlockEndSm":[1,"margin-block-end-sm"],"marginBlockEndMd":[1,"margin-block-end-md"],"marginBlockEndLg":[1,"margin-block-end-lg"],"marginBlockEndXl":[1,"margin-block-end-xl"],"minHeight":[513,"min-height"],"minWidth":[513,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"paddingXs":[1,"padding-xs"],"paddingSm":[1,"padding-sm"],"paddingMd":[1,"padding-md"],"paddingLg":[1,"padding-lg"],"paddingXl":[1,"padding-xl"],"paddingBlockStart":[1,"padding-block-start"],"paddingBlockStartXs":[1,"padding-block-start-xs"],"paddingBlockStartSm":[1,"padding-block-start-sm"],"paddingBlockStartMd":[1,"padding-block-start-md"],"paddingBlockStartLg":[1,"padding-block-start-lg"],"paddingBlockStartXl":[1,"padding-block-start-xl"],"paddingBlockEnd":[1,"padding-block-end"],"paddingBlockEndXs":[1,"padding-block-end-xs"],"paddingBlockEndSm":[1,"padding-block-end-sm"],"paddingBlockEndMd":[1,"padding-block-end-md"],"paddingBlockEndLg":[1,"padding-block-end-lg"],"paddingBlockEndXl":[1,"padding-block-end-xl"],"paddingInlineStart":[1,"padding-inline-start"],"paddingInlineStartXs":[1,"padding-inline-start-xs"],"paddingInlineStartSm":[1,"padding-inline-start-sm"],"paddingInlineStartMd":[1,"padding-inline-start-md"],"paddingInlineStartLg":[1,"padding-inline-start-lg"],"paddingInlineStartXl":[1,"padding-inline-start-xl"],"paddingInlineEnd":[1,"padding-inline-end"],"paddingInlineEndXs":[1,"padding-inline-end-xs"],"paddingInlineEndSm":[1,"padding-inline-end-sm"],"paddingInlineEndMd":[1,"padding-inline-end-md"],"paddingInlineEndLg":[1,"padding-inline-end-lg"],"paddingInlineEndXl":[1,"padding-inline-end-xl"],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]]]'),n)]}}))}))}))}}}));
|
|
1
|
+
var __awaiter=this&&this.__awaiter||function(e,n,t,a){function i(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,d){function o(e){try{s(a.next(e))}catch(e){d(e)}}function l(e){try{s(a["throw"](e))}catch(e){d(e)}}function s(e){e.done?t(e.value):i(e.value).then(o,l)}s((a=a.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(d[0]&1)throw d[1];return d[1]},trys:[],ops:[]},a,i,d,o=Object.create((typeof Iterator==="function"?Iterator:Object).prototype);return o.next=l(0),o["throw"]=l(1),o["return"]=l(2),typeof Symbol==="function"&&(o[Symbol.iterator]=function(){return this}),o;function l(e){return function(n){return s([e,n])}}function s(l){if(a)throw new TypeError("Generator is already executing.");while(o&&(o=0,l[0]&&(t=0)),t)try{if(a=1,i&&(d=l[0]&2?i["return"]:l[0]?i["throw"]||((d=i["return"])&&d.call(i),0):i.next)&&!(d=d.call(i,l[1])).done)return d;if(i=0,d)l=[l[0]&2,d.value];switch(l[0]){case 0:case 1:d=l;break;case 4:t.label++;return{value:l[1],done:false};case 5:t.label++;i=l[1];l=[0];continue;case 7:l=t.ops.pop();t.trys.pop();continue;default:if(!(d=t.trys,d=d.length>0&&d[d.length-1])&&(l[0]===6||l[0]===2)){t=0;continue}if(l[0]===3&&(!d||l[1]>d[0]&&l[1]<d[3])){t.label=l[1];break}if(l[0]===6&&t.label<d[1]){t.label=d[1];d=l;break}if(d&&t.label<d[2]){t.label=d[2];t.ops.push(l);break}if(d[2])t.ops.pop();t.trys.pop();continue}l=n.call(e,t)}catch(e){l=[6,e];i=0}finally{a=d=0}if(l[0]&5)throw l[1];return{value:l[0]?l[1]:void 0,done:true}}};System.register(["./p-5D9wXQuJ.system.js"],(function(e,n){"use strict";var t,a,i;return{setters:[function(n){t=n.p;a=n.g;i=n.b;e("setNonce",n.s)}],execute:function(){var e=this;var d=function(){var e=n.meta.url;var a={};if(e!==""){a.resourcesUrl=new URL(".",e).href}return t(a)};d().then((function(n){return __awaiter(e,void 0,void 0,(function(){return __generator(this,(function(e){switch(e.label){case 0:return[4,a()];case 1:e.sent();return[2,i(JSON.parse('[["p-36ad78b5.system",[[257,"pds-alert",{"componentId":[1,"component-id"],"heading":[1],"small":[4],"dismissible":[4],"variant":[1],"hasActionsContent":[32]}]]],["p-bee8d4b8.system",[[321,"pds-combobox",{"componentId":[1,"component-id"],"name":[513],"customOptionLayouts":[4,"custom-option-layouts"],"customTriggerContent":[4,"custom-trigger-content"],"disabled":[4],"dropdownPlacement":[1,"dropdown-placement"],"dropdownWidth":[1,"dropdown-width"],"hideLabel":[4,"hide-label"],"label":[1],"maxHeight":[1,"max-height"],"mode":[1],"placeholder":[1],"trigger":[1],"triggerWidth":[1,"trigger-width"],"triggerVariant":[1,"trigger-variant"],"chipSentiment":[1,"chip-sentiment"],"chipLarge":[4,"chip-large"],"chipIcon":[1,"chip-icon"],"chipDot":[4,"chip-dot"],"value":[1025],"displayText":[32],"filteredItems":[32],"highlightedIndex":[32],"isOpen":[32],"selectedOption":[32],"selectedOptionLayoutContent":[32],"selectedOptionChipProps":[32],"setFocus":[64],"getSelectedValue":[64]},null,{"value":["handleValueChange"],"selectedOption":["handleSelectedOptionChange"]}]]],["p-e5bc22b6.system",[[257,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["p-b6a503cc.system",[[257,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["p-65c566a2.system",[[257,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["p-b8047816.system",[[257,"pds-dropdown-menu-item",{"componentId":[1,"component-id"],"destructive":[4],"disabled":[4],"href":[1],"hasFocus":[32],"clickItem":[64]}]]],["p-1df25b57.system",[[257,"pds-property",{"componentId":[1,"component-id"],"icon":[1]}]]],["p-f9ef2f74.system",[[257,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["p-c2d17093.system",[[257,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["p-5f6cd30d.system",[[257,"pds-dropdown-menu",{"componentId":[1,"component-id"],"placement":[1],"currentFocusIndex":[32]},[[8,"keydown","handleKeyDown"],[8,"click","handleWindowClick"]]]]],["p-c03e2c5d.system",[[257,"pds-filter",{"componentId":[1,"component-id"],"variant":[1],"icon":[1],"text":[1],"isOpen":[32],"showFilter":[64],"hideFilter":[64]},[[9,"resize","handleWindowResize"],[9,"scroll","handleWindowScroll"],[4,"toggle","handlePopoverToggle"],[4,"click","handleDocumentClick"],[4,"keydown","handleEscapeKey"]]]]],["p-6c3299f9.system",[[321,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"debounce":[2],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"hideLabel":[4,"hide-label"],"max":[1],"maxlength":[1],"min":[1],"minlength":[1],"name":[1],"pattern":[1],"placeholder":[1],"readonly":[4],"required":[4],"step":[1],"type":[1],"value":[1032],"fullWidth":[4,"full-width"],"highlight":[516],"hasPrefix":[32],"hasSuffix":[32],"hasPrepend":[32],"hasAppend":[32],"hasAction":[32],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["p-a4d094da.system",[[262,"pds-radio",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"hasBorder":[4,"has-border"],"invalid":[4],"label":[1],"hideLabel":[4,"hide-label"],"name":[1],"required":[4],"value":[1],"_hasImage":[32]}]]],["p-e31ea2ae.system",[[262,"pds-radio-group",{"componentId":[1,"component-id"],"direction":[1],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"gap":[1],"disabled":[4],"invalid":[4],"groupLabel":[1,"group-label"],"name":[1],"required":[4]},[[0,"change","handleRadioChange"]],{"name":["handlePropsChange"],"disabled":["handlePropsChange"],"invalid":["handlePropsChange"],"required":["handlePropsChange"]}]]],["p-11d69ad5.system",[[321,"pds-select",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"hideLabel":[4,"hide-label"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"multiple":[4],"name":[1],"required":[4],"highlight":[516],"value":[1025]},null,{"value":["valueChanged"],"multiple":["multipleChanged"]}]]],["p-732e2564.system",[[262,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["p-dad604e4.system",[[321,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"hideLabel":[4,"hide-label"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]},null,{"checked":["checkedChanged"]}]]],["p-3fd0f8a9.system",[[321,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"debounce":[2],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"hideLabel":[4,"hide-label"],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"maxLength":[514,"max-length"],"highlight":[516],"value":[1025],"hasFocus":[32],"hasAction":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"],"maxLength":["maxLengthChanged"]}]]],["p-00568c20.system",[[257,"pds-toast",{"componentId":[1,"component-id"],"dismissible":[4],"duration":[2],"icon":[1],"type":[1],"isVisible":[32],"isAnimatingOut":[32],"dismiss":[64]},null,{"duration":["handleDurationChange"]}]]],["p-2d3da08b.system",[[260,"mock-pds-modal",{"componentId":[1,"component-id"],"size":[1],"scrollable":[4],"backdropDismiss":[4,"backdrop-dismiss"],"open":[1028],"showModal":[64],"hideModal":[64]}]]],["p-6dcd7876.system",[[257,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["p-6be19a23.system",[[257,"pds-dropdown-menu-separator",{"componentId":[1,"component-id"],"disabled":[4]}]]],["p-ac186cd4.system",[[257,"pds-filters",{"componentId":[1,"component-id"]}]]],["p-d1313dd6.system",[[257,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["p-3f8a5f3d.system",[[260,"pds-modal",{"backdropDismiss":[4,"backdrop-dismiss"],"componentId":[1,"component-id"],"open":[1028],"size":[1],"scrollable":[4],"focusableElementsArray":[32],"showModal":[64],"hideModal":[64]},null,{"open":["handleOpenChange"]}]]],["p-3f0a6a75.system",[[260,"pds-modal-content",{"border":[1537],"contentMaxHeight":[32]}]]],["p-fa21e054.system",[[260,"pds-modal-footer"]]],["p-a11c3642.system",[[260,"pds-modal-header"]]],["p-2319298c.system",[[257,"pds-popover",{"popoverTargetAction":[1,"popover-target-action"],"popoverType":[1,"popover-type"],"componentId":[1,"component-id"],"maxWidth":[2,"max-width"],"placement":[513],"active":[32],"show":[64],"hide":[64],"toggle":[64]}]]],["p-a4b16b32.system",[[257,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["p-3f8b0885.system",[[256,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"colGapBlock":[1,"col-gap-block"],"colGapInline":[1,"col-gap-inline"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["p-ac14c8e3.system",[[262,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["p-04f92b5a.system",[[260,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["p-b9a14564.system",[[257,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["p-d0e336b7.system",[[257,"pds-table-body"]]],["p-b59a0c6b.system",[[260,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["p-232e4282.system",[[257,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["p-bdf8bff3.system",[[260,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"_isInteractiveOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["p-ec32c44f.system",[[257,"pds-icon",{"color":[1],"flipRtl":[4,"flip-rtl"],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["onIconPropertyChange"],"src":["onIconPropertyChange"],"icon":["onIconPropertyChange"]}]]],["p-9f53eb94.system",[[257,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"fullWidth":[4,"full-width"],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"loading":[4],"name":[1],"target":[1],"type":[1],"value":[1],"size":[1],"variant":[1]},[[16,"keydown","handleFormKeyDown"]]]]],["p-cd335ec2.system",[[257,"pds-chip",{"componentId":[1,"component-id"],"dot":[4],"icon":[1],"large":[4],"sentiment":[1],"variant":[1]}]]],["p-6bc81a5b.system",[[257,"pds-link",{"color":[1],"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["p-6150fb43.system",[[257,"pds-table-head-cell",{"cellAlign":[1,"cell-align"],"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["p-94b1997d.system",[[257,"pds-table-cell",{"cellAlign":[1,"cell-align"],"truncate":[4],"tableScrolling":[32]}]]],["p-04294b28.system",[[257,"pds-text",{"align":[1],"color":[1],"decoration":[1],"gutter":[1],"italic":[4],"size":[1],"weight":[1],"tag":[1],"truncate":[516]}]]],["p-ff182316.system",[[321,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"hideLabel":[4,"hide-label"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate","checkedChanged"]}]]],["p-8323fe69.system",[[257,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["p-8c7fdaf5.system",[[256,"pds-box",{"alignItems":[1,"align-items"],"alignItemsXs":[1,"align-items-xs"],"alignItemsSm":[1,"align-items-sm"],"alignItemsMd":[1,"align-items-md"],"alignItemsLg":[1,"align-items-lg"],"alignItemsXl":[1,"align-items-xl"],"alignSelf":[1,"align-self"],"alignSelfXs":[1,"align-self-xs"],"alignSelfSm":[1,"align-self-sm"],"alignSelfMd":[1,"align-self-md"],"alignSelfLg":[1,"align-self-lg"],"alignSelfXl":[1,"align-self-xl"],"auto":[4],"autoXs":[4,"auto-xs"],"autoSm":[4,"auto-sm"],"autoMd":[4,"auto-md"],"autoLg":[4,"auto-lg"],"autoXl":[4,"auto-xl"],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"fitXs":[4,"fit-xs"],"fitSm":[4,"fit-sm"],"fitMd":[4,"fit-md"],"fitLg":[4,"fit-lg"],"fitXl":[4,"fit-xl"],"gap":[1],"gapXs":[1,"gap-xs"],"gapSm":[1,"gap-sm"],"gapMd":[1,"gap-md"],"gapLg":[1,"gap-lg"],"gapXl":[1,"gap-xl"],"wrap":[4],"wrapXs":[4,"wrap-xs"],"wrapSm":[4,"wrap-sm"],"wrapMd":[4,"wrap-md"],"wrapLg":[4,"wrap-lg"],"wrapXl":[4,"wrap-xl"],"flex":[1],"justifyContent":[1,"justify-content"],"justifyContentXs":[1,"justify-content-xs"],"justifyContentSm":[1,"justify-content-sm"],"justifyContentMd":[1,"justify-content-md"],"justifyContentLg":[1,"justify-content-lg"],"justifyContentXl":[1,"justify-content-xl"],"marginBlockStart":[1,"margin-block-start"],"marginBlockStartXs":[1,"margin-block-start-xs"],"marginBlockStartSm":[1,"margin-block-start-sm"],"marginBlockStartMd":[1,"margin-block-start-md"],"marginBlockStartLg":[1,"margin-block-start-lg"],"marginBlockStartXl":[1,"margin-block-start-xl"],"marginInlineStart":[1,"margin-inline-start"],"marginInlineStartXs":[1,"margin-inline-start-xs"],"marginInlineStartSm":[1,"margin-inline-start-sm"],"marginInlineStartMd":[1,"margin-inline-start-md"],"marginInlineStartLg":[1,"margin-inline-start-lg"],"marginInlineStartXl":[1,"margin-inline-start-xl"],"marginInlineEnd":[1,"margin-inline-end"],"marginInlineEndXs":[1,"margin-inline-end-xs"],"marginInlineEndSm":[1,"margin-inline-end-sm"],"marginInlineEndMd":[1,"margin-inline-end-md"],"marginInlineEndLg":[1,"margin-inline-end-lg"],"marginInlineEndXl":[1,"margin-inline-end-xl"],"marginBlockEnd":[1,"margin-block-end"],"marginBlockEndXs":[1,"margin-block-end-xs"],"marginBlockEndSm":[1,"margin-block-end-sm"],"marginBlockEndMd":[1,"margin-block-end-md"],"marginBlockEndLg":[1,"margin-block-end-lg"],"marginBlockEndXl":[1,"margin-block-end-xl"],"minHeight":[513,"min-height"],"minWidth":[513,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"paddingXs":[1,"padding-xs"],"paddingSm":[1,"padding-sm"],"paddingMd":[1,"padding-md"],"paddingLg":[1,"padding-lg"],"paddingXl":[1,"padding-xl"],"paddingBlockStart":[1,"padding-block-start"],"paddingBlockStartXs":[1,"padding-block-start-xs"],"paddingBlockStartSm":[1,"padding-block-start-sm"],"paddingBlockStartMd":[1,"padding-block-start-md"],"paddingBlockStartLg":[1,"padding-block-start-lg"],"paddingBlockStartXl":[1,"padding-block-start-xl"],"paddingBlockEnd":[1,"padding-block-end"],"paddingBlockEndXs":[1,"padding-block-end-xs"],"paddingBlockEndSm":[1,"padding-block-end-sm"],"paddingBlockEndMd":[1,"padding-block-end-md"],"paddingBlockEndLg":[1,"padding-block-end-lg"],"paddingBlockEndXl":[1,"padding-block-end-xl"],"paddingInlineStart":[1,"padding-inline-start"],"paddingInlineStartXs":[1,"padding-inline-start-xs"],"paddingInlineStartSm":[1,"padding-inline-start-sm"],"paddingInlineStartMd":[1,"padding-inline-start-md"],"paddingInlineStartLg":[1,"padding-inline-start-lg"],"paddingInlineStartXl":[1,"padding-inline-start-xl"],"paddingInlineEnd":[1,"padding-inline-end"],"paddingInlineEndXs":[1,"padding-inline-end-xs"],"paddingInlineEndSm":[1,"padding-inline-end-sm"],"paddingInlineEndMd":[1,"padding-inline-end-md"],"paddingInlineEndLg":[1,"padding-inline-end-lg"],"paddingInlineEndXl":[1,"padding-inline-end-xl"],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]]]'),n)]}}))}))}))}}}));
|
|
2
2
|
//# sourceMappingURL=p-JAVnELnm.system.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-D_LvnDUT.system.js","sources":["src/components/pds-alert/pds-alert.tokens.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-alert/pds-alert.tokens.css';\n",":host {\n display: block;\n line-height: 1;\n width: 100%;\n}\n\n.pds-alert__container {\n --pds-alert-icon-size: var(--pine-dimension-sm);\n --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);\n\n --pds-alert-background: var(--pine-alert-color-background);\n --pds-alert-border-color: var(--pine-alert-color-border);\n --pds-alert-color-icon: var(--pine-alert-color-icon);\n --pds-alert-color-text: var(--pine-alert-color-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);\n\n padding: var(--pine-dimension-250);\n}\n\n.pds-alert__container--danger {\n --pds-alert-background: var(--pine-alert-color-danger-background);\n --pds-alert-border-color: var(--pine-alert-color-danger-border);\n --pds-alert-color-icon: var(--pine-alert-color-danger-icon);\n --pds-alert-color-text: var(--pine-alert-color-danger-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);\n}\n\n.pds-alert__container--info {\n --pds-alert-background: var(--pine-alert-color-info-background);\n --pds-alert-border-color: var(--pine-alert-color-info-border);\n --pds-alert-color-icon: var(--pine-alert-color-info-icon);\n --pds-alert-color-text: var(--pine-alert-color-info-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);\n}\n\n.pds-alert__container--success {\n --pds-alert-background: var(--pine-alert-color-success-background);\n --pds-alert-border-color: var(--pine-alert-color-success-border);\n --pds-alert-color-icon: var(--pine-alert-color-success-icon);\n --pds-alert-color-text: var(--pine-alert-color-success-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);\n}\n\n.pds-alert__container--warning {\n --pds-alert-background: var(--pine-alert-color-warning-background);\n --pds-alert-border-color: var(--pine-alert-color-warning-border);\n --pds-alert-color-icon: var(--pine-alert-color-warning-icon);\n --pds-alert-color-text: var(--pine-alert-color-warning-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);\n}\n\n.pds-alert__icon {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-alert__icon--small {\n margin-block-start: calc(var(--pine-dimension-2xs) / 2); // half the default icon margin\n}\n\n.pds-alert__content-wrapper {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n width: 100%;\n}\n\n.pds-alert__dismiss {\n align-items: center;\n background: none;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n height: var(--pine-dimension-250);\n justify-content: center;\n padding: var(--pine-dimension-xs);\n width: var(--pine-dimension-250);\n}\n\n.pds-alert__dismiss:hover {\n background: var(--pds-alert-background-dismiss-hover);\n opacity: 0.8;\n}\n\n.pds-alert__dismiss:focus-visible {\n outline: var(--pds-alert-border-dismiss-outline);\n}\n\n.pds-alert__description--small {\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.pds-alert__actions {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-alert__actions--small {\n flex-shrink: 0;\n margin-inline-start: auto;\n white-space: nowrap;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n */\n\n@Component({\n tag: 'pds-alert',\n styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n shadow: true,\n})\nexport class PdsAlert {\n\n @Element() el: HTMLPdsAlertElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Text displayed as the heading of the alert.\n */\n @Prop() heading: string;\n\n /**\n * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n */\n @Prop() small = false;\n\n /**\n * If true, shows the dismiss button. If false, the dismiss button is hidden.\n * @defaultValue false\n */\n @Prop() dismissible = false;\n\n /**\n * Sets the style variant of the alert.\n * @defaultValue 'default'\n */\n @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n /**\n * Event emitted when the dismiss button is clicked.\n */\n @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n @State() hasActionsContent = false;\n\n private handleCloseClick = () => {\n this.pdsAlertDismissClick.emit();\n };\n\n componentWillRender() {\n // Check if the actions slot has any content.\n // If not, hide the actions container to prevent empty space.\n const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n this.hasActionsContent = !!actionsSlot;\n }\n\n private renderActions(isSmall: boolean) {\n return (\n <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n <slot name=\"actions\"></slot>\n </pds-box>\n );\n }\n\n private renderContent() {\n if (this.small) {\n return (\n <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n <pds-text\n truncate={this.small}\n class=\"pds-alert__description--small\"\n color=\"var(--pds-alert-color-text)\"\n tag=\"p\"\n >\n <slot></slot>\n </pds-text>\n {this.hasActionsContent && this.renderActions(true)}\n </pds-box>\n );\n }\n\n return (\n <div>\n <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n <slot></slot>\n </pds-text>\n {this.hasActionsContent && this.renderActions(false)}\n </div>\n );\n }\n\n render() {\n const iconMap = {\n danger: 'warning-filled',\n default: 'info-circle-filled',\n info: 'info-circle-filled',\n success: 'check-circle-filled',\n warning: 'info-circle-filled',\n };\n\n // Get the icon name based on the current variant\n const iconName = iconMap[this.variant] || iconMap.default;\n\n return (\n <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n <pds-box\n class={`pds-alert__container pds-alert__container--${this.variant}`}\n background-color=\"var(--pds-alert-background)\"\n border-color=\"var(--pds-alert-border-color)\"\n border-radius=\"md\"\n border\n display=\"block\"\n >\n <pds-box gap=\"sm\" display=\"flex\">\n <pds-icon\n class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n color=\"var(--pds-alert-color-icon)\"\n icon={iconName}\n size=\"var(--pds-alert-icon-size)\"\n />\n <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n {this.heading && !this.small && (\n <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n {this.heading}\n </pds-text>\n )}\n\n {this.renderContent()}\n </pds-box>\n\n {this.dismissible && (\n <button class=\"pds-alert__dismiss\" type=\"button\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n </button>\n )}\n </pds-box>\n </pds-box>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"p-Ma8AuMzD.system.js","sources":["src/components/pds-alert/pds-alert.tokens.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.scss?tag=pds-alert&encapsulation=shadow","src/components/pds-alert/pds-alert.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-alert/pds-alert.tokens.css';\n",":host {\n display: block;\n line-height: 1;\n width: 100%;\n}\n\n.pds-alert__container {\n --pds-alert-icon-size: var(--pine-dimension-sm);\n --pds-alert-border-dismiss-outline: 2px solid var(--pds-alert-color-dismiss);\n\n --pds-alert-background: var(--pine-alert-color-background);\n --pds-alert-border-color: var(--pine-alert-color-border);\n --pds-alert-color-icon: var(--pine-alert-color-icon);\n --pds-alert-color-text: var(--pine-alert-color-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-dismiss-hover);\n\n padding: var(--pine-dimension-250);\n}\n\n.pds-alert__container--danger {\n --pds-alert-background: var(--pine-alert-color-danger-background);\n --pds-alert-border-color: var(--pine-alert-color-danger-border);\n --pds-alert-color-icon: var(--pine-alert-color-danger-icon);\n --pds-alert-color-text: var(--pine-alert-color-danger-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-danger-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-danger-dismiss-hover);\n}\n\n.pds-alert__container--info {\n --pds-alert-background: var(--pine-alert-color-info-background);\n --pds-alert-border-color: var(--pine-alert-color-info-border);\n --pds-alert-color-icon: var(--pine-alert-color-info-icon);\n --pds-alert-color-text: var(--pine-alert-color-info-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-info-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-info-dismiss-hover);\n}\n\n.pds-alert__container--success {\n --pds-alert-background: var(--pine-alert-color-success-background);\n --pds-alert-border-color: var(--pine-alert-color-success-border);\n --pds-alert-color-icon: var(--pine-alert-color-success-icon);\n --pds-alert-color-text: var(--pine-alert-color-success-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-success-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-success-dismiss-hover);\n}\n\n.pds-alert__container--warning {\n --pds-alert-background: var(--pine-alert-color-warning-background);\n --pds-alert-border-color: var(--pine-alert-color-warning-border);\n --pds-alert-color-icon: var(--pine-alert-color-warning-icon);\n --pds-alert-color-text: var(--pine-alert-color-warning-text);\n --pds-alert-color-dismiss: var(--pine-alert-color-warning-dismiss);\n --pds-alert-background-dismiss-hover: var(--pine-alert-color-warning-dismiss-hover);\n}\n\n.pds-alert__icon {\n margin-block-start: var(--pine-dimension-2xs);\n}\n\n.pds-alert__icon--small {\n margin-block-start: calc(var(--pine-dimension-2xs) / 2); // half the default icon margin\n}\n\n.pds-alert__content-wrapper {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n width: 100%;\n}\n\n.pds-alert__dismiss {\n align-items: center;\n background: none;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n cursor: pointer;\n display: flex;\n height: var(--pine-dimension-250);\n justify-content: center;\n padding: var(--pine-dimension-xs);\n width: var(--pine-dimension-250);\n}\n\n.pds-alert__dismiss:hover {\n background: var(--pds-alert-background-dismiss-hover);\n opacity: 0.8;\n}\n\n.pds-alert__dismiss:focus-visible {\n outline: var(--pds-alert-border-dismiss-outline);\n}\n\n.pds-alert__description--small {\n flex: 1 1 auto;\n max-width: 100%;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.pds-alert__actions {\n margin-block-start: var(--pine-dimension-sm);\n}\n\n.pds-alert__actions--small {\n flex-shrink: 0;\n margin-inline-start: auto;\n white-space: nowrap;\n}\n","import { Component, Host, h, Prop, Event, EventEmitter, Element, State } from '@stencil/core';\n\n/**\n * @slot actions - Slot for alert actions.\n */\n\n@Component({\n tag: 'pds-alert',\n styleUrls: ['pds-alert.tokens.scss', 'pds-alert.scss'],\n shadow: true,\n})\nexport class PdsAlert {\n\n @Element() el: HTMLPdsAlertElement;\n\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Text displayed as the heading of the alert.\n */\n @Prop() heading: string;\n\n /**\n * If true, the alert is displayed in a smaller size and description text is truncated. Heading is not displayed.\n */\n @Prop() small = false;\n\n /**\n * If true, shows the dismiss button. If false, the dismiss button is hidden.\n * @defaultValue false\n */\n @Prop() dismissible = false;\n\n /**\n * Sets the style variant of the alert.\n * @defaultValue 'default'\n */\n @Prop() variant: 'default' | 'danger' | 'info' | 'success' | 'warning' = 'default';\n\n /**\n * Event emitted when the dismiss button is clicked.\n */\n @Event() pdsAlertDismissClick: EventEmitter<void>;\n\n @State() hasActionsContent = false;\n\n private handleCloseClick = () => {\n this.pdsAlertDismissClick.emit();\n };\n\n componentWillRender() {\n // Check if the actions slot has any content.\n // If not, hide the actions container to prevent empty space.\n const actionsSlot = this.el.querySelector('[slot=\"actions\"]');\n this.hasActionsContent = !!actionsSlot;\n }\n\n private renderActions(isSmall: boolean) {\n return (\n <pds-box class={isSmall ? \"pds-alert__actions--small\" : \"pds-alert__actions\"} gap=\"sm\" flex={isSmall ? \"none\" : undefined} align-items={isSmall ? undefined : \"center\"}>\n <slot name=\"actions\"></slot>\n </pds-box>\n );\n }\n\n private renderContent() {\n if (this.small) {\n return (\n <pds-box display=\"flex\" gap=\"md\" align-items=\"center\">\n <pds-text\n truncate={this.small}\n class=\"pds-alert__description--small\"\n color=\"var(--pds-alert-color-text)\"\n tag=\"p\"\n >\n <slot></slot>\n </pds-text>\n {this.hasActionsContent && this.renderActions(true)}\n </pds-box>\n );\n }\n\n return (\n <div>\n <pds-text class=\"pds-alert__description\" color=\"var(--pds-alert-color-text)\" tag=\"p\">\n <slot></slot>\n </pds-text>\n {this.hasActionsContent && this.renderActions(false)}\n </div>\n );\n }\n\n render() {\n const iconMap = {\n danger: 'warning-filled',\n default: 'info-circle-filled',\n info: 'info-circle-filled',\n success: 'check-circle-filled',\n warning: 'info-circle-filled',\n };\n\n // Get the icon name based on the current variant\n const iconName = iconMap[this.variant] || iconMap.default;\n\n return (\n <Host class=\"pds-alert\" id={this.componentId} variant={this.variant}>\n <pds-box\n class={`pds-alert__container pds-alert__container--${this.variant}`}\n background-color=\"var(--pds-alert-background)\"\n border-color=\"var(--pds-alert-border-color)\"\n border-radius=\"md\"\n border\n display=\"block\"\n >\n <pds-box gap=\"sm\" display=\"flex\">\n <pds-icon\n class={`pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`}\n color=\"var(--pds-alert-color-icon)\"\n icon={iconName}\n size=\"var(--pds-alert-icon-size)\"\n />\n <pds-box class=\"pds-alert__content-wrapper\" direction=\"column\" gap=\"xs\" flex=\"grow\">\n {this.heading && !this.small && (\n <pds-text class=\"pds-alert__heading\" color=\"var(--pds-alert-color-text)\" size=\"h5\" tag=\"h3\" weight=\"medium\">\n {this.heading}\n </pds-text>\n )}\n\n {this.renderContent()}\n </pds-box>\n\n {this.dismissible && (\n <button class=\"pds-alert__dismiss\" type=\"button\" aria-label=\"Dismiss alert\" onClick={this.handleCloseClick}>\n <pds-icon icon=\"remove\" size=\"var(--pds-alert-icon-size)\" aria-hidden=\"true\" color=\"var(--pds-alert-color-dismiss)\" />\n </button>\n )}\n </pds-box>\n </pds-box>\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"p-BQImnLWy.system.js","sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n --sizing-close: var(--pine-dimension-125);\n\n align-items: center;\n border-radius: var(--pine-dimension-sm);\n display: inline-flex;\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n}\n\n$pds-chip-sentiment: (\n accent: var(--pine-chip-color-accent),\n danger: var(--pine-chip-color-danger),\n info: var(--pine-chip-color-info),\n neutral: var(--pine-chip-color-neutral),\n success: var(--pine-chip-color-success),\n warning: var(--pine-chip-color-warning),\n);\n\n$pds-chip-sentiment-text: (\n accent: var(--pine-color-text-accent),\n danger: var(--pine-color-text-danger),\n info: var(--pine-color-text-info),\n neutral: var(--pine-color-grey-900),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\n\n$pds-chip-sentiment-dots: (\n accent: var(--pine-chip-color-accent-dot),\n danger: var(--pine-chip-color-danger-dot),\n info: var(--pine-chip-color-info-dot),\n neutral: var(--pine-chip-color-neutral-dot),\n success: var(--pine-chip-color-success-dot),\n warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n accent: var(--pine-chip-color-accent-hover),\n danger: var(--pine-chip-color-danger-hover),\n info: var(--pine-chip-color-info-hover),\n neutral: var(--pine-chip-color-neutral-hover),\n success: var(--pine-chip-color-success-hover),\n warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n // dot colors\n .pds-chip__dot {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-dots, $sentiment);\n }\n\n .pds-chip__label, .pds-chip__button, .pds-chip__close {\n /* stylelint-disable-next-line */\n color: map.get($pds-chip-sentiment-text, $sentiment);\n font-weight: var(--pine-font-weight-medium);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n }\n // dropdown hover colors\n :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: var(--pine-border-width) solid transparent;\n border-radius: var(--pine-border-radius-full);\n display: inline-block;\n height: var(--pine-dimension-2xs);\n margin-inline-end: var(--pine-dimension-2xs);\n width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n align-items: center;\n display: flex;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n\n pds-icon:last-child {\n margin-inline-end: calc(var(--pine-dimension-025) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n height: var(--sizing-close);\n margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n// large\n\n:host(.pds-chip--large) {\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n\n .pds-chip__label, .pds-chip__button {\n font-family: var(--pine-font-family-heading);\n font-size: var(--pine-font-size-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n }\n}\n\n:host(.pds-chip--large.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n }\n}\n\n:host(.pds-chip--brand) {\n background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n position: relative;\n z-index: var(--pine-z-index-raised);\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-chip__button {\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n background: rgba(255, 255, 255, 0.8);\n }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n tag: 'pds-chip',\n styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n shadow: true,\n})\nexport class PdsChip {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether a dot should be displayed on the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue false\n */\n @Prop() dot = false;\n\n /**\n * The name of the icon to display before the chip text.\n */\n @Prop() icon?: string;\n\n /**\n * Determines whether the chip should be displayed in a larger size.\n * @defaultValue false\n */\n @Prop() large = false;\n\n /**\n * Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n */\n @Prop() sentiment: ChipSentimentType = 'neutral';\n\n /**\n * Sets the style variant of the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue 'text'\n */\n @Prop() variant: ChipVariantType = 'text';\n\n /**\n * Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter<void>;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n if (this.large) {\n classNames.push('pds-chip--large');\n }\n\n // For brand sentiment, always use text variant\n const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n if (effectiveVariant) {\n classNames.push('pds-chip--' + effectiveVariant);\n }\n\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private get effectiveVariant() {\n // For brand sentiment, force text variant behavior\n return this.sentiment === 'brand' ? 'text' : this.variant;\n }\n\n private get iconSize() {\n // Icon size based on large prop\n return this.large ? '14px' : '12px';\n }\n\n private setChipContent() {\n const isDropdown = this.effectiveVariant === 'dropdown';\n\n // For brand sentiment, ignore dot prop\n const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n </span>\n );\n\n return chipContent;\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && (\n <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"p-WhfStK1C.system.js","sources":["src/components/pds-chip/pds-chip.tokens.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["@use '~@kajabi-ui/styles/dist/pine/components/pds-chip/pds-chip.tokens'\n","@use 'sass:map';\n\n:host {\n --sizing-close: var(--pine-dimension-125);\n\n align-items: center;\n border-radius: var(--pine-dimension-sm);\n display: inline-flex;\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n}\n\n$pds-chip-sentiment: (\n accent: var(--pine-chip-color-accent),\n danger: var(--pine-chip-color-danger),\n info: var(--pine-chip-color-info),\n neutral: var(--pine-chip-color-neutral),\n success: var(--pine-chip-color-success),\n warning: var(--pine-chip-color-warning),\n);\n\n$pds-chip-sentiment-text: (\n accent: var(--pine-color-text-accent),\n danger: var(--pine-color-text-danger),\n info: var(--pine-color-text-info),\n neutral: var(--pine-color-grey-900),\n success: var(--pine-color-text-success),\n warning: var(--pine-color-text-warning),\n);\n\n$pds-chip-sentiment-dots: (\n accent: var(--pine-chip-color-accent-dot),\n danger: var(--pine-chip-color-danger-dot),\n info: var(--pine-chip-color-info-dot),\n neutral: var(--pine-chip-color-neutral-dot),\n success: var(--pine-chip-color-success-dot),\n warning: var(--pine-chip-color-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n accent: var(--pine-chip-color-accent-hover),\n danger: var(--pine-chip-color-danger-hover),\n info: var(--pine-chip-color-info-hover),\n neutral: var(--pine-chip-color-neutral-hover),\n success: var(--pine-chip-color-success-hover),\n warning: var(--pine-chip-color-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n :host(.pds-chip--#{$sentiment}) {\n background: $value;\n border: var(--pine-border-width) solid var(--pine-chip-color-#{$sentiment}-hover);\n\n // dot colors\n .pds-chip__dot {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-dots, $sentiment);\n }\n\n .pds-chip__label, .pds-chip__button, .pds-chip__close {\n /* stylelint-disable-next-line */\n color: map.get($pds-chip-sentiment-text, $sentiment);\n font-weight: var(--pine-font-weight-medium);\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n }\n // dropdown hover colors\n :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n /* stylelint-disable-next-line */\n background: map.get($pds-chip-sentiment-hover, $sentiment);\n }\n}\n\n.pds-chip__dot {\n border: var(--pine-border-width) solid transparent;\n border-radius: var(--pine-border-radius-full);\n display: inline-block;\n height: var(--pine-dimension-2xs);\n margin-inline-end: var(--pine-dimension-2xs);\n width: var(--pine-dimension-2xs);\n}\n\n.pds-chip__label {\n align-items: center;\n display: flex;\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__label, .pds-chip__button {\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n}\n\n.pds-chip__button {\n align-items: center;\n appearance: none;\n background: transparent;\n border: var(--pine-dimension-none);\n border-radius: var(--pine-dimension-sm);\n cursor: pointer;\n display: flex;\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n outline-offset: var(--pine-border-width);\n }\n\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n\n pds-icon:last-child {\n margin-inline-end: calc(var(--pine-dimension-025) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n }\n}\n\n.pds-chip__close {\n appearance: none;\n background: transparent;\n border: 0;\n border-radius: var(--pine-border-radius-full);\n height: var(--sizing-close);\n margin-inline-end: calc(var(--pine-dimension-xs) * -1);\n margin-inline-start: var(--pine-dimension-2xs);\n padding: var(--sizing-close);\n position: relative;\n width: var(--sizing-close);\n\n pds-icon {\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n\n &:focus-visible {\n outline: var(--pine-outline-focus);\n }\n}\n\n// large\n\n:host(.pds-chip--large) {\n padding-block: var(--pine-dimension-025);\n padding-inline: var(--pine-dimension-150);\n\n .pds-chip__label, .pds-chip__button {\n font-family: var(--pine-font-family-heading);\n font-size: var(--pine-font-size-heading-6);\n font-weight: var(--pine-font-weight-medium);\n letter-spacing: var(--pine-letter-spacing-heading-6);\n }\n}\n\n:host(.pds-chip--large.pds-chip--dropdown) {\n padding: var(--pine-dimension-none);\n\n .pds-chip__button {\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n }\n}\n\n:host(.pds-chip--brand) {\n background: linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);\n border: 0;\n padding: 1px;\n position: relative;\n\n .pds-chip__label {\n background: rgba(255, 255, 255, 0.9);\n border-radius: calc(var(--pine-dimension-sm) - 1px);\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n padding: var(--pine-dimension-025) var(--pine-dimension-150);\n position: relative;\n z-index: var(--pine-z-index-raised);\n\n pds-icon {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n .pds-chip__button, .pds-chip__close {\n color: var(--pine-color-grey-900);\n font-weight: var(--pine-font-weight-medium);\n position: relative;\n z-index: var(--pine-z-index-raised);\n }\n\n .pds-chip__button {\n pds-icon:first-child {\n margin-inline-end: var(--pine-dimension-2xs);\n }\n }\n\n // tag close hover colors\n .pds-chip__close:hover {\n background: rgba(255, 255, 255, 0.8);\n }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport type { ChipSentimentType, ChipVariantType } from '@utils/types';\n\n/**\n * @slot (default) - The chip's label text.\n */\n\n@Component({\n tag: 'pds-chip',\n styleUrls: ['pds-chip.tokens.scss', 'pds-chip.scss'],\n shadow: true,\n})\nexport class PdsChip {\n /**\n * A unique identifier used for the underlying component `id` attribute.\n */\n @Prop() componentId: string;\n\n /**\n * Determines whether a dot should be displayed on the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue false\n */\n @Prop() dot = false;\n\n /**\n * The name of the icon to display before the chip text.\n */\n @Prop() icon?: string;\n\n /**\n * Determines whether the chip should be displayed in a larger size.\n * @defaultValue false\n */\n @Prop() large = false;\n\n /**\n * Defines the color scheme of the chip.\n * @defaultValue 'neutral'\n */\n @Prop() sentiment: ChipSentimentType = 'neutral';\n\n /**\n * Sets the style variant of the chip.\n * Note: This prop is ignored when sentiment is 'brand'.\n * @defaultValue 'text'\n */\n @Prop() variant: ChipVariantType = 'text';\n\n /**\n * Event emitted when the close button is clicked on a tag variant chip.\n */\n @Event() pdsTagCloseClick: EventEmitter<void>;\n\n private handleCloseClick = () => {\n this.pdsTagCloseClick.emit();\n };\n\n private classNames() {\n const classNames = ['pds-chip'];\n\n if (this.large) {\n classNames.push('pds-chip--large');\n }\n\n // For brand sentiment, always use text variant\n const effectiveVariant = this.sentiment === 'brand' ? 'text' : this.variant;\n if (effectiveVariant) {\n classNames.push('pds-chip--' + effectiveVariant);\n }\n\n if (this.sentiment) {\n classNames.push('pds-chip--' + this.sentiment);\n }\n\n return classNames.join(' ');\n }\n\n private get effectiveVariant() {\n // For brand sentiment, force text variant behavior\n return this.sentiment === 'brand' ? 'text' : this.variant;\n }\n\n private get iconSize() {\n // Icon size based on large prop\n return this.large ? '14px' : '12px';\n }\n\n private setChipContent() {\n const isDropdown = this.effectiveVariant === 'dropdown';\n\n // For brand sentiment, ignore dot prop\n const showDot = this.sentiment === 'brand' ? false : this.dot;\n\n const chipContent = isDropdown ? (\n <button class=\"pds-chip__button\" type=\"button\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n <pds-icon icon={downSmall} size={this.iconSize} aria-hidden=\"true\"></pds-icon>\n </button>\n ) : (\n <span class=\"pds-chip__label\">\n {this.icon && <pds-icon icon={this.icon} size={this.iconSize} aria-hidden=\"true\"></pds-icon>}\n {showDot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n <slot></slot>\n </span>\n );\n\n return chipContent;\n }\n\n render() {\n return (\n <Host class={this.classNames()} id={this.componentId}>\n {this.setChipContent()}\n {this.effectiveVariant === 'tag' && (\n <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n <pds-icon icon={remove} size={this.iconSize}></pds-icon>\n </button>\n )}\n </Host>\n );\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as e,h as i,H as
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
import{r as e,h as i,H as a}from"./p-DHPhrb5T.js";import{d as n}from"./p-xbb79yLt.js";const o=":host{display:block}details{--number-animation-transform-timing:200ms;border-radius:var(--pine-dimension-xs)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--pine-color-background-container)}details[open] summary{color:var(--pine-color-text-active);font-weight:var(--pine-font-weight-semi-bold)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--pine-color-background-container);border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-muted);font-family:var(--pine-font-family-body);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding-block:calc(var(--pine-dimension-2xs) * 1.5);-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs);-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--pine-color-background-container-hover);color:var(--pine-color-text);cursor:pointer}summary:focus-visible{outline:var(--pine-outline-focus);position:relative}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:calc(var(--pine-dimension-sm) + 2);padding-block-end:calc(var(--pine-dimension-sm) + 2);padding-inline:calc(var(--pine-dimension-2xs) * 1.5)}";const r=class{constructor(i){e(this,i);this.isOpen=false;this.handleToggle=()=>{this.isOpen=this.detailsEl.open};this.getOpenAttribute=()=>{if(this.isOpen!==false){return{open:true}}return""}}handleOpenState(e){this.isOpen=e}componentDidLoad(){this.detailsEl.addEventListener("toggle",this.handleToggle)}render(){return i(a,{key:"d53fcdad106563a15bb6d1631cf29c9f1a43828e",class:"pds-accordion",id:this.componentId},i("details",Object.assign({key:"cc3cda2e1e4df8c1b9ed7762329cfa082b1df756"},this.getOpenAttribute(),{ref:e=>this.detailsEl=e}),i("summary",{key:"d2ee68e36d384e1701909647e5ded2eecb9309e0",part:"accordion-button"},i("slot",{key:"7c68d676a7928d53ff6785c71a0f3b08c4a2176b",name:"label"},"Details"),i("pds-icon",{key:"523c340fc5741f4cbf792f5a5a39f537f6db588c",icon:n,part:"accordion-icon"})),i("div",{key:"87a896973b005365494b82a8200646a8b67b27e5",part:"accordion-body",class:"pds-accordion__body"},i("slot",{key:"d307f6de804cfa3e9a39646058e9ea1fb465abda"}))))}static get watchers(){return{isOpen:["handleOpenState"]}}};r.style=o;export{r as pds_accordion};
|
|
2
|
+
//# sourceMappingURL=p-a08b60ae.entry.js.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
System.register(["./p-5D9wXQuJ.system.js","./p-BHavepTY.system.js","./p-e50YjICS.system.js"],(function(e){"use strict";var i,r,a,o,s,d,n,l,t;return{setters:[function(e){i=e.r;r=e.c;a=e.h;o=e.H;s=e.a},function(e){d=e.e;n=e.a;l=e.m},function(e){t=e.b}],execute:function(){var c=".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var p='.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-white);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}';var b=e("pds_radio",function(){function e(e){var a=this;i(this,e);this.pdsRadioChange=r(this,"pdsRadioChange");this._type="radio";this._hasImage=false;this.checked=false;this.disabled=false;this.hasBorder=false;this.invalid=false;this.required=false;this.handleRadioChange=function(e){if(a.disabled){return}var i=e.target;var r=i.checked;if(a.el.closest("pds-radio-group")){return}a.pdsRadioChange.emit(r)}}e.prototype.hasImageSlot=function(){var e=this.el.querySelector('[slot="image"]');return!!e};e.prototype.hasImage=function(){return this._hasImage};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}if(this.hasBorder){e.push("has-border")}if(this.hasImage()){e.push("has-image")}return e.join(" ")};e.prototype.componentWillLoad=function(){this._hasImage=this.hasImageSlot()};e.prototype.connectedCallback=function(){var e=this;d(this.el,(function(){return e._type}))};e.prototype.render=function(){var e=this;var i=function(){return[a("label",{htmlFor:e.componentId,key:"".concat(e.componentId,"-label")},a("input",{key:"c2361c9041baae2cf222314101f390fbf19266fd","aria-describedby":n(e.componentId,e.invalid,e.helperMessage),"aria-invalid":e.invalid?"true":undefined,type:"radio",id:e.componentId,name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,onChange:e.handleRadioChange,class:e.hasImage()?"visually-hidden":""}),a("span",{key:"ce704f1c12d7e9a214f2a93499bd065037631586",class:e.hideLabel?"visually-hidden":""},e.label)),e.helperMessage&&a("div",{key:"".concat(e.componentId,"-helper"),class:"pds-radio__message",id:l(e.componentId,"helper")},e.helperMessage),e.errorMessage&&a("div",{key:"".concat(e.componentId,"-error"),class:"pds-radio__message pds-radio__message--error",id:l(e.componentId,"error"),"aria-live":"assertive"},a("pds-icon",{key:"138adf48418372b3ca28ab4b6998e74f7a2de8b2",icon:t,size:"small"}),e.errorMessage)]};return a(o,{key:"25a216197228fc211ab2fd3ce3ee767e34d90ac0",class:this.classNames()},this.hasImage()&&a("div",{key:"b19b9c38cd8ba864328c4d4a3e0402b38b096f44",class:"pds-radio__image-container",part:"image-container"},a("slot",{key:"72723bbd792394d1f358acf6a3a6969c6ac4012d",name:"image",onSlotchange:function(){return e._hasImage=e.hasImageSlot()}})),this.hasImage()?a("div",{class:"pds-radio__content-wrapper"},i()):i())};Object.defineProperty(e.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return e}());b.style=c+p}}}));
|
|
2
|
-
//# sourceMappingURL=p-
|
|
1
|
+
System.register(["./p-5D9wXQuJ.system.js","./p-BHavepTY.system.js","./p-CKzDRRgx.system.js"],(function(e){"use strict";var i,r,a,o,s,d,n,l,t;return{setters:[function(e){i=e.r;r=e.c;a=e.h;o=e.H;s=e.a},function(e){d=e.e;n=e.a;l=e.m},function(e){t=e.b}],execute:function(){var c=".sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";var p='.sc-pds-radio-h{--sizing-check-size:6px;--sizing-input-size:var(--pine-dimension-sm);--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}.has-border.sc-pds-radio-h{-ms-flex-align:start;align-items:flex-start;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-border.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-border.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-border.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-border.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);font-weight:var(--pine-font-weight-semi-bold)}.has-border.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-border.sc-pds-radio-h:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-border.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-border.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-ms-flex:none;flex:none;height:var(--sizing-input-size);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--sizing-input-size)}input.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}input.sc-pds-radio:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input.sc-pds-radio:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input.sc-pds-radio:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input.sc-pds-radio:checked::after{background:var(--pine-color-white);border-radius:var(--pine-border-radius-full);content:"";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background-color:var(--pine-color-accent-disabled);border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--pine-color-border-disabled)}input.sc-pds-radio:focus-visible{outline:var(--pine-outline-focus)}label.sc-pds-radio{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}label.sc-pds-radio:has(input:disabled){color:var(--pine-color-text-label-disabled);cursor:not-allowed}.sc-pds-radio-h:has(input:disabled) .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.visually-hidden.sc-pds-radio{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-radio__message.sc-pds-radio{color:var(--pine-color-text-message);-ms-flex-preferred-size:100%;flex-basis:100%;font:var(--pine-typography-body);-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-radio__message--error.sc-pds-radio{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.has-image.sc-pds-radio-h{-ms-flex-align:center;align-items:center;border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs);display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;padding:var(--pine-dimension-md)}@media (max-width: 767px){.has-image.sc-pds-radio-h{-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex:1 1 100%;flex:1 1 100%;max-width:100%;min-width:0}}.has-image.sc-pds-radio-h:hover{border:var(--pine-border-hover)}.has-image.sc-pds-radio-h:has(input:checked){-webkit-box-shadow:0 0 0 2px var(--pine-color-primary-hover);box-shadow:0 0 0 2px var(--pine-color-primary-hover)}.has-image.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text);display:-ms-flexbox;display:flex;font-weight:var(--pine-font-weight-semi-bold);gap:var(--pine-dimension-xs)}.has-image.sc-pds-radio-h label.sc-pds-radio::after{content:"";cursor:pointer;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{-ms-flex-align:center;align-items:center;align-self:center;border:var(--pine-border);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex:none;flex:none;grid-area:image;-ms-flex-pack:center;justify-content:center;overflow:hidden;position:relative;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-hover)}.has-image.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio .pds-radio__image.sc-pds-radio{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.has-image.sc-pds-radio-h .pds-radio__message.sc-pds-radio{grid-area:message;-webkit-margin-before:0;margin-block-start:0;-webkit-margin-start:0;margin-inline-start:0}.has-image.is-disabled.sc-pds-radio-h{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio{border-color:var(--pine-color-border-disabled);cursor:not-allowed;opacity:0.5}.has-image.is-disabled.sc-pds-radio-h .pds-radio__image-container.sc-pds-radio:hover{border-color:var(--pine-color-border-disabled)}.has-image.is-disabled.sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled);cursor:not-allowed}.has-image.is-disabled.sc-pds-radio-h .pds-radio__message.sc-pds-radio{color:var(--pine-color-text-label-disabled)}.has-image.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--pine-color-text-message-danger)}';var b=e("pds_radio",function(){function e(e){var a=this;i(this,e);this.pdsRadioChange=r(this,"pdsRadioChange");this._type="radio";this._hasImage=false;this.checked=false;this.disabled=false;this.hasBorder=false;this.invalid=false;this.required=false;this.handleRadioChange=function(e){if(a.disabled){return}var i=e.target;var r=i.checked;if(a.el.closest("pds-radio-group")){return}a.pdsRadioChange.emit(r)}}e.prototype.hasImageSlot=function(){var e=this.el.querySelector('[slot="image"]');return!!e};e.prototype.hasImage=function(){return this._hasImage};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.disabled){e.push("is-disabled")}if(this.hasBorder){e.push("has-border")}if(this.hasImage()){e.push("has-image")}return e.join(" ")};e.prototype.componentWillLoad=function(){this._hasImage=this.hasImageSlot()};e.prototype.connectedCallback=function(){var e=this;d(this.el,(function(){return e._type}))};e.prototype.render=function(){var e=this;var i=function(){return[a("label",{htmlFor:e.componentId,key:"".concat(e.componentId,"-label")},a("input",{key:"c2361c9041baae2cf222314101f390fbf19266fd","aria-describedby":n(e.componentId,e.invalid,e.helperMessage),"aria-invalid":e.invalid?"true":undefined,type:"radio",id:e.componentId,name:e.name,value:e.value,checked:e.checked,required:e.required,disabled:e.disabled,onChange:e.handleRadioChange,class:e.hasImage()?"visually-hidden":""}),a("span",{key:"ce704f1c12d7e9a214f2a93499bd065037631586",class:e.hideLabel?"visually-hidden":""},e.label)),e.helperMessage&&a("div",{key:"".concat(e.componentId,"-helper"),class:"pds-radio__message",id:l(e.componentId,"helper")},e.helperMessage),e.errorMessage&&a("div",{key:"".concat(e.componentId,"-error"),class:"pds-radio__message pds-radio__message--error",id:l(e.componentId,"error"),"aria-live":"assertive"},a("pds-icon",{key:"138adf48418372b3ca28ab4b6998e74f7a2de8b2",icon:t,size:"small"}),e.errorMessage)]};return a(o,{key:"25a216197228fc211ab2fd3ce3ee767e34d90ac0",class:this.classNames()},this.hasImage()&&a("div",{key:"b19b9c38cd8ba864328c4d4a3e0402b38b096f44",class:"pds-radio__image-container",part:"image-container"},a("slot",{key:"72723bbd792394d1f358acf6a3a6969c6ac4012d",name:"image",onSlotchange:function(){return e._hasImage=e.hasImageSlot()}})),this.hasImage()?a("div",{class:"pds-radio__content-wrapper"},i()):i())};Object.defineProperty(e.prototype,"el",{get:function(){return s(this)},enumerable:false,configurable:true});return e}());b.style=c+p}}}));
|
|
2
|
+
//# sourceMappingURL=p-a4d094da.system.entry.js.map
|