@pine-ds/core 4.6.0 → 4.7.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/pds-box2.js +1 -1
- package/components/pds-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +1 -1
- package/components/pds-copytext.js +1 -1
- package/components/pds-drawer.js +1 -1
- package/components/pds-dropdown-menu-item.js +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-modal2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-popover.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-row.js +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-table-cell2.js +1 -1
- package/components/pds-text2.js +1 -1
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-box.cjs.entry.js +96 -96
- package/dist/cjs/pds-checkbox.cjs.entry.js +16 -4
- package/dist/cjs/pds-chip.cjs.entry.js +34 -9
- package/dist/cjs/pds-combobox.cjs.entry.js +47 -4
- package/dist/cjs/pds-copytext.cjs.entry.js +7 -2
- package/dist/cjs/pds-drawer.cjs.entry.js +23 -10
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +2 -2
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +9 -5
- package/dist/cjs/pds-modal.cjs.entry.js +175 -49
- package/dist/cjs/pds-multiselect.cjs.entry.js +40 -9
- package/dist/cjs/pds-popover.cjs.entry.js +170 -26
- package/dist/cjs/pds-radio.cjs.entry.js +1 -1
- package/dist/cjs/pds-row.cjs.entry.js +7 -7
- package/dist/cjs/pds-switch.cjs.entry.js +15 -3
- package/dist/cjs/pds-table-cell.cjs.entry.js +24 -4
- package/dist/cjs/pds-text.cjs.entry.js +17 -9
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/cjs/{truncation-tooltip-CYgQfBLt.js → truncation-tooltip-DO9xli2e.js} +7 -7
- package/dist/collection/components/pds-box/pds-box.js +96 -96
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +4 -0
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +15 -3
- package/dist/collection/components/pds-chip/pds-chip.js +33 -8
- package/dist/collection/components/pds-chip/stories/pds-chip.stories.js +17 -0
- package/dist/collection/components/pds-combobox/pds-combobox.js +48 -5
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +1 -1
- package/dist/collection/components/pds-copytext/pds-copytext.js +6 -1
- package/dist/collection/components/pds-drawer/pds-drawer.css +4 -1
- package/dist/collection/components/pds-drawer/pds-drawer.js +54 -17
- package/dist/collection/components/pds-drawer/stories/pds-drawer.stories.js +6 -1
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +2 -2
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +15 -5
- package/dist/collection/components/pds-modal/pds-modal.js +180 -50
- package/dist/collection/components/pds-multiselect/pds-multiselect.css +4 -0
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +42 -11
- package/dist/collection/components/pds-popover/pds-popover.js +171 -27
- package/dist/collection/components/pds-radio/pds-radio.css +6 -0
- package/dist/collection/components/pds-row/pds-row.js +7 -7
- package/dist/collection/components/pds-switch/pds-switch.js +15 -3
- package/dist/collection/components/pds-table/pds-table-cell/pds-table-cell.js +23 -3
- package/dist/collection/components/pds-text/pds-text.js +16 -8
- package/dist/collection/utils/truncation-tooltip.js +7 -7
- package/dist/docs.json +48 -9
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-box.entry.js +96 -96
- package/dist/esm/pds-checkbox.entry.js +16 -4
- package/dist/esm/pds-chip.entry.js +34 -9
- package/dist/esm/pds-combobox.entry.js +47 -4
- package/dist/esm/pds-copytext.entry.js +7 -2
- package/dist/esm/pds-drawer.entry.js +23 -10
- package/dist/esm/pds-dropdown-menu-item.entry.js +2 -2
- package/dist/esm/pds-dropdown-menu.entry.js +9 -5
- package/dist/esm/pds-modal.entry.js +175 -49
- package/dist/esm/pds-multiselect.entry.js +40 -9
- package/dist/esm/pds-popover.entry.js +171 -27
- package/dist/esm/pds-radio.entry.js +1 -1
- package/dist/esm/pds-row.entry.js +7 -7
- package/dist/esm/pds-switch.entry.js +15 -3
- package/dist/esm/pds-table-cell.entry.js +24 -4
- package/dist/esm/pds-text.entry.js +17 -9
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm/{truncation-tooltip-_902ENWC.js → truncation-tooltip-DRXsdKk1.js} +7 -7
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/pds-box.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-combobox.entry.js +1 -1
- package/dist/esm-es5/pds-copytext.entry.js +1 -1
- package/dist/esm-es5/pds-drawer.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu-item.entry.js +1 -1
- package/dist/esm-es5/pds-dropdown-menu.entry.js +1 -1
- package/dist/esm-es5/pds-modal.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-popover.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-row.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/truncation-tooltip-DRXsdKk1.js +1 -0
- package/dist/pine-core/{p-9af131d6.system.entry.js → p-11d98408.system.entry.js} +1 -1
- package/dist/pine-core/p-153ba77b.entry.js +1 -0
- package/dist/pine-core/p-355e4cf9.entry.js +1 -0
- package/dist/pine-core/p-4435fff6.system.entry.js +1 -0
- package/dist/pine-core/p-576cf904.system.entry.js +1 -0
- package/dist/pine-core/{p-4f94b4f1.system.entry.js → p-645a482b.system.entry.js} +1 -1
- package/dist/pine-core/{p-4fa63723.system.entry.js → p-6d603d16.system.entry.js} +1 -1
- package/dist/pine-core/p-74a05bcc.entry.js +1 -0
- package/dist/pine-core/p-7fa66cad.entry.js +1 -0
- package/dist/pine-core/p-80a698ae.entry.js +1 -0
- package/dist/pine-core/{p-bf7ee3b7.system.entry.js → p-80e6f3a0.system.entry.js} +1 -1
- package/dist/pine-core/p-88ff1604.entry.js +1 -0
- package/dist/pine-core/p-92ae6082.entry.js +1 -0
- package/dist/pine-core/{p-6eec23a7.system.entry.js → p-97d0b89e.system.entry.js} +1 -1
- package/dist/pine-core/p-993d1043.entry.js +1 -0
- package/dist/pine-core/p-CuSNnuFu.system.js +1 -1
- package/dist/pine-core/p-JtdHT_W5.js +1 -0
- package/dist/pine-core/p-a787b34a.system.entry.js +1 -0
- package/dist/pine-core/p-a939b471.entry.js +1 -0
- package/dist/pine-core/p-aa032a5e.system.entry.js +1 -0
- package/dist/pine-core/{p-646afbca.system.entry.js → p-b60ac7eb.system.entry.js} +1 -1
- package/dist/pine-core/p-bb73ad66.entry.js +2 -0
- package/dist/pine-core/p-bd26a5e8.entry.js +1 -0
- package/dist/pine-core/p-bf5887e8.system.entry.js +1 -0
- package/dist/pine-core/p-c36b490e.entry.js +1 -0
- package/dist/pine-core/p-c81d8ac8.entry.js +1 -0
- package/dist/pine-core/p-ca0a8f5c.entry.js +1 -0
- package/dist/pine-core/p-ca0d48e8.entry.js +1 -0
- package/dist/pine-core/p-cfc52b95.system.entry.js +1 -0
- package/dist/pine-core/{p-ba1f65c2.system.entry.js → p-d8570b4b.system.entry.js} +1 -1
- package/dist/pine-core/{p-9e0f920a.system.entry.js → p-e7a95a49.system.entry.js} +1 -1
- package/dist/pine-core/p-e803f629.system.entry.js +1 -0
- package/dist/pine-core/{p-df539c42.system.entry.js → p-e836f3ec.system.entry.js} +2 -2
- package/dist/pine-core/{p-b8e8a4ce.entry.js → p-f474d7de.entry.js} +1 -1
- package/dist/pine-core/{p-CBu9UrXr.system.js → p-qhdoK1Jp.system.js} +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-checkbox/pds-checkbox.d.ts +4 -0
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +7 -1
- package/dist/types/components/pds-drawer/pds-drawer.d.ts +21 -9
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu.d.ts +1 -0
- package/dist/types/components/pds-modal/pds-modal.d.ts +16 -3
- package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +10 -3
- package/dist/types/components/pds-popover/pds-popover.d.ts +31 -1
- package/dist/types/components/pds-switch/pds-switch.d.ts +4 -0
- package/dist/types/components/pds-table/pds-table-cell/pds-table-cell.d.ts +3 -0
- package/dist/types/components/pds-text/pds-text.d.ts +1 -0
- package/dist/types/components.d.ts +47 -32
- package/dist/types/utils/truncation-tooltip.d.ts +15 -2
- package/dist/vscode.html-data.json +11 -4
- package/hydrate/index.js +698 -253
- package/hydrate/index.mjs +698 -253
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-_902ENWC.js +0 -1
- package/dist/pine-core/p-01c9b8f3.entry.js +0 -1
- package/dist/pine-core/p-258d5e83.entry.js +0 -1
- package/dist/pine-core/p-3c27088f.system.entry.js +0 -1
- package/dist/pine-core/p-4849fda7.entry.js +0 -1
- package/dist/pine-core/p-4de8f333.entry.js +0 -1
- package/dist/pine-core/p-550c2fd3.entry.js +0 -1
- package/dist/pine-core/p-6bf853c9.entry.js +0 -1
- package/dist/pine-core/p-6d3610f9.entry.js +0 -1
- package/dist/pine-core/p-73eb47fa.entry.js +0 -1
- package/dist/pine-core/p-7f367db4.system.entry.js +0 -1
- package/dist/pine-core/p-84e9b7da.entry.js +0 -1
- package/dist/pine-core/p-9a0083dd.system.entry.js +0 -1
- package/dist/pine-core/p-CnM3cCof.js +0 -1
- package/dist/pine-core/p-a3735199.entry.js +0 -1
- package/dist/pine-core/p-a85a6ab9.system.entry.js +0 -1
- package/dist/pine-core/p-cf08a6dd.system.entry.js +0 -1
- package/dist/pine-core/p-da103a54.system.entry.js +0 -1
- package/dist/pine-core/p-e800a2b1.entry.js +0 -1
- package/dist/pine-core/p-eb5465ce.entry.js +0 -1
- package/dist/pine-core/p-ec5428fb.entry.js +0 -1
- package/dist/pine-core/p-ed4b979e.entry.js +0 -1
- package/dist/pine-core/p-f1f17940.entry.js +0 -2
- package/dist/pine-core/p-f25e4731.system.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as s,Host as n,transformTag as i}from"@stencil/core/internal/client";import{H as d}from"./attributes.js";import{f as p}from"./index2.js";import{r}from"./reflected-attribute-default.js";import{s as a}from"./truncation-tooltip.js";import{d as c}from"./pds-button2.js";import{d as h}from"./pds-icon2.js";import{d as l}from"./pds-loader2.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsCopyTextClick=o(this,"pdsCopyTextClick",7),this.hostKeeper=new d,this.truncationCleanup=null,this.border=!0,this.fullWidth=!1,this.truncate=!1,this.copyToClipboard=async t=>{try{void 0!==navigator.clipboard&&(await navigator.clipboard.writeText(t),this.pdsCopyTextClick.emit("Copied to clipboard"))}catch(t){this.pdsCopyTextClick.emit("Error writing text to clipboard: "+t)}},this.handleClick=()=>{this.copyToClipboard(this.value)}}connectedCallback(){this.hostKeeper.connect(this.el)}restoreBorderDefault(t){this.border=r(this.el,"border",t,!0)}handleTruncateChange(t){t?this.initTruncationTooltip():this.destroyTruncationTooltip()}handleValueChange(){this.truncate&&this.initTruncationTooltip()}componentDidLoad(){this.truncate&&this.initTruncationTooltip()}disconnectedCallback(){this.hostKeeper.disconnect(),this.destroyTruncationTooltip()}initTruncationTooltip(){this.destroyTruncationTooltip(),this.valueSpanEl&&(this.truncationCleanup=a({hostEl:this.el,contentEl:this.valueSpanEl,getTooltipText:()=>this.value||"",manageTabIndex:!1}))}destroyTruncationTooltip(){this.truncationCleanup&&(this.truncationCleanup(),this.truncationCleanup=null)}classNames(){const t=["pds-copytext"];return this.border&&t.push("pds-copytext--bordered"),this.fullWidth&&t.push("pds-copytext--full-width"),this.truncate&&t.push("pds-copytext--truncated"),t.join(" ")}render(){const t=this.classNames();return this.hostKeeper.record(t),s(n,{key:"
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as e,createEvent as o,h as s,Host as n,transformTag as i}from"@stencil/core/internal/client";import{H as d}from"./attributes.js";import{f as p}from"./index2.js";import{r}from"./reflected-attribute-default.js";import{s as a}from"./truncation-tooltip.js";import{d as c}from"./pds-button2.js";import{d as h}from"./pds-icon2.js";import{d as l}from"./pds-loader2.js";const u=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsCopyTextClick=o(this,"pdsCopyTextClick",7),this.hostKeeper=new d,this.truncationCleanup=null,this.border=!0,this.fullWidth=!1,this.truncate=!1,this.copyToClipboard=async t=>{try{void 0!==navigator.clipboard&&(await navigator.clipboard.writeText(t),this.pdsCopyTextClick.emit("Copied to clipboard"))}catch(t){this.pdsCopyTextClick.emit("Error writing text to clipboard: "+t)}},this.handleClick=()=>{this.copyToClipboard(this.value)}}connectedCallback(){this.hostKeeper.connect(this.el),this.truncate&&this.valueSpanEl&&this.initTruncationTooltip()}restoreBorderDefault(t){this.border=r(this.el,"border",t,!0)}handleTruncateChange(t){t?this.initTruncationTooltip():this.destroyTruncationTooltip()}handleValueChange(){this.truncate&&this.initTruncationTooltip()}componentDidLoad(){this.truncate&&this.initTruncationTooltip()}disconnectedCallback(){this.hostKeeper.disconnect(),this.destroyTruncationTooltip()}initTruncationTooltip(){this.destroyTruncationTooltip(),this.valueSpanEl&&(this.truncationCleanup=a({hostEl:this.el,contentEl:this.valueSpanEl,getTooltipText:()=>this.value||"",manageTabIndex:!1}))}destroyTruncationTooltip(){this.truncationCleanup&&(this.truncationCleanup(),this.truncationCleanup=null)}classNames(){const t=["pds-copytext"];return this.border&&t.push("pds-copytext--bordered"),this.fullWidth&&t.push("pds-copytext--full-width"),this.truncate&&t.push("pds-copytext--truncated"),t.join(" ")}render(){const t=this.classNames();return this.hostKeeper.record(t),s(n,{key:"a3517b135fc3e3677e30b6ad5811c1170a819b65",class:t,id:this.componentId},s("pds-button",{key:"02f56bed02ed3963a3d80a92148d6619a845224a",type:"button",variant:"unstyled",onClick:this.handleClick},s("span",{key:"95fd1284e3d227b74dab613eb71f5385c3a0be29",ref:t=>this.valueSpanEl=t},this.value),s("pds-icon",{key:"21af67a8c9165e56d2d2b0cf19df7c7e3f290c72","aria-hidden":"true",icon:p,size:"16px"})))}get el(){return this}static get watchers(){return{border:[{restoreBorderDefault:0}],truncate:[{handleTruncateChange:0}],value:[{handleValueChange:0}]}}static get style(){return":host(.pds-copytext){--copytext-color-background-hover:var(--pine-color-background-inset)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);border-width:var(--pine-dimension-none);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-body-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);max-width:100%}:host(.pds-copytext) pds-button::part(button){padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-xs)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);color:var(--pine-color-text-secondary-hover)}:host(.pds-copytext) pds-button span{font-weight:var(--pine-font-weight-medium);-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border-width:var(--pine-dimension-none);padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button){padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button::part(button):hover{background-color:transparent}:host(.pds-copytext):host(.pds-copytext--bordered) span{background:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--pine-border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-inline-flexbox;display:inline-flex;min-width:auto;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-text),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-text){-ms-flex-negative:1;flex-shrink:1;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{text-align:start;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{-ms-flex-pack:justify;justify-content:space-between}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-overflow:ellipsis}"}},[1,"pds-copytext",{border:[1540],componentId:[1,"component-id"],fullWidth:[4,"full-width"],truncate:[4],value:[1]},void 0,{border:[{restoreBorderDefault:0}],truncate:[{handleTruncateChange:0}],value:[{handleValueChange:0}]}]),b=u,x=function(){"undefined"!=typeof customElements&&["pds-copytext","pds-button","pds-icon","pds-loader"].forEach((t=>{switch(t){case"pds-copytext":customElements.get(i(t))||customElements.define(i(t),u);break;case"pds-button":customElements.get(i(t))||c();break;case"pds-icon":customElements.get(i(t))||h();break;case"pds-loader":customElements.get(i(t))||l()}}))};export{b as PdsCopytext,x as defineCustomElement}
|
package/components/pds-drawer.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as d,HTMLElement as s,createEvent as e,h as r,Host as
|
|
1
|
+
import{proxyCustomElement as d,HTMLElement as s,createEvent as e,h as r,Host as a,transformTag as t}from"@stencil/core/internal/client";import{a as o,c as p}from"./closest.js";import{u as i}from"./reconnected-content.js";import{d as l}from"./pds-modal2.js";const n=".pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal",m=d(class extends s{constructor(d){super(),!1!==d&&this.__registerHost(),this.pdsDrawerOpen=e(this,"pdsDrawerOpen",7),this.pdsDrawerClose=e(this,"pdsDrawerClose",7),this.open=!1,this.side="end",this.size="md",this.scrollable=!0,this.modal=!1,this.lightDismiss=!0,this.initialFocus="auto"}componentDidRender(){i(this.el.querySelector("pds-modal.pds-drawer__modal .pds-modal"),"pds-modal.pds-drawer__modal",".pds-modal")}handleModalClose(d){d.target===this.modalEl&&(this.open=!1,this.pdsDrawerClose.emit())}handleModalOpen(d){d.target===this.modalEl&&this.pdsDrawerOpen.emit()}handleOutsidePointerDown(d){if(this.modal||!this.lightDismiss||!this.open)return;const s=d.target;if(!s)return;if(this.el.contains(s))return;if(s.closest(n))return;const e=s.closest(".pds-datepicker-calendar-portal"),r=null==e?void 0:e.pdsDatepicker;r&&(o(this.el,r)||p(n,r))||s.closest("pds-modal")||(this.open=!1)}render(){return r(a,{key:"287bf043c991209488eb1b617031acffb59ff9af",class:{"pds-drawer":!0,["pds-drawer--"+this.side]:!0,["pds-drawer--"+this.size]:!0}},r("pds-modal",{key:"cd86fb552353f5cc12fb36fc956033432a91847c",class:{"pds-drawer__modal":!0,"pds-drawer__modal--modal":this.modal},ref:d=>this.modalEl=d,componentId:this.componentId,open:this.open,scrollable:this.scrollable,disableTopLayer:!this.modal,backdropDismiss:this.lightDismiss,disableInitialFocus:!this.modal&&"none"===this.initialFocus},r("slot",{key:"56bbe9b5c26b10b07c0f503ba147899a57a5de85"})))}get el(){return this}static get style(){return".pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch}.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal:not(.pds-drawer__modal--modal)>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}"}},[260,"pds-drawer",{componentId:[1,"component-id"],open:[1028],side:[1],size:[1],scrollable:[4],modal:[4],lightDismiss:[4,"light-dismiss"],initialFocus:[1,"initial-focus"]},[[0,"pdsModalClose","handleModalClose"],[0,"pdsModalOpen","handleModalOpen"],[5,"pointerdown","handleOutsidePointerDown"]]]),c=m,h=function(){"undefined"!=typeof customElements&&["pds-drawer","pds-modal"].forEach((d=>{switch(d){case"pds-drawer":customElements.get(t(d))||customElements.define(t(d),m);break;case"pds-modal":customElements.get(t(d))||l()}}))};export{c as PdsDrawer,h as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as t,createEvent as n,h as o,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as r}from"./pds-icon2.js";import{d}from"./pds-link2.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsClick=n(this,"pdsClick",7),this.destructive=!1,this.disabled=!1,this.external=!1,this.hasFocus=!1,this.handleFocus=()=>{this.hasFocus=!0},this.handleBlur=()=>{this.hasFocus=!1},this.handleKeyDown=e=>{this.disabled||"Enter"!==e.key||(this.href||e.preventDefault(),this.handleClick())}}async clickItem(){this.handleClick()}handleClick(){var e;const t=Array.from(this.host.parentNode.children).filter((e=>"pds-dropdown-menu-item"===e.tagName.toLowerCase())).indexOf(this.host),n=(null===(e=this.host.textContent)||void 0===e?void 0:e.trim())||"";this.pdsClick.emit({itemIndex:t,item:this.host,content:n})}renderElement(){return
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as t,createEvent as n,h as o,Host as i,transformTag as s}from"@stencil/core/internal/client";import{d as r}from"./pds-icon2.js";import{d}from"./pds-link2.js";const a=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsClick=n(this,"pdsClick",7),this.destructive=!1,this.disabled=!1,this.external=!1,this.hasFocus=!1,this.handleFocus=()=>{this.hasFocus=!0},this.handleBlur=()=>{this.hasFocus=!1},this.handleKeyDown=e=>{this.disabled||"Enter"!==e.key||(this.href||e.preventDefault(),this.handleClick())}}async clickItem(){this.handleClick()}handleClick(){var e;const t=Array.from(this.host.parentNode.children).filter((e=>"pds-dropdown-menu-item"===e.tagName.toLowerCase())).indexOf(this.host),n=(null===(e=this.host.textContent)||void 0===e?void 0:e.trim())||"";this.pdsClick.emit({itemIndex:t,item:this.host,content:n})}renderElement(){return null!=this.href?o("pds-link",{download:this.download,href:this.disabled?null:this.href,external:this.external,target:this.target,class:{"pds-dropdown-menu-item__content":!0,"has-focus":this.hasFocus},tabIndex:this.disabled?-1:0,onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,"aria-disabled":this.disabled?"true":null},o("slot",null)):o("button",{class:{"pds-dropdown-menu-item__content":!0,"has-focus":this.hasFocus},tabIndex:this.disabled?-1:0,type:"button",part:"button",onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,disabled:this.disabled,"aria-disabled":this.disabled?"true":null},o("slot",null))}render(){return o(i,{key:"2d499a06768bdc4b9a34774d16c1f1e10804b3d5",id:this.componentId,class:{"is-disabled":this.disabled,destructive:!this.disabled&&this.destructive},onClick:()=>!this.disabled&&this.handleClick(),role:"none",tabIndex:-1,"aria-disabled":this.disabled?"true":null},this.renderElement())}get host(){return this}static get style(){return":host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}"}},[257,"pds-dropdown-menu-item",{componentId:[1,"component-id"],destructive:[4],disabled:[516],download:[1],href:[1],external:[516],target:[513],hasFocus:[32],clickItem:[64]}]),l=a,c=function(){"undefined"!=typeof customElements&&["pds-dropdown-menu-item","pds-icon","pds-link"].forEach((e=>{switch(e){case"pds-dropdown-menu-item":customElements.get(s(e))||customElements.define(s(e),a);break;case"pds-icon":customElements.get(s(e))||r();break;case"pds-link":customElements.get(s(e))||d()}}))};export{l as PdsDropdownMenuItem,c as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as i,h as e,Host as s,transformTag as n}from"@stencil/core/internal/client";import{s as o,l as d}from"./attributes.js";import{a as r,c as a,o as h,f as l,s as p}from"./floating-ui.dom.js";import{d as c}from"./pds-box2.js";const m=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isOpen=!1,this.menuItems=[],this.cleanupAutoUpdate=null,this.triggerObserver=null,this.currentFocusIndex=-1,this.hasHeader=!1,this.placement="bottom-start",this.handleTriggerSlotChange=t=>{this.slotEl=t.target;const i=this.slotEl.assignedElements();this.triggerEl=i[0],this.triggerEl&&(this.triggerEl.onclick=this.handleClick,this.syncTriggerAria()),this.observeTrigger()},this.syncTriggerAria=()=>!!this.triggerEl&&o(this.triggerEl,{"aria-haspopup":"menu","aria-expanded":this.isOpen+""}),this.handleHeaderSlotChange=t=>{this.hasHeader=t.target.assignedElements().length>0},this.handleSlotChange=t=>{this.slotEl=t.target;const i=this.slotEl.assignedElements(),e=["pds-dropdown-menu-item","pds-dropdown-menu-separator","a","button"],s=i.filter((t=>!e.includes(t.tagName.toLowerCase())));if(s.length>0){const t=s.map((t=>t.tagName.toLowerCase())).join(", ");console.warn(`pds-dropdown-menu: Unexpected element(s) found: ${t}. Expected: `+e.join(", "))}this.menuItems=i.filter((t=>{const i=t.tagName.toLowerCase();return"pds-dropdown-menu-item"===i||"a"===i||"button"===i}))},this.toggleDropdown=()=>{this.isOpen=!this.isOpen,this.isOpen?this.openDropdown():this.closeDropdown()},this.openDropdown=()=>{var t;const i=()=>{a(this.triggerEl,this.panelEl,{placement:this.placement,strategy:"fixed",middleware:[h(6),l(),p({padding:5})]}).then((({x:t,y:i})=>{Object.assign(this.panelEl.style,{left:t+"px",top:i+"px"})}))};i(),this.cleanupAutoUpdate=r(this.triggerEl,this.panelEl,i),null===(t=this.host.shadowRoot)||void 0===t||t.querySelector("pds-box").classList.remove("is-hidden"),this.isOpen=!0,this.syncTriggerAria()},this.closeDropdown=()=>{var t;null===(t=this.host.shadowRoot)||void 0===t||t.querySelector("pds-box").classList.add("is-hidden"),this.isOpen=!1,this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),this.syncTriggerAria(),this.currentFocusIndex=-1,this.isFocusInMenu()&&this.triggerEl.focus()},this.handleClick=()=>{this.toggleDropdown()}}componentWillLoad(){this.hasHeader=Array.from(this.host.children).some((t=>"header"===t.getAttribute("slot")))}componentDidRender(){var t;this.panelEl=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("pds-box")}connectedCallback(){this.observeTrigger(),this.syncTriggerAria()}disconnectedCallback(){var t;this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null}observeTrigger(){var t;null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null,this.triggerEl&&"undefined"!=typeof MutationObserver&&(this.triggerObserver=new MutationObserver(d(this.syncTriggerAria,"pds-dropdown-menu: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the menu opens or closes.",this.triggerEl)),this.triggerObserver.observe(this.triggerEl,{attributes:!0,attributeFilter:["aria-haspopup","aria-expanded"]}))}isFocusInMenu(){const t=this.host.getRootNode().activeElement;return null!=t&&this.host.contains(t)}isItemDisabled(t){const i=t.tagName.toLowerCase();return"pds-dropdown-menu-item"===i||"button"===i?t.disabled:"a"===i&&"true"===t.getAttribute("aria-disabled")}getFocusedItemIndex(){const t=document.activeElement;return t?this.menuItems.findIndex((i=>{if(i===t)return!0;if("pds-dropdown-menu-item"===i.tagName.toLowerCase()){const e=i.shadowRoot;if(null==e?void 0:e.contains(t))return!0}return!1})):-1}focusItemByIndex(t){var i,e,s,n,o;if(t>=0&&t<this.menuItems.length){this.currentFocusIndex=t;const d=this.menuItems[t];if("pds-dropdown-menu-item"===d.tagName.toLowerCase()){const t=d,r=null===(i=t.shadowRoot)||void 0===i?void 0:i.querySelector("button"),a=(null===(n=null===(s=null===(e=t.shadowRoot)||void 0===e?void 0:e.querySelector("pds-link"))||void 0===s?void 0:s.shadowRoot)||void 0===n?void 0:n.querySelector("a"))||(null===(o=t.shadowRoot)||void 0===o?void 0:o.querySelector("a"));r?r.focus():a?a.focus():t.focus()}else d.focus()}}focusNextItem(){let t=(this.currentFocusIndex+1)%this.menuItems.length,i=0;const e=this.menuItems.length;for(;i<e&&this.isItemDisabled(this.menuItems[t]);)t=(t+1)%this.menuItems.length,i++;i<e&&this.focusItemByIndex(t)}focusPreviousItem(){let t=this.currentFocusIndex<=0?this.menuItems.length-1:this.currentFocusIndex-1,i=0;const e=this.menuItems.length;for(;i<e&&this.isItemDisabled(this.menuItems[t]);)t=t<=0?this.menuItems.length-1:t-1,i++;i<e&&this.focusItemByIndex(t)}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as i,h as e,Host as s,transformTag as n}from"@stencil/core/internal/client";import{s as o,l as d}from"./attributes.js";import{a as r,c as a,o as h,f as l,s as p}from"./floating-ui.dom.js";import{d as c}from"./pds-box2.js";const m=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.isOpen=!1,this.menuItems=[],this.cleanupAutoUpdate=null,this.triggerObserver=null,this.currentFocusIndex=-1,this.hasHeader=!1,this.placement="bottom-start",this.handleTriggerSlotChange=t=>{this.slotEl=t.target;const i=this.slotEl.assignedElements();this.triggerEl=i[0],this.triggerEl&&(this.triggerEl.onclick=this.handleClick,this.syncTriggerAria()),this.observeTrigger()},this.syncTriggerAria=()=>!!this.triggerEl&&o(this.triggerEl,{"aria-haspopup":"menu","aria-expanded":this.isOpen+""}),this.handleHeaderSlotChange=t=>{this.hasHeader=t.target.assignedElements().length>0},this.handleSlotChange=t=>{this.slotEl=t.target;const i=this.slotEl.assignedElements(),e=["pds-dropdown-menu-item","pds-dropdown-menu-separator","a","button"],s=i.filter((t=>!e.includes(t.tagName.toLowerCase())));if(s.length>0){const t=s.map((t=>t.tagName.toLowerCase())).join(", ");console.warn(`pds-dropdown-menu: Unexpected element(s) found: ${t}. Expected: `+e.join(", "))}this.menuItems=i.filter((t=>{const i=t.tagName.toLowerCase();return"pds-dropdown-menu-item"===i||"a"===i||"button"===i}))},this.toggleDropdown=()=>{this.isOpen=!this.isOpen,this.isOpen?this.openDropdown():this.closeDropdown()},this.openDropdown=()=>{var t;const i=()=>{a(this.triggerEl,this.panelEl,{placement:this.placement,strategy:"fixed",middleware:[h(6),l(),p({padding:5})]}).then((({x:t,y:i})=>{Object.assign(this.panelEl.style,{left:t+"px",top:i+"px"})}))};i(),this.cleanupAutoUpdate=r(this.triggerEl,this.panelEl,i),null===(t=this.host.shadowRoot)||void 0===t||t.querySelector("pds-box").classList.remove("is-hidden"),this.isOpen=!0,this.syncTriggerAria()},this.closeDropdown=()=>{var t;null===(t=this.host.shadowRoot)||void 0===t||t.querySelector("pds-box").classList.add("is-hidden"),this.isOpen=!1,this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),this.syncTriggerAria(),this.currentFocusIndex=-1,this.isFocusInMenu()&&this.triggerEl.focus()},this.handleClick=()=>{this.toggleDropdown()}}componentWillLoad(){this.hasHeader=Array.from(this.host.children).some((t=>"header"===t.getAttribute("slot")))}componentDidRender(){var t;this.panelEl=null===(t=this.host.shadowRoot)||void 0===t?void 0:t.querySelector("pds-box")}connectedCallback(){this.observeTrigger(),this.syncTriggerAria()}disconnectedCallback(){var t;this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=null),null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null}observeTrigger(){var t;null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null,this.triggerEl&&"undefined"!=typeof MutationObserver&&(this.triggerObserver=new MutationObserver(d(this.syncTriggerAria,"pds-dropdown-menu: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the menu opens or closes.",this.triggerEl)),this.triggerObserver.observe(this.triggerEl,{attributes:!0,attributeFilter:["aria-haspopup","aria-expanded"]}))}isFocusInMenu(){const t=this.host.getRootNode().activeElement;return null!=t&&this.host.contains(t)}isItemDisabled(t){const i=t.tagName.toLowerCase();return"pds-dropdown-menu-item"===i||"button"===i?t.disabled:"a"===i&&"true"===t.getAttribute("aria-disabled")}getFocusedItemIndex(){const t=document.activeElement;return t?this.menuItems.findIndex((i=>{if(i===t)return!0;if("pds-dropdown-menu-item"===i.tagName.toLowerCase()){const e=i.shadowRoot;if(null==e?void 0:e.contains(t))return!0}return!1})):-1}focusItemByIndex(t){var i,e,s,n,o;if(t>=0&&t<this.menuItems.length){this.currentFocusIndex=t;const d=this.menuItems[t];if("pds-dropdown-menu-item"===d.tagName.toLowerCase()){const t=d,r=null===(i=t.shadowRoot)||void 0===i?void 0:i.querySelector("button"),a=(null===(n=null===(s=null===(e=t.shadowRoot)||void 0===e?void 0:e.querySelector("pds-link"))||void 0===s?void 0:s.shadowRoot)||void 0===n?void 0:n.querySelector("a"))||(null===(o=t.shadowRoot)||void 0===o?void 0:o.querySelector("a"));r?r.focus():a?a.focus():t.focus()}else d.focus()}}focusNextItem(){let t=(this.currentFocusIndex+1)%this.menuItems.length,i=0;const e=this.menuItems.length;for(;i<e&&this.isItemDisabled(this.menuItems[t]);)t=(t+1)%this.menuItems.length,i++;i<e&&this.focusItemByIndex(t)}focusPreviousItem(){let t=this.currentFocusIndex<=0?this.menuItems.length-1:this.currentFocusIndex-1,i=0;const e=this.menuItems.length;for(;i<e&&this.isItemDisabled(this.menuItems[t]);)t=t<=0?this.menuItems.length-1:t-1,i++;i<e&&this.focusItemByIndex(t)}handleEscapeKeyDown(t){this.isOpen&&"Escape"===t.key&&!t.defaultPrevented&&(t.preventDefault(),this.closeDropdown())}handleKeyDown(t){if(this.isOpen)switch(t.key){case"ArrowDown":t.preventDefault(),this.focusNextItem();break;case"ArrowUp":t.preventDefault(),this.focusPreviousItem();break;case"Home":if(t.preventDefault(),this.menuItems.length>0){let t=0;for(;t<this.menuItems.length&&this.isItemDisabled(this.menuItems[t]);)t++;t<this.menuItems.length&&this.focusItemByIndex(t)}break;case"End":if(t.preventDefault(),this.menuItems.length>0){let t=this.menuItems.length-1;for(;t>=0&&this.isItemDisabled(this.menuItems[t]);)t--;t>=0&&this.focusItemByIndex(t)}break;case"Tab":if(t.shiftKey)this.getFocusedItemIndex()>0&&(t.preventDefault(),this.focusPreviousItem());else{const i=document.activeElement===this.triggerEl,e=this.getFocusedItemIndex();if(i&&this.menuItems.length>0){t.preventDefault();let i=0;for(;i<this.menuItems.length&&this.isItemDisabled(this.menuItems[i]);)i++;i<this.menuItems.length&&this.focusItemByIndex(i)}else if(-1===e&&this.menuItems.length>0){t.preventDefault();let i=0;for(;i<this.menuItems.length&&this.isItemDisabled(this.menuItems[i]);)i++;i<this.menuItems.length&&this.focusItemByIndex(i)}else-1!==e&&(t.preventDefault(),this.focusNextItem())}}}handleWindowClick(t){this.isOpen&&!this.host.contains(t.target)&&t.target!==this.triggerEl&&this.closeDropdown()}render(){return e(s,{key:"18dac4d59ea236fe171f4c16f6571cb1547059c6",id:this.componentId},e("slot",{key:"95201a75a33ccb70dbd51a5cf9d78c76ebf26f65",name:"trigger",onSlotchange:this.handleTriggerSlotChange}),e("pds-box",{key:"7fc588f40f607ad81ad70bf74a525d078d32a80b","border-radius":"sm",display:"flex",direction:"column",class:"pds-dropdown-menu--panel is-hidden",shadow:"100",part:"menu-panel"},e("div",{key:"73d13d94edccb68db7b703f930b50f729334efa8",class:{"pds-dropdown-menu__header":!0,"is-hidden":!this.hasHeader}},e("slot",{key:"7066f3a6f71c8961326f38f0509f1c0cc17098ae",name:"header",onSlotchange:this.handleHeaderSlotChange})),e("div",{key:"9f07ec488b688c58c6422b575015ccd364075fe8",class:"pds-dropdown-menu__items",role:"menu","aria-orientation":"vertical"},e("slot",{key:"d0aad3f9ac3b58779669411523adbb8878dec61c",onSlotchange:this.handleSlotChange}))))}get host(){return this}static get style(){return":host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}.pds-dropdown-menu__header{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1);-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs);padding-inline:calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);text-align:start}.pds-dropdown-menu__items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted(a:not([slot=header])),::slotted(button:not([slot=header])){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive:not([slot=header])){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]:not([slot=header])),::slotted([disabled]:not([disabled=false]):not([slot=header])){cursor:not-allowed;opacity:0.5;pointer-events:none}"}},[257,"pds-dropdown-menu",{componentId:[1,"component-id"],placement:[1],currentFocusIndex:[32],hasHeader:[32]},[[6,"keydown","handleEscapeKeyDown"],[8,"keydown","handleKeyDown"],[8,"click","handleWindowClick"]]]),u=m,b=function(){"undefined"!=typeof customElements&&["pds-dropdown-menu","pds-box"].forEach((t=>{switch(t){case"pds-dropdown-menu":customElements.get(n(t))||customElements.define(n(t),m);break;case"pds-box":customElements.get(n(t))||c()}}))};export{u as PdsDropdownMenu,b as defineCustomElement}
|
package/components/pds-modal2.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as i,createEvent as o,h as e,transformTag as s}from"@stencil/core/internal/client";import{c as n}from"./closest.js";import{u as d}from"./reconnected-content.js";const a=["sm","md","lg","fullscreen"],r=["a[href]","area[href]","button",'input:not([type="hidden"])',"select","textarea","iframe","summary",'[contenteditable]:not([contenteditable="false"])',"[tabindex]"].join(",");function l(t,i){for(const o of Array.from(t.children))p(o,i)}const c=t=>{var i;return t.tabIndex>=0||t.isContentEditable&&!t.hasAttribute("tabindex")&&!(null===(i=t.parentElement)||void 0===i?void 0:i.isContentEditable)};function p(t,o){var e,s,n,d;if(t.hasAttribute("inert"))return;if("slot"===t.localName){const i=t;if(0===(null!==(s=null===(e=i.assignedNodes)||void 0===e?void 0:e.call(i,{flatten:!0}))&&void 0!==s?s:[]).length)return l(t,o);for(const t of i.assignedElements({flatten:!0}))p(t,o);return}const a=!0===(null===(n=t.shadowRoot)||void 0===n?void 0:n.delegatesFocus);t instanceof i&&!a&&c(t)&&t.matches(r)&&!t.matches(":disabled")&&o.push(t),l(null!==(d=t.shadowRoot)&&void 0!==d?d:t,o)}const h=t=>t instanceof HTMLInputElement&&"radio"===t.type&&""!==t.name?t:null;function m(t,i){for(let o=i;o;o=o instanceof ShadowRoot?o.host:o.parentNode)if(o===t)return!0;return!1}const u=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pdsModalOpen=o(this,"pdsModalOpen",7),this.pdsModalClose=o(this,"pdsModalClose",7),this.focusableElements=[],this.backdropDismiss=!0,this.open=!1,this.size="md",this.scrollable=!0,this.disableTopLayer=!1,this.disableInitialFocus=!1,this.focusableElementsArray=[],this.handleBackdropClick=t=>{this.backdropDismiss&&this.open&&t.target.classList.contains("pds-modal__backdrop")&&(t.stopPropagation(),this.isInnermostModal()&&this.hideModal())},this.handleKeyDown=t=>{var i,o,e;if(this.open){if("Escape"===t.key){const s=t;if(!("__pdsActiveElementAtEscape"in s)){const t=document.activeElement;s.__pdsActiveElementAtEscape=t;const o=null!==(i=null==t?void 0:t.closest("dialog"))&&void 0!==i?i:null;s.__pdsTopLayerDialogAtEscape=o,s.__pdsTopLayerDialogWasModalAtEscape=!(!o||!o.matches(":modal"))}const n=s.__pdsActiveElementAtEscape;if(this.disableTopLayer&&n&&n!==document.body&&!this.el.contains(n)&&this.isStackedAboveOverlay(n,null!==(o=s.__pdsTopLayerDialogAtEscape)&&void 0!==o?o:null,null!==(e=s.__pdsTopLayerDialogWasModalAtEscape)&&void 0!==e&&e))return;return t.preventDefault(),void(this.backdropDismiss&&this.isInnermostModal()&&this.hideModal())}if("Tab"===t.key){if(this.disableTopLayer)return;if(t.defaultPrevented)return;const i=function(){var t;let i=document.activeElement;for(;null===(t=null==i?void 0:i.shadowRoot)||void 0===t?void 0:t.activeElement;)i=i.shadowRoot.activeElement;return i}();if(!i||this.modalDialogAbove(i))return;if(this.updateFocusableElements(),0===this.focusableElements.length)return;const o=this.focusableElements[0],e=this.focusableElements[this.focusableElements.length-1],s=this.stopIndex(i),n=s===this.focusableElements.length-1;t.shiftKey&&0===s?(t.preventDefault(),this.focusElement(e)):!t.shiftKey&&n&&(t.preventDefault(),this.focusElement(o))}}}}componentWillLoad(){this.warnOnInvalidSize()}sizeChanged(){this.warnOnInvalidSize()}componentDidLoad(){this.modalRef=this.el.querySelector(".pds-modal__backdrop"),document.addEventListener("keydown",this.handleKeyDown),this.open&&this.showModal()}componentDidRender(){d(this.el.querySelector(".pds-modal"),"dialog.pds-modal__backdrop",".pds-modal")}disconnectedCallback(){document.removeEventListener("keydown",this.handleKeyDown)}handleOpenChange(t){t?this.showModal():this.hideModal()}updateFocusableElements(){this.modalRef&&(this.focusableElements=[],l(this.modalRef,this.focusableElements),this.focusableElements=this.focusableElements.filter((t=>{if("function"==typeof t.checkVisibility)return t.checkVisibility({checkVisibilityCSS:!0});const i=window.getComputedStyle(t);return"none"!==i.display&&"hidden"!==i.visibility})),this.focusableElements=function(t){const i=[];for(const o of t){const t=h(o);if(null===t)continue;const e=i.find((([i])=>i.name===t.name&&i.form===t.form&&i.getRootNode()===t.getRootNode()));e?e.push(t):i.push([t])}const o=new Set(i.map((t=>{var i;return null!==(i=t.find((t=>t.checked)))&&void 0!==i?i:t[0]})));return t.filter((t=>null===h(t)||o.has(t)))}(this.focusableElements))}setInitialFocus(){0!==this.focusableElements.length&&this.focusElement(this.focusableElements[0])}focusElement(t){null==t||t.focus()}async showModal(){if(this.modalRef)try{this.previousActiveElement=document.activeElement,this.disableTopLayer?this.modalRef.show():this.modalRef.showModal(),this.open=!0,setTimeout((()=>{var t,o;if(this.updateFocusableElements(),this.disableInitialFocus){const e=document.activeElement;null!==e&&e!==document.body&&!(null===(t=this.modalRef)||void 0===t?void 0:t.contains(e))||(this.previousActiveElement!==document.body&&"function"==typeof(null===(o=this.previousActiveElement)||void 0===o?void 0:o.focus)?this.previousActiveElement.focus():e instanceof i&&e.blur())}else this.setInitialFocus();this.pdsModalOpen.emit()}),100)}catch(t){console.error("Failed to show modal:",t)}}async hideModal(){if(this.modalRef)try{const t=document.activeElement,i=null!==t&&t!==document.body&&!this.modalRef.contains(t);this.modalRef.close(),this.open=!1,!i&&this.previousActiveElement&&"function"==typeof this.previousActiveElement.focus&&this.previousActiveElement.focus(),this.pdsModalClose.emit()}catch(t){console.error("Failed to hide modal:",t)}}getBackdropZIndex(t){const i=t.querySelector(".pds-modal__backdrop");return i?parseInt(getComputedStyle(i).zIndex,10):-1}isStackedAboveOverlay(t,i,o){if(i&&i!==this.modalRef&&o)return!0;const e=this.getBackdropZIndex(this.el);let s=t;for(;s&&s!==document.body;){const t=getComputedStyle(s),i=parseInt(t.zIndex,10);if("static"!==t.position&&!isNaN(i)&&i>e)return!0;s=s.parentElement}return!1}isInnermostModal(){const t=Array.from(document.querySelectorAll("pds-modal")).filter((t=>t.open));if(0===t.length)return!1;if(!this.el.querySelector(".pds-modal__backdrop"))return!1;const i=t.map((t=>this.getBackdropZIndex(t))),o=Math.max(...i);return this.getBackdropZIndex(this.el)===o}modalDialogAbove(t){var o;for(let e=n("dialog[open]",t);e instanceof i;){if(e===this.modalRef)return!1;if(e.matches(":modal"))return!0;e=n("dialog[open]",null!==(o=e.parentElement)&&void 0!==o?o:e.getRootNode().host)}return!1}stopIndex(t){const i=this.focusableElements.indexOf(t);if(i>=0)return i;for(let i=this.focusableElements.length-1;i>=0;i--)if(m(this.focusableElements[i],t))return i;return-1}resolveSize(){var t;const i=(null!==(t=this.size)&&void 0!==t?t:"").trim()||"md";return a.includes(i)?[i]:/^[a-z0-9.%+\-*/(), ]+$/i.test(o=i)&&/\d/.test(o)&&("undefined"==typeof CSS||CSS.supports("max-width",o))?["custom",i]:[void 0];var o}warnOnInvalidSize(){void 0===this.resolveSize()[0]&&console.warn(`pds-modal: invalid size "${String(this.size).slice(0,50)}", using md`)}render(){const[t="md",i]=this.resolveSize();return e("dialog",{key:"12ea38928ea287f16ffa33e246caa2bfde6fc130",class:{"pds-modal__backdrop":!0,open:this.open},"aria-modal":this.disableTopLayer?"false":"true","aria-labelledby":`${this.componentId}-heading`,onClick:this.handleBackdropClick},e("div",{key:"b9d83cabda56c315d9115f7030e3bdbcf923ec08",class:{"pds-modal":!0,[`pds-modal--${t}`]:!0,"pds-modal--scrollable":this.scrollable},style:void 0!==i?{"--pds-modal-max-width":i}:void 0,part:"modal"},e("slot",{key:"3c5edad1482cb124e503197adf411890573b076d"})))}get el(){return this}static get watchers(){return{size:[{sizeChanged:0}],open:[{handleOpenChange:0}]}}static get style(){return'.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}'}},[260,"pds-modal",{backdropDismiss:[4,"backdrop-dismiss"],componentId:[1,"component-id"],open:[1028],size:[1],scrollable:[4],disableTopLayer:[4,"disable-top-layer"],disableInitialFocus:[4,"disable-initial-focus"],focusableElementsArray:[32],showModal:[64],hideModal:[64]},void 0,{size:[{sizeChanged:0}],open:[{handleOpenChange:0}]}]);function b(){"undefined"!=typeof customElements&&["pds-modal"].forEach((t=>{"pds-modal"===t&&(customElements.get(s(t))||customElements.define(s(t),u))}))}export{u as P,b as d}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as i,createEvent as o,h as e,transformTag as s}from"@stencil/core/internal/client";import{c as n}from"./closest.js";import{u as d}from"./reconnected-content.js";const a=["sm","md","lg","fullscreen"],r=["a[href]","area[href]","button",'input:not([type="hidden"])',"select","textarea","iframe","summary",'[contenteditable]:not([contenteditable="false"])',"[tabindex]"].join(",");function l(t,i){for(const o of Array.from(t.children))h(o,i)}const c=t=>{var i;return t.tabIndex>=0||t.isContentEditable&&!t.hasAttribute("tabindex")&&!(null===(i=t.parentElement)||void 0===i?void 0:i.isContentEditable)};function h(t,o){var e,s,n,d;if(t.hasAttribute("inert"))return;if("slot"===t.localName){const i=t;if(0===(null!==(s=null===(e=i.assignedNodes)||void 0===e?void 0:e.call(i,{flatten:!0}))&&void 0!==s?s:[]).length)return l(t,o);for(const t of i.assignedElements({flatten:!0}))h(t,o);return}const a=!0===(null===(n=t.shadowRoot)||void 0===n?void 0:n.delegatesFocus);t instanceof i&&!a&&c(t)&&t.matches(r)&&!t.matches(":disabled")&&o.push(t),l(null!==(d=t.shadowRoot)&&void 0!==d?d:t,o)}const p=t=>t instanceof HTMLInputElement&&"radio"===t.type&&""!==t.name?t:null;function m(t){const i=[];return l(t,i),function(t){const i=[];for(const o of t){const t=p(o);if(null===t)continue;const e=i.find((([i])=>i.name===t.name&&i.form===t.form&&i.getRootNode()===t.getRootNode()));e?e.push(t):i.push([t])}const o=new Set(i.map((t=>{var i;return null!==(i=t.find((t=>t.checked)))&&void 0!==i?i:t[0]})));return t.filter((t=>null===p(t)||o.has(t)))}(i.filter((t=>{if("function"==typeof t.checkVisibility)return t.checkVisibility({checkVisibilityCSS:!0});const i=window.getComputedStyle(t);return"none"!==i.display&&"hidden"!==i.visibility})))}function u(t,i){for(let o=i;o;o=o instanceof ShadowRoot?o.host:o.parentNode)if(o===t)return!0;return!1}const b=new Map;let f=0;function v(t){return!!t.querySelector("[data-pds-popover-open]")||Array.from(t.querySelectorAll("*")).some((t=>!!t.shadowRoot&&v(t.shadowRoot)))}function g(){var t;let i=document.activeElement;for(;null===(t=null==i?void 0:i.shadowRoot)||void 0===t?void 0:t.activeElement;)i=i.shadowRoot.activeElement;return i}const k=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.pdsModalOpen=o(this,"pdsModalOpen",7),this.pdsModalClose=o(this,"pdsModalClose",7),this.focusableElements=[],this.backdropDismiss=!0,this.open=!1,this.size="md",this.scrollable=!0,this.disableTopLayer=!1,this.disableInitialFocus=!1,this.focusableElementsArray=[],this.handleCancel=t=>{if(t.preventDefault(),!this.open)return;const i=this.innermostOpenModal(),o=i&&u(this.el,i)?i:this.el;o.backdropDismiss&&o.hideModal()},this.handleBackdropClick=t=>{this.backdropDismiss&&this.open&&t.target===this.modalRef&&(t.stopPropagation(),this.innermostOpenModal()===this.el&&this.hideModal())},this.handleKeyDown=t=>{var i,o,e,s;if(this.open){if("Escape"===t.key){const n=t;if(!("__pdsActiveElementAtEscape"in n)){const o=document.activeElement;n.__pdsActiveElementAtEscape=o,n.__pdsDeepActiveElementAtEscape=g();const e=null!==(i=null==o?void 0:o.closest("dialog"))&&void 0!==i?i:null;n.__pdsTopLayerDialogAtEscape=e,n.__pdsTopLayerDialogWasModalAtEscape=!(!e||!e.matches(":modal")),n.__pdsEscapeHandledInside=t.defaultPrevented,n.__pdsInnermostModalAtEscape=this.innermostOpenModal()}if(n.__pdsEscapeHandledInside)return;const d=n.__pdsActiveElementAtEscape;if(this.disableTopLayer&&d&&d!==document.body&&!u(this.el,null!==(o=n.__pdsDeepActiveElementAtEscape)&&void 0!==o?o:d)&&this.isStackedAboveOverlay(d,null!==(e=n.__pdsTopLayerDialogAtEscape)&&void 0!==e?e:null,null!==(s=n.__pdsTopLayerDialogWasModalAtEscape)&&void 0!==s&&s))return;if(this.modalRef&&v(this.modalRef))return;return t.preventDefault(),void(this.backdropDismiss&&n.__pdsInnermostModalAtEscape===this.el&&this.hideModal())}if("Tab"===t.key){if(this.disableTopLayer)return;if(t.defaultPrevented)return;const i=g();if(!i||this.modalDialogAbove(i))return;if(this.updateFocusableElements(),0===this.focusableElements.length)return;const o=this.focusableElements[0],e=this.focusableElements[this.focusableElements.length-1],s=this.stopIndex(i),n=s===this.focusableElements.length-1;t.shiftKey&&0===s?(t.preventDefault(),this.focusElement(e)):!t.shiftKey&&n&&(t.preventDefault(),this.focusElement(o))}}}}componentWillLoad(){this.warnOnInvalidSize()}sizeChanged(){this.warnOnInvalidSize()}componentDidLoad(){this.modalRef=this.el.querySelector(".pds-modal__backdrop"),this.open&&this.showModal()}componentDidRender(){d(this.el.querySelector(".pds-modal"),"dialog.pds-modal__backdrop",".pds-modal")}connectedCallback(){document.addEventListener("keydown",this.handleKeyDown),this.open&&!b.has(this.el)&&b.set(this.el,++f)}disconnectedCallback(){document.removeEventListener("keydown",this.handleKeyDown),b.delete(this.el)}handleOpenChange(t){t?this.showModal():this.hideModal()}updateFocusableElements(){this.modalRef&&(this.focusableElements=m(this.modalRef))}setInitialFocus(){0!==this.focusableElements.length&&this.focusElement(this.focusableElements[0])}focusElement(t){null==t||t.focus()}async showModal(){var t;if(this.modalRef)try{this.modalRef.open||(this.previousActiveElement=document.activeElement),this.disableTopLayer?this.modalRef.show():this.modalRef.showModal(),this.open=!0,b.has(this.el)||b.set(this.el,++f);const o=null!==(t=b.get(this.el))&&void 0!==t?t:0;setTimeout((()=>{var t,e;if(this.updateFocusableElements(),Array.from(b).some((([t,i])=>i>o&&t!==this.el&&(u(this.el,t)||!t.disableTopLayer||this.disableTopLayer))))this.pdsModalOpen.emit();else{if(this.disableInitialFocus){const o=document.activeElement;null!==o&&o!==document.body&&!(null===(t=this.modalRef)||void 0===t?void 0:t.contains(o))||(this.previousActiveElement!==document.body&&"function"==typeof(null===(e=this.previousActiveElement)||void 0===e?void 0:e.focus)?this.previousActiveElement.focus():o instanceof i&&o.blur())}else this.setInitialFocus();this.pdsModalOpen.emit()}}),100)}catch(t){console.error("Failed to show modal:",t)}}async hideModal(){var t;if(this.modalRef)try{const i=document.activeElement,o=null!==i&&i!==document.body&&!this.modalRef.contains(i);if(this.modalRef.close(),this.open=!1,b.delete(this.el),!o){const i=this.previousActiveElement;i&&i!==document.body&&i.isConnected&&(null===(t=i.focus)||void 0===t||t.call(i));const o=g();i&&i!==document.body&&u(i,o)&&!u(this.el,o)||this.focusTopModal()}this.pdsModalClose.emit()}catch(t){console.error("Failed to hide modal:",t)}}focusTopModal(){var t;const i=this.innermostOpenModal(),o=null==i?void 0:i.querySelector(".pds-modal__backdrop");o&&(n("dialog:modal",o)||u(i,this.el))&&(null===(t=m(o).find((t=>!u(this.el,t))))||void 0===t||t.focus())}getBackdropZIndex(t){const i=t.querySelector(".pds-modal__backdrop"),o=i?parseInt(getComputedStyle(i).zIndex,10):-1;return Number.isNaN(o)?0:o}isStackedAboveOverlay(t,i,o){if(i&&i!==this.modalRef&&o&&!u(i,this.el))return!0;const e=this.getBackdropZIndex(this.el);let s=t;for(;s&&s!==document.body;){const t=getComputedStyle(s),i=parseInt(t.zIndex,10);if("static"!==t.position&&!isNaN(i)&&i>e)return!0;s=s.parentElement}return!1}innermostOpenModal(){const t=Array.from(b.keys()).filter((t=>t.isConnected)),i=t.filter((i=>!t.some((t=>t!==i&&u(i,t))))),o=[...i].sort(((t,i)=>function(t,i){for(let o=t;o;o=o.getRootNode().host)for(let t=i;t;t=t.getRootNode().host)if(o.getRootNode()===t.getRootNode())return!!(o.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING);return!1}(t,i)?-1:1)),e=t=>{var i;const e=t.querySelector(".pds-modal__backdrop"),s=e?n("dialog:modal",e):null,d=null==s?void 0:s.closest("pds-modal");return[s?1:0,s&&null!==(i=d&&b.get(d))&&void 0!==i?i:0,this.getBackdropZIndex(t),o.indexOf(t)]};let s=null,d=[-1,-1,-1,-1];for(const t of i){const i=e(t),o=i.findIndex(((t,i)=>t!==d[i]));o>=0&&i[o]>d[o]&&(s=t,d=i)}return s}modalDialogAbove(t){var o;for(let e=n("dialog[open]",t);e instanceof i;){if(e===this.modalRef)return!1;if(e.matches(":modal"))return!0;e=n("dialog[open]",null!==(o=e.parentElement)&&void 0!==o?o:e.getRootNode().host)}return!1}stopIndex(t){const i=this.focusableElements.indexOf(t);if(i>=0)return i;for(let i=this.focusableElements.length-1;i>=0;i--)if(u(this.focusableElements[i],t))return i;return-1}resolveSize(){var t;const i=(null!==(t=this.size)&&void 0!==t?t:"").trim()||"md";return a.includes(i)?[i]:/^[a-z0-9.%+\-*/(), ]+$/i.test(o=i)&&/\d/.test(o)&&("undefined"==typeof CSS||CSS.supports("max-width",o))?["custom",i]:[void 0];var o}warnOnInvalidSize(){void 0===this.resolveSize()[0]&&console.warn(`pds-modal: invalid size "${String(this.size).slice(0,50)}", using md`)}render(){const[t="md",i]=this.resolveSize();return e("dialog",{key:"0b187f36910a859afe57b891f1ebffd1d2d49ab7",class:{"pds-modal__backdrop":!0,open:this.open},"aria-modal":this.disableTopLayer?"false":"true","aria-labelledby":`${this.componentId}-heading`,onClick:this.handleBackdropClick,onCancel:this.handleCancel},e("div",{key:"f5e652d4dae0e7c272b37b63eb9c65f04c69536a",class:{"pds-modal":!0,[`pds-modal--${t}`]:!0,"pds-modal--scrollable":this.scrollable},style:void 0!==i?{"--pds-modal-max-width":i}:void 0,part:"modal"},e("slot",{key:"a954e1694741f78230599c476b270079797a263e"})))}get el(){return this}static get watchers(){return{size:[{sizeChanged:0}],open:[{handleOpenChange:0}]}}static get style(){return'.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}'}},[260,"pds-modal",{backdropDismiss:[4,"backdrop-dismiss"],componentId:[1,"component-id"],open:[1028],size:[1],scrollable:[4],disableTopLayer:[4,"disable-top-layer"],disableInitialFocus:[4,"disable-initial-focus"],focusableElementsArray:[32],showModal:[64],hideModal:[64]},void 0,{size:[{sizeChanged:0}],open:[{handleOpenChange:0}]}]);function x(){"undefined"!=typeof customElements&&["pds-modal"].forEach((t=>{"pds-modal"===t&&(customElements.get(s(t))||customElements.define(s(t),k))}))}export{k as P,x as d}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as i,createEvent as t,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{a as l,c as r,o as a,f as d,s as c,b as h}from"./floating-ui.dom.js";import{c as p,d as u,f as m}from"./utils.js";import{i as b,a as v,m as g}from"./form.js";import{g as _,h as f}from"./index2.js";import{f as x,p as y}from"./i18n-format.js";import{d as w}from"./pds-box2.js";import{d as k}from"./pds-checkbox2.js";import{d as O}from"./pds-chip2.js";import{d as C}from"./pds-icon2.js";import{d as A}from"./pds-loader2.js";import{d as S}from"./pds-text2.js";const j=/^[a-z0-9-]+$/i,T='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',E=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.pdsMultiselectChange=t(this,"pdsMultiselectChange",7),this.pdsMultiselectSearch=t(this,"pdsMultiselectSearch",7),this.pdsMultiselectLoadOptions=t(this,"pdsMultiselectLoadOptions",7),this.pdsMultiselectCreate=t(this,"pdsMultiselectCreate",7),this.pdsMultiselectDismiss=t(this,"pdsMultiselectDismiss",7),this.pdsMultiselectOptionAction=t(this,"pdsMultiselectOptionAction",7),this.hasDisabledSlottedTrigger=!1,this.placeholder="Select...",this.searchPlaceholder="Find...",this.searchOptionsLabel="Search options",this.selectedItemsLabel="Selected items",this.optionsLabel="Options",this.noOptionsFoundLabel="No options found",this.createOptionLabel='Add "{text}"',this.createOptionAriaLabel="Create new tag: {text}",this.itemRemovedLabel="{item} removed",this.pillRemoveLabel="Remove",this.selectedCountLabelOne="{count} item",this.selectedCountLabelOther="{count} items",this.closePanelOnSelect=!1,this.value=[],this.disabled=!1,this.asyncMethod="GET",this.debounce=300,this.fetchTimeout=3e4,this.maxHeight="300px",this.triggerWidth="100%",this.minWidth="250px",this.hideLabel=!1,this.hideSelectedItems=!1,this.selectedDisplay="count",this.pillPosition="inline",this.maxInlinePills=3,this.optionDisplay="text",this.required=!1,this.loading=!1,this.csrfHeaderName="X-CSRF-Token",this.optionActions=!1,this.optionActionLabel="Edit {text}",this.optionActionDescription="Press Right Arrow to {action}",this.isOpen=!1,this.searchQuery="",this.highlightedIndex=-1,this.internalOptions=[],this.selectedItems=[],this.currentPage=1,this.hasMore=!1,this.creating=!1,this.removalAnnouncement="",this.isOpening=!1,this.isClosingViaSelection=!1,this.initialAsyncFetchTriggered=!1,this.pendingUnresolvedFetch=!1,this.handleTriggerClick=e=>{if(!this.disabled){if(e&&!this.slottedTriggerEl&&"pill"===this.selectedDisplay&&"inline"===this.pillPosition&&e.composedPath().some((e=>{var i;return"pds-chip"===(null===(i=e.tagName)||void 0===i?void 0:i.toLowerCase())})))return;this.isOpen?this.closeDropdown():this.openDropdown()}},this.handleTriggerKeyDown=e=>{if(!this.disabled&&e.target===this.activeTriggerEl)switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":e.preventDefault(),this.isOpen||this.openDropdown()}},this.handleSearchInputChange=e=>{this.searchQuery=e.target.value,this.highlightedIndex=-1,this.pdsMultiselectSearch.emit({query:this.searchQuery}),this.asyncUrl&&this.debouncedFetchAsyncOptions(this.searchQuery,1)},this.handleSearchInputKeyDown=e=>{var i,t,s;const o=this.getFilteredOptions();switch(e.key){case"ArrowDown":{e.preventDefault();let t=this.highlightedIndex+1;for(;t<o.length&&(null===(i=o[t])||void 0===i?void 0:i.disabled);)t++;t<o.length&&(this.highlightedIndex=t,this.scrollOptionIntoView());break}case"ArrowUp":{e.preventDefault();let i=Math.max(this.highlightedIndex-1,0);for(;i>0&&(null===(t=o[i])||void 0===t?void 0:t.disabled);)i--;(null===(s=o[i])||void 0===s?void 0:s.disabled)||(this.highlightedIndex=i,this.scrollOptionIntoView());break}case"Enter":if(e.preventDefault(),this.highlightedIndex>=0){const e=o[this.highlightedIndex];e&&this.selectOption(e)}break;case"ArrowRight":{const i=o[this.highlightedIndex];!(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||e.isComposing)&&i&&this.hasOptionAction(i)&&this.isCaretAtEndOfSearch()&&(e.preventDefault(),this.runOptionAction(i));break}case"Tab":{const i=e.shiftKey?void 0:this.getFooterTabbables()[0];null==i||i.focus(),(null==i?void 0:i.matches(":focus"))?e.preventDefault():this.closeDropdown();break}}},this.handleFooterKeyDown=e=>{var i;if("Tab"!==e.key)return;const t=this.getFooterTabbables(),s=e.composedPath()[0];e.shiftKey&&s===t[0]?(e.preventDefault(),null===(i=this.searchInputEl)||void 0===i||i.focus()):e.shiftKey||s!==t[t.length-1]||this.closeDropdown()},this.handleContainerFocusOut=()=>{setTimeout((()=>{var e;if(!this.isOpen||this.isOpening||this.isClosingViaSelection)return;const i=document.activeElement,t=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.contains(i),s=this.el.contains(i);t||s||(this.pdsMultiselectDismiss.emit(),this.closeDropdown())}),0)},this.handleOptionMouseDown=e=>i=>{i.preventDefault(),this.toggleOption(e)},this.handleOptionMouseEnter=(e,i)=>()=>{i.disabled||(this.highlightedIndex=e)},this.handleOptionActionMouseDown=e=>{e.preventDefault(),e.stopPropagation()},this.handleOptionActionClick=e=>()=>{this.runOptionAction(e)},this.handleFooterMouseDown=e=>{e.preventDefault()},this.handleScroll=e=>{if(!this.asyncUrl||!this.hasMore||this.loading)return;const i=e.target;i.scrollHeight-i.scrollTop-i.clientHeight<50&&(this.pdsMultiselectLoadOptions.emit({query:this.searchQuery,page:this.currentPage+1}),this.debouncedFetchAsyncOptions(this.searchQuery,this.currentPage+1))},this.handlePillRemove=e=>()=>{var i,t;if(this.disabled)return;const s=e.id+"";this.value=this.value.filter((e=>e!==s)),this.syncSelectedItems(),this.emitChange({removed:[s]}),this.removalAnnouncement="",queueMicrotask((()=>{this.removalAnnouncement=x(this.itemRemovedLabel,{item:e.text})})),this.isClosingViaSelection=!0,this.isOpen?null===(i=this.searchInputEl)||void 0===i||i.focus():null===(t=this.activeTriggerEl)||void 0===t||t.focus(),setTimeout((()=>{this.isClosingViaSelection=!1}),0)}}connectedCallback(){this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals())}componentWillLoad(){this.originalSearchEmitter=this.pdsMultiselectSearch,this.syncSelectedItems(),this.syncSlottedTrigger()}componentDidLoad(){this.setupDebounce(),this.setupMutationObserver(),this.setupSlotChangeListener(),this.updateFormValue(),requestAnimationFrame((()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.asyncUrl&&this.ensureValueArray().length>0&&(this.initialAsyncFetchTriggered=!0,this.fetchOptions("",1))}setupSlotChangeListener(){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("slot:not([name])");i&&(i.addEventListener("slotchange",(()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.updateOptionsFromSlot())}disconnectedCallback(){var e,i;p(this.pdsMultiselectSearch),null===(e=this.observer)||void 0===e||e.disconnect(),null===(i=this.cleanupAutoUpdate)||void 0===i||i.call(this),this.clearAsyncFetchState()}setupDebounce(){const{pdsMultiselectSearch:e,debounce:i,originalSearchEmitter:t}=this;this.pdsMultiselectSearch=void 0===i?null!=t?t:e:u(e,i),m(e)}valueChanged(e){if("string"==typeof e)try{const i=JSON.parse(e);if(Array.isArray(i))return void(this.value=i)}catch(i){return void(this.value=e?[e]:[])}if(this.syncSelectedItems(),this.updateFormValue(),this.asyncUrl){const e=this.ensureValueArray();e.length>0&&this.selectedItems.length<e.length&&(this.loading?this.pendingUnresolvedFetch=!0:this.fetchOptions("",1))}}optionsChanged(){this.options&&(this.internalOptions=[...this.options])}internalOptionsChanged(){this.syncSelectedItems()}isOpenChanged(){var e;null===(e=this.slottedTriggerEl)||void 0===e||e.setAttribute("aria-expanded",this.isOpen+"")}disabledChanged(){this.syncSlottedTrigger()}async setFocus(){var e;null===(e=this.activeTriggerEl)||void 0===e||e.focus()}async clear(){const e=this.value.length>0||""!==this.searchQuery,i=this.ensureValueArray();this.value=[],this.searchQuery="",this.syncSelectedItems(),this.updateFormValue(),e&&this.emitChange({removed:i})}async refreshOptions(){await this.fetchOptions(this.searchQuery,1)}handleWindowKeyDown(e){var i;this.isOpen&&"Escape"===e.key&&(e.preventDefault(),this.pdsMultiselectDismiss.emit(),this.closeDropdown(),null===(i=this.activeTriggerEl)||void 0===i||i.focus())}get activeTriggerEl(){var e;return null!==(e=this.slottedTriggerEl)&&void 0!==e?e:this.triggerEl}syncSlottedTrigger(){const e=Array.from(this.el.children).find((e=>"trigger"===e.getAttribute("slot")));if(e!==this.slottedTriggerEl){const i=this.slottedTriggerEl;i&&(i.removeEventListener("click",this.handleTriggerClick),i.removeEventListener("keydown",this.handleTriggerKeyDown),i.removeAttribute("aria-expanded"),i.removeAttribute("aria-haspopup"),i.removeAttribute("aria-disabled"),this.setSlottedTriggerDisabled(i,!1)),null==e||e.addEventListener("click",this.handleTriggerClick),null==e||e.addEventListener("keydown",this.handleTriggerKeyDown),this.slottedTriggerEl=e}e&&(e.setAttribute("aria-haspopup","listbox"),e.setAttribute("aria-expanded",this.isOpen+""),this.disabled?e.setAttribute("aria-disabled","true"):e.removeAttribute("aria-disabled"),this.setSlottedTriggerDisabled(e,this.disabled))}setSlottedTriggerDisabled(e,i){if(!("disabled"in e))return void(i&&e.localName.includes("-")&&void 0===customElements.get(e.localName)&&customElements.whenDefined(e.localName).then((()=>this.syncSlottedTrigger())));const t=e;i&&!t.disabled?(t.disabled=!0,this.hasDisabledSlottedTrigger=!0):!i&&this.hasDisabledSlottedTrigger&&(t.disabled=!1,this.hasDisabledSlottedTrigger=!1)}setupMutationObserver(){this.observer=new MutationObserver((e=>{e.some((e=>e.target===this.el))&&this.syncSlottedTrigger();const i=this.slottedTriggerEl;i&&!e.some((e=>!i.contains(e.target)))||this.updateOptionsFromSlot()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptionsFromSlot(){var e;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector("slot:not([name])");if(!i)return;const t=[];i.assignedElements({flatten:!0}).forEach((e=>{if("OPTGROUP"===e.tagName){const i=e.label,s=e.disabled;e.querySelectorAll("option").forEach((e=>{const o=this.parseSlottedOption(e,s);i&&(o.group=i),t.push(o)}))}else"OPTION"===e.tagName&&t.push(this.parseSlottedOption(e,!1))})),t.length>0&&!this.asyncUrl&&!this.options&&(this.internalOptions=t)}parseSlottedOption(e,i){var t;const s={id:e.value,text:(null===(t=e.textContent)||void 0===t?void 0:t.trim())||e.value,disabled:e.disabled||i||void 0},o=e.getAttribute("data-dot-color");o&&(s.dotColor=o);const n=e.getAttribute("data-action-icon");n&&(s.actionIcon=n);const l=e.getAttribute("data-action-label");return l&&(s.actionLabel=l),s}clearAsyncFetchState(){var e;void 0!==this.fetchDebounceTimer&&(window.clearTimeout(this.fetchDebounceTimer),this.fetchDebounceTimer=void 0),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),null===(e=this.abortController)||void 0===e||e.abort(),this.abortController=void 0}debouncedFetchAsyncOptions(e,i=1){var t;if(!this.asyncUrl)return;void 0!==this.fetchDebounceTimer&&window.clearTimeout(this.fetchDebounceTimer);const s=Math.max(0,null!==(t=this.debounce)&&void 0!==t?t:0);this.fetchDebounceTimer=window.setTimeout((()=>{this.fetchDebounceTimer=void 0,this.fetchOptions(e,i)}),s)}syncSelectedItems(){const e=this.ensureValueArray(),i=this.getAllOptions(),t=[],s=new Map(this.selectedItems.map((e=>[e.id+"",e])));e.forEach((e=>{const o=i.find((i=>i.id+""==e+""));o?t.push(o):s.has(e+"")&&t.push(s.get(e+""))})),this.selectedItems=t}ensureValueArray(){if("string"==typeof this.value)try{const e=JSON.parse(this.value);if(Array.isArray(e))return this.value=e,e}catch(e){const i=this.value;return this.value=i?[i]:[],this.value}return Array.isArray(this.value)?this.value:[]}getAllOptions(){return this.options||this.internalOptions}getFilteredOptions(){const e=this.getAllOptions(),i=this.searchQuery.toLowerCase(),t=e.filter((e=>!i||e.text.toLowerCase().includes(i)));return this.createUrl&&this.searchQuery.trim()&&0===t.length?[{id:"__create__",text:this.searchQuery.trim(),isCreateOption:!0}]:t}updateFormValue(){var e;if(!b()&&(null===(e=this.internals)||void 0===e?void 0:e.setFormValue)){const e=this.ensureValueArray(),i=new FormData;e.forEach((e=>{this.name&&i.append(this.name,e)})),this.internals.setFormValue(i),this.required&&0===e.length?this.internals.setValidity({valueMissing:!0},"Please select at least one option.",this.activeTriggerEl):this.internals.setValidity({})}}getCsrfToken(){if(this.csrfToken)return this.csrfToken;const e=document.querySelector('meta[name="csrf-token"]');return(null==e?void 0:e.content)||null}async fetchOptions(e,i=1){var t;if(this.asyncUrl){null===(t=this.abortController)||void 0===t||t.abort(),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),this.abortController=new AbortController,this.loading=!0,this.fetchTimeoutTimer=window.setTimeout((()=>{var e;null===(e=this.abortController)||void 0===e||e.abort(),this.fetchTimeoutTimer=void 0}),this.fetchTimeout);try{let t;try{t=new URL(this.asyncUrl,window.location.origin)}catch(e){throw new TypeError("Invalid asyncUrl: "+this.asyncUrl)}"GET"===this.asyncMethod&&(t.searchParams.set("search",e),t.searchParams.set("page",i+""));const s=this.getCsrfToken(),o={"Content-Type":"application/json",Accept:"application/json"};s&&(o[this.csrfHeaderName||"X-CSRF-Token"]=s);const n=await fetch(""+t,Object.assign({method:this.asyncMethod,signal:this.abortController.signal,headers:o},"POST"===this.asyncMethod&&{body:JSON.stringify({search:e,page:i})}));if(void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),!n.ok)throw Error("Failed to fetch options");const l=await n.json(),r=l.results.map((e=>this.formatResult?this.formatResult(e):"object"==typeof e&&null!==e?Object.assign({id:e.id,text:e.text},e):{id:e+"",text:e+""}));this.internalOptions=1===i?r:[...this.internalOptions,...r],this.hasMore=!!l.totalCount&&this.internalOptions.length<l.totalCount,this.currentPage=i}catch(e){void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),"AbortError"!==e.name&&console.error("PdsMultiselect: Failed to fetch options",e)}finally{if(this.loading=!1,this.pendingUnresolvedFetch){this.pendingUnresolvedFetch=!1;const e=this.ensureValueArray();e.length>0&&this.selectedItems.length<e.length&&this.fetchOptions("",1)}}}}async createOption(e){if(this.createUrl&&e.trim()&&!this.creating){this.creating=!0;try{const i=new URL(this.createUrl,window.location.origin),t=this.getCsrfToken(),s={"Content-Type":"application/json",Accept:"application/json"};t&&(s[this.csrfHeaderName||"X-CSRF-Token"]=t);const o=await fetch(""+i,{method:"POST",headers:s,body:JSON.stringify({text:e.trim()})});if(!o.ok)throw Error("Failed to create option");const n=await o.json(),l=Object.assign({id:n.id,text:n.text},n);this.internalOptions=[...this.internalOptions,l],this.value=[...this.value,l.id+""],this.syncSelectedItems(),this.pdsMultiselectCreate.emit({query:e.trim(),newOption:l}),this.emitChange({added:[l.id+""]}),this.searchQuery="",this.highlightedIndex=-1,requestAnimationFrame((()=>{var e;null===(e=this.searchInputEl)||void 0===e||e.focus()}))}catch(e){console.error("PdsMultiselect: Failed to create option",e)}finally{this.creating=!1}}}getFooterTabbables(){const e=[];return Array.from(this.el.children).filter((e=>"footer"===e.getAttribute("slot"))).forEach((i=>e.push(i,...Array.from(i.querySelectorAll("*"))))),e.map((e=>{var i;return e.matches(T)?e:null===(i=e.shadowRoot)||void 0===i?void 0:i.querySelector(T)})).filter((e=>{var i,t;return!!e&&(null===(t=null===(i=e.checkVisibility)||void 0===i?void 0:i.call(e))||void 0===t||t)}))}isCaretAtEndOfSearch(){var e,i;const t=this.searchInputEl;if(!t)return!0;const s=t.value.length;return(null!==(e=t.selectionStart)&&void 0!==e?e:s)===s&&(null!==(i=t.selectionEnd)&&void 0!==i?i:s)===s}hasOptionAction(e){return this.optionActions&&"string"==typeof e.actionIcon&&j.test(e.actionIcon)&&!e.isCreateOption&&!e.disabled}get isHoverless(){var e,i,t;return null!==(e=this.hoverlessQuery)&&void 0!==e||(this.hoverlessQuery=null===(i=window.matchMedia)||void 0===i?void 0:i.call(window,"(hover: none)")),!!(null===(t=this.hoverlessQuery)||void 0===t?void 0:t.matches)}runOptionAction(e){var i;this.isClosingViaSelection=!0,this.closeDropdown(),null===(i=this.activeTriggerEl)||void 0===i||i.focus(),this.pdsMultiselectOptionAction.emit({option:e})}openDropdown(){this.disabled||(this.isOpening=!0,this.isOpen=!0,this.highlightedIndex=-1,this.asyncUrl&&0===this.internalOptions.length&&!this.initialAsyncFetchTriggered&&this.debouncedFetchAsyncOptions(this.searchQuery,1),this.initialAsyncFetchTriggered=!1,requestAnimationFrame((()=>{var e;this.positionDropdown(),null===(e=this.searchInputEl)||void 0===e||e.focus(),setTimeout((()=>{this.isOpening=!1}),50)})))}closeDropdown(){this.isOpen=!1,this.highlightedIndex=-1,this.searchQuery="",this.isClosingViaSelection&&setTimeout((()=>{this.isClosingViaSelection=!1}),0),this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=void 0)}positionDropdown(){if(!this.containerEl||!this.panelEl)return;const e=this.slottedTriggerEl||this.pillInlineTriggerEl||this.triggerEl||this.containerEl,{minWidth:i,panelWidth:t}=this,s=()=>{r(e,this.panelEl,{placement:"bottom-start",strategy:"fixed",middleware:[a(12),d(),c({padding:8}),h({apply:({rects:e,elements:s})=>{Object.assign(s.floating.style,{width:null!=t?t:e.reference.width+"px",minWidth:i})}})]}).then((({x:e,y:i})=>{this.panelEl&&(this.panelEl.style.left=e+"px",this.panelEl.style.top=i+"px")}))};s();const o=l(e,this.panelEl,s);this.cleanupAutoUpdate=()=>{o(),this.clearAsyncFetchState()}}scrollOptionIntoView(){requestAnimationFrame((()=>{var e;const i=null===(e=this.listboxEl)||void 0===e?void 0:e.querySelector(`[data-index="${this.highlightedIndex}"]`);null==i||i.scrollIntoView({block:"nearest",behavior:"smooth"})}))}emitChange({added:e=[],removed:i=[]}){this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems,added:e,removed:i})}toggleOption(e){var i,t;if(e.disabled)return;if(e.isCreateOption)return void(this.creating||this.createOption(this.searchQuery));const s=e.id+"",o=this.value.includes(s);if(o)this.value=this.value.filter((e=>e!==s));else{if(this.maxSelections&&this.value.length>=this.maxSelections)return;this.value=[...this.value,s]}this.syncSelectedItems(),this.emitChange(o?{removed:[s]}:{added:[s]}),this.closePanelOnSelect?(this.isClosingViaSelection=!0,this.closeDropdown(),null===(i=this.activeTriggerEl)||void 0===i||i.focus()):null===(t=this.searchInputEl)||void 0===t||t.focus()}selectOption(e){this.toggleOption(e)}getGroupedRenderItems(e){const i=[];let t=null;return e.forEach(((e,s)=>{const o=e.group;void 0!==o?(t&&t.group===o||(t={type:"group",group:o,options:[]},i.push(t)),t.options.push({option:e,index:s})):(t=null,i.push({type:"option",option:e,index:s}))})),i}renderOption(e,i,t){const o=t.includes(e.id+""),n=e.isCreateOption,l=e.disabled,r=i===this.highlightedIndex&&!n,a=`${this.componentId}-option-${i}`,d=n&&this.creating,c=this.hasOptionAction(e);return s("li",{key:e.id+"",id:a,class:{"pds-multiselect__option":!0,"pds-multiselect__option--highlighted":r,"pds-multiselect__option--selected":o,"pds-multiselect__option--create":n,"pds-multiselect__option--disabled":l||d},role:"option","aria-selected":o?"true":"false","aria-disabled":l||d?"true":void 0,"aria-label":n?x(this.createOptionAriaLabel,{text:e.text}):void 0,"aria-describedby":c?a+"-action-description":void 0,"data-index":i,onMouseDown:this.handleOptionMouseDown(e),onMouseEnter:this.handleOptionMouseEnter(i,e)},n?s("pds-box",{class:"pds-multiselect__create-option","align-items":"center",gap:"xs"},s("pds-icon",{name:"add",size:"small"}),s("pds-text",null,x(this.createOptionLabel,{text:e.text}))):s("pds-checkbox",{componentId:`${this.componentId}-checkbox-${i}`,checked:o,label:e.text,disabled:l,style:{pointerEvents:"none"}},"chip"===this.optionDisplay&&s("pds-chip",{slot:"label",sentiment:"subtle",dot:!!e.dotColor,"dot-color":e.dotColor},e.text)),c&&this.renderOptionAction(e,a,r))}renderOptionAction(e,i,t){var o;const n=x(null!==(o=e.actionLabel)&&void 0!==o?o:this.optionActionLabel,{text:e.text});return[s("span",{class:"pds-multiselect__option-action",title:n,"aria-hidden":"true",onMouseDown:this.handleOptionActionMouseDown,onClick:this.handleOptionActionClick(e)},(t||this.isHoverless)&&s("pds-icon",{name:e.actionIcon})),s("span",{id:i+"-action-description",hidden:!0},x(this.optionActionDescription,{action:n}))]}renderSelectedItemsList(){return this.hideSelectedItems||0===this.selectedItems.length?null:s("div",{class:"pds-multiselect__selected-section"},s("ul",{class:"pds-multiselect__selected-list",role:"list"},this.selectedItems.map((e=>s("li",{key:e.id+"",class:"pds-multiselect__selected-item"},e.text)))))}renderDropdown(){if(!this.isOpen)return null;const e=this.getFilteredOptions(),i=this.ensureValueArray(),t=!!this.el.querySelector('[slot="empty"]'),o=!!this.el.querySelector('[slot="loading"]'),n=!!this.el.querySelector('[slot="footer"]');return s("div",{class:"pds-multiselect__panel",ref:e=>this.panelEl=e,style:{minWidth:this.minWidth}},s("div",{class:"pds-multiselect__search"},s("pds-icon",{name:"search",size:"small"}),s("input",{ref:e=>this.searchInputEl=e,type:"text",class:"pds-multiselect__search-input",placeholder:this.searchPlaceholder,value:this.searchQuery,"aria-label":this.searchOptionsLabel,"aria-controls":this.componentId+"-listbox","aria-activedescendant":this.highlightedIndex>=0?`${this.componentId}-option-${this.highlightedIndex}`:void 0,role:"combobox","aria-haspopup":"listbox","aria-expanded":"true","aria-autocomplete":"list",autocomplete:"off",onInput:this.handleSearchInputChange,onKeyDown:this.handleSearchInputKeyDown})),this.renderSelectedItemsList(),s("ul",{class:"pds-multiselect__listbox",role:"listbox","aria-multiselectable":"true","aria-label":this.label||this.optionsLabel,id:this.componentId+"-listbox",ref:e=>this.listboxEl=e,style:{maxHeight:this.maxHeight},onScroll:this.handleScroll},this.loading&&s("li",{class:"pds-multiselect__loading",role:"presentation"},o?s("slot",{name:"loading"}):s("pds-loader",{size:"small"})),!this.loading&&0===e.length&&s("li",{class:"pds-multiselect__empty",role:"presentation"},t?s("slot",{name:"empty"}):s("span",null,this.noOptionsFoundLabel)),this.getGroupedRenderItems(e).map(((e,t)=>"group"===e.type?s("li",{key:"group-"+t,role:"group","aria-label":e.group,class:"pds-multiselect__group"},s("span",{class:"pds-multiselect__group-header","aria-hidden":"true"},e.group),s("ul",{class:"pds-multiselect__group-list",role:"presentation"},e.options.map((({option:e,index:t})=>this.renderOption(e,t,i))))):this.renderOption(e.option,e.index,i))),this.hasMore&&!this.loading&&s("li",{class:"pds-multiselect__load-more",role:"presentation"},s("pds-loader",{size:"small"}))),n&&s("div",{class:"pds-multiselect__footer",onMouseDown:this.handleFooterMouseDown,onKeyDown:this.handleFooterKeyDown},s("slot",{name:"footer"})))}renderInlinePills(){if(!(this.selectedItems.length>0))return s("span",{class:"pds-multiselect__trigger-text pds-multiselect__trigger-text--placeholder"},this.placeholder||"Select...");const e=this.disabled?"text":"tag",i=this.selectedItems.slice(0,Math.max(1,this.maxInlinePills)),t=this.selectedItems.length-i.length;return s("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--inline","aria-label":this.selectedItemsLabel},i.map((i=>s("pds-chip",{key:i.id+"","component-id":`${this.componentId}-pill-${i.id}`,variant:e,size:"sm",sentiment:"neutral","dismiss-label":this.pillRemoveLabel,onPdsTagCloseClick:this.handlePillRemove(i)},i.text))),t>0&&s("span",{class:"pds-multiselect__pill-overflow"},"+",t))}renderBelowPills(){if(0===this.selectedItems.length)return null;const e=this.disabled?"text":"tag";return s("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--below","aria-label":this.selectedItemsLabel},this.selectedItems.map((i=>s("pds-chip",{key:i.id+"","component-id":`${this.componentId}-pill-${i.id}`,variant:e,size:"md",sentiment:"neutral","dismiss-label":this.pillRemoveLabel,onPdsTagCloseClick:this.handlePillRemove(i)},i.text))))}getTriggerText(){const e=this.selectedItems.length;return 0===e||"pill"===this.selectedDisplay&&"below"===this.pillPosition?this.placeholder||"Select...":y(this.el,e,this.resolveCountForms())}resolveCountForms(){const e={one:this.selectedCountLabelOne,other:this.selectedCountLabelOther},i=this.selectedCountLabels;if(!i)return e;if("string"==typeof i)try{const t=JSON.parse(i);return t&&"object"==typeof t?Object.assign(Object.assign({},e),t):e}catch(i){return e}return Object.assign(Object.assign({},e),i)}render(){const e=this.selectedItems.length>0;return s(o,{key:"0ef6791666063e0d951d28f980b3bca89cf24287","aria-disabled":this.disabled?"true":null},s("div",{key:"f0ccbabfbd2dcf38f6df52f73f2152eb4bd2828e",class:"pds-multiselect",onFocusout:this.handleContainerFocusOut},this.label&&s("label",{key:"88e01c744644ce1f75c8d5b71dfaeeb79d1ef7df",id:this.componentId+"-label",htmlFor:this.componentId,class:{"pds-multiselect__label":!0,"visually-hidden":this.hideLabel}},this.label),s("div",{key:"0bf4a3b1378ff18e6d6b449507ebbae1bfb279e4",class:"pds-multiselect__wrapper",ref:e=>this.containerEl=e,style:{width:this.triggerWidth}},this.slottedTriggerEl?s("slot",{name:"trigger"}):"pill"===this.selectedDisplay&&"inline"===this.pillPosition?s("div",{ref:e=>this.pillInlineTriggerEl=e||void 0,part:"trigger",class:{"pds-multiselect__trigger":!0,"pds-multiselect__trigger--open":this.isOpen,"pds-multiselect__trigger--disabled":this.disabled,"pds-multiselect__trigger--invalid":this.invalid||!!this.errorMessage,"pds-multiselect__trigger--has-value":e,"pds-multiselect__trigger--pill-inline":!0},onClick:this.handleTriggerClick},this.renderInlinePills(),s("button",{ref:e=>this.triggerEl=e,type:"button",id:this.componentId,part:"pill-toggle",class:"pds-multiselect__pill-toggle",disabled:this.disabled,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-labelledby":this.label?this.componentId+"-label":void 0,"aria-required":this.required?"true":void 0,"aria-describedby":v(this.componentId,this.invalid||!!this.errorMessage,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onKeyDown:this.handleTriggerKeyDown},s("pds-icon",{"aria-hidden":"true",class:"pds-multiselect__icon",icon:_}))):s("button",{ref:e=>this.triggerEl=e,type:"button",part:"trigger",class:{"pds-multiselect__trigger":!0,"pds-multiselect__trigger--open":this.isOpen,"pds-multiselect__trigger--disabled":this.disabled,"pds-multiselect__trigger--invalid":this.invalid||!!this.errorMessage,"pds-multiselect__trigger--has-value":e},id:this.componentId,disabled:this.disabled,"aria-required":this.required?"true":void 0,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-describedby":v(this.componentId,this.invalid||!!this.errorMessage,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},s("span",{class:{"pds-multiselect__trigger-text":!0,"pds-multiselect__trigger-text--placeholder":!e||"pill"===this.selectedDisplay&&"below"===this.pillPosition}},this.getTriggerText()),s("pds-icon",{"aria-hidden":"true",class:"pds-multiselect__icon",icon:_})),this.renderDropdown()),"pill"===this.selectedDisplay&&"below"===this.pillPosition&&this.renderBelowPills(),s("span",{key:"5202a263b219d06891bda739f98db0162bf33c48",class:"visually-hidden","aria-live":"polite","aria-atomic":"true"},this.removalAnnouncement),this.helperMessage&&!(this.errorMessage&&this.errorMessage.length>0)&&s("p",{key:"47f7b55863c5b72d41c4ef1893b9364988fc0b56",class:"pds-multiselect__helper",id:g(this.componentId,"helper")},this.helperMessage),this.errorMessage&&s("p",{key:"3930dc30b2df7179d178873c470aa1da0f6f258c",class:"pds-multiselect__error",id:g(this.componentId,"error")},s("pds-icon",{key:"e31d55db3fd0173c56faa23e34e0be92371983d4",icon:f,size:"small"}),this.errorMessage),s("div",{key:"b3326cc1a5e5886be05327a066e0a7ddd36ccefc",style:{display:"none"}},s("slot",{key:"91559cb9510abce6084348a17516460fd8545ef7"}))))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{debounce:[{setupDebounce:0}],value:[{valueChanged:0}],options:[{optionsChanged:0}],internalOptions:[{internalOptionsChanged:0}],isOpen:[{isOpenChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}"}},[321,"pds-multiselect",{componentId:[1,"component-id"],label:[1],placeholder:[1],searchPlaceholder:[1,"search-placeholder"],searchOptionsLabel:[1,"search-options-label"],selectedItemsLabel:[1,"selected-items-label"],optionsLabel:[1,"options-label"],noOptionsFoundLabel:[1,"no-options-found-label"],createOptionLabel:[1,"create-option-label"],createOptionAriaLabel:[1,"create-option-aria-label"],itemRemovedLabel:[1,"item-removed-label"],pillRemoveLabel:[1,"pill-remove-label"],selectedCountLabelOne:[1,"selected-count-label-one"],selectedCountLabelOther:[1,"selected-count-label-other"],selectedCountLabels:[1,"selected-count-labels"],closePanelOnSelect:[4,"close-panel-on-select"],name:[1],value:[1040],disabled:[4],asyncUrl:[1,"async-url"],asyncMethod:[1,"async-method"],debounce:[2],fetchTimeout:[2,"fetch-timeout"],maxSelections:[2,"max-selections"],maxHeight:[1,"max-height"],triggerWidth:[1,"trigger-width"],minWidth:[1,"min-width"],panelWidth:[1,"panel-width"],hideLabel:[4,"hide-label"],hideSelectedItems:[4,"hide-selected-items"],selectedDisplay:[1,"selected-display"],pillPosition:[1,"pill-position"],maxInlinePills:[2,"max-inline-pills"],optionDisplay:[1,"option-display"],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],required:[4],loading:[1028],options:[16],formatResult:[16],createUrl:[1,"create-url"],csrfToken:[1,"csrf-token"],csrfHeaderName:[1,"csrf-header-name"],optionActions:[4,"option-actions"],optionActionLabel:[1,"option-action-label"],optionActionDescription:[1,"option-action-description"],isOpen:[32],searchQuery:[32],highlightedIndex:[32],internalOptions:[32],selectedItems:[32],currentPage:[32],hasMore:[32],creating:[32],removalAnnouncement:[32],slottedTriggerEl:[32],setFocus:[64],clear:[64],refreshOptions:[64]},[[8,"keydown","handleWindowKeyDown"]],{debounce:[{setupDebounce:0}],value:[{valueChanged:0}],options:[{optionsChanged:0}],internalOptions:[{internalOptionsChanged:0}],isOpen:[{isOpenChanged:0}],disabled:[{disabledChanged:0}]}]),D=E,F=function(){"undefined"!=typeof customElements&&["pds-multiselect","pds-box","pds-checkbox","pds-chip","pds-icon","pds-loader","pds-text"].forEach((e=>{switch(e){case"pds-multiselect":customElements.get(n(e))||customElements.define(n(e),E);break;case"pds-box":customElements.get(n(e))||w();break;case"pds-checkbox":customElements.get(n(e))||k();break;case"pds-chip":customElements.get(n(e))||O();break;case"pds-icon":customElements.get(n(e))||C();break;case"pds-loader":customElements.get(n(e))||A();break;case"pds-text":customElements.get(n(e))||S()}}))};export{D as PdsMultiselect,F as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as i,HTMLElement as e,createEvent as t,h as s,Host as o,transformTag as n}from"@stencil/core/internal/client";import{a as l,c as r,o as a,f as d,s as c,b as h}from"./floating-ui.dom.js";import{c as p,d as u,f as m}from"./utils.js";import{i as b,a as v,m as g}from"./form.js";import{g as _,h as f}from"./index2.js";import{f as x,p as y}from"./i18n-format.js";import{d as w}from"./pds-box2.js";import{d as k}from"./pds-checkbox2.js";import{d as O}from"./pds-chip2.js";import{d as C}from"./pds-icon2.js";import{d as A}from"./pds-loader2.js";import{d as S}from"./pds-text2.js";const j=/^[a-z0-9-]+$/i,T='a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',E=i(class extends e{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.pdsMultiselectChange=t(this,"pdsMultiselectChange",7),this.pdsMultiselectSearch=t(this,"pdsMultiselectSearch",7),this.pdsMultiselectLoadOptions=t(this,"pdsMultiselectLoadOptions",7),this.pdsMultiselectCreate=t(this,"pdsMultiselectCreate",7),this.pdsMultiselectDismiss=t(this,"pdsMultiselectDismiss",7),this.pdsMultiselectOptionAction=t(this,"pdsMultiselectOptionAction",7),this.hasDisabledSlottedTrigger=!1,this.placeholder="Select...",this.searchPlaceholder="Find...",this.searchOptionsLabel="Search options",this.selectedItemsLabel="Selected items",this.optionsLabel="Options",this.noOptionsFoundLabel="No options found",this.createOptionLabel='Add "{text}"',this.createOptionAriaLabel="Create new tag: {text}",this.itemRemovedLabel="{item} removed",this.pillRemoveLabel="Remove",this.selectedCountLabelOne="{count} item",this.selectedCountLabelOther="{count} items",this.closePanelOnSelect=!1,this.value=[],this.disabled=!1,this.asyncMethod="GET",this.debounce=300,this.fetchTimeout=3e4,this.maxHeight="300px",this.triggerWidth="100%",this.minWidth="250px",this.hideLabel=!1,this.hideSelectedItems=!1,this.selectedDisplay="count",this.pillPosition="inline",this.maxInlinePills=3,this.optionDisplay="text",this.required=!1,this.loading=!1,this.csrfHeaderName="X-CSRF-Token",this.optionActions=!1,this.optionActionLabel="Edit {text}",this.optionActionDescription="Press Right Arrow to {action}",this.isOpen=!1,this.searchQuery="",this.highlightedIndex=-1,this.internalOptions=[],this.selectedItems=[],this.currentPage=1,this.hasMore=!1,this.creating=!1,this.removalAnnouncement="",this.isOpening=!1,this.isClosingViaSelection=!1,this.initialAsyncFetchTriggered=!1,this.pendingUnresolvedFetch=!1,this.handleTriggerClick=i=>{if(!this.disabled){if(i&&!this.slottedTriggerEl&&"pill"===this.selectedDisplay&&"inline"===this.pillPosition&&i.composedPath().some((i=>{var e;return"pds-chip"===(null===(e=i.tagName)||void 0===e?void 0:e.toLowerCase())})))return;this.isOpen?this.closeDropdown():this.openDropdown()}},this.handleTriggerKeyDown=i=>{if(!this.disabled&&i.target===this.activeTriggerEl)switch(i.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":i.preventDefault(),this.isOpen||this.openDropdown()}},this.handleSearchInputChange=i=>{this.searchQuery=i.target.value,this.highlightedIndex=-1,this.pdsMultiselectSearch.emit({query:this.searchQuery}),this.asyncUrl&&this.debouncedFetchAsyncOptions(this.searchQuery,1)},this.handleSearchInputKeyDown=i=>{var e,t,s;const o=this.getFilteredOptions();switch(i.key){case"ArrowDown":{i.preventDefault();let t=this.highlightedIndex+1;for(;t<o.length&&(null===(e=o[t])||void 0===e?void 0:e.disabled);)t++;t<o.length&&(this.highlightedIndex=t,this.scrollOptionIntoView());break}case"ArrowUp":{i.preventDefault();let e=Math.max(this.highlightedIndex-1,0);for(;e>0&&(null===(t=o[e])||void 0===t?void 0:t.disabled);)e--;(null===(s=o[e])||void 0===s?void 0:s.disabled)||(this.highlightedIndex=e,this.scrollOptionIntoView());break}case"Enter":if(i.preventDefault(),this.highlightedIndex>=0){const i=o[this.highlightedIndex];i&&this.selectOption(i)}break;case"ArrowRight":{const e=o[this.highlightedIndex];!(i.altKey||i.ctrlKey||i.metaKey||i.shiftKey||i.isComposing)&&e&&this.hasOptionAction(e)&&this.isCaretAtEndOfSearch()&&(i.preventDefault(),this.runOptionAction(e));break}case"Tab":{const e=i.shiftKey?void 0:this.getFooterTabbables()[0];null==e||e.focus(),(null==e?void 0:e.matches(":focus"))?i.preventDefault():this.closeDropdown();break}}},this.handleFooterKeyDown=i=>{var e;if("Tab"!==i.key)return;const t=this.getFooterTabbables(),s=i.composedPath()[0];i.shiftKey&&s===t[0]?(i.preventDefault(),null===(e=this.searchInputEl)||void 0===e||e.focus()):i.shiftKey||s!==t[t.length-1]||this.closeDropdown()},this.handleContainerFocusOut=()=>{setTimeout((()=>{var i;if(!this.isOpen||this.isOpening||this.isClosingViaSelection)return;const e=document.activeElement,t=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.contains(e),s=this.el.contains(e);t||s||(this.pdsMultiselectDismiss.emit(),this.closeDropdown())}),0)},this.handleOptionMouseDown=i=>e=>{e.preventDefault(),this.toggleOption(i)},this.handleOptionClick=i=>{i.preventDefault()},this.handleOptionMouseEnter=(i,e)=>()=>{e.disabled||(this.highlightedIndex=i)},this.handleOptionActionMouseDown=i=>{i.preventDefault(),i.stopPropagation()},this.handleOptionActionClick=i=>()=>{this.runOptionAction(i)},this.handleFooterMouseDown=i=>{i.preventDefault()},this.handleScroll=i=>{if(!this.asyncUrl||!this.hasMore||this.loading)return;const e=i.target;e.scrollHeight-e.scrollTop-e.clientHeight<50&&(this.pdsMultiselectLoadOptions.emit({query:this.searchQuery,page:this.currentPage+1}),this.debouncedFetchAsyncOptions(this.searchQuery,this.currentPage+1))},this.handlePillRemove=i=>()=>{var e,t;if(this.disabled)return;const s=i.id+"";this.value=this.value.filter((i=>i!==s)),this.syncSelectedItems(),this.emitChange({removed:[s]}),this.removalAnnouncement="",queueMicrotask((()=>{this.removalAnnouncement=x(this.itemRemovedLabel,{item:i.text})})),this.isClosingViaSelection=!0,this.isOpen?null===(e=this.searchInputEl)||void 0===e||e.focus():null===(t=this.activeTriggerEl)||void 0===t||t.focus(),setTimeout((()=>{this.isClosingViaSelection=!1}),0)}}connectedCallback(){this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals())}formDisabledCallback(i){i&&!this.el.closest("fieldset[disabled]")||(this.disabled=i)}componentWillLoad(){this.originalSearchEmitter=this.pdsMultiselectSearch,this.syncSelectedItems(),this.syncSlottedTrigger()}componentDidLoad(){this.setupDebounce(),this.setupMutationObserver(),this.setupSlotChangeListener(),this.updateFormValue(),requestAnimationFrame((()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.asyncUrl&&this.ensureValueArray().length>0&&(this.initialAsyncFetchTriggered=!0,this.fetchOptions("",1))}setupSlotChangeListener(){var i;const e=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector("slot:not([name])");e&&(e.addEventListener("slotchange",(()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.updateOptionsFromSlot())}disconnectedCallback(){var i,e;p(this.pdsMultiselectSearch),null===(i=this.observer)||void 0===i||i.disconnect(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.clearAsyncFetchState()}setupDebounce(){const{pdsMultiselectSearch:i,debounce:e,originalSearchEmitter:t}=this;this.pdsMultiselectSearch=void 0===e?null!=t?t:i:u(i,e),m(i)}valueChanged(i){if("string"==typeof i)try{const e=JSON.parse(i);if(Array.isArray(e))return void(this.value=e)}catch(e){return void(this.value=i?[i]:[])}if(this.syncSelectedItems(),this.updateFormValue(),this.asyncUrl){const i=this.ensureValueArray();i.length>0&&this.selectedItems.length<i.length&&(this.loading?this.pendingUnresolvedFetch=!0:this.fetchOptions("",1))}}optionsChanged(){this.options&&(this.internalOptions=[...this.options])}internalOptionsChanged(){this.syncSelectedItems()}isOpenChanged(){var i;null===(i=this.slottedTriggerEl)||void 0===i||i.setAttribute("aria-expanded",this.isOpen+"")}disabledChanged(i){var e,t;if(this.syncSlottedTrigger(),!i||!this.isOpen)return;const s=document.activeElement,o=!(!(null===(e=this.el.shadowRoot)||void 0===e?void 0:e.contains(s))&&!this.el.contains(s));this.closeDropdown(),o&&(null===(t=this.activeTriggerEl)||void 0===t||t.focus())}async setFocus(){var i;null===(i=this.activeTriggerEl)||void 0===i||i.focus()}async clear(){const i=this.value.length>0||""!==this.searchQuery,e=this.ensureValueArray();this.value=[],this.searchQuery="",this.syncSelectedItems(),this.updateFormValue(),i&&this.emitChange({removed:e})}async refreshOptions(){await this.fetchOptions(this.searchQuery,1)}handleWindowKeyDown(i){var e;this.isOpen&&!i.defaultPrevented&&"Escape"===i.key&&(i.preventDefault(),this.pdsMultiselectDismiss.emit(),this.closeDropdown(),null===(e=this.activeTriggerEl)||void 0===e||e.focus())}get activeTriggerEl(){var i;return null!==(i=this.slottedTriggerEl)&&void 0!==i?i:this.triggerEl}syncSlottedTrigger(){const i=Array.from(this.el.children).find((i=>"trigger"===i.getAttribute("slot")));if(i!==this.slottedTriggerEl){const e=this.slottedTriggerEl;e&&(e.removeEventListener("click",this.handleTriggerClick),e.removeEventListener("keydown",this.handleTriggerKeyDown),e.removeAttribute("aria-expanded"),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-disabled"),this.setSlottedTriggerDisabled(e,!1)),null==i||i.addEventListener("click",this.handleTriggerClick),null==i||i.addEventListener("keydown",this.handleTriggerKeyDown),this.slottedTriggerEl=i}i&&(i.setAttribute("aria-haspopup","listbox"),i.setAttribute("aria-expanded",this.isOpen+""),this.disabled?i.setAttribute("aria-disabled","true"):i.removeAttribute("aria-disabled"),this.setSlottedTriggerDisabled(i,this.disabled))}setSlottedTriggerDisabled(i,e){if(!("disabled"in i))return void(e&&i.localName.includes("-")&&void 0===customElements.get(i.localName)&&customElements.whenDefined(i.localName).then((()=>this.syncSlottedTrigger())));const t=i;e&&!t.disabled?(t.disabled=!0,this.hasDisabledSlottedTrigger=!0):!e&&this.hasDisabledSlottedTrigger&&(t.disabled=!1,this.hasDisabledSlottedTrigger=!1)}setupMutationObserver(){this.observer=new MutationObserver((i=>{i.some((i=>i.target===this.el))&&this.syncSlottedTrigger();const e=this.slottedTriggerEl;e&&!i.some((i=>!e.contains(i.target)))||this.updateOptionsFromSlot()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptionsFromSlot(){var i;const e=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector("slot:not([name])");if(!e)return;const t=[];e.assignedElements({flatten:!0}).forEach((i=>{if("OPTGROUP"===i.tagName){const e=i.label,s=i.disabled;i.querySelectorAll("option").forEach((i=>{const o=this.parseSlottedOption(i,s);e&&(o.group=e),t.push(o)}))}else"OPTION"===i.tagName&&t.push(this.parseSlottedOption(i,!1))})),t.length>0&&!this.asyncUrl&&!this.options&&(this.internalOptions=t)}parseSlottedOption(i,e){var t;const s={id:i.value,text:(null===(t=i.textContent)||void 0===t?void 0:t.trim())||i.value,disabled:i.disabled||e||void 0},o=i.getAttribute("data-dot-color");o&&(s.dotColor=o);const n=i.getAttribute("data-action-icon");n&&(s.actionIcon=n);const l=i.getAttribute("data-action-label");return l&&(s.actionLabel=l),s}clearAsyncFetchState(){var i;void 0!==this.fetchDebounceTimer&&(window.clearTimeout(this.fetchDebounceTimer),this.fetchDebounceTimer=void 0),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),null===(i=this.abortController)||void 0===i||i.abort(),this.abortController=void 0}debouncedFetchAsyncOptions(i,e=1){var t;if(!this.asyncUrl)return;void 0!==this.fetchDebounceTimer&&window.clearTimeout(this.fetchDebounceTimer);const s=Math.max(0,null!==(t=this.debounce)&&void 0!==t?t:0);this.fetchDebounceTimer=window.setTimeout((()=>{this.fetchDebounceTimer=void 0,this.fetchOptions(i,e)}),s)}syncSelectedItems(){const i=this.ensureValueArray(),e=this.getAllOptions(),t=[],s=new Map(this.selectedItems.map((i=>[i.id+"",i])));i.forEach((i=>{const o=e.find((e=>e.id+""==i+""));o?t.push(o):s.has(i+"")&&t.push(s.get(i+""))})),this.selectedItems=t}ensureValueArray(){if("string"==typeof this.value)try{const i=JSON.parse(this.value);if(Array.isArray(i))return this.value=i,i}catch(i){const e=this.value;return this.value=e?[e]:[],this.value}return Array.isArray(this.value)?this.value:[]}getAllOptions(){return this.options||this.internalOptions}getFilteredOptions(){const i=this.getAllOptions(),e=this.searchQuery.toLowerCase(),t=i.filter((i=>!e||i.text.toLowerCase().includes(e)));return this.createUrl&&this.searchQuery.trim()&&0===t.length?[{id:"__create__",text:this.searchQuery.trim(),isCreateOption:!0}]:t}updateFormValue(){var i;if(!b()&&(null===(i=this.internals)||void 0===i?void 0:i.setFormValue)){const i=this.ensureValueArray(),e=new FormData;i.forEach((i=>{this.name&&e.append(this.name,i)})),this.internals.setFormValue(e),this.required&&0===i.length?this.internals.setValidity({valueMissing:!0},"Please select at least one option.",this.activeTriggerEl):this.internals.setValidity({})}}getCsrfToken(){if(this.csrfToken)return this.csrfToken;const i=document.querySelector('meta[name="csrf-token"]');return(null==i?void 0:i.content)||null}async fetchOptions(i,e=1){var t;if(this.asyncUrl){null===(t=this.abortController)||void 0===t||t.abort(),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),this.abortController=new AbortController,this.loading=!0,this.fetchTimeoutTimer=window.setTimeout((()=>{var i;null===(i=this.abortController)||void 0===i||i.abort(),this.fetchTimeoutTimer=void 0}),this.fetchTimeout);try{let t;try{t=new URL(this.asyncUrl,window.location.origin)}catch(i){throw new TypeError("Invalid asyncUrl: "+this.asyncUrl)}"GET"===this.asyncMethod&&(t.searchParams.set("search",i),t.searchParams.set("page",e+""));const s=this.getCsrfToken(),o={"Content-Type":"application/json",Accept:"application/json"};s&&(o[this.csrfHeaderName||"X-CSRF-Token"]=s);const n=await fetch(""+t,Object.assign({method:this.asyncMethod,signal:this.abortController.signal,headers:o},"POST"===this.asyncMethod&&{body:JSON.stringify({search:i,page:e})}));if(void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),!n.ok)throw Error("Failed to fetch options");const l=await n.json(),r=l.results.map((i=>this.formatResult?this.formatResult(i):"object"==typeof i&&null!==i?Object.assign({id:i.id,text:i.text},i):{id:i+"",text:i+""}));this.internalOptions=1===e?r:[...this.internalOptions,...r],this.hasMore=!!l.totalCount&&this.internalOptions.length<l.totalCount,this.currentPage=e}catch(i){void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),"AbortError"!==i.name&&console.error("PdsMultiselect: Failed to fetch options",i)}finally{if(this.loading=!1,this.pendingUnresolvedFetch){this.pendingUnresolvedFetch=!1;const i=this.ensureValueArray();i.length>0&&this.selectedItems.length<i.length&&this.fetchOptions("",1)}}}}async createOption(i){if(this.createUrl&&i.trim()&&!this.creating){this.creating=!0;try{const e=new URL(this.createUrl,window.location.origin),t=this.getCsrfToken(),s={"Content-Type":"application/json",Accept:"application/json"};t&&(s[this.csrfHeaderName||"X-CSRF-Token"]=t);const o=await fetch(""+e,{method:"POST",headers:s,body:JSON.stringify({text:i.trim()})});if(!o.ok)throw Error("Failed to create option");const n=await o.json(),l=Object.assign({id:n.id,text:n.text},n);this.internalOptions=[...this.internalOptions,l],this.value=[...this.value,l.id+""],this.syncSelectedItems(),this.pdsMultiselectCreate.emit({query:i.trim(),newOption:l}),this.emitChange({added:[l.id+""]}),this.searchQuery="",this.highlightedIndex=-1,requestAnimationFrame((()=>{var i;null===(i=this.searchInputEl)||void 0===i||i.focus()}))}catch(i){console.error("PdsMultiselect: Failed to create option",i)}finally{this.creating=!1}}}getFooterTabbables(){const i=[];return Array.from(this.el.children).filter((i=>"footer"===i.getAttribute("slot"))).forEach((e=>i.push(e,...Array.from(e.querySelectorAll("*"))))),i.map((i=>{var e;return i.matches(T)?i:null===(e=i.shadowRoot)||void 0===e?void 0:e.querySelector(T)})).filter((i=>{var e,t;return!!i&&(null===(t=null===(e=i.checkVisibility)||void 0===e?void 0:e.call(i))||void 0===t||t)}))}isCaretAtEndOfSearch(){var i,e;const t=this.searchInputEl;if(!t)return!0;const s=t.value.length;return(null!==(i=t.selectionStart)&&void 0!==i?i:s)===s&&(null!==(e=t.selectionEnd)&&void 0!==e?e:s)===s}hasOptionAction(i){return this.optionActions&&"string"==typeof i.actionIcon&&j.test(i.actionIcon)&&!i.isCreateOption&&!i.disabled}get isHoverless(){var i,e,t;return null!==(i=this.hoverlessQuery)&&void 0!==i||(this.hoverlessQuery=null===(e=window.matchMedia)||void 0===e?void 0:e.call(window,"(hover: none)")),!!(null===(t=this.hoverlessQuery)||void 0===t?void 0:t.matches)}runOptionAction(i){var e;this.isClosingViaSelection=!0,this.closeDropdown(),null===(e=this.activeTriggerEl)||void 0===e||e.focus(),this.pdsMultiselectOptionAction.emit({option:i})}openDropdown(){this.disabled||(this.isOpening=!0,this.isOpen=!0,this.highlightedIndex=-1,this.asyncUrl&&0===this.internalOptions.length&&!this.initialAsyncFetchTriggered&&this.debouncedFetchAsyncOptions(this.searchQuery,1),this.initialAsyncFetchTriggered=!1,requestAnimationFrame((()=>{var i;this.positionDropdown(),null===(i=this.searchInputEl)||void 0===i||i.focus(),setTimeout((()=>{this.isOpening=!1}),50)})))}closeDropdown(){this.isOpen=!1,this.highlightedIndex=-1,this.searchQuery="",this.isClosingViaSelection&&setTimeout((()=>{this.isClosingViaSelection=!1}),0),this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=void 0)}positionDropdown(){if(!this.containerEl||!this.panelEl)return;const i=this.slottedTriggerEl||this.pillInlineTriggerEl||this.triggerEl||this.containerEl,{minWidth:e,panelWidth:t}=this,s=()=>{r(i,this.panelEl,{placement:"bottom-start",strategy:"fixed",middleware:[a(12),d(),c({padding:8}),h({apply:({rects:i,elements:s})=>{Object.assign(s.floating.style,{width:null!=t?t:i.reference.width+"px",minWidth:e})}})]}).then((({x:i,y:e})=>{this.panelEl&&(this.panelEl.style.left=i+"px",this.panelEl.style.top=e+"px")}))};s();const o=l(i,this.panelEl,s);this.cleanupAutoUpdate=()=>{o(),this.clearAsyncFetchState()}}scrollOptionIntoView(){requestAnimationFrame((()=>{var i;const e=null===(i=this.listboxEl)||void 0===i?void 0:i.querySelector(`[data-index="${this.highlightedIndex}"]`);null==e||e.scrollIntoView({block:"nearest",behavior:"smooth"})}))}emitChange({added:i=[],removed:e=[]}){this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems,added:i,removed:e})}toggleOption(i){var e,t;if(i.disabled)return;if(i.isCreateOption)return void(this.creating||this.createOption(this.searchQuery));const s=i.id+"",o=this.value.includes(s);if(o)this.value=this.value.filter((i=>i!==s));else{if(this.maxSelections&&this.value.length>=this.maxSelections)return;this.value=[...this.value,s]}this.syncSelectedItems(),this.emitChange(o?{removed:[s]}:{added:[s]}),this.closePanelOnSelect?(this.isClosingViaSelection=!0,this.closeDropdown(),null===(e=this.activeTriggerEl)||void 0===e||e.focus()):null===(t=this.searchInputEl)||void 0===t||t.focus()}selectOption(i){this.toggleOption(i)}getGroupedRenderItems(i){const e=[];let t=null;return i.forEach(((i,s)=>{const o=i.group;void 0!==o?(t&&t.group===o||(t={type:"group",group:o,options:[]},e.push(t)),t.options.push({option:i,index:s})):(t=null,e.push({type:"option",option:i,index:s}))})),e}renderOption(i,e,t){const o=t.includes(i.id+""),n=i.isCreateOption,l=i.disabled,r=e===this.highlightedIndex&&!n,a=`${this.componentId}-option-${e}`,d=n&&this.creating,c=this.hasOptionAction(i);return s("li",{key:i.id+"",id:a,class:{"pds-multiselect__option":!0,"pds-multiselect__option--highlighted":r,"pds-multiselect__option--selected":o,"pds-multiselect__option--create":n,"pds-multiselect__option--disabled":l||d},role:"option","aria-selected":o?"true":"false","aria-disabled":l||d?"true":void 0,"aria-label":n?x(this.createOptionAriaLabel,{text:i.text}):void 0,"aria-describedby":c?a+"-action-description":void 0,"data-index":e,onMouseDown:this.handleOptionMouseDown(i),onClick:this.handleOptionClick,onMouseEnter:this.handleOptionMouseEnter(e,i)},n?s("pds-box",{class:"pds-multiselect__create-option","align-items":"center",gap:"xs"},s("pds-icon",{name:"add",size:"small"}),s("pds-text",null,x(this.createOptionLabel,{text:i.text}))):s("pds-checkbox",{componentId:`${this.componentId}-checkbox-${e}`,checked:o,label:i.text,disabled:l,style:{pointerEvents:"none"}},"chip"===this.optionDisplay&&s("pds-chip",{slot:"label",sentiment:"subtle",dot:!!i.dotColor,"dot-color":i.dotColor,"max-width":"100%"},i.text)),c&&this.renderOptionAction(i,a,r))}renderOptionAction(i,e,t){var o;const n=x(null!==(o=i.actionLabel)&&void 0!==o?o:this.optionActionLabel,{text:i.text});return[s("span",{class:"pds-multiselect__option-action",title:n,"aria-hidden":"true",onMouseDown:this.handleOptionActionMouseDown,onClick:this.handleOptionActionClick(i)},(t||this.isHoverless)&&s("pds-icon",{name:i.actionIcon})),s("span",{id:e+"-action-description",hidden:!0},x(this.optionActionDescription,{action:n}))]}renderSelectedItemsList(){return this.hideSelectedItems||0===this.selectedItems.length?null:s("div",{class:"pds-multiselect__selected-section"},s("ul",{class:"pds-multiselect__selected-list",role:"list"},this.selectedItems.map((i=>s("li",{key:i.id+"",class:"pds-multiselect__selected-item"},i.text)))))}renderDropdown(){if(!this.isOpen)return null;const i=this.getFilteredOptions(),e=this.ensureValueArray(),t=!!this.el.querySelector('[slot="empty"]'),o=!!this.el.querySelector('[slot="loading"]'),n=!!this.el.querySelector('[slot="footer"]');return s("div",{class:"pds-multiselect__panel",ref:i=>this.panelEl=i,style:{minWidth:this.minWidth}},s("div",{class:"pds-multiselect__search"},s("pds-icon",{name:"search",size:"small"}),s("input",{ref:i=>this.searchInputEl=i,type:"text",class:"pds-multiselect__search-input",placeholder:this.searchPlaceholder,value:this.searchQuery,"aria-label":this.searchOptionsLabel,"aria-controls":this.componentId+"-listbox","aria-activedescendant":this.highlightedIndex>=0?`${this.componentId}-option-${this.highlightedIndex}`:void 0,role:"combobox","aria-haspopup":"listbox","aria-expanded":"true","aria-autocomplete":"list",autocomplete:"off",onInput:this.handleSearchInputChange,onKeyDown:this.handleSearchInputKeyDown})),this.renderSelectedItemsList(),s("ul",{class:"pds-multiselect__listbox",role:"listbox","aria-multiselectable":"true","aria-label":this.label||this.optionsLabel,id:this.componentId+"-listbox",ref:i=>this.listboxEl=i,style:{maxHeight:this.maxHeight},onScroll:this.handleScroll},this.loading&&s("li",{class:"pds-multiselect__loading",role:"presentation"},o?s("slot",{name:"loading"}):s("pds-loader",{size:"small"})),!this.loading&&0===i.length&&s("li",{class:"pds-multiselect__empty",role:"presentation"},t?s("slot",{name:"empty"}):s("span",null,this.noOptionsFoundLabel)),this.getGroupedRenderItems(i).map(((i,t)=>"group"===i.type?s("li",{key:"group-"+t,role:"group","aria-label":i.group,class:"pds-multiselect__group"},s("span",{class:"pds-multiselect__group-header","aria-hidden":"true"},i.group),s("ul",{class:"pds-multiselect__group-list",role:"presentation"},i.options.map((({option:i,index:t})=>this.renderOption(i,t,e))))):this.renderOption(i.option,i.index,e))),this.hasMore&&!this.loading&&s("li",{class:"pds-multiselect__load-more",role:"presentation"},s("pds-loader",{size:"small"}))),n&&s("div",{class:"pds-multiselect__footer",onMouseDown:this.handleFooterMouseDown,onKeyDown:this.handleFooterKeyDown},s("slot",{name:"footer"})))}renderInlinePills(){if(!(this.selectedItems.length>0))return s("span",{class:"pds-multiselect__trigger-text pds-multiselect__trigger-text--placeholder"},this.placeholder||"Select...");const i=this.disabled?"text":"tag",e=this.selectedItems.slice(0,Math.max(1,this.maxInlinePills)),t=this.selectedItems.length-e.length;return s("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--inline","aria-label":this.selectedItemsLabel},e.map((e=>s("pds-chip",{key:e.id+"","component-id":`${this.componentId}-pill-${e.id}`,variant:i,size:"sm",sentiment:"neutral","dismiss-label":this.pillRemoveLabel,onPdsTagCloseClick:this.handlePillRemove(e)},e.text))),t>0&&s("span",{class:"pds-multiselect__pill-overflow"},"+",t))}renderBelowPills(){if(0===this.selectedItems.length)return null;const i=this.disabled?"text":"tag";return s("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--below","aria-label":this.selectedItemsLabel},this.selectedItems.map((e=>s("pds-chip",{key:e.id+"","component-id":`${this.componentId}-pill-${e.id}`,variant:i,size:"md",sentiment:"neutral","dismiss-label":this.pillRemoveLabel,onPdsTagCloseClick:this.handlePillRemove(e)},e.text))))}getTriggerText(){const i=this.selectedItems.length;return 0===i||"pill"===this.selectedDisplay&&"below"===this.pillPosition?this.placeholder||"Select...":y(this.el,i,this.resolveCountForms())}resolveCountForms(){const i={one:this.selectedCountLabelOne,other:this.selectedCountLabelOther},e=this.selectedCountLabels;if(!e)return i;if("string"==typeof e)try{const t=JSON.parse(e);return t&&"object"==typeof t?Object.assign(Object.assign({},i),t):i}catch(e){return i}return Object.assign(Object.assign({},i),e)}render(){const i=this.selectedItems.length>0;return s(o,{key:"a7806379c53598d41af91be63ee5bd300cc87755","aria-disabled":this.disabled?"true":null},s("div",{key:"0213d40953f1735b84c038e0e0afd1bc289d45ad",class:"pds-multiselect",onFocusout:this.handleContainerFocusOut},this.label&&s("label",{key:"fa91c2337cdc9f5dea62173aeaa6b56e118a1316",id:this.componentId+"-label",htmlFor:this.componentId,class:{"pds-multiselect__label":!0,"visually-hidden":this.hideLabel}},this.label),s("div",{key:"54209b3edfb3583ab1bcecd2b1df973955abfcc3",class:"pds-multiselect__wrapper",ref:i=>this.containerEl=i,style:{width:this.triggerWidth}},this.slottedTriggerEl?s("slot",{name:"trigger"}):"pill"===this.selectedDisplay&&"inline"===this.pillPosition?s("div",{ref:i=>this.pillInlineTriggerEl=i||void 0,part:"trigger",class:{"pds-multiselect__trigger":!0,"pds-multiselect__trigger--open":this.isOpen,"pds-multiselect__trigger--disabled":this.disabled,"pds-multiselect__trigger--invalid":this.invalid||!!this.errorMessage,"pds-multiselect__trigger--has-value":i,"pds-multiselect__trigger--pill-inline":!0},onClick:this.handleTriggerClick},this.renderInlinePills(),s("button",{ref:i=>this.triggerEl=i,type:"button",id:this.componentId,part:"pill-toggle",class:"pds-multiselect__pill-toggle",disabled:this.disabled,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-labelledby":this.label?this.componentId+"-label":void 0,"aria-required":this.required?"true":void 0,"aria-describedby":v(this.componentId,this.invalid||!!this.errorMessage,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onKeyDown:this.handleTriggerKeyDown},s("pds-icon",{"aria-hidden":"true",class:"pds-multiselect__icon",icon:_}))):s("button",{ref:i=>this.triggerEl=i,type:"button",part:"trigger",class:{"pds-multiselect__trigger":!0,"pds-multiselect__trigger--open":this.isOpen,"pds-multiselect__trigger--disabled":this.disabled,"pds-multiselect__trigger--invalid":this.invalid||!!this.errorMessage,"pds-multiselect__trigger--has-value":i},id:this.componentId,disabled:this.disabled,"aria-required":this.required?"true":void 0,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-describedby":v(this.componentId,this.invalid||!!this.errorMessage,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},s("span",{class:{"pds-multiselect__trigger-text":!0,"pds-multiselect__trigger-text--placeholder":!i||"pill"===this.selectedDisplay&&"below"===this.pillPosition}},this.getTriggerText()),s("pds-icon",{"aria-hidden":"true",class:"pds-multiselect__icon",icon:_})),this.renderDropdown()),"pill"===this.selectedDisplay&&"below"===this.pillPosition&&this.renderBelowPills(),s("span",{key:"e3c1bb5c484d851b332e994cd2a528ae95cbfc4d",class:"visually-hidden","aria-live":"polite","aria-atomic":"true"},this.removalAnnouncement),this.helperMessage&&!(this.errorMessage&&this.errorMessage.length>0)&&s("p",{key:"2009f6487118252ef1ec14170ddd0c6853ad279f",class:"pds-multiselect__helper",id:g(this.componentId,"helper")},this.helperMessage),this.errorMessage&&s("p",{key:"c740f4845ff0c1ccff4633810c1d9d92fb2e8a78",class:"pds-multiselect__error",id:g(this.componentId,"error")},s("pds-icon",{key:"b2406ab3b0957a440593b4b986c98476258349be",icon:f,size:"small"}),this.errorMessage),s("div",{key:"6d2db6563864c71ab92ed9a8d4133efca23b1c55",style:{display:"none"}},s("slot",{key:"2af0e0a7e2410b9850fd15ef524fb388c32dc320"}))))}static get formAssociated(){return!0}get el(){return this}static get watchers(){return{debounce:[{setupDebounce:0}],value:[{valueChanged:0}],options:[{optionsChanged:0}],internalOptions:[{internalOptionsChanged:0}],isOpen:[{isOpenChanged:0}],disabled:[{disabledChanged:0}]}}static get style(){return":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}"}},[321,"pds-multiselect",{componentId:[1,"component-id"],label:[1],placeholder:[1],searchPlaceholder:[1,"search-placeholder"],searchOptionsLabel:[1,"search-options-label"],selectedItemsLabel:[1,"selected-items-label"],optionsLabel:[1,"options-label"],noOptionsFoundLabel:[1,"no-options-found-label"],createOptionLabel:[1,"create-option-label"],createOptionAriaLabel:[1,"create-option-aria-label"],itemRemovedLabel:[1,"item-removed-label"],pillRemoveLabel:[1,"pill-remove-label"],selectedCountLabelOne:[1,"selected-count-label-one"],selectedCountLabelOther:[1,"selected-count-label-other"],selectedCountLabels:[1,"selected-count-labels"],closePanelOnSelect:[4,"close-panel-on-select"],name:[1],value:[1040],disabled:[4],asyncUrl:[1,"async-url"],asyncMethod:[1,"async-method"],debounce:[2],fetchTimeout:[2,"fetch-timeout"],maxSelections:[2,"max-selections"],maxHeight:[1,"max-height"],triggerWidth:[1,"trigger-width"],minWidth:[1,"min-width"],panelWidth:[1,"panel-width"],hideLabel:[4,"hide-label"],hideSelectedItems:[4,"hide-selected-items"],selectedDisplay:[1,"selected-display"],pillPosition:[1,"pill-position"],maxInlinePills:[2,"max-inline-pills"],optionDisplay:[1,"option-display"],errorMessage:[1,"error-message"],helperMessage:[1,"helper-message"],invalid:[4],required:[4],loading:[1028],options:[16],formatResult:[16],createUrl:[1,"create-url"],csrfToken:[1,"csrf-token"],csrfHeaderName:[1,"csrf-header-name"],optionActions:[4,"option-actions"],optionActionLabel:[1,"option-action-label"],optionActionDescription:[1,"option-action-description"],isOpen:[32],searchQuery:[32],highlightedIndex:[32],internalOptions:[32],selectedItems:[32],currentPage:[32],hasMore:[32],creating:[32],removalAnnouncement:[32],slottedTriggerEl:[32],setFocus:[64],clear:[64],refreshOptions:[64]},[[6,"keydown","handleWindowKeyDown"]],{debounce:[{setupDebounce:0}],value:[{valueChanged:0}],options:[{optionsChanged:0}],internalOptions:[{internalOptionsChanged:0}],isOpen:[{isOpenChanged:0}],disabled:[{disabledChanged:0}]}]),D=E,F=function(){"undefined"!=typeof customElements&&["pds-multiselect","pds-box","pds-checkbox","pds-chip","pds-icon","pds-loader","pds-text"].forEach((i=>{switch(i){case"pds-multiselect":customElements.get(n(i))||customElements.define(n(i),E);break;case"pds-box":customElements.get(n(i))||w();break;case"pds-checkbox":customElements.get(n(i))||k();break;case"pds-chip":customElements.get(n(i))||O();break;case"pds-icon":customElements.get(n(i))||C();break;case"pds-loader":customElements.get(n(i))||A();break;case"pds-text":customElements.get(n(i))||S()}}))};export{D as PdsMultiselect,F as defineCustomElement}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as o,transformTag as h}from"@stencil/core/internal/client";import{a as n}from"./closest.js";import{r}from"./reflected-attribute-default.js";import{l,s as a}from"./attributes.js";const c=t=>{const s=t+"",i=s.length,e=s.charCodeAt(0);let o="";for(let t=0;t<i;t++){const h=s.charCodeAt(t);o+=0!==h?h>=1&&h<=31||127===h||0===t&&h>=48&&h<=57||1===t&&h>=48&&h<=57&&45===e?`\\${h.toString(16)} `:0===t&&1===i&&45===h||!(h>=128||45===h||95===h||h>=48&&h<=57||h>=65&&h<=90||h>=97&&h<=122)?"\\"+s.charAt(t):s.charAt(t):"�"}return o},d=t(class t extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsPopoverOpen=i(this,"pdsPopoverOpen",7),this.pdsPopoverClose=i(this,"pdsPopoverClose",7),this.active=!1,this.isComponentMounted=!0,this.hasLoaded=!1,this.generatedPortalId=null,this.triggerEl=null,this.triggerObserver=null,this.portalEl=null,this.isRepositioning=!1,this.scrollDebounceTimer=null,this.resizeDebounceTimer=null,this.movedNodes=[],this.openTimestamp=0,this.popoverTargetAction="show",this.popoverType="auto",this.maxWidth=352,this.placement="right",this.handleTriggerSlotChange=t=>{const s=t.target.assignedElements();null!=this.triggerEl&&this.triggerEl.removeEventListener("click",this.handleTriggerClick),s.length>0?(this.triggerEl=s[0],this.linkTriggerToPortal(),this.triggerEl.addEventListener("click",this.handleTriggerClick)):this.triggerEl=null,this.observeTrigger()},this.handleContentSlotChange=()=>{this.active&&this.updatePortalContent()},this.handleTriggerClick=t=>{switch(t.composedPath().find((t=>t instanceof HTMLAnchorElement&&t.href))||t.preventDefault(),this.popoverTargetAction){case"show":this.show();break;case"hide":this.hide();break;default:this.toggle()}}}restorePlacementDefault(t){this.placement=r(this.el,"placement",t,"right")}componentDidLoad(){var t;this.boundClickOutsideHandler=this.handleClickOutside.bind(this),this.boundEscapeKeyHandler=this.handleEscapeKey.bind(this),this.boundScrollHandler=this.handleScroll.bind(this),this.boundResizeHandler=this.handleResize.bind(this),this.createPortal(),this.hasLoaded=!0;const s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="trigger"]');if(s&&null==this.triggerEl){const t=new("undefined"!=typeof window?window.Event:global.Event)("slotchange");Object.defineProperty(t,"target",{value:s,enumerable:!0}),this.handleTriggerSlotChange(t)}else this.linkTriggerToPortal()}observeTrigger(){var t;null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null,null!=this.triggerEl&&"undefined"!=typeof MutationObserver&&(this.triggerObserver=new MutationObserver(l((()=>this.linkTriggerToPortal()),"pds-popover: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the popover opens or closes.",this.triggerEl)),this.triggerObserver.observe(this.triggerEl,{attributes:!0,attributeFilter:["aria-expanded","aria-controls"]}))}linkTriggerToPortal(){return null!=this.triggerEl&&null!=this.portalEl&&a(this.triggerEl,{"aria-expanded":this.active+"","aria-controls":this.portalEl.id})}connectedCallback(){var t;this.hasLoaded&&(this.isComponentMounted=!0,this.createPortal(),null===(t=this.triggerEl)||void 0===t||t.addEventListener("click",this.handleTriggerClick),this.observeTrigger(),this.linkTriggerToPortal(),this.active&&requestAnimationFrame((()=>this.handlePopoverPositioning())))}disconnectedCallback(){var t;this.el.isConnected||(this.isComponentMounted=!1,this.active&&(this.restorePortalContent(),this.active=!1,this.linkTriggerToPortal(),this.pdsPopoverClose.emit({componentId:this.componentId,popoverType:this.popoverType})),null!=this.triggerEl&&this.triggerEl.removeEventListener("click",this.handleTriggerClick),null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null,this.removeLightDismissListeners(),this.removeScrollAndResizeListeners(),this.clearDebounceTimers(),this.removePortal())}clearDebounceTimers(){null!==this.scrollDebounceTimer&&(clearTimeout(this.scrollDebounceTimer),this.scrollDebounceTimer=null),null!==this.resizeDebounceTimer&&(clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=null)}createPortal(){var s;null===this.portalEl&&(this.portalEl=document.createElement("div"),this.portalEl.className="pds-popover",this.portalEl.style.position="fixed",this.portalEl.style.zIndex="var(--pine-z-index-raised)",this.portalEl.style.maxWidth=this.maxWidth+"px",this.portalEl.style.display="none",this.portalEl.style.opacity="0",this.portalEl.style.visibility="hidden",this.portalEl.style.backgroundColor="var(--pine-color-background-overlay)",this.portalEl.style.borderRadius="var(--pine-dimension-125)",this.portalEl.style.boxShadow="var(--pine-box-shadow-200)",this.portalEl.style.margin="var(--pine-dimension-none)",this.portalEl.style.padding="var(--pine-dimension-md)",this.componentId?this.portalEl.id=this.componentId+"-portal":(null!==(s=this.generatedPortalId)&&void 0!==s||(this.generatedPortalId="pds-popover-portal-"+t.instanceCounter++),this.portalEl.id=this.generatedPortalId),this.portalEl.setAttribute("aria-modal","false"),document.body.appendChild(this.portalEl),this.addPortalFocusStyles())}addPortalFocusStyles(){if(!this.portalEl)return;const t=this.portalEl.id,s=c(t);if(document.querySelector(`style[data-pds-popover-focus="${s}"]`))return;const i=document.createElement("style");i.setAttribute("data-pds-popover-focus",t),i.textContent=`\n #${s}:focus {\n outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;\n outline-offset: var(--pine-border-width, 1px);\n }\n #${s}:focus:not(:focus-visible) {\n outline: none;\n }\n [data-theme="dark"] #${s} {\n border: var(--pine-border);\n }\n `,document.head.appendChild(i)}updatePortalContent(){var t;if(!this.portalEl)return;const s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector(".pds-popover__content-slot-wrapper"),i=null==s?void 0:s.querySelector("slot");i&&i.assignedNodes().forEach((t=>{var s;const i=t.parentNode===this.portalEl,e=this.movedNodes.some((s=>s.node===t));if(i||e)return;const o=document.createComment("pds-popover-placeholder");null===(s=t.parentNode)||void 0===s||s.insertBefore(o,t),this.portalEl.appendChild(t),this.movedNodes.push({node:t,placeholder:o})}))}restorePortalContent(){this.movedNodes.forEach((({node:t,placeholder:s})=>{s.parentNode&&(s.parentNode.insertBefore(t,s),s.parentNode.removeChild(s))})),this.movedNodes=[]}removePortal(){if(this.portalEl){this.portalEl.parentNode&&this.portalEl.parentNode.removeChild(this.portalEl);const t=document.querySelector(`style[data-pds-popover-focus="${c(this.portalEl.id)}"]`);t&&t.parentNode&&t.parentNode.removeChild(t)}this.portalEl=null}async show(){!this.active&&this.portalEl&&(this.active=!0,this.openTimestamp=Date.now(),this.linkTriggerToPortal(),this.updatePortalContent(),this.portalEl.style.display="block",this.portalEl.style.opacity="1",this.portalEl.style.visibility="visible",requestAnimationFrame((()=>{this.isComponentMounted&&this.handlePopoverPositioning()})),this.addScrollAndResizeListeners(),"auto"===this.popoverType&&this.addLightDismissListeners(),this.pdsPopoverOpen.emit({componentId:this.componentId,popoverType:this.popoverType}))}async hide(){if(!this.active||!this.portalEl)return;this.active=!1;const t=this.portalEl.contains(document.activeElement);this.linkTriggerToPortal(),this.restorePortalContent(),this.portalEl.style.display="none",this.portalEl.style.opacity="0",this.portalEl.style.visibility="hidden",t&&this.returnFocusToTrigger(),this.removeLightDismissListeners(),this.removeScrollAndResizeListeners(),this.clearDebounceTimers(),this.pdsPopoverClose.emit({componentId:this.componentId,popoverType:this.popoverType})}async toggle(){this.active?this.hide():this.show()}addLightDismissListeners(){document.addEventListener("click",this.boundClickOutsideHandler,!0),document.addEventListener("keydown",this.boundEscapeKeyHandler)}removeLightDismissListeners(){document.removeEventListener("click",this.boundClickOutsideHandler,!0),document.removeEventListener("keydown",this.boundEscapeKeyHandler)}addScrollAndResizeListeners(){window.addEventListener("scroll",this.boundScrollHandler,!0),window.addEventListener("resize",this.boundResizeHandler)}removeScrollAndResizeListeners(){window.removeEventListener("scroll",this.boundScrollHandler,!0),window.removeEventListener("resize",this.boundResizeHandler)}handleClickOutside(t){var s,i,e,o;if((t.timeStamp?Date.now()-(performance.now()-t.timeStamp):Date.now())<=this.openTimestamp)return;const h=t.target,r=null===(i=(s=h).closest)||void 0===i?void 0:i.call(s,".pds-datepicker-calendar-portal"),l=null==r?void 0:r.pdsDatepicker;if(l&&(n(this.portalEl,l)||n(this.triggerEl,l)))return;const a=null===(e=this.portalEl)||void 0===e?void 0:e.contains(h),c=null===(o=this.triggerEl)||void 0===o?void 0:o.contains(h);a||c||this.hide()}returnFocusToTrigger(){this.triggerEl&&this.triggerEl.focus({preventScroll:!0})}handleEscapeKey(t){"Escape"===t.key&&(t.preventDefault(),t.stopPropagation(),this.hide())}handleScroll(){this.active&&(null!==this.scrollDebounceTimer&&clearTimeout(this.scrollDebounceTimer),this.scrollDebounceTimer=setTimeout((()=>{this.handlePopoverPositioning(),this.scrollDebounceTimer=null}),10))}handleResize(){this.active&&(null!==this.resizeDebounceTimer&&clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=setTimeout((()=>{this.handlePopoverPositioning(),this.resizeDebounceTimer=null}),100))}handlePopoverPositioning(){if(this.isRepositioning)return;if(this.isRepositioning=!0,null==this.triggerEl||null==this.portalEl)return void(this.isRepositioning=!1);const t=this.triggerEl.getBoundingClientRect(),s=this.portalEl.getBoundingClientRect();if(0===t.width||0===t.height)return void(this.isRepositioning=!1);let i=0,e=0;switch(this.placement){case"top":i=t.top-s.height-8,e=t.left+(t.width-s.width)/2;break;case"top-start":i=t.top-s.height-8,e=t.left;break;case"top-end":i=t.top-s.height-8,e=t.right-s.width;break;case"right":i=t.top+(t.height-s.height)/2,e=t.right+8;break;case"right-start":i=t.top,e=t.right+8;break;case"right-end":i=t.bottom-s.height,e=t.right+8;break;case"bottom":i=t.bottom+8,e=t.left+(t.width-s.width)/2;break;case"bottom-start":i=t.bottom+8,e=t.left;break;case"bottom-end":i=t.bottom+8,e=t.right-s.width;break;case"left":i=t.top+(t.height-s.height)/2,e=t.left-s.width-8;break;case"left-start":i=t.top,e=t.left-s.width-8;break;case"left-end":i=t.bottom-s.height,e=t.left-s.width-8}this.portalEl.style.top=i+"px",this.portalEl.style.left=e+"px",setTimeout((()=>{this.isRepositioning=!1}),16)}render(){return e(o,{key:"d804db8c73e0dc2acf0d1bbca20edb77993ff7fd",id:this.componentId},e("span",{key:"5408d1856c9b13b327ea13b43cffc23af925a82f",class:"pds-popover__trigger-wrapper"},e("slot",{key:"9d0ff01292c67bdaa88d49114162c3c65ff8a20d",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),e("div",{key:"cdd38016453ea1838d5718fb8e190cd4304ac8cc",class:"pds-popover__content-slot-wrapper"},e("slot",{key:"9faf60d7be7a2ff3c5fe6c3e4de374bafadf848a",onSlotchange:this.handleContentSlotChange})))}get el(){return this}static get watchers(){return{placement:[{restorePlacementDefault:0}]}}static get style(){return":host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}"}},[257,"pds-popover",{popoverTargetAction:[1,"popover-target-action"],popoverType:[1,"popover-type"],componentId:[1,"component-id"],maxWidth:[2,"max-width"],placement:[1537],active:[32],show:[64],hide:[64],toggle:[64]},void 0,{placement:[{restorePlacementDefault:0}]}]);d.instanceCounter=0;const p=d,u=function(){"undefined"!=typeof customElements&&["pds-popover"].forEach((t=>{"pds-popover"===t&&(customElements.get(h(t))||customElements.define(h(t),d))}))};export{p as PdsPopover,u as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as t,HTMLElement as s,createEvent as i,h as e,Host as o,transformTag as h}from"@stencil/core/internal/client";import{a as n,c as r}from"./closest.js";import{r as l}from"./reflected-attribute-default.js";import{l as a,s as d}from"./attributes.js";const c=t=>{const s=t+"",i=s.length,e=s.charCodeAt(0);let o="";for(let t=0;t<i;t++){const h=s.charCodeAt(t);o+=0!==h?h>=1&&h<=31||127===h||0===t&&h>=48&&h<=57||1===t&&h>=48&&h<=57&&45===e?`\\${h.toString(16)} `:0===t&&1===i&&45===h||!(h>=128||45===h||95===h||h>=48&&h<=57||h>=65&&h<=90||h>=97&&h<=122)?"\\"+s.charAt(t):s.charAt(t):"�"}return o},p=[];function u(){var t;let s=document.activeElement;for(;null===(t=null==s?void 0:s.shadowRoot)||void 0===t?void 0:t.activeElement;)s=s.shadowRoot.activeElement;return s}const v=t(class t extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.pdsPopoverOpen=i(this,"pdsPopoverOpen",7),this.pdsPopoverClose=i(this,"pdsPopoverClose",7),this.active=!1,this.isComponentMounted=!0,this.hasLoaded=!1,this.generatedPortalId=null,this.triggerEl=null,this.triggerObserver=null,this.portalEl=null,this.isRepositioning=!1,this.scrollDebounceTimer=null,this.resizeDebounceTimer=null,this.movedNodes=[],this.openTimestamp=0,this.popoverTargetAction="show",this.popoverType="auto",this.maxWidth=352,this.placement="right",this.handleTriggerSlotChange=t=>{const s=t.target.assignedElements();null!=this.triggerEl&&this.triggerEl.removeEventListener("click",this.handleTriggerClick),s.length>0?(this.triggerEl=s[0],this.linkTriggerToPortal(),this.triggerEl.addEventListener("click",this.handleTriggerClick)):this.triggerEl=null,this.observeTrigger()},this.handleContentSlotChange=()=>{this.active&&this.updatePortalContent()},this.handleTriggerClick=t=>{switch(t.composedPath().find((t=>t instanceof HTMLAnchorElement&&t.href))||t.preventDefault(),this.popoverTargetAction){case"show":this.show();break;case"hide":this.hide();break;default:this.toggle()}},this.shadowFocusStyle=null,this.watchedDialog=null,this.onDialogClose=()=>{this.hide()},this.handleSubmitFromPanel=t=>{this.portalEl&&n(t.target,this.portalEl)&&(n(this.portalEl,t.submitter)||n(this.portalEl,u()))&&(t.preventDefault(),t.stopPropagation())}}restorePlacementDefault(t){this.placement=l(this.el,"placement",t,"right")}componentDidLoad(){var t;this.boundClickOutsideHandler=this.handleClickOutside.bind(this),this.boundEscapeKeyHandler=this.handleEscapeKey.bind(this),this.boundScrollHandler=this.handleScroll.bind(this),this.boundResizeHandler=this.handleResize.bind(this),this.createPortal(),this.hasLoaded=!0;const s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector('slot[name="trigger"]');if(s&&null==this.triggerEl){const t=new("undefined"!=typeof window?window.Event:global.Event)("slotchange");Object.defineProperty(t,"target",{value:s,enumerable:!0}),this.handleTriggerSlotChange(t)}else this.linkTriggerToPortal()}observeTrigger(){var t;null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null,null!=this.triggerEl&&"undefined"!=typeof MutationObserver&&(this.triggerObserver=new MutationObserver(a((()=>this.linkTriggerToPortal()),"pds-popover: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the popover opens or closes.",this.triggerEl)),this.triggerObserver.observe(this.triggerEl,{attributes:!0,attributeFilter:["aria-expanded","aria-controls"]}))}linkTriggerToPortal(){return null!=this.triggerEl&&null!=this.portalEl&&d(this.triggerEl,{"aria-expanded":this.active+"","aria-controls":this.portalEl.id})}connectedCallback(){var t;this.hasLoaded&&(this.isComponentMounted=!0,this.createPortal(),null===(t=this.triggerEl)||void 0===t||t.addEventListener("click",this.handleTriggerClick),this.observeTrigger(),this.linkTriggerToPortal(),this.active&&(this.placePortal(),requestAnimationFrame((()=>this.handlePopoverPositioning()))))}disconnectedCallback(){var t;this.el.isConnected||(this.isComponentMounted=!1,this.unwatchDialogClose(),this.forgetOpen(),this.active&&(this.restorePortalContent(),this.active=!1,this.linkTriggerToPortal(),this.pdsPopoverClose.emit({componentId:this.componentId,popoverType:this.popoverType})),null!=this.triggerEl&&this.triggerEl.removeEventListener("click",this.handleTriggerClick),null===(t=this.triggerObserver)||void 0===t||t.disconnect(),this.triggerObserver=null,this.removeLightDismissListeners(),this.removeScrollAndResizeListeners(),document.removeEventListener("submit",this.handleSubmitFromPanel,!0),this.clearDebounceTimers(),this.removePortal())}clearDebounceTimers(){null!==this.scrollDebounceTimer&&(clearTimeout(this.scrollDebounceTimer),this.scrollDebounceTimer=null),null!==this.resizeDebounceTimer&&(clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=null)}createPortal(){var s;null===this.portalEl&&(this.portalEl=document.createElement("div"),this.portalEl.className="pds-popover",this.portalEl.style.position="fixed",this.portalEl.style.zIndex="var(--pine-z-index-raised)",this.portalEl.style.maxWidth=this.maxWidth+"px",this.portalEl.style.display="none",this.portalEl.style.opacity="0",this.portalEl.style.visibility="hidden",this.portalEl.style.backgroundColor="var(--pine-color-background-overlay)",this.portalEl.style.borderRadius="var(--pine-dimension-125)",this.portalEl.style.boxShadow="var(--pine-box-shadow-200)",this.portalEl.style.margin="var(--pine-dimension-none)",this.portalEl.style.padding="var(--pine-dimension-md)",this.componentId?this.portalEl.id=this.componentId+"-portal":(null!==(s=this.generatedPortalId)&&void 0!==s||(this.generatedPortalId="pds-popover-portal-"+t.instanceCounter++),this.portalEl.id=this.generatedPortalId),document.body.appendChild(this.portalEl),this.addPortalFocusStyles())}addPortalFocusStyles(){if(!this.portalEl)return;const t=this.portalEl.id,s=c(t);if(document.querySelector(`style[data-pds-popover-focus="${s}"]`))return;const i=document.createElement("style");i.setAttribute("data-pds-popover-focus",t),i.textContent=`\n #${s}:focus {\n outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;\n outline-offset: var(--pine-border-width, 1px);\n }\n #${s}:focus:not(:focus-visible) {\n outline: none;\n }\n [data-theme="dark"] #${s} {\n border: var(--pine-border);\n }\n `,document.head.appendChild(i)}updatePortalContent(){var t;if(!this.portalEl)return;const s=null===(t=this.el.shadowRoot)||void 0===t?void 0:t.querySelector(".pds-popover__content-slot-wrapper"),i=null==s?void 0:s.querySelector("slot");i&&i.assignedNodes().forEach((t=>{var s;const i=t.parentNode===this.portalEl,e=this.movedNodes.some((s=>s.node===t));if(i||e)return;const o=document.createComment("pds-popover-placeholder");null===(s=t.parentNode)||void 0===s||s.insertBefore(o,t),this.portalEl.appendChild(t),this.movedNodes.push({node:t,placeholder:o})}))}restorePortalContent(){this.movedNodes.forEach((({node:t,placeholder:s})=>{s.parentNode&&(s.parentNode.insertBefore(t,s),s.parentNode.removeChild(s))})),this.movedNodes=[]}copyFocusStylesInto(t){var s,i,e;if(!(t instanceof ShadowRoot))return null===(s=this.shadowFocusStyle)||void 0===s||s.remove(),void(this.shadowFocusStyle=null);if((null===(i=this.shadowFocusStyle)||void 0===i?void 0:i.parentNode)===t||!this.portalEl)return;const o=document.querySelector(`style[data-pds-popover-focus="${c(this.portalEl.id)}"]`);o&&(null===(e=this.shadowFocusStyle)||void 0===e||e.remove(),this.shadowFocusStyle=o.cloneNode(!0),t.appendChild(this.shadowFocusStyle))}removePortal(){var t;if(null===(t=this.shadowFocusStyle)||void 0===t||t.remove(),this.shadowFocusStyle=null,this.portalEl){this.portalEl.parentNode&&this.portalEl.parentNode.removeChild(this.portalEl);const t=document.querySelector(`style[data-pds-popover-focus="${c(this.portalEl.id)}"]`);t&&t.parentNode&&t.parentNode.removeChild(t)}this.portalEl=null}async show(){!this.active&&this.portalEl&&(this.active=!0,this.openTimestamp=Date.now(),this.linkTriggerToPortal(),this.placePortal(),this.updatePortalContent(),"auto"===this.popoverType&&this.portalEl.setAttribute("data-pds-popover-open",""),this.portalEl.style.display="block",this.portalEl.style.opacity="1",this.portalEl.style.visibility="visible",requestAnimationFrame((()=>{this.isComponentMounted&&this.handlePopoverPositioning()})),this.addScrollAndResizeListeners(),document.addEventListener("submit",this.handleSubmitFromPanel,!0),"auto"===this.popoverType&&(p.push(this),this.addLightDismissListeners()),this.pdsPopoverOpen.emit({componentId:this.componentId,popoverType:this.popoverType}))}async hide(){if(!this.active||!this.portalEl)return;this.active=!1,this.unwatchDialogClose();const t=n(this.portalEl,u());this.linkTriggerToPortal(),this.restorePortalContent(),this.portalEl.style.border="",this.portalEl.removeAttribute("data-pds-popover-open"),this.portalEl.style.display="none",this.portalEl.style.opacity="0",this.portalEl.style.visibility="hidden",t&&this.returnFocusToTrigger(),this.forgetOpen(),this.removeLightDismissListeners(),this.removeScrollAndResizeListeners(),document.removeEventListener("submit",this.handleSubmitFromPanel,!0),this.clearDebounceTimers(),this.pdsPopoverClose.emit({componentId:this.componentId,popoverType:this.popoverType})}async toggle(){this.active?this.hide():this.show()}placePortal(){var t,s;if(!this.portalEl)return;const i=r("dialog[open]",this.el);if(!i)return this.unwatchDialogClose(),this.portalEl.style.border="",this.portalEl.parentElement!==document.body&&document.body.appendChild(this.portalEl),void this.copyFocusStylesInto(document);const e=r("form",this.el);(null===(t=this.el.parentElement)||void 0===t?void 0:t.shadowRoot)||e&&n(i,e)?this.portalEl.parentNode!==i&&i.appendChild(this.portalEl):this.el.nextElementSibling!==this.portalEl&&(null===(s=this.el.parentNode)||void 0===s||s.insertBefore(this.portalEl,this.el.nextSibling)),this.watchDialogClose(i);const o=this.portalEl.getRootNode();this.copyFocusStylesInto(o),this.portalEl.style.border=o instanceof ShadowRoot&&r('[data-theme="dark"]',this.el)?"var(--pine-border)":""}forgetOpen(){const t=p.indexOf(this);t>=0&&p.splice(t,1)}takesEscapeFrom(t){var s,i;const e=null!==(i=null===(s=t.composedPath)||void 0===s?void 0:s.call(t)[0])&&void 0!==i?i:t.target,o=r("dialog[open]",e);return!(o&&!n(o,this.portalEl)&&(o.classList.contains("pds-modal__backdrop")||o.matches(":modal")))}addLightDismissListeners(){document.addEventListener("click",this.boundClickOutsideHandler,!0),document.addEventListener("keydown",this.boundEscapeKeyHandler)}watchDialogClose(t){this.watchedDialog!==t&&(this.unwatchDialogClose(),this.watchedDialog=t,t.addEventListener("close",this.onDialogClose))}unwatchDialogClose(){var t;null===(t=this.watchedDialog)||void 0===t||t.removeEventListener("close",this.onDialogClose),this.watchedDialog=null}removeLightDismissListeners(){document.removeEventListener("click",this.boundClickOutsideHandler,!0),document.removeEventListener("keydown",this.boundEscapeKeyHandler)}addScrollAndResizeListeners(){window.addEventListener("scroll",this.boundScrollHandler,!0),window.addEventListener("resize",this.boundResizeHandler)}removeScrollAndResizeListeners(){window.removeEventListener("scroll",this.boundScrollHandler,!0),window.removeEventListener("resize",this.boundResizeHandler)}handleClickOutside(t){var s,i;if((t.timeStamp?Date.now()-(performance.now()-t.timeStamp):Date.now())<=this.openTimestamp)return;const e=null!==(i=null===(s=t.composedPath)||void 0===s?void 0:s.call(t)[0])&&void 0!==i?i:t.target,o=r(".pds-datepicker-calendar-portal",e),h=null==o?void 0:o.pdsDatepicker;if(h&&(n(this.portalEl,h)||n(this.triggerEl,h)))return;const l=n(this.portalEl,e),a=n(this.triggerEl,e);l||a||this.hide()}returnFocusToTrigger(){this.triggerEl&&this.triggerEl.focus({preventScroll:!0})}handleEscapeKey(t){"Escape"!==t.key||t.defaultPrevented||[...p].reverse().find((s=>s.takesEscapeFrom(t)))===this&&(t.preventDefault(),t.stopPropagation(),this.hide())}handleScroll(){this.active&&(null!==this.scrollDebounceTimer&&clearTimeout(this.scrollDebounceTimer),this.scrollDebounceTimer=setTimeout((()=>{this.handlePopoverPositioning(),this.scrollDebounceTimer=null}),10))}handleResize(){this.active&&(null!==this.resizeDebounceTimer&&clearTimeout(this.resizeDebounceTimer),this.resizeDebounceTimer=setTimeout((()=>{this.handlePopoverPositioning(),this.resizeDebounceTimer=null}),100))}handlePopoverPositioning(){if(this.isRepositioning)return;if(this.isRepositioning=!0,null==this.triggerEl||null==this.portalEl)return void(this.isRepositioning=!1);const t=this.triggerEl.getBoundingClientRect(),s=this.portalEl.getBoundingClientRect();if(0===t.width||0===t.height)return void(this.isRepositioning=!1);let i=0,e=0;switch(this.placement){case"top":i=t.top-s.height-8,e=t.left+(t.width-s.width)/2;break;case"top-start":i=t.top-s.height-8,e=t.left;break;case"top-end":i=t.top-s.height-8,e=t.right-s.width;break;case"right":i=t.top+(t.height-s.height)/2,e=t.right+8;break;case"right-start":i=t.top,e=t.right+8;break;case"right-end":i=t.bottom-s.height,e=t.right+8;break;case"bottom":i=t.bottom+8,e=t.left+(t.width-s.width)/2;break;case"bottom-start":i=t.bottom+8,e=t.left;break;case"bottom-end":i=t.bottom+8,e=t.right-s.width;break;case"left":i=t.top+(t.height-s.height)/2,e=t.left-s.width-8;break;case"left-start":i=t.top,e=t.left-s.width-8;break;case"left-end":i=t.bottom-s.height,e=t.left-s.width-8}this.portalEl.style.top=i+"px",this.portalEl.style.left=e+"px";const o=this.portalEl.getBoundingClientRect();(Math.abs(o.top-i)>.5||Math.abs(o.left-e)>.5)&&(this.portalEl.style.top=2*i-o.top+"px",this.portalEl.style.left=2*e-o.left+"px"),setTimeout((()=>{this.isRepositioning=!1}),16)}render(){return e(o,{key:"da8a0c715df1199231b1265085f3f9ae0234032d",id:this.componentId},e("span",{key:"f35023492399420829cec2e88556462f5ac1663e",class:"pds-popover__trigger-wrapper"},e("slot",{key:"38ebe92eebb87665467b3f92ff94dc8095450063",name:"trigger",onSlotchange:this.handleTriggerSlotChange})),e("div",{key:"8917930f4520544d14bbd68b4c7936dd60af19e3",class:"pds-popover__content-slot-wrapper"},e("slot",{key:"28d3f9112256edd95721a79a7072a9e35a3712bf",onSlotchange:this.handleContentSlotChange})))}get el(){return this}static get watchers(){return{placement:[{restorePlacementDefault:0}]}}static get style(){return":host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}"}},[257,"pds-popover",{popoverTargetAction:[1,"popover-target-action"],popoverType:[1,"popover-type"],componentId:[1,"component-id"],maxWidth:[2,"max-width"],placement:[1537],active:[32],show:[64],hide:[64],toggle:[64]},void 0,{placement:[{restorePlacementDefault:0}]}]);v.instanceCounter=0;const m=v,f=function(){"undefined"!=typeof customElements&&["pds-popover"].forEach((t=>{"pds-popover"===t&&(customElements.get(h(t))||customElements.define(h(t),v))}))};export{m as PdsPopover,f as defineCustomElement}
|
package/components/pds-radio.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{proxyCustomElement as e,HTMLElement as i,createEvent as r,h as a,Host as s,transformTag as o}from"@stencil/core/internal/client";import{H as d}from"./attributes.js";import{e as n,a as t,m as l}from"./form.js";import{h as c}from"./index2.js";import{d as p}from"./pds-icon2.js";const h=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.pdsRadioChange=r(this,"pdsRadioChange",7),this._type="radio",this.hostKeeper=new d,this._hasImage=!1,this.checked=!1,this.disabled=!1,this.hasBorder=!1,this.invalid=!1,this.required=!1,this.handleRadioChange=e=>{if(this.disabled)return;const i=e.target.checked;this.el.closest("pds-radio-group")||this.pdsRadioChange.emit(i)}}hasImageSlot(){return!!this.el.querySelector('[slot="image"]')}hasImage(){return this._hasImage}classNames(){const e=[];return this.invalid&&e.push("is-invalid"),this.disabled&&e.push("is-disabled"),this.hasBorder&&e.push("has-border"),this.hasImage()&&e.push("has-image"),e.join(" ")}componentWillLoad(){this._hasImage=this.hasImageSlot()}connectedCallback(){this.hostKeeper.connect(this.el),n(this.el,(()=>this._type))}disconnectedCallback(){this.hostKeeper.disconnect()}componentDidRender(){const e=this.el.querySelector(".pds-radio__image-container:not([hidden])");Array.from(this.el.querySelectorAll(".pds-radio__image-container[hidden], .pds-radio__content-wrapper[hidden], label[hidden], .pds-radio__message[hidden]")).forEach((i=>{const r=i.querySelector('[slot="image"]');null!==r&&null!==e&&e.appendChild(r),i.remove()}))}render(){const e=()=>[a("label",{htmlFor:this.componentId,key:this.componentId+"-label"},a("input",{key:"ccd618855831bcee309e815f2cd2712fd4e8fe1f","aria-describedby":t(this.componentId,this.invalid,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid?"true":void 0,type:"radio",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleRadioChange,class:this.hasImage()?"visually-hidden":""}),a("span",{key:"2e372a880c28f48fb804bac2518208082c141fad",class:this.hideLabel?"visually-hidden":""},this.label)),this.helperMessage&&a("div",{key:this.componentId+"-helper",class:"pds-radio__message",id:l(this.componentId,"helper")},this.helperMessage),this.errorMessage&&a("div",{key:this.componentId+"-error",class:"pds-radio__message pds-radio__message--error",id:l(this.componentId,"error"),"aria-live":"assertive"},a("pds-icon",{key:"889d502575f6a162f450b6b58d76a6f6f1c74e4b",icon:c,size:"small"}),this.errorMessage)],i=this.classNames();return this.hostKeeper.record(i),a(s,{key:"374003032b28407581a55f1fb0a304c49acf3c16",class:i},this.hasImage()&&a("div",{key:"7eeb516267de1afcfa85fc7567999db488c2f4f5",class:"pds-radio__image-container",part:"image-container"},a("slot",{key:"a312fea06f0c015bffab3bb392ff04d4913fd1c0",name:"image",onSlotchange:()=>this._hasImage=this.hasImageSlot()})),this.hasImage()?a("div",{class:"pds-radio__content-wrapper"},e()):e())}get el(){return this}static get style(){return'.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)}.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.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{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-text-primary);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{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.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 var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) 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 label.sc-pds-radio::after{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)}'}},[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]}]),b=h,m=function(){"undefined"!=typeof customElements&&["pds-radio","pds-icon"].forEach((e=>{switch(e){case"pds-radio":customElements.get(o(e))||customElements.define(o(e),h);break;case"pds-icon":customElements.get(o(e))||p()}}))};export{b as PdsRadio,m as defineCustomElement}
|
|
1
|
+
import{proxyCustomElement as e,HTMLElement as i,createEvent as r,h as a,Host as s,transformTag as o}from"@stencil/core/internal/client";import{H as d}from"./attributes.js";import{e as n,a as t,m as l}from"./form.js";import{h as c}from"./index2.js";import{d as p}from"./pds-icon2.js";const h=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.pdsRadioChange=r(this,"pdsRadioChange",7),this._type="radio",this.hostKeeper=new d,this._hasImage=!1,this.checked=!1,this.disabled=!1,this.hasBorder=!1,this.invalid=!1,this.required=!1,this.handleRadioChange=e=>{if(this.disabled)return;const i=e.target.checked;this.el.closest("pds-radio-group")||this.pdsRadioChange.emit(i)}}hasImageSlot(){return!!this.el.querySelector('[slot="image"]')}hasImage(){return this._hasImage}classNames(){const e=[];return this.invalid&&e.push("is-invalid"),this.disabled&&e.push("is-disabled"),this.hasBorder&&e.push("has-border"),this.hasImage()&&e.push("has-image"),e.join(" ")}componentWillLoad(){this._hasImage=this.hasImageSlot()}connectedCallback(){this.hostKeeper.connect(this.el),n(this.el,(()=>this._type))}disconnectedCallback(){this.hostKeeper.disconnect()}componentDidRender(){const e=this.el.querySelector(".pds-radio__image-container:not([hidden])");Array.from(this.el.querySelectorAll(".pds-radio__image-container[hidden], .pds-radio__content-wrapper[hidden], label[hidden], .pds-radio__message[hidden]")).forEach((i=>{const r=i.querySelector('[slot="image"]');null!==r&&null!==e&&e.appendChild(r),i.remove()}))}render(){const e=()=>[a("label",{htmlFor:this.componentId,key:this.componentId+"-label"},a("input",{key:"ccd618855831bcee309e815f2cd2712fd4e8fe1f","aria-describedby":t(this.componentId,this.invalid,this.helperMessage,this.errorMessage),"aria-invalid":this.invalid?"true":void 0,type:"radio",id:this.componentId,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleRadioChange,class:this.hasImage()?"visually-hidden":""}),a("span",{key:"2e372a880c28f48fb804bac2518208082c141fad",class:this.hideLabel?"visually-hidden":""},this.label)),this.helperMessage&&a("div",{key:this.componentId+"-helper",class:"pds-radio__message",id:l(this.componentId,"helper")},this.helperMessage),this.errorMessage&&a("div",{key:this.componentId+"-error",class:"pds-radio__message pds-radio__message--error",id:l(this.componentId,"error"),"aria-live":"assertive"},a("pds-icon",{key:"889d502575f6a162f450b6b58d76a6f6f1c74e4b",icon:c,size:"small"}),this.errorMessage)],i=this.classNames();return this.hostKeeper.record(i),a(s,{key:"374003032b28407581a55f1fb0a304c49acf3c16",class:i},this.hasImage()&&a("div",{key:"7eeb516267de1afcfa85fc7567999db488c2f4f5",class:"pds-radio__image-container",part:"image-container"},a("slot",{key:"a312fea06f0c015bffab3bb392ff04d4913fd1c0",name:"image",onSlotchange:()=>this._hasImage=this.hasImageSlot()})),this.hasImage()?a("div",{class:"pds-radio__content-wrapper"},e()):e())}get el(){return this}static get style(){return'.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)}.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.sc-pds-radio-h:has(input:disabled) label.sc-pds-radio::after{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-text-primary);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{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio__message--error.sc-pds-radio pds-icon.sc-pds-radio{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.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;-ms-flex-direction:row;flex-direction:row;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 var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) 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__content-wrapper.sc-pds-radio{-ms-flex:1;flex:1;min-width:0;overflow-wrap:anywhere}.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 label.sc-pds-radio::after{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)}'}},[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]}]),b=h,m=function(){"undefined"!=typeof customElements&&["pds-radio","pds-icon"].forEach((e=>{switch(e){case"pds-radio":customElements.get(o(e))||customElements.define(o(e),h);break;case"pds-icon":customElements.get(o(e))||p()}}))};export{b as PdsRadio,m as defineCustomElement}
|