@pine-ds/core 4.7.1 → 4.8.0
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-avatar.js +1 -1
- package/components/pds-button2.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-drawer.js +1 -1
- package/components/pds-dropdown-menu-item.js +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/pds-modal-content.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-group.js +1 -1
- package/components/pds-radio.js +1 -1
- package/components/pds-switch.js +1 -1
- package/components/pds-table-head-cell2.js +1 -1
- package/components/pds-textarea.js +1 -1
- package/components/pds-toast.js +1 -1
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/{index-5Azb8EQG.js → index-Do70atou.js} +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-accordion.cjs.entry.js +1 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +3 -3
- package/dist/cjs/pds-button.cjs.entry.js +24 -21
- package/dist/cjs/pds-checkbox.cjs.entry.js +2 -2
- package/dist/cjs/pds-chip.cjs.entry.js +4 -4
- package/dist/cjs/pds-combobox.cjs.entry.js +4 -4
- package/dist/cjs/pds-copytext.cjs.entry.js +2 -2
- package/dist/cjs/pds-datepicker.cjs.entry.js +1 -1
- package/dist/cjs/pds-drawer.cjs.entry.js +1 -1
- package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js +31 -2
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +4 -4
- package/dist/cjs/pds-filter.cjs.entry.js +1 -1
- package/dist/cjs/pds-input.cjs.entry.js +1 -1
- package/dist/cjs/pds-link.cjs.entry.js +1 -1
- package/dist/cjs/pds-modal-content.cjs.entry.js +32 -30
- package/dist/cjs/pds-modal.cjs.entry.js +4 -4
- package/dist/cjs/pds-multiselect.cjs.entry.js +6 -6
- package/dist/cjs/pds-popover.cjs.entry.js +187 -11
- package/dist/cjs/pds-radio-group.cjs.entry.js +2 -2
- package/dist/cjs/pds-radio.cjs.entry.js +3 -3
- package/dist/cjs/pds-select.cjs.entry.js +1 -1
- package/dist/cjs/pds-sortable-item.cjs.entry.js +1 -1
- package/dist/cjs/pds-switch.cjs.entry.js +2 -2
- package/dist/cjs/pds-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-table-head-cell.cjs.entry.js +2 -2
- package/dist/cjs/pds-text.cjs.entry.js +1 -1
- package/dist/cjs/pds-textarea.cjs.entry.js +2 -2
- package/dist/cjs/pds-toast.cjs.entry.js +1 -1
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/cjs/{truncation-tooltip-DO9xli2e.js → truncation-tooltip-BtuiXLV0.js} +31 -6
- package/dist/collection/components/pds-avatar/pds-avatar.js +2 -2
- package/dist/collection/components/pds-button/pds-button.js +24 -22
- package/dist/collection/components/pds-button/stories/pds-button.stories.js +3 -3
- package/dist/collection/components/pds-checkbox/pds-checkbox.js +1 -1
- package/dist/collection/components/pds-chip/pds-chip.js +2 -2
- package/dist/collection/components/pds-combobox/pds-combobox.js +4 -4
- package/dist/collection/components/pds-datepicker/stories/pds-datepicker.stories.js +1 -1
- package/dist/collection/components/pds-drawer/pds-drawer.css +4 -0
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css +8 -0
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js +58 -6
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +4 -4
- package/dist/collection/components/pds-dropdown-menu/stories/pds-dropdown-menu.stories.js +39 -0
- package/dist/collection/components/pds-modal/pds-modal-content/pds-modal-content.js +32 -30
- package/dist/collection/components/pds-modal/pds-modal.js +4 -4
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +5 -5
- package/dist/collection/components/pds-popover/pds-popover.js +240 -11
- package/dist/collection/components/pds-popover/stories/pds-popover.stories.js +31 -0
- package/dist/collection/components/pds-radio/pds-radio.js +2 -2
- package/dist/collection/components/pds-radio-group/pds-radio-group.js +1 -1
- package/dist/collection/components/pds-switch/pds-switch.js +1 -1
- package/dist/collection/components/pds-table/pds-table-head-cell/pds-table-head-cell.js +1 -1
- package/dist/collection/components/pds-table/stories/pds-table.stories.js +1 -1
- package/dist/collection/components/pds-text/stories/pds-text.stories.js +1 -1
- package/dist/collection/components/pds-textarea/pds-textarea.js +1 -1
- package/dist/collection/components/pds-toast/pds-toast.js +1 -1
- package/dist/collection/utils/truncation-tooltip.js +31 -6
- package/dist/docs.json +124 -7
- package/dist/esm/{index-BJXk71tO.js → index-BWDu62Mo.js} +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-accordion.entry.js +1 -1
- package/dist/esm/pds-avatar.entry.js +3 -3
- package/dist/esm/pds-button.entry.js +24 -21
- package/dist/esm/pds-checkbox.entry.js +2 -2
- package/dist/esm/pds-chip.entry.js +4 -4
- package/dist/esm/pds-combobox.entry.js +4 -4
- package/dist/esm/pds-copytext.entry.js +2 -2
- package/dist/esm/pds-datepicker.entry.js +1 -1
- package/dist/esm/pds-drawer.entry.js +1 -1
- package/dist/esm/pds-dropdown-menu-item.entry.js +31 -2
- package/dist/esm/pds-dropdown-menu.entry.js +4 -4
- package/dist/esm/pds-filter.entry.js +1 -1
- package/dist/esm/pds-input.entry.js +1 -1
- package/dist/esm/pds-link.entry.js +1 -1
- package/dist/esm/pds-modal-content.entry.js +32 -30
- package/dist/esm/pds-modal.entry.js +4 -4
- package/dist/esm/pds-multiselect.entry.js +6 -6
- package/dist/esm/pds-popover.entry.js +187 -11
- package/dist/esm/pds-radio-group.entry.js +2 -2
- package/dist/esm/pds-radio.entry.js +3 -3
- package/dist/esm/pds-select.entry.js +1 -1
- package/dist/esm/pds-sortable-item.entry.js +1 -1
- package/dist/esm/pds-switch.entry.js +2 -2
- package/dist/esm/pds-table-cell.entry.js +1 -1
- package/dist/esm/pds-table-head-cell.entry.js +2 -2
- package/dist/esm/pds-text.entry.js +1 -1
- package/dist/esm/pds-textarea.entry.js +2 -2
- package/dist/esm/pds-toast.entry.js +1 -1
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm/{truncation-tooltip-DRXsdKk1.js → truncation-tooltip-FaW67DiY.js} +31 -6
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/pds-accordion.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-button.entry.js +1 -1
- package/dist/esm-es5/pds-checkbox.entry.js +1 -1
- package/dist/esm-es5/pds-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-datepicker.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-filter.entry.js +1 -1
- package/dist/esm-es5/pds-input.entry.js +1 -1
- package/dist/esm-es5/pds-link.entry.js +1 -1
- package/dist/esm-es5/pds-modal-content.entry.js +1 -1
- package/dist/esm-es5/pds-modal.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-group.entry.js +1 -1
- package/dist/esm-es5/pds-radio.entry.js +1 -1
- package/dist/esm-es5/pds-select.entry.js +1 -1
- package/dist/esm-es5/pds-sortable-item.entry.js +1 -1
- package/dist/esm-es5/pds-switch.entry.js +1 -1
- package/dist/esm-es5/pds-table-cell.entry.js +1 -1
- package/dist/esm-es5/pds-table-head-cell.entry.js +1 -1
- package/dist/esm-es5/pds-text.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-toast.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/esm-es5/truncation-tooltip-FaW67DiY.js +1 -0
- package/dist/pine-core/{p-e836f3ec.system.entry.js → p-00a50de5.system.entry.js} +2 -2
- package/dist/pine-core/{p-1437585e.system.entry.js → p-047433a4.system.entry.js} +1 -1
- package/dist/pine-core/{p-7fa66cad.entry.js → p-089c3e60.entry.js} +1 -1
- package/dist/pine-core/{p-341c38f1.system.entry.js → p-0af0d752.system.entry.js} +1 -1
- package/dist/pine-core/{p-3a959459.system.entry.js → p-121612a7.system.entry.js} +1 -1
- package/dist/pine-core/{p-cde8eb81.entry.js → p-138b278b.entry.js} +1 -1
- package/dist/pine-core/{p-cfd012d4.entry.js → p-158b2f51.entry.js} +1 -1
- package/dist/pine-core/p-17f97f1a.entry.js +1 -0
- package/dist/pine-core/{p-5c90091e.system.entry.js → p-19ba2788.system.entry.js} +1 -1
- package/dist/pine-core/p-1dc5a7e0.system.entry.js +1 -0
- package/dist/pine-core/{p-355e4cf9.entry.js → p-25ea48d1.entry.js} +1 -1
- package/dist/pine-core/{p-c81d8ac8.entry.js → p-295f64ea.entry.js} +1 -1
- package/dist/pine-core/{p-576cf904.system.entry.js → p-29cd4113.system.entry.js} +1 -1
- package/dist/pine-core/{p-1ee86d87.system.entry.js → p-332590c7.system.entry.js} +1 -1
- package/dist/pine-core/p-36cb4bf6.entry.js +1 -0
- package/dist/pine-core/{p-080cb087.system.entry.js → p-3c977d8d.system.entry.js} +1 -1
- package/dist/pine-core/p-3d51891a.entry.js +1 -0
- package/dist/pine-core/{p-72865997.entry.js → p-44f546ae.entry.js} +1 -1
- package/dist/pine-core/{p-b60ac7eb.system.entry.js → p-4bfc8b3e.system.entry.js} +1 -1
- package/dist/pine-core/p-5833a072.system.entry.js +1 -0
- package/dist/pine-core/p-5cfd4d41.system.entry.js +1 -0
- package/dist/pine-core/{p-f2c253d8.entry.js → p-62433f32.entry.js} +1 -1
- package/dist/pine-core/{p-ebd0bff2.entry.js → p-631f5bcc.entry.js} +1 -1
- package/dist/pine-core/p-717323e4.entry.js +1 -0
- package/dist/pine-core/{p-e7a95a49.system.entry.js → p-719542e1.system.entry.js} +1 -1
- package/dist/pine-core/p-73f931a1.entry.js +1 -0
- package/dist/pine-core/{p-f77905aa.system.entry.js → p-884cb31d.system.entry.js} +1 -1
- package/dist/pine-core/{p-4435fff6.system.entry.js → p-8987fd45.system.entry.js} +1 -1
- package/dist/pine-core/{p-02088776.entry.js → p-8c588ca0.entry.js} +1 -1
- package/dist/pine-core/p-8e3ff75d.entry.js +1 -0
- package/dist/pine-core/{p-bd26a5e8.entry.js → p-90d5edc6.entry.js} +1 -1
- package/dist/pine-core/p-91f60173.entry.js +1 -0
- package/dist/pine-core/{p-258770cf.system.entry.js → p-9265497e.system.entry.js} +1 -1
- package/dist/pine-core/p-9713fb36.entry.js +1 -0
- package/dist/pine-core/p-99fdf70f.entry.js +1 -0
- package/dist/pine-core/{p-0a84d220.entry.js → p-9aaedded.entry.js} +1 -1
- package/dist/pine-core/p-9df5e204.entry.js +1 -0
- package/dist/pine-core/p-CuSNnuFu.system.js +1 -1
- package/dist/pine-core/p-D04W0cAO.system.js +1 -0
- package/dist/pine-core/{p-6d603d16.system.entry.js → p-acca5f7b.system.entry.js} +1 -1
- package/dist/pine-core/{p-a19cd59c.entry.js → p-aff411d0.entry.js} +1 -1
- package/dist/pine-core/{p-bb73ad66.entry.js → p-b182f806.entry.js} +1 -1
- package/dist/pine-core/{p-01aa382c.system.entry.js → p-b9d145f8.system.entry.js} +1 -1
- package/dist/pine-core/p-bdac8f2b.entry.js +1 -0
- package/dist/pine-core/{p-aa032a5e.system.entry.js → p-be9b6e63.system.entry.js} +1 -1
- package/dist/pine-core/{p-ff3de72e.entry.js → p-c483997a.entry.js} +1 -1
- package/dist/pine-core/p-c4e12f0a.entry.js +1 -0
- package/dist/pine-core/{p-e8cb76e8.entry.js → p-c97bfac9.entry.js} +1 -1
- package/dist/pine-core/{p-bd67156b.system.entry.js → p-ca4ee736.system.entry.js} +1 -1
- package/dist/pine-core/p-cccfe60f.system.entry.js +1 -0
- package/dist/pine-core/{p-c5c9ed36.system.entry.js → p-d3d69ca4.system.entry.js} +1 -1
- package/dist/pine-core/{p-f0d24298.system.entry.js → p-ea340c55.system.entry.js} +1 -1
- package/dist/pine-core/{p-88ff1604.entry.js → p-ea8f5d29.entry.js} +1 -1
- package/dist/pine-core/{p-d8570b4b.system.entry.js → p-eaf85be6.system.entry.js} +1 -1
- package/dist/pine-core/{p-fc25b956.system.entry.js → p-ecc7a531.system.entry.js} +1 -1
- package/dist/pine-core/{p-cfc52b95.system.entry.js → p-ee0e30bf.system.entry.js} +1 -1
- package/dist/pine-core/{p-e803f629.system.entry.js → p-ef13f665.system.entry.js} +1 -1
- package/dist/pine-core/{p-97d0b89e.system.entry.js → p-f3067d90.system.entry.js} +1 -1
- package/dist/pine-core/{p-JtdHT_W5.js → p-jrkGLEPe.js} +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-button/pds-button.d.ts +3 -4
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.d.ts +13 -3
- package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts +2 -0
- package/dist/types/components/pds-popover/pds-popover.d.ts +43 -1
- package/dist/types/components.d.ts +43 -10
- package/dist/types/utils/truncation-tooltip.d.ts +4 -4
- package/dist/types/utils/types.d.ts +1 -0
- package/dist/vscode.html-data.json +50 -7
- package/hydrate/index.js +341 -104
- package/hydrate/index.mjs +341 -104
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-DRXsdKk1.js +0 -1
- package/dist/pine-core/p-153ba77b.entry.js +0 -1
- package/dist/pine-core/p-645a482b.system.entry.js +0 -1
- package/dist/pine-core/p-74a05bcc.entry.js +0 -1
- package/dist/pine-core/p-7bf6563a.system.entry.js +0 -1
- package/dist/pine-core/p-80a698ae.entry.js +0 -1
- package/dist/pine-core/p-82cf4ec6.entry.js +0 -1
- package/dist/pine-core/p-8d292b48.entry.js +0 -1
- package/dist/pine-core/p-92ae6082.entry.js +0 -1
- package/dist/pine-core/p-993d1043.entry.js +0 -1
- package/dist/pine-core/p-a787b34a.system.entry.js +0 -1
- package/dist/pine-core/p-b69f04b7.entry.js +0 -1
- package/dist/pine-core/p-beb23781.entry.js +0 -1
- package/dist/pine-core/p-bf5887e8.system.entry.js +0 -1
- package/dist/pine-core/p-c36b490e.entry.js +0 -1
- package/dist/pine-core/p-ca0d48e8.entry.js +0 -1
- package/dist/pine-core/p-f474d7de.entry.js +0 -1
- package/dist/pine-core/p-qhdoK1Jp.system.js +0 -1
- /package/dist/esm-es5/{index-BJXk71tO.js → index-BWDu62Mo.js} +0 -0
- /package/dist/pine-core/{p-BJXk71tO.js → p-BWDu62Mo.js} +0 -0
- /package/dist/pine-core/{p-n3_ytl_p.system.js → p-ClDiSG97.system.js} +0 -0
|
@@ -3962,7 +3962,7 @@ const PdsCombobox = class {
|
|
|
3962
3962
|
'pds-combobox__option--layout': isLayout,
|
|
3963
3963
|
'pds-combobox__option--chip': isChip,
|
|
3964
3964
|
'pds-combobox__option--disabled': isDisabled,
|
|
3965
|
-
}, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
|
|
3965
|
+
}, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
|
|
3966
3966
|
}
|
|
3967
3967
|
/** An option's text, after its `data-icon` when it has one. */
|
|
3968
3968
|
renderOptionLabel(option) {
|
|
@@ -4161,7 +4161,7 @@ const PdsCombobox = class {
|
|
|
4161
4161
|
}
|
|
4162
4162
|
// Helper method to render chip trigger default content
|
|
4163
4163
|
renderChipTriggerDefaultContent() {
|
|
4164
|
-
return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
|
|
4164
|
+
return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, "aria-hidden": "true", class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
|
|
4165
4165
|
}
|
|
4166
4166
|
// Helper method to render option as chip (new automatic approach)
|
|
4167
4167
|
renderOptionChip(option) {
|
|
@@ -4192,13 +4192,13 @@ const PdsCombobox = class {
|
|
|
4192
4192
|
]
|
|
4193
4193
|
.filter(Boolean)
|
|
4194
4194
|
.join(' ');
|
|
4195
|
-
return (h(Host, { key: '
|
|
4195
|
+
return (h(Host, { key: 'c4bc64f28f6f8f2170d199bd89ba02b3fbe41bad', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '7648c513d133e11376e50a9a15bc9a227b8fe1d2', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (h("label", { key: '1be4dce04b943119265b99c2b14002e5faba337f', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
|
|
4196
4196
|
this.inputEl = el;
|
|
4197
4197
|
this.triggerEl = el;
|
|
4198
4198
|
}, class: {
|
|
4199
4199
|
'pds-combobox__input': true,
|
|
4200
4200
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
4201
|
-
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: '
|
|
4201
|
+
}, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: 'f9aca483c67dd0cdf2fcbdc651a13cfb8fcfe7f1', style: { display: 'none' } }, h("slot", { key: '7a0dc5718ccf377b41bd1716030f16a135700518', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
4202
4202
|
h("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
4203
4203
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
4204
4204
|
// same, and opening the group would go unannounced.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
|
|
2
2
|
import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
|
|
3
|
-
import { a as copy } from './index-
|
|
3
|
+
import { a as copy } from './index-BWDu62Mo.js';
|
|
4
4
|
import { r as restoreReflectedDefault } from './reflected-attribute-default-t3idJwV0.js';
|
|
5
|
-
import { s as setupTruncationTooltip } from './truncation-tooltip-
|
|
5
|
+
import { s as setupTruncationTooltip } from './truncation-tooltip-FaW67DiY.js';
|
|
6
6
|
import './keep-hydrated-BLG6RDBt.js';
|
|
7
7
|
import './floating-ui.dom-BPqJgIq6.js';
|
|
8
8
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
|
|
2
2
|
import { a as autoUpdate, c as computePosition, o as offset, f as flip, b as size, s as shift, h as hide } from './floating-ui.dom-BPqJgIq6.js';
|
|
3
|
-
import { g as caretDown, j as caretLeft, k as caretRight, m as check, r as remove, n as calendarSimple } from './index-
|
|
3
|
+
import { g as caretDown, j as caretLeft, k as caretRight, m as check, r as remove, n as calendarSimple } from './index-BWDu62Mo.js';
|
|
4
4
|
import { i as isSpecTest } from './form-BuRbS7Hp.js';
|
|
5
5
|
import { r as resolveLocale, f as formatMessage } from './i18n-format-BJgZHCWe.js';
|
|
6
6
|
import { a as closest } from './closest-DHPzKMVS.js';
|
|
@@ -3,7 +3,7 @@ import { c as containsComposed, a as closest } from './closest-DHPzKMVS.js';
|
|
|
3
3
|
import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
|
|
4
4
|
import './keep-hydrated-BLG6RDBt.js';
|
|
5
5
|
|
|
6
|
-
const pdsDrawerCss = () => `.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}`;
|
|
6
|
+
const pdsDrawerCss = () => `.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:not(.pds-drawer__modal--modal)>.pds-modal__backdrop>*{pointer-events:auto}.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}`;
|
|
7
7
|
|
|
8
8
|
// Known selectors for content Pine components portal out of place rather than
|
|
9
9
|
// rendering where they are — pds-tooltip and pds-combobox's dropdown in
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
|
|
2
2
|
import './keep-hydrated-BLG6RDBt.js';
|
|
3
3
|
|
|
4
|
-
const pdsDropdownMenuItemCss = () => `: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)}`;
|
|
4
|
+
const pdsDropdownMenuItemCss = () => `: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(.is-informational){cursor:default}:host(.is-informational) .pds-dropdown-menu-item__content:hover{background-color:transparent;color:var(--pine-color-text)}: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)}`;
|
|
5
5
|
|
|
6
6
|
const PdsDropdownMenuItem = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -17,9 +17,17 @@ const PdsDropdownMenuItem = class {
|
|
|
17
17
|
* @defaultValue false
|
|
18
18
|
*/
|
|
19
19
|
this.disabled = false;
|
|
20
|
+
/**
|
|
21
|
+
* It determines whether or not the dropdown-item is informational: text that the arrow keys
|
|
22
|
+
* reach but that can't be activated. Takes precedence over `href` and `destructive`.
|
|
23
|
+
* Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
|
|
24
|
+
* @defaultValue false
|
|
25
|
+
*/
|
|
26
|
+
this.informational = false;
|
|
20
27
|
/**
|
|
21
28
|
* Determines whether the link should open in a new tab and display an external icon.
|
|
22
29
|
* This is a simpler alternative to using `target="_blank"` for the common case.
|
|
30
|
+
* Ignored when `informational` is set.
|
|
23
31
|
* @defaultValue false
|
|
24
32
|
*/
|
|
25
33
|
this.external = false;
|
|
@@ -30,6 +38,12 @@ const PdsDropdownMenuItem = class {
|
|
|
30
38
|
this.handleBlur = () => {
|
|
31
39
|
this.hasFocus = false;
|
|
32
40
|
};
|
|
41
|
+
// Space would otherwise scroll the page, since nothing in the item takes the key.
|
|
42
|
+
this.handleInformationalKeyDown = (event) => {
|
|
43
|
+
if (event.key === ' ') {
|
|
44
|
+
event.preventDefault();
|
|
45
|
+
}
|
|
46
|
+
};
|
|
33
47
|
this.handleKeyDown = (event) => {
|
|
34
48
|
// Handle keyboard events
|
|
35
49
|
if (!this.disabled && (event.key === 'Enter')) {
|
|
@@ -51,6 +65,8 @@ const PdsDropdownMenuItem = class {
|
|
|
51
65
|
;
|
|
52
66
|
handleClick() {
|
|
53
67
|
var _a;
|
|
68
|
+
if (this.informational)
|
|
69
|
+
return;
|
|
54
70
|
// Filter only pds-dropdown-menu-item elements and find the index of the current item
|
|
55
71
|
const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
|
|
56
72
|
const itemIndex = menuItems.indexOf(this.host);
|
|
@@ -63,6 +79,12 @@ const PdsDropdownMenuItem = class {
|
|
|
63
79
|
});
|
|
64
80
|
}
|
|
65
81
|
renderElement() {
|
|
82
|
+
if (this.informational) {
|
|
83
|
+
return (h("div", { class: {
|
|
84
|
+
'pds-dropdown-menu-item__content': true,
|
|
85
|
+
'has-focus': this.hasFocus
|
|
86
|
+
}, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("slot", null)));
|
|
87
|
+
}
|
|
66
88
|
if (this.href != null) {
|
|
67
89
|
return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
|
|
68
90
|
'pds-dropdown-menu-item__content': true,
|
|
@@ -75,7 +97,14 @@ const PdsDropdownMenuItem = class {
|
|
|
75
97
|
}, 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 }, h("slot", null)));
|
|
76
98
|
}
|
|
77
99
|
render() {
|
|
78
|
-
return (h(Host, { key: '
|
|
100
|
+
return (h(Host, { key: '47a62550fde33f892d7af4f4e71b67ebf7aa2c3f', id: this.componentId, class: {
|
|
101
|
+
'is-disabled': this.disabled,
|
|
102
|
+
'is-informational': this.informational,
|
|
103
|
+
'destructive': !this.disabled && !this.informational && this.destructive
|
|
104
|
+
}, onClick: () => !this.disabled && this.handleClick(), role: "none",
|
|
105
|
+
// ARIA ignores role="none" on focusable elements, so a focusable host would sit between
|
|
106
|
+
// the menu and the informational menuitem as an unexpected child.
|
|
107
|
+
tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
|
|
79
108
|
}
|
|
80
109
|
get host() { return getElement(this); }
|
|
81
110
|
};
|
|
@@ -201,11 +201,11 @@ const PdsDropdownMenu = class {
|
|
|
201
201
|
if (tagName === 'pds-dropdown-menu-item') {
|
|
202
202
|
// For pds-dropdown-menu-item, focus the inner element
|
|
203
203
|
const menuItem = item;
|
|
204
|
-
const
|
|
204
|
+
const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
|
|
205
205
|
const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
|
|
206
206
|
|| ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
|
|
207
|
-
if (
|
|
208
|
-
|
|
207
|
+
if (innerControl) {
|
|
208
|
+
innerControl.focus();
|
|
209
209
|
}
|
|
210
210
|
else if (innerLink) {
|
|
211
211
|
innerLink.focus();
|
|
@@ -357,7 +357,7 @@ const PdsDropdownMenu = class {
|
|
|
357
357
|
}
|
|
358
358
|
}
|
|
359
359
|
render() {
|
|
360
|
-
return (h(Host, { key: '
|
|
360
|
+
return (h(Host, { key: '1765909c8c3c140e52dc3f6b50693c97d6bcc003', id: this.componentId }, h("slot", { key: '0b566cd288428a0694a2d61d4a73bd79def4bfad', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '16cdfc208cfe7f6e074289c30aa0e1188a34876d', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: 'a28c1736ad02e8ac3d82c0fe1933606a7216989b', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '9c6dfddefb266083f68aa27d6cc01127a69cd1cf', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '8cfe85c10f92d4a4ec6b5d2d0264d054a74ba29b', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '1a5b4aa406d2706ca8cef49deb05140a5763be1c', onSlotchange: this.handleSlotChange })))));
|
|
361
361
|
}
|
|
362
362
|
get host() { return getElement(this); }
|
|
363
363
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
|
|
2
2
|
import { i as isRtlDirection } from './scroll-DtgUQhjl.js';
|
|
3
|
-
import { t as trash, e as enlarge } from './index-
|
|
3
|
+
import { t as trash, e as enlarge } from './index-BWDu62Mo.js';
|
|
4
4
|
import './keep-hydrated-BLG6RDBt.js';
|
|
5
5
|
|
|
6
6
|
const pdsFilterCss = () => `:host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}`;
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
|
|
|
2
2
|
import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
|
|
3
3
|
import { i as inheritAriaAttributes } from './attributes-WXw_I_uJ.js';
|
|
4
4
|
import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
|
|
5
|
-
import { b as danger } from './index-
|
|
5
|
+
import { b as danger } from './index-BWDu62Mo.js';
|
|
6
6
|
import './keep-hydrated-BLG6RDBt.js';
|
|
7
7
|
|
|
8
8
|
const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { r as registerInstance, h } from './index-Cw9J31qd.js';
|
|
2
2
|
import { s as setColor } from './utils-OYK5-nwe.js';
|
|
3
|
-
import { l as launch } from './index-
|
|
3
|
+
import { l as launch } from './index-BWDu62Mo.js';
|
|
4
4
|
import './keep-hydrated-BLG6RDBt.js';
|
|
5
5
|
|
|
6
6
|
const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
|
|
@@ -17,6 +17,21 @@ const PdsModalContent = class {
|
|
|
17
17
|
* Tracks whether the border prop was explicitly set by the user
|
|
18
18
|
*/
|
|
19
19
|
this.userSetBorder = false;
|
|
20
|
+
this.hasLoaded = false;
|
|
21
|
+
/**
|
|
22
|
+
* Handle scroll events
|
|
23
|
+
*/
|
|
24
|
+
this.handleScroll = () => {
|
|
25
|
+
this.updateBorders();
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Handle resize events
|
|
29
|
+
*/
|
|
30
|
+
this.handleResize = () => {
|
|
31
|
+
this.calculateMaxHeight();
|
|
32
|
+
// Update borders after resize as content scrollability might change
|
|
33
|
+
setTimeout(() => this.updateBorders(), 50);
|
|
34
|
+
};
|
|
20
35
|
}
|
|
21
36
|
// Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
|
|
22
37
|
componentDidRender() {
|
|
@@ -30,43 +45,30 @@ const PdsModalContent = class {
|
|
|
30
45
|
this.userSetBorder = hasBorderAttribute || this.border !== 'none';
|
|
31
46
|
}
|
|
32
47
|
componentDidLoad() {
|
|
48
|
+
this.hasLoaded = true;
|
|
33
49
|
this.calculateMaxHeight();
|
|
34
|
-
// Set up resize listener
|
|
35
|
-
window.addEventListener('resize', this.handleResize.bind(this));
|
|
36
|
-
// Only set up scroll listener for border updates if borders are managed automatically
|
|
37
50
|
if (!this.userSetBorder) {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
this.el.addEventListener('scroll', this.handleScroll.bind(this));
|
|
41
|
-
// Initial border update after everything is set up
|
|
42
|
-
setTimeout(() => this.updateBorders(), 100);
|
|
43
|
-
}, 100);
|
|
51
|
+
// Initial border update after everything is set up
|
|
52
|
+
setTimeout(() => this.updateBorders(), 200);
|
|
44
53
|
}
|
|
45
54
|
}
|
|
55
|
+
// Here rather than in componentDidLoad, which runs once: content taken out of the page and put
|
|
56
|
+
// back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
|
|
57
|
+
connectedCallback() {
|
|
58
|
+
window.addEventListener('resize', this.handleResize);
|
|
59
|
+
// The scroll happens on the component element itself (this.el), not the inner div
|
|
60
|
+
this.el.addEventListener('scroll', this.handleScroll);
|
|
61
|
+
if (this.hasLoaded)
|
|
62
|
+
this.calculateMaxHeight();
|
|
63
|
+
}
|
|
46
64
|
disconnectedCallback() {
|
|
47
|
-
window.removeEventListener('resize', this.handleResize
|
|
48
|
-
|
|
49
|
-
if (!this.userSetBorder) {
|
|
50
|
-
this.el.removeEventListener('scroll', this.handleScroll.bind(this));
|
|
51
|
-
}
|
|
65
|
+
window.removeEventListener('resize', this.handleResize);
|
|
66
|
+
this.el.removeEventListener('scroll', this.handleScroll);
|
|
52
67
|
if (this.mutationObserver) {
|
|
53
68
|
this.mutationObserver.disconnect();
|
|
69
|
+
this.mutationObserver = undefined;
|
|
54
70
|
}
|
|
55
71
|
}
|
|
56
|
-
/**
|
|
57
|
-
* Handle scroll events
|
|
58
|
-
*/
|
|
59
|
-
handleScroll() {
|
|
60
|
-
this.updateBorders();
|
|
61
|
-
}
|
|
62
|
-
/**
|
|
63
|
-
* Handle resize events
|
|
64
|
-
*/
|
|
65
|
-
handleResize() {
|
|
66
|
-
this.calculateMaxHeight();
|
|
67
|
-
// Update borders after resize as content scrollability might change
|
|
68
|
-
setTimeout(() => this.updateBorders(), 50);
|
|
69
|
-
}
|
|
70
72
|
/**
|
|
71
73
|
* Updates border visibility based on scroll state (only if not user-defined)
|
|
72
74
|
*/
|
|
@@ -183,10 +185,10 @@ const PdsModalContent = class {
|
|
|
183
185
|
render() {
|
|
184
186
|
// Only apply max-height style if it's not 'none'
|
|
185
187
|
const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
|
|
186
|
-
return (h(Host, { key: '
|
|
188
|
+
return (h(Host, { key: 'c83e230d23444e3d5358d995170e2b8386884fe8' }, h("div", { key: 'b91de2c71e693b5a1ba2b257d741e7b0418c2d76', class: {
|
|
187
189
|
'pds-modal-content': true,
|
|
188
190
|
[`pds-modal-content--border-${this.border}`]: true
|
|
189
|
-
}, style: styleObj, tabindex: "-1" }, h("slot", { key: '
|
|
191
|
+
}, style: styleObj, tabindex: "-1" }, h("slot", { key: '971cbd44ffeac4bb13a651948a119c603bed9e4f' }))));
|
|
190
192
|
}
|
|
191
193
|
get el() { return getElement(this); }
|
|
192
194
|
};
|
|
@@ -105,7 +105,7 @@ function containsComposed(ancestor, node) {
|
|
|
105
105
|
*/
|
|
106
106
|
const openModals = new Map();
|
|
107
107
|
let openSequence = 0;
|
|
108
|
-
/** Whether an open
|
|
108
|
+
/** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
|
|
109
109
|
function hasOpenPopover(root) {
|
|
110
110
|
if (root.querySelector('[data-pds-popover-open]'))
|
|
111
111
|
return true;
|
|
@@ -649,14 +649,14 @@ const PdsModal = class {
|
|
|
649
649
|
}
|
|
650
650
|
render() {
|
|
651
651
|
const [sizeClass = 'md', customSize] = this.resolveSize();
|
|
652
|
-
return (h("dialog", { key: '
|
|
652
|
+
return (h("dialog", { key: '0a3ea92246b5ae704bc7dcbadf4f4e0d5a54e9e6', class: {
|
|
653
653
|
'pds-modal__backdrop': true,
|
|
654
654
|
'open': this.open
|
|
655
|
-
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: '
|
|
655
|
+
}, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: 'a38029c2284ed345bec2ce7638fc3415818cd609', class: {
|
|
656
656
|
'pds-modal': true,
|
|
657
657
|
[`pds-modal--${sizeClass}`]: true,
|
|
658
658
|
'pds-modal--scrollable': this.scrollable
|
|
659
|
-
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '
|
|
659
|
+
}, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '396da81af42685f5c083f853afa207a6844e444e' }))));
|
|
660
660
|
}
|
|
661
661
|
get el() { return getElement(this); }
|
|
662
662
|
static get watchers() { return {
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, a as getElement
|
|
|
2
2
|
import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom-BPqJgIq6.js';
|
|
3
3
|
import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
|
|
4
4
|
import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
|
|
5
|
-
import { e as enlarge, b as danger } from './index-
|
|
5
|
+
import { e as enlarge, b as danger } from './index-BWDu62Mo.js';
|
|
6
6
|
import { f as formatMessage, p as pluralize } from './i18n-format-BJgZHCWe.js';
|
|
7
7
|
import './keep-hydrated-BLG6RDBt.js';
|
|
8
8
|
|
|
@@ -1180,7 +1180,7 @@ const PdsMultiselect = class {
|
|
|
1180
1180
|
'pds-multiselect__option--selected': isSelected,
|
|
1181
1181
|
'pds-multiselect__option--create': isCreateOption,
|
|
1182
1182
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
1183
|
-
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
1183
|
+
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small", "aria-hidden": "true" }), h("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
|
|
1184
1184
|
}
|
|
1185
1185
|
renderOptionAction(option, optionId, isHighlighted) {
|
|
1186
1186
|
var _a;
|
|
@@ -1203,7 +1203,7 @@ const PdsMultiselect = class {
|
|
|
1203
1203
|
const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
|
|
1204
1204
|
const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
|
|
1205
1205
|
const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
|
|
1206
|
-
return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small" }), h("input", { ref: el => (this.searchInputEl = el), 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}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
|
|
1206
|
+
return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), h("input", { ref: el => (this.searchInputEl = el), 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}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
|
|
1207
1207
|
if (item.type === 'group') {
|
|
1208
1208
|
return (h("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, h("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), h("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
|
|
1209
1209
|
}
|
|
@@ -1262,10 +1262,10 @@ const PdsMultiselect = class {
|
|
|
1262
1262
|
}
|
|
1263
1263
|
render() {
|
|
1264
1264
|
const hasSelections = this.selectedItems.length > 0;
|
|
1265
|
-
return (h(Host, { key: '
|
|
1265
|
+
return (h(Host, { key: 'd0879469e6ff943374c2f035c0a8d6d57c25dc5f', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '80caa694099218561b85c93d547ec9208def0ec7', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'b4eaa2c9e2901c28ecb0b8f55e63e33ad899e945', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
1266
1266
|
'pds-multiselect__label': true,
|
|
1267
1267
|
'visually-hidden': this.hideLabel,
|
|
1268
|
-
} }, this.label)), h("div", { key: '
|
|
1268
|
+
} }, this.label)), h("div", { key: '404ed58aa6bfb2248ffad5e56ebabfe65149b9a4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
1269
1269
|
'pds-multiselect__trigger': true,
|
|
1270
1270
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
1271
1271
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -1281,7 +1281,7 @@ const PdsMultiselect = class {
|
|
|
1281
1281
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
|
|
1282
1282
|
'pds-multiselect__trigger-text': true,
|
|
1283
1283
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
1284
|
-
} }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '
|
|
1284
|
+
} }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '73f17916a37722fefebd6b5a184a7b3dca6f4a9d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '1a987562b21da6f8d2f8c9f94e93e8c99a7abd74', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'ce1f7f48d6f8dee320d87cb7088f084e68cb3ab5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '8347dfdec6ef1b81d4cf9f72cba3d9ec965dcf08', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '74cd840e102ad635d2f4bc23cf3bcfaa61d5cea1', style: { display: 'none' } }, h("slot", { key: 'c2fd9e71363a9661062c8d88be0dd78fc98b964d' })))));
|
|
1285
1285
|
}
|
|
1286
1286
|
static get formAssociated() { return true; }
|
|
1287
1287
|
get el() { return getElement(this); }
|