@pine-ds/core 4.9.1 → 4.11.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-checkbox2.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-combobox.js +2 -2
- package/components/pds-datepicker.js +1 -1
- package/components/pds-dropdown-menu.js +1 -1
- package/components/truncation-tooltip.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-checkbox.cjs.entry.js +1 -1
- package/dist/cjs/pds-chip.cjs.entry.js +5 -3
- package/dist/cjs/pds-combobox.cjs.entry.js +101 -15
- package/dist/cjs/pds-copytext.cjs.entry.js +1 -1
- package/dist/cjs/pds-datepicker.cjs.entry.js +253 -75
- package/dist/cjs/pds-dropdown-menu.cjs.entry.js +58 -46
- package/dist/cjs/pds-table-cell.cjs.entry.js +1 -1
- package/dist/cjs/pds-text.cjs.entry.js +1 -1
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/cjs/{truncation-tooltip-DdB78RIe.js → truncation-tooltip-Bikp7n9I.js} +1 -1
- package/dist/collection/components/pds-checkbox/pds-checkbox.css +20 -14
- package/dist/collection/components/pds-chip/pds-chip.js +4 -2
- package/dist/collection/components/pds-combobox/grouped-options-panel.js +39 -1
- package/dist/collection/components/pds-combobox/pds-combobox.css +37 -1
- package/dist/collection/components/pds-combobox/pds-combobox.js +62 -14
- package/dist/collection/components/pds-combobox/stories/pds-combobox.stories.js +48 -0
- package/dist/collection/components/pds-datepicker/date-utils.js +42 -0
- package/dist/collection/components/pds-datepicker/pds-datepicker.js +163 -64
- package/dist/collection/components/pds-datepicker/stories/pds-datepicker.stories.js +11 -0
- package/dist/collection/components/pds-datepicker/value.js +76 -18
- package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js +64 -46
- package/dist/collection/utils/truncation-tooltip.js +1 -1
- package/dist/docs.json +42 -7
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-checkbox.entry.js +1 -1
- package/dist/esm/pds-chip.entry.js +5 -3
- package/dist/esm/pds-combobox.entry.js +101 -15
- package/dist/esm/pds-copytext.entry.js +1 -1
- package/dist/esm/pds-datepicker.entry.js +253 -75
- package/dist/esm/pds-dropdown-menu.entry.js +58 -46
- package/dist/esm/pds-table-cell.entry.js +1 -1
- package/dist/esm/pds-text.entry.js +1 -1
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm/{truncation-tooltip-CRSdYzpA.js → truncation-tooltip-DBcPipr9.js} +1 -1
- package/dist/esm-es5/loader.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-dropdown-menu.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-DBcPipr9.js +1 -0
- package/dist/pine-core/p-0b7b3fc2.system.entry.js +3 -0
- package/dist/pine-core/{p-9a776443.entry.js → p-124a0a24.entry.js} +1 -1
- package/dist/pine-core/p-128c04e7.entry.js +1 -0
- package/dist/pine-core/p-3359a935.entry.js +1 -0
- package/dist/pine-core/{p-3d34b967.system.entry.js → p-3a1dc752.system.entry.js} +1 -1
- package/dist/pine-core/{p-20079552.system.entry.js → p-639acef8.system.entry.js} +1 -1
- package/dist/pine-core/{p-beb7a430.entry.js → p-97356d4b.entry.js} +1 -1
- package/dist/pine-core/p-BZVUD2on.js +1 -0
- package/dist/pine-core/p-Dj-z_ugg.system.js +1 -0
- package/dist/pine-core/p-XK45dzWR.system.js +1 -1
- package/dist/pine-core/{p-4d1a8803.entry.js → p-afc2f165.entry.js} +1 -1
- package/dist/pine-core/p-c6a9e62c.system.entry.js +1 -0
- package/dist/pine-core/p-d4968f9d.system.entry.js +1 -0
- package/dist/pine-core/p-da8b864a.entry.js +2 -0
- package/dist/pine-core/p-dd7ded84.entry.js +1 -0
- package/dist/pine-core/p-de455073.system.entry.js +1 -0
- package/dist/pine-core/{p-1cc39908.system.entry.js → p-eb56af4a.system.entry.js} +1 -1
- package/dist/pine-core/p-f354dbac.entry.js +1 -0
- package/dist/pine-core/{p-93fd7dd8.system.entry.js → p-f834cb07.system.entry.js} +1 -1
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-combobox/combobox-interface.d.ts +26 -0
- package/dist/types/components/pds-combobox/grouped-options-panel.d.ts +17 -0
- package/dist/types/components/pds-combobox/pds-combobox.d.ts +12 -2
- package/dist/types/components/pds-datepicker/date-utils.d.ts +19 -0
- package/dist/types/components/pds-datepicker/datepicker-interface.d.ts +2 -1
- package/dist/types/components/pds-datepicker/pds-datepicker.d.ts +30 -5
- package/dist/types/components/pds-datepicker/value.d.ts +14 -2
- package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu.d.ts +4 -0
- package/dist/types/components.d.ts +25 -10
- package/dist/types/utils/truncation-tooltip.d.ts +1 -1
- package/dist/vscode.html-data.json +11 -4
- package/hydrate/index.js +422 -142
- package/hydrate/index.mjs +422 -142
- package/package.json +2 -2
- package/dist/esm-es5/truncation-tooltip-CRSdYzpA.js +0 -1
- package/dist/pine-core/p-37718637.entry.js +0 -1
- package/dist/pine-core/p-383d84f4.entry.js +0 -2
- package/dist/pine-core/p-3e30a761.entry.js +0 -1
- package/dist/pine-core/p-54f1e86f.system.entry.js +0 -1
- package/dist/pine-core/p-73efb1ed.system.entry.js +0 -1
- package/dist/pine-core/p-8436cbfb.entry.js +0 -1
- package/dist/pine-core/p-DQyF6v9Q.system.js +0 -1
- package/dist/pine-core/p-DwQ5Tjis.js +0 -1
- package/dist/pine-core/p-b3d4f97a.system.entry.js +0 -3
- package/dist/pine-core/p-d47b2a6a.system.entry.js +0 -1
- package/dist/pine-core/p-f018af99.entry.js +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -7125,7 +7125,7 @@ const isSpecTest = () => {
|
|
|
7125
7125
|
|
|
7126
7126
|
const labelCss$5 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
|
|
7127
7127
|
|
|
7128
|
-
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input
|
|
7128
|
+
const pdsCheckboxCss = () => `:host{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--pine-color-border-danger)}:host(.is-invalid) input:checked{background:var(--pine-color-danger)}:host(.is-invalid) input:checked::after{border-color:var(--pine-color-white)}:host(.is-invalid) input:checked:hover{background:var(--pine-color-danger-hover);border-color:var(--pine-color-border-danger-hover)}:host(.is-invalid) input:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--pine-color-text-message-danger)}:host(.is-indeterminate) input{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}:host(.is-indeterminate) input:hover{background:var(--pine-color-accent);border-color:var(--pine-color-accent-hover)}:host(.is-indeterminate) input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}:host(.is-indeterminate) input:disabled::after{border-color:var(--pine-color-border)}:host(.is-indeterminate) input::after{border:var(--pine-border-width-none);-webkit-border-before:var(--pine-border-width) solid var(--pine-color-text-primary);border-block-start:var(--pine-border-width) solid var(--pine-color-text-primary);content:"";display:block;height:0;inset:0;margin:auto;position:absolute;-webkit-transform:none;transform:none;width:8px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-2xs);-ms-flex:none;flex:none;height:var(--pine-dimension-sm);margin:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025);position:relative;width:var(--pine-dimension-sm)}input:hover{background:var(--pine-color-background-container-hover);border:var(--pine-border-hover)}input:checked{background:var(--pine-color-accent);border-color:var(--pine-color-accent)}input:checked:hover{background:var(--pine-color-accent-hover);border-color:var(--pine-color-accent-hover)}input:checked::after{border:var(--pine-border-width) solid var(--pine-color-text-primary);-webkit-border-before:var(--pine-border-width-none);border-block-start:var(--pine-border-width-none);-webkit-border-start:var(--pine-border-width-none);border-inline-start:var(--pine-border-width-none);content:"";display:block;height:7px;inset-block-start:50%;inset-inline:0;margin-inline:auto;position:absolute;-webkit-transform:translateY(-60%) rotate(43deg);transform:translateY(-60%) rotate(43deg);width:4px}input:disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);cursor:not-allowed}input:disabled:checked{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled)}input:disabled:checked::after{border-color:var(--pine-color-border)}input:disabled+label{cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--pine-color-text-disabled)}input:focus-visible{outline:var(--pine-outline-focus)}:host(:not(.is-indeterminate)) input:checked:dir(rtl)::after{-webkit-transform:translateY(-60%) rotate(-43deg);transform:translateY(-60%) rotate(-43deg)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}:host(.has-label-slot) label{-ms-flex-align:center;align-items:center}:host(.has-label-slot) label,:host(.has-label-slot) label>span{min-width:0}:host(.has-label-slot) input{-webkit-margin-before:0;margin-block-start:0}.visually-hidden{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-checkbox__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:var(--pine-dimension-md);margin-inline-start:var(--pine-dimension-md);width:100%}.pds-checkbox__message--error{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-checkbox__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}:host(.pds-checkbox--pill){position:relative}:host(.pds-checkbox--pill) label{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-active);cursor:pointer;font:var(--pine-typography-body);min-block-size:var(--pine-dimension-xl);padding:0 var(--pine-dimension-sm);-webkit-transition:border-color var(--pine-motion-duration-fast) ease;transition:border-color var(--pine-motion-duration-fast) ease}:host(.pds-checkbox--pill) label span{min-width:0;overflow-wrap:anywhere}:host(.pds-checkbox--pill) label:hover{border-color:var(--pine-color-text)}:host(.pds-checkbox--pill) label:has(input:checked){border-color:var(--pine-color-text-active);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active)}:host(.pds-checkbox--pill) label:has(input:focus-visible){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick)}:host(.pds-checkbox--pill) label:has(input:disabled){background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:var(--pine-color-text-disabled);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-text-disabled)}@media (forced-colors: active){:host(.pds-checkbox--pill) label:has(input:disabled){border-color:GrayText}:host(.pds-checkbox--pill) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}:host(.pds-checkbox--pill) label:has(input:disabled:checked){border-color:GrayText;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}:host(.pds-checkbox--pill) .pds-checkbox__message{-webkit-margin-start:0;margin-inline-start:0}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label{border-color:var(--pine-color-border-danger);color:var(--pine-color-text-active)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:var(--pine-color-border-danger);-webkit-box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger);box-shadow:inset 0 0 0 var(--pine-border-width) var(--pine-color-border-danger)}:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:focus-visible){outline:var(--pine-outline-focus-danger)}@media (forced-colors: active){:host(.pds-checkbox--pill.is-invalid:not(.is-disabled)) label:has(input:checked){border-color:Highlight;border-width:var(--pine-border-width-thick);padding-inline:calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)))}}`;
|
|
7129
7129
|
|
|
7130
7130
|
/**
|
|
7131
7131
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -9063,7 +9063,7 @@ function matchesSafely(el, selector) {
|
|
|
9063
9063
|
|
|
9064
9064
|
// Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
|
|
9065
9065
|
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9066
|
-
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
9066
|
+
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"], [role="treeitem"]';
|
|
9067
9067
|
/** CSS class prefix used for truncation tooltip portal elements */
|
|
9068
9068
|
const TOOLTIP_CLASS = 'pds-truncation-tooltip';
|
|
9069
9069
|
/**
|
|
@@ -9516,12 +9516,14 @@ class PdsChip {
|
|
|
9516
9516
|
this.destroyTruncationTooltip();
|
|
9517
9517
|
if (this.labelTextEl) {
|
|
9518
9518
|
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
9519
|
+
// Hidden from assistive tech, a tab stop would be focusable with no name; hover still reveals it.
|
|
9520
|
+
const hidden = this.el.closest('[aria-hidden="true"]') !== null;
|
|
9519
9521
|
this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
|
|
9520
9522
|
// The dropdown variant's label span already sits inside
|
|
9521
9523
|
// `<button class="pds-chip__button">`, which is already focusable and
|
|
9522
9524
|
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
9523
9525
|
// a second tab stop inside the button.
|
|
9524
|
-
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper,
|
|
9526
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper && !hidden,
|
|
9525
9527
|
// A wrapping control sits outside the host, so its focus never reaches the host's listener.
|
|
9526
9528
|
focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
|
|
9527
9529
|
this.tooltipBoundEl = this.labelTextEl;
|
|
@@ -9655,7 +9657,7 @@ class PdsChip {
|
|
|
9655
9657
|
const hostClass = this.classNames();
|
|
9656
9658
|
const hostStyles = this.hostStyles;
|
|
9657
9659
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9658
|
-
return (hAsync(Host, { key: '
|
|
9660
|
+
return (hAsync(Host, { key: '0e6b05bfeae1d3b7d5cc23e71aaad2fa00fc7ddf', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9659
9661
|
}
|
|
9660
9662
|
get el() { return getElement(this); }
|
|
9661
9663
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11104,6 +11106,44 @@ function groupIconOf(optgroup) {
|
|
|
11104
11106
|
function optionIconOf(option) {
|
|
11105
11107
|
return iconOf(option);
|
|
11106
11108
|
}
|
|
11109
|
+
/** Every `pds-chip` sentiment: a sentiment added to `ChipSentimentType` fails to compile until it's listed. */
|
|
11110
|
+
const BADGE_SENTIMENTS = {
|
|
11111
|
+
accent: true,
|
|
11112
|
+
brand: true,
|
|
11113
|
+
danger: true,
|
|
11114
|
+
info: true,
|
|
11115
|
+
neutral: true,
|
|
11116
|
+
solid: true,
|
|
11117
|
+
subtle: true,
|
|
11118
|
+
success: true,
|
|
11119
|
+
warning: true,
|
|
11120
|
+
};
|
|
11121
|
+
const isBadgeSentiment = (value) => value !== null && Object.prototype.hasOwnProperty.call(BADGE_SENTIMENTS, value);
|
|
11122
|
+
/**
|
|
11123
|
+
* An option's badge from its `data-badge*` attributes, or null without a label. An unknown
|
|
11124
|
+
* sentiment falls back to `neutral`, and an icon that isn't a Pine icon name is dropped: the
|
|
11125
|
+
* badge is a `pds-chip`, whose `icon` also loads URLs.
|
|
11126
|
+
*/
|
|
11127
|
+
function optionBadgeOf(option) {
|
|
11128
|
+
return badgeOf(option);
|
|
11129
|
+
}
|
|
11130
|
+
/** An optgroup's badge from its `data-badge*` attributes, or null; the same check as an option's. */
|
|
11131
|
+
function groupBadgeOf(optgroup) {
|
|
11132
|
+
return badgeOf(optgroup);
|
|
11133
|
+
}
|
|
11134
|
+
function badgeOf(element) {
|
|
11135
|
+
var _a;
|
|
11136
|
+
const label = (_a = element.getAttribute('data-badge')) === null || _a === void 0 ? void 0 : _a.trim();
|
|
11137
|
+
if (label === undefined || label === '')
|
|
11138
|
+
return null;
|
|
11139
|
+
const sentiment = element.getAttribute('data-badge-sentiment');
|
|
11140
|
+
const icon = element.getAttribute('data-badge-icon');
|
|
11141
|
+
return {
|
|
11142
|
+
label,
|
|
11143
|
+
sentiment: isBadgeSentiment(sentiment) ? sentiment : 'neutral',
|
|
11144
|
+
icon: icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null,
|
|
11145
|
+
};
|
|
11146
|
+
}
|
|
11107
11147
|
function iconOf(element) {
|
|
11108
11148
|
const icon = element.getAttribute('data-icon');
|
|
11109
11149
|
return icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null;
|
|
@@ -11140,7 +11180,7 @@ function buildPanelEntries(items, position) {
|
|
|
11140
11180
|
if (optgroup !== null) {
|
|
11141
11181
|
let group = groups.get(optgroup);
|
|
11142
11182
|
if (!group) {
|
|
11143
|
-
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), options: [] };
|
|
11183
|
+
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), badge: groupBadgeOf(optgroup), options: [] };
|
|
11144
11184
|
groups.set(optgroup, group);
|
|
11145
11185
|
entries.push({ kind: 'group', group });
|
|
11146
11186
|
}
|
|
@@ -11365,7 +11405,7 @@ class FlyoutController {
|
|
|
11365
11405
|
}
|
|
11366
11406
|
}
|
|
11367
11407
|
|
|
11368
|
-
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__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-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input: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-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__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)}.pds-combobox__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)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);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;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{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);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-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;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{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-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__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-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11408
|
+
const pdsComboboxCss = () => `:host{display:block}:host([truncate]){display:block;min-width:0}:host([aria-disabled=true]) .pds-combobox__input-icon{color:var(--pine-color-text-disabled);pointer-events:none}.pds-combobox{position:relative}.pds-combobox__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-combobox__input-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;position:relative;width:100%}.pds-combobox__input{background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body-medium);padding:var(--pine-dimension-xs) var(--pine-dimension-450) var(--pine-dimension-xs) var(--pine-dimension-150);-webkit-transition:border-color var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease;width:100%}.pds-combobox__input:hover:not(:disabled){border-color:var(--pine-color-border-hover)}.pds-combobox__input: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-combobox__input:disabled::-webkit-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-moz-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled:-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::-ms-input-placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:disabled::placeholder{color:var(--pine-color-text-placeholder-disabled)}.pds-combobox__input:focus-visible{border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}:host-context([data-theme=dark]) .pds-combobox__input.pds-combobox__input--invalid{background:var(--pine-color-red-950)}.pds-combobox__input.pds-combobox__input--invalid:hover:not(:disabled){border-color:var(--pine-color-border-danger)}.pds-combobox__input.pds-combobox__input--invalid:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-combobox__input-icon{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-150);pointer-events:none;position:absolute;z-index:calc(var(--pine-z-index-raised) - 1)}.pds-combobox__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)}.pds-combobox__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)}.pds-combobox__error pds-icon{-ms-flex-negative:0;flex-shrink:0;-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.pds-combobox__listbox{background:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);list-style:none;margin:0;min-width:220px;overflow-y:auto;padding:var(--pine-dimension-xs);position:absolute;z-index:var(--pine-z-index-raised)}.pds-combobox__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__option[aria-selected=true]{background:var(--pine-color-background-muted)}.pds-combobox__option:focus-visible{outline:0}.pds-combobox__option.pds-combobox__option--layout .pds-combobox__option-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option.pds-combobox__option--chip .pds-combobox__option-chip{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__option:last-child{-webkit-margin-after:0;margin-block-end:0}.pds-combobox__option--highlighted,.pds-combobox__option[selected],.pds-combobox__option--selected{background:var(--pine-color-background-muted)}.pds-combobox__option--disabled,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger,.pds-combobox__group-back--disabled>.pds-combobox__group-back-trigger,.pds-combobox__group--disabled>.pds-combobox__group-label{color:var(--pine-color-text-disabled)}.pds-combobox__option--disabled{cursor:not-allowed}.pds-combobox__option--disabled .pds-combobox__option-chip,.pds-combobox__option--disabled .pds-combobox__option-layout-wrapper,.pds-combobox__option--disabled .pds-combobox__option-badge,.pds-combobox__group-row--disabled>.pds-combobox__group-row-trigger>.pds-combobox__group-badge,.pds-combobox__group--disabled>.pds-combobox__group-label>.pds-combobox__group-badge{opacity:0.5}.pds-combobox__option-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__option-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--truncate .pds-combobox__option-label{-ms-flex:1 1 auto;flex:1 1 auto;overflow-wrap:normal}.pds-combobox__listbox--truncate .pds-combobox__option-check{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__option--with-badge{-webkit-column-gap:var(--pine-dimension-xs);-moz-column-gap:var(--pine-dimension-xs);column-gap:var(--pine-dimension-xs)}.pds-combobox__option-badge,.pds-combobox__group-badge{-ms-flex-negative:0;flex-shrink:0;isolation:isolate;margin-block:calc(var(--pine-dimension-025) * -1);-webkit-margin-start:auto;margin-inline-start:auto}.pds-combobox__option--with-badge .pds-combobox__option-check{-webkit-margin-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs));margin-inline-start:calc(var(--pine-dimension-150) - var(--pine-dimension-xs))}.pds-combobox__option-check{color:currentColor;font-size:var(--pine-dimension-150);-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__group-label{color:var(--pine-color-text-tertiary);cursor:default;font:var(--pine-typography-heading-caption);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm);text-transform:uppercase}.pds-combobox__group-label:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group{list-style:none;-webkit-margin-before:var(--pine-dimension-150);margin-block-start:var(--pine-dimension-150)}.pds-combobox__group:first-child{-webkit-margin-before:0;margin-block-start:0}.pds-combobox__group-list{list-style:none;margin:0;padding:0}.pds-combobox__listbox--grouped .pds-combobox__group-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs)}.pds-combobox__group-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__group-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__group-label--with-badge{-ms-flex-align:center;align-items:center;-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}.pds-combobox__group-label-text{min-width:0;overflow-wrap:anywhere}.pds-combobox__group-label>.pds-combobox__group-badge{margin-block:calc(var(--pine-dimension-xs) * -1);text-transform:none}.pds-combobox__group-row{list-style:none;position:relative}.pds-combobox__group-row-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-125);color:var(--pine-color-text-secondary);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;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-combobox__group-row--open>.pds-combobox__group-row-trigger,.pds-combobox__group-row--has-selection>.pds-combobox__group-row-trigger,.pds-combobox__group-row--highlighted>.pds-combobox__group-row-trigger,.pds-combobox__group-back--highlighted>.pds-combobox__group-row-trigger{background:var(--pine-color-background-muted)}.pds-combobox__listbox--pointer-hover .pds-combobox__group-row-trigger:hover{background:var(--pine-color-background-muted)}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out{overflow-x:hidden}.pds-combobox__listbox--drill-in,.pds-combobox__listbox--drill-out:dir(rtl){--pds-combobox-drill-from:var(--pine-dimension-sm)}.pds-combobox__listbox--drill-out,.pds-combobox__listbox--drill-in:dir(rtl){--pds-combobox-drill-from:calc(var(--pine-dimension-sm) * -1)}.pds-combobox__listbox--drill-in .pds-combobox__drill-in-options>li,.pds-combobox__listbox--drill-in .pds-combobox__group-back-trigger,.pds-combobox__listbox--drill-out>li{-webkit-animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out);animation:pds-combobox-drill var(--pine-motion-duration-base) var(--pine-motion-easing-out)}@-webkit-keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}@keyframes pds-combobox-drill{from{opacity:0;-webkit-transform:translateX(var(--pds-combobox-drill-from));transform:translateX(var(--pds-combobox-drill-from))}}.pds-combobox__group-row--keyboard>.pds-combobox__group-row-trigger,.pds-combobox__group-back--keyboard>.pds-combobox__group-row-trigger{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width) * -2)}.pds-combobox__group-row-label{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);min-width:0;overflow-wrap:anywhere}.pds-combobox__group-row-caret{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__listbox--grouped,.pds-combobox__flyout{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);padding:var(--pine-dimension-2xs)}.pds-combobox__flyout{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);list-style:none;margin:0;overflow-y:auto;position:fixed;visibility:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;z-index:1}.pds-combobox__listbox--with-search{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden;padding:0}.pds-combobox__listbox-options{-ms-flex:1;flex:1;list-style:none;margin:0;min-height:0;overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-combobox__listbox-options.pds-combobox__listbox--grouped{padding:var(--pine-dimension-2xs)}.pds-combobox__panel-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;-ms-flex-negative:0;flex-shrink:0;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-sm)}.pds-combobox__panel-search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:0;flex-shrink:0}.pds-combobox__panel-search:focus-within{border-block-end-color:var(--pine-color-border-active)}.pds-combobox__panel-search-input{background:transparent;border:0;color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:0;outline:none;padding:0}.pds-combobox__panel-search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__panel-search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-combobox__group-back{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none}.pds-combobox__group-back-trigger{-ms-flex-pack:start;justify-content:flex-start}.pds-combobox__listbox-options--drilled-in.pds-combobox__listbox--grouped{-webkit-padding-before:0;padding-block-start:0}.pds-combobox__listbox-options--drilled-in:focus{outline:none}.pds-combobox__listbox-options--drilled-in:focus .pds-combobox__group-back-trigger{border-block-end-color:var(--pine-color-border-active)}:where(.pds-combobox__listbox-options--drilled-in) .pds-combobox__group-back-trigger{background-color:var(--pine-color-background-overlay);-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);border-radius:0;color:var(--pine-color-text-strong);font:var(--pine-typography-body);inset-block-start:0;letter-spacing:var(--pine-letter-spacing);margin-inline:calc(var(--pine-dimension-2xs) * -1);padding:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky;z-index:1}.pds-combobox__drill-in-options{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);list-style:none;margin:0;padding:0}.visually-hidden{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-combobox__loading{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-150)}.pds-combobox__empty{color:var(--pine-color-text-tertiary);padding:var(--pine-dimension-150) var(--pine-dimension-sm);text-align:center}.pds-combobox__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-150)}:host(.pds-combobox-dropdown-portal) .pds-combobox__listbox{position:fixed;z-index:var(--pine-z-index-priority)}.pds-combobox__button-trigger{-ms-flex-align:center;align-items:center;background:var(--color-background-default, var(--pine-color-secondary));border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default, var(--pine-color-text-inverse-emphasis));cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;min-height:var(--pine-dimension-450);outline:none;padding:0 var(--pine-dimension-sm);-webkit-transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, background 0.15s, -webkit-box-shadow 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s;transition:border-color 0.15s, box-shadow 0.15s, background 0.15s, -webkit-box-shadow 0.15s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__button-trigger .pds-combobox__button-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__button-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__button-trigger:focus-visible{border-color:var(--color-border-focus, var(--pine-color-border));-webkit-box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring));box-shadow:0 0 0 2px var(--color-outline, var(--pine-color-focus-ring))}.pds-combobox__button-trigger:hover{background:var(--color-background-hover, var(--pine-color-secondary-hover));border-color:var(--color-border-hover, var(--pine-color-border-hover))}.pds-combobox__button-trigger[aria-disabled=true],.pds-combobox__button-trigger:disabled{background:var(--color-background-disabled, var(--pine-color-secondary-disabled));border-color:var(--color-border-disabled, var(--pine-color-border-disabled));color:var(--color-text-disabled, var(--pine-color-text-secondary-disabled));cursor:not-allowed;opacity:0.6}.pds-combobox__button-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow-wrap:anywhere;text-align:start}.pds-combobox__button-trigger-label--with-icon{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs)}.pds-combobox__button-trigger-icon{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger--truncate{max-width:100%}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-label{overflow-wrap:normal}.pds-combobox__button-trigger--truncate .pds-combobox__button-trigger-chevron{-ms-flex-negative:0;flex-shrink:0}.pds-combobox__button-trigger-text,.pds-combobox__listbox--truncate .pds-combobox__option-text{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-combobox__button-trigger--input-shape{border-radius:var(--pine-dimension-125);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-150)}.pds-combobox__button-trigger--secondary.pds-combobox__button-trigger--input-shape:not([aria-disabled=true]) .pds-combobox__button-trigger-label--placeholder{color:var(--pine-color-text-muted)}.pds-combobox__button-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__button-trigger--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-border-disabled:var(--pine-color-primary-disabled);--color-border-focus:var(--pine-color-primary);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-border-disabled:var(--pine-color-accent-disabled);--color-border-focus:var(--pine-color-accent);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--secondary{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-default:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring)}.pds-combobox__button-trigger--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-border-disabled:var(--pine-color-danger-disabled);--color-border-focus:var(--pine-color-danger);--color-text-default:var(--pine-color-white);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger)}[data-layout]{border-radius:var(--pine-dimension-125);padding-block:var(--pine-dimension-xs)}.pds-combobox__chip-trigger{-ms-flex-align:center;align-items:center;border-radius:var(--pine-dimension-sm);-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font:var(--pine-typography-body-medium);-ms-flex-pack:justify;justify-content:space-between;outline:none;padding-block:var(--pine-dimension-025);padding-inline:var(--pine-dimension-150);-webkit-transition:all 0.15s ease;transition:all 0.15s ease;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.pds-combobox__chip-trigger .pds-combobox__chip-trigger-layout-wrapper{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1;flex:1}.pds-combobox__chip-trigger .trigger-content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:100%}.pds-combobox__chip-trigger:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-combobox__chip-trigger[aria-disabled=true]{cursor:not-allowed;opacity:0.6}.pds-combobox__chip-trigger-label{color:inherit;-ms-flex:1 1 auto;flex:1 1 auto;text-align:start}.pds-combobox__chip-trigger-chevron{color:currentColor;-webkit-margin-start:var(--pine-dimension-150);margin-inline-start:var(--pine-dimension-150)}.pds-combobox__chip-trigger-icon{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-combobox__chip-trigger--neutral,.pds-combobox__chip-trigger--accent,.pds-combobox__chip-trigger--success,.pds-combobox__chip-trigger--warning,.pds-combobox__chip-trigger--danger,.pds-combobox__chip-trigger--info{background:var(--chip-bg);border:var(--pine-border-width) solid var(--chip-border);color:var(--chip-text)}.pds-combobox__chip-trigger--neutral:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--accent:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--success:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--warning:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--danger:hover:not([aria-disabled=true]),.pds-combobox__chip-trigger--info:hover:not([aria-disabled=true]){background:var(--chip-bg-hover)}.pds-combobox__chip-trigger--neutral:focus-visible,.pds-combobox__chip-trigger--accent:focus-visible,.pds-combobox__chip-trigger--success:focus-visible,.pds-combobox__chip-trigger--warning:focus-visible,.pds-combobox__chip-trigger--danger:focus-visible,.pds-combobox__chip-trigger--info:focus-visible{border-color:var(--chip-border)}.pds-combobox__chip-trigger--neutral{--chip-bg:var(--pine-chip-color-neutral);--chip-bg-hover:var(--pine-chip-color-neutral-hover);--chip-border:var(--pine-chip-color-neutral-hover);--chip-text:var(--pine-color-text-neutral)}.pds-combobox__chip-trigger--accent{--chip-bg:var(--pine-chip-color-accent);--chip-bg-hover:var(--pine-chip-color-accent-hover);--chip-border:var(--pine-chip-color-accent-hover);--chip-text:var(--pine-color-text-accent)}.pds-combobox__chip-trigger--success{--chip-bg:var(--pine-chip-color-success);--chip-bg-hover:var(--pine-chip-color-success-hover);--chip-border:var(--pine-chip-color-success-hover);--chip-text:var(--pine-color-text-success)}.pds-combobox__chip-trigger--warning{--chip-bg:var(--pine-chip-color-warning);--chip-bg-hover:var(--pine-chip-color-warning-hover);--chip-border:var(--pine-chip-color-warning-hover);--chip-text:var(--pine-color-text-warning)}.pds-combobox__chip-trigger--danger{--chip-bg:var(--pine-chip-color-danger);--chip-bg-hover:var(--pine-chip-color-danger-hover);--chip-border:var(--pine-chip-color-danger-hover);--chip-text:var(--pine-color-text-danger)}.pds-combobox__chip-trigger--info{--chip-bg:var(--pine-chip-color-info);--chip-bg-hover:var(--pine-chip-color-info-hover);--chip-border:var(--pine-chip-color-info-hover);--chip-text:var(--pine-color-text-info)}.pds-combobox__chip-trigger--brand{background:-webkit-gradient(linear, left top, right top, from(#FF3E14), to(#6B62F2));background:linear-gradient(90deg, #FF3E14 0%, #6B62F2 100%);border:0;color:var(--pine-color-text-neutral);padding:1px;position:relative}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.9);border-radius:calc(var(--pine-dimension-sm) - 1px);color:var(--pine-color-text-neutral);font-weight:var(--pine-font-weight-medium);padding:var(--pine-dimension-025) var(--pine-dimension-150);position:relative;z-index:1}.pds-combobox__chip-trigger--brand .pds-combobox__chip-trigger-chevron{position:relative;z-index:1}.pds-combobox__chip-trigger--brand:hover:not([aria-disabled=true]) .pds-combobox__chip-trigger-label{background:rgba(255, 255, 255, 0.8)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand){padding:var(--pine-dimension-none)}.pds-combobox__chip-trigger--dropdown:not(.pds-combobox__chip-trigger--brand) .pds-combobox__chip-trigger-label{padding:var(--pine-dimension-025) var(--pine-dimension-150)}.pds-combobox__chip-trigger--large .pds-combobox__chip-trigger-label{font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-combobox__chip-trigger--dot .pds-combobox__chip-trigger-label::before{border:var(--pine-border-width) solid transparent;border-radius:var(--pine-border-radius-full);content:"";display:inline-block;height:var(--pine-dimension-2xs);-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs);width:var(--pine-dimension-2xs)}`;
|
|
11369
11409
|
|
|
11370
11410
|
/**
|
|
11371
11411
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -12499,6 +12539,7 @@ class PdsCombobox {
|
|
|
12499
12539
|
// Only strings group an option or name an icon; anything else from JS is ignored, not coerced.
|
|
12500
12540
|
if (typeof opt.icon === 'string' && opt.icon !== '')
|
|
12501
12541
|
optionEl.setAttribute('data-icon', opt.icon);
|
|
12542
|
+
this.setBadgeAttributes(optionEl, opt.badge);
|
|
12502
12543
|
if (typeof opt.group !== 'string' || opt.group === '') {
|
|
12503
12544
|
ungrouped.push(optionEl);
|
|
12504
12545
|
this.panelPositions.set(optionEl, position);
|
|
@@ -12515,6 +12556,8 @@ class PdsCombobox {
|
|
|
12515
12556
|
if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
|
|
12516
12557
|
optgroup.setAttribute('data-icon', opt.groupIcon);
|
|
12517
12558
|
}
|
|
12559
|
+
if (!optgroup.hasAttribute('data-badge'))
|
|
12560
|
+
this.setBadgeAttributes(optgroup, opt.groupBadge);
|
|
12518
12561
|
optgroup.appendChild(optionEl);
|
|
12519
12562
|
});
|
|
12520
12563
|
[...ungrouped, ...groupEntries].forEach(entry => {
|
|
@@ -13003,7 +13046,10 @@ class PdsCombobox {
|
|
|
13003
13046
|
};
|
|
13004
13047
|
const reveal = () => {
|
|
13005
13048
|
e.preventDefault();
|
|
13006
|
-
|
|
13049
|
+
// The row's name, badge and all, as the row itself is named.
|
|
13050
|
+
const optgroup = current;
|
|
13051
|
+
const badge = groupBadgeOf(optgroup);
|
|
13052
|
+
this.revealedGroupLabel = badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`;
|
|
13007
13053
|
return true;
|
|
13008
13054
|
};
|
|
13009
13055
|
switch (e.key) {
|
|
@@ -13552,11 +13598,16 @@ class PdsCombobox {
|
|
|
13552
13598
|
return;
|
|
13553
13599
|
const { optgroup, key, options, members } = group;
|
|
13554
13600
|
const groupIcon = groupIconOf(optgroup);
|
|
13601
|
+
const badge = groupBadgeOf(optgroup);
|
|
13555
13602
|
// As in the grouped displays: disabled when there's nothing left in it to choose.
|
|
13556
13603
|
const disabled = members.length > 0 && members.every(member => isOptionDisabled(member));
|
|
13557
|
-
rendered.push(hAsync("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": optgroup.label, "aria-disabled": disabled ? 'true' : undefined }, hAsync("div", { class: {
|
|
13604
|
+
rendered.push(hAsync("li", { key: key, class: { 'pds-combobox__group': true, 'pds-combobox__group--disabled': disabled }, role: "group", "aria-label": badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`, "aria-disabled": disabled ? 'true' : undefined }, hAsync("div", { class: {
|
|
13605
|
+
'pds-combobox__group-label': true,
|
|
13606
|
+
'pds-combobox__group-label--with-icon': groupIcon !== null,
|
|
13607
|
+
'pds-combobox__group-label--with-badge': badge !== null,
|
|
13608
|
+
}, "aria-hidden": "true" }, groupIcon !== null && (
|
|
13558
13609
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13559
|
-
hAsync("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), optgroup.label), hAsync("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
|
|
13610
|
+
hAsync("pds-icon", { name: groupIcon, size: "small", "aria-hidden": "true", class: "pds-combobox__group-icon" })), badge === null ? optgroup.label : hAsync("span", { class: "pds-combobox__group-label-text" }, optgroup.label), this.renderBadge(badge, 'pds-combobox__group-badge')), hAsync("ul", { class: "pds-combobox__group-list", role: "presentation" }, options)));
|
|
13560
13611
|
group = null;
|
|
13561
13612
|
};
|
|
13562
13613
|
this.filteredItems.forEach((item, itemIdx) => {
|
|
@@ -13682,20 +13733,56 @@ class PdsCombobox {
|
|
|
13682
13733
|
const isChip = this.isOptionChip(option);
|
|
13683
13734
|
const isDisabled = isOptionDisabled(option);
|
|
13684
13735
|
const tree = level !== undefined;
|
|
13685
|
-
|
|
13736
|
+
const badge = isLayout || isChip ? null : optionBadgeOf(option);
|
|
13737
|
+
return (hAsync("li", { key: option.value, id: this.optionDomId(index), role: tree ? 'treeitem' : 'option', "aria-selected": isSelected ? 'true' : tree ? undefined : 'false', "aria-disabled": isDisabled ? 'true' : undefined, "aria-level": level, "aria-setsize": setsize, "aria-posinset": posinset, "aria-label": isLayout || isChip
|
|
13738
|
+
? option.getAttribute('aria-label') || this.getOptionLabel(option)
|
|
13739
|
+
: badge && `${this.getOptionLabel(option)}, ${badge.label}`, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
|
|
13686
13740
|
'pds-combobox__option': true,
|
|
13687
13741
|
'pds-combobox__option--highlighted': isHighlighted,
|
|
13688
13742
|
'pds-combobox__option--layout': isLayout,
|
|
13689
13743
|
'pds-combobox__option--chip': isChip,
|
|
13690
13744
|
'pds-combobox__option--disabled': isDisabled,
|
|
13691
|
-
|
|
13745
|
+
'pds-combobox__option--with-badge': badge !== null,
|
|
13746
|
+
}, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : ([this.renderOptionLabel(option), this.renderOptionBadge(option)]), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
|
|
13747
|
+
}
|
|
13748
|
+
/** Copies an `options` badge to an option's or optgroup's `data-badge*` attributes; only strings count. */
|
|
13749
|
+
setBadgeAttributes(element, badge) {
|
|
13750
|
+
if (typeof badge !== 'object' || badge === null)
|
|
13751
|
+
return;
|
|
13752
|
+
const { label, sentiment, icon } = badge;
|
|
13753
|
+
if (typeof label !== 'string' || label.trim() === '')
|
|
13754
|
+
return;
|
|
13755
|
+
element.setAttribute('data-badge', label);
|
|
13756
|
+
if (typeof sentiment === 'string')
|
|
13757
|
+
element.setAttribute('data-badge-sentiment', sentiment);
|
|
13758
|
+
if (typeof icon === 'string')
|
|
13759
|
+
element.setAttribute('data-badge-icon', icon);
|
|
13760
|
+
}
|
|
13761
|
+
/** An option's badge, after its text. */
|
|
13762
|
+
renderOptionBadge(option) {
|
|
13763
|
+
return this.renderBadge(optionBadgeOf(option), 'pds-combobox__option-badge');
|
|
13764
|
+
}
|
|
13765
|
+
/** A badge as a `pds-chip`: after an option's text, or a group's label. */
|
|
13766
|
+
renderBadge(badge, className) {
|
|
13767
|
+
var _a;
|
|
13768
|
+
if (badge === null)
|
|
13769
|
+
return null;
|
|
13770
|
+
return (hAsync("pds-chip", { size: "sm", sentiment: badge.sentiment,
|
|
13771
|
+
// A Pine icon name only, checked by optionBadgeOf; pds-chip's `icon` also loads URLs.
|
|
13772
|
+
icon: (_a = badge.icon) !== null && _a !== void 0 ? _a : undefined,
|
|
13773
|
+
// A long label, often a translated one, truncates rather than squeezing the option's text.
|
|
13774
|
+
maxWidth: "50%", class: className }, badge.label));
|
|
13692
13775
|
}
|
|
13693
|
-
/**
|
|
13776
|
+
/**
|
|
13777
|
+
* An option's text, after its `data-icon` when it has one. Beside a badge the text is always
|
|
13778
|
+
* wrapped, so it can shrink and wrap rather than push the badge out of the row.
|
|
13779
|
+
*/
|
|
13694
13780
|
renderOptionLabel(option) {
|
|
13695
13781
|
const icon = optionIconOf(option);
|
|
13696
13782
|
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13697
|
-
if (icon === null)
|
|
13698
|
-
return label;
|
|
13783
|
+
if (icon === null) {
|
|
13784
|
+
return optionBadgeOf(option) === null ? label : hAsync("span", { class: "pds-combobox__option-label" }, label);
|
|
13785
|
+
}
|
|
13699
13786
|
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13700
13787
|
}
|
|
13701
13788
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
@@ -13734,7 +13821,8 @@ class PdsCombobox {
|
|
|
13734
13821
|
}
|
|
13735
13822
|
/**
|
|
13736
13823
|
* Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
|
|
13737
|
-
* leads its options.
|
|
13824
|
+
* leads its options. It leaves out the group's badge: the row is a way back, not a group to
|
|
13825
|
+
* choose, and the badge was on the row that opened it. An option's own badge still shows.
|
|
13738
13826
|
*/
|
|
13739
13827
|
renderGroupBackRow(group, { posinset, setsize }) {
|
|
13740
13828
|
const id = this.groupDomId(group.optgroup);
|
|
@@ -13763,9 +13851,9 @@ class PdsCombobox {
|
|
|
13763
13851
|
'pds-combobox__group-row--highlighted': isCurrent && (flyout || this.keyboardNavigating),
|
|
13764
13852
|
'pds-combobox__group-row--keyboard': isCurrent && this.keyboardNavigating,
|
|
13765
13853
|
'pds-combobox__group-row--disabled': disabled,
|
|
13766
|
-
}, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": `${id}-label`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, hAsync("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
|
|
13854
|
+
}, role: "treeitem", "aria-expanded": isOpen ? 'true' : 'false', "aria-disabled": disabled ? 'true' : undefined, "aria-level": 1, "aria-posinset": posinset, "aria-setsize": setsize, "aria-labelledby": group.badge === null ? `${id}-label` : undefined, "aria-label": group.badge === null ? undefined : `${group.label}, ${group.badge.label}`, "data-group-index": groupIndex, onMouseEnter: flyout ? this.onGroupRowMouseEnter : undefined, onMouseLeave: flyout ? this.onGroupRowMouseLeave : undefined }, hAsync("div", { class: "pds-combobox__group-row-trigger", "data-group-index": groupIndex, onMouseDown: this.onOptionMouseDown, onMouseEnter: this.onGroupRowTriggerMouseEnter, onClick: this.onGroupRowClick }, hAsync("span", { class: "pds-combobox__group-row-label", id: `${id}-label` }, group.icon !== null && (
|
|
13767
13855
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13768
|
-
hAsync("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), hAsync("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (hAsync("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
|
|
13856
|
+
hAsync("pds-icon", { name: group.icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__group-icon" })), group.label), this.renderBadge(group.badge, 'pds-combobox__group-badge'), hAsync("pds-icon", { name: "caret-right", size: "regular", "aria-hidden": "true", class: "pds-combobox__group-row-caret" })), isOpen && (hAsync("ul", { class: "pds-combobox__flyout", role: "group", "aria-label": group.label, style: { minWidth: this.flyoutMinWidth, maxWidth: this.flyoutMaxWidth } }, this.renderGroupOptions(group)))));
|
|
13769
13857
|
}
|
|
13770
13858
|
// Helper method to render the caret icon
|
|
13771
13859
|
renderCaretIcon() {
|
|
@@ -13922,13 +14010,13 @@ class PdsCombobox {
|
|
|
13922
14010
|
]
|
|
13923
14011
|
.filter(Boolean)
|
|
13924
14012
|
.join(' ');
|
|
13925
|
-
return (hAsync(Host, { key: '
|
|
14013
|
+
return (hAsync(Host, { key: '104eb1c4cdca4494b10dea660e27a98b0c18bf64', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '2548ff2b304bb6a5a249b5059a0b60b55cdf2152', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '7a261c72452ca7a278e1067e41c6eed52f29edc8', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
|
|
13926
14014
|
this.inputEl = el;
|
|
13927
14015
|
this.triggerEl = el;
|
|
13928
14016
|
}, class: {
|
|
13929
14017
|
'pds-combobox__input': true,
|
|
13930
14018
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13931
|
-
}, 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" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("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())) : (hAsync("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, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '
|
|
14019
|
+
}, 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" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("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())) : (hAsync("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, onMouseEnter: this.truncate ? this.onButtonTriggerMouseEnter : undefined, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: 'ffd3bc72b34a7278f3fa706a236017a26b86ea3f', style: { display: 'none' } }, hAsync("slot", { key: 'f47a81191ad7fd8c6bf63cf8ef39934cbf7fd28c', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
|
|
13932
14020
|
hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
|
|
13933
14021
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13934
14022
|
// same, and opening the group would go unannounced.
|
|
@@ -14417,6 +14505,48 @@ function dateFormatter(locale, options) {
|
|
|
14417
14505
|
function formatDate(date, locale, options) {
|
|
14418
14506
|
return dateFormatter(locale, options).format(date);
|
|
14419
14507
|
}
|
|
14508
|
+
/**
|
|
14509
|
+
* Month-day mode's year. A leap year, so February has its 29th; every date the mode holds is in it,
|
|
14510
|
+
* and the value drops it (`--MM-DD`).
|
|
14511
|
+
*/
|
|
14512
|
+
const MONTH_DAY_YEAR = 2000;
|
|
14513
|
+
const MONTH_DAY = /^--(\d{2})-(\d{2})$/;
|
|
14514
|
+
/** The same month and day in month-day mode's year. */
|
|
14515
|
+
function inMonthDayYear(date) {
|
|
14516
|
+
return new Date(Date.UTC(MONTH_DAY_YEAR, date.getUTCMonth(), date.getUTCDate()));
|
|
14517
|
+
}
|
|
14518
|
+
/**
|
|
14519
|
+
* Parses a month and day, `--MM-DD` (ISO 8601 without a year), to a date in month-day mode's year.
|
|
14520
|
+
* A full `YYYY-MM-DD` reads as its month and day. `null` when it isn't a real month and day.
|
|
14521
|
+
*/
|
|
14522
|
+
function parseMonthDay(value) {
|
|
14523
|
+
const text = (value !== null && value !== void 0 ? value : '').trim();
|
|
14524
|
+
const match = MONTH_DAY.exec(text);
|
|
14525
|
+
if (match)
|
|
14526
|
+
return parseIsoDate(`${MONTH_DAY_YEAR}-${match[1]}-${match[2]}`);
|
|
14527
|
+
const date = parseIsoDate(text);
|
|
14528
|
+
return date && inMonthDayYear(date);
|
|
14529
|
+
}
|
|
14530
|
+
/** A date's month and day as `--MM-DD`. */
|
|
14531
|
+
function toMonthDay(date) {
|
|
14532
|
+
return `-${toIsoDate(date).slice(4)}`;
|
|
14533
|
+
}
|
|
14534
|
+
/**
|
|
14535
|
+
* A month's days for month-day mode, which has no weekdays: rows of seven from the 1st, with the
|
|
14536
|
+
* last row filled out with `null`.
|
|
14537
|
+
*/
|
|
14538
|
+
function monthDayRows(month) {
|
|
14539
|
+
const cells = [];
|
|
14540
|
+
for (let day = 1; day <= daysInMonth(MONTH_DAY_YEAR, month); day++) {
|
|
14541
|
+
cells.push(new Date(Date.UTC(MONTH_DAY_YEAR, month, day)));
|
|
14542
|
+
}
|
|
14543
|
+
while (cells.length % 7 !== 0)
|
|
14544
|
+
cells.push(null);
|
|
14545
|
+
const rows = [];
|
|
14546
|
+
for (let i = 0; i < cells.length; i += 7)
|
|
14547
|
+
rows.push(cells.slice(i, i + 7));
|
|
14548
|
+
return rows;
|
|
14549
|
+
}
|
|
14420
14550
|
|
|
14421
14551
|
/**
|
|
14422
14552
|
* Where the open calendar lives: a `div` in `document.body`, or in the nearest `<dialog>` so it
|
|
@@ -14660,32 +14790,50 @@ const wordsCache = new Map();
|
|
|
14660
14790
|
function localeWords(locale) {
|
|
14661
14791
|
let words = wordsCache.get(locale);
|
|
14662
14792
|
if (!words) {
|
|
14663
|
-
const month = (style) => {
|
|
14664
|
-
const format = new Intl.DateTimeFormat(locale, {
|
|
14665
|
-
|
|
14666
|
-
|
|
14667
|
-
|
|
14793
|
+
const month = (style, withDay) => {
|
|
14794
|
+
const format = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({ month: style }, (withDay ? { day: 'numeric' } : {})), { timeZone: 'UTC', calendar: 'gregory' }));
|
|
14795
|
+
return Array.from({ length: 12 }, (_, m) => {
|
|
14796
|
+
const date = new Date(Date.UTC(2023, m, 1));
|
|
14797
|
+
if (!withDay)
|
|
14798
|
+
return format.format(date);
|
|
14799
|
+
const parts = format.formatToParts(date);
|
|
14800
|
+
const index = parts.findIndex((part) => part.type === 'month');
|
|
14801
|
+
if (index === -1)
|
|
14802
|
+
return format.format(date);
|
|
14803
|
+
// CJK locales split a counter word, as Japanese `月`, into its own literal right after the
|
|
14804
|
+
// month; a literal with no space is that word, not the separator before the day.
|
|
14805
|
+
const suffix = parts[index + 1];
|
|
14806
|
+
return (suffix === null || suffix === void 0 ? void 0 : suffix.type) === 'literal' && !/\s/.test(suffix.value) ? parts[index].value + suffix.value : parts[index].value;
|
|
14668
14807
|
});
|
|
14669
|
-
return Array.from({ length: 12 }, (_, m) => format.format(new Date(Date.UTC(2023, m, 1))));
|
|
14670
14808
|
};
|
|
14671
14809
|
const clock = clockFor(locale);
|
|
14672
|
-
words = {
|
|
14810
|
+
words = {
|
|
14811
|
+
months: month('long', false),
|
|
14812
|
+
shortMonths: month('short', false),
|
|
14813
|
+
monthsWithDay: month('long', true),
|
|
14814
|
+
shortMonthsWithDay: month('short', true),
|
|
14815
|
+
am: clock.am,
|
|
14816
|
+
pm: clock.pm,
|
|
14817
|
+
};
|
|
14673
14818
|
wordsCache.set(locale, words);
|
|
14674
14819
|
}
|
|
14675
14820
|
return words;
|
|
14676
14821
|
}
|
|
14822
|
+
/** Whether a format's tokens (see `tokensOnly`) have a day, so a month name should inflect for one. */
|
|
14823
|
+
const hasDayToken = (tokens) => /D/.test(tokens);
|
|
14677
14824
|
/** Writes a date in a format of tokens (see `FORMAT_PARTS`), with month names and AM/PM in the locale. */
|
|
14678
14825
|
function formatWith(value, format, locale = 'en-US') {
|
|
14679
14826
|
var _a;
|
|
14680
14827
|
const words = localeWords(locale);
|
|
14828
|
+
const withDay = hasDayToken(tokensOnly(format));
|
|
14681
14829
|
const [hours, minutes] = splitTime((_a = value.time) !== null && _a !== void 0 ? _a : '00:00');
|
|
14682
14830
|
const hour12 = hours % 12 || 12;
|
|
14683
14831
|
const month = value.date.getUTCMonth();
|
|
14684
14832
|
const period = hours < 12 ? words.am : words.pm;
|
|
14685
14833
|
const parts = {
|
|
14686
14834
|
YYYY: pad(value.date.getUTCFullYear(), 4),
|
|
14687
|
-
MMMM: words.months[month],
|
|
14688
|
-
MMM: words.shortMonths[month],
|
|
14835
|
+
MMMM: withDay ? words.monthsWithDay[month] : words.months[month],
|
|
14836
|
+
MMM: withDay ? words.shortMonthsWithDay[month] : words.shortMonths[month],
|
|
14689
14837
|
MM: pad(month + 1),
|
|
14690
14838
|
M: String(month + 1),
|
|
14691
14839
|
DD: pad(value.date.getUTCDate()),
|
|
@@ -14707,17 +14855,23 @@ const alternatives = (words) => `(${words.map(escapeRegExp).join('|')})`;
|
|
|
14707
14855
|
/**
|
|
14708
14856
|
* Reads typed text in a format of tokens, as written by `formatWith`. Leading zeros are optional,
|
|
14709
14857
|
* spaces are loose, and month names and AM/PM are matched without regard to case, in the locale or
|
|
14710
|
-
* in English.
|
|
14858
|
+
* in English. A format without `YYYY` reads into `year`, and without `year` it reads nothing.
|
|
14859
|
+
* Returns `null` for anything that isn't a real date and time in that format.
|
|
14711
14860
|
*/
|
|
14712
|
-
function parseWith(text, format, locale = 'en-US') {
|
|
14861
|
+
function parseWith(text, format, locale = 'en-US', year) {
|
|
14713
14862
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
14714
14863
|
const words = localeWords(locale);
|
|
14715
14864
|
const english = localeWords('en-US');
|
|
14865
|
+
const withDay = hasDayToken(tokensOnly(format));
|
|
14866
|
+
const months = withDay ? words.monthsWithDay : words.months;
|
|
14867
|
+
const shortMonths = withDay ? words.shortMonthsWithDay : words.shortMonths;
|
|
14868
|
+
const englishMonths = withDay ? english.monthsWithDay : english.months;
|
|
14869
|
+
const englishShortMonths = withDay ? english.shortMonthsWithDay : english.shortMonths;
|
|
14716
14870
|
const periods = [words.am, words.pm, english.am, english.pm];
|
|
14717
14871
|
const patterns = {
|
|
14718
14872
|
YYYY: '(\\d{4})',
|
|
14719
|
-
MMMM: alternatives([...
|
|
14720
|
-
MMM: alternatives([...
|
|
14873
|
+
MMMM: alternatives([...months, ...englishMonths]),
|
|
14874
|
+
MMM: alternatives([...shortMonths, ...englishShortMonths]),
|
|
14721
14875
|
MM: '(\\d{1,2})',
|
|
14722
14876
|
M: '(\\d{1,2})',
|
|
14723
14877
|
DD: '(\\d{1,2})',
|
|
@@ -14764,7 +14918,7 @@ function parseWith(text, format, locale = 'en-US') {
|
|
|
14764
14918
|
const monthIndex = (name, long) => {
|
|
14765
14919
|
if (name === undefined)
|
|
14766
14920
|
return undefined;
|
|
14767
|
-
const lists = long ? [
|
|
14921
|
+
const lists = long ? [months, englishMonths] : [shortMonths, englishShortMonths];
|
|
14768
14922
|
for (const list of lists) {
|
|
14769
14923
|
const index = list.findIndex((candidate) => candidate.toLowerCase() === name.toLowerCase());
|
|
14770
14924
|
if (index >= 0)
|
|
@@ -14772,12 +14926,12 @@ function parseWith(text, format, locale = 'en-US') {
|
|
|
14772
14926
|
}
|
|
14773
14927
|
return undefined;
|
|
14774
14928
|
};
|
|
14775
|
-
const
|
|
14929
|
+
const readYear = read.YYYY ? Number(read.YYYY) : year;
|
|
14776
14930
|
const month = (_b = (_a = monthIndex(read.MMMM, true)) !== null && _a !== void 0 ? _a : monthIndex(read.MMM, false)) !== null && _b !== void 0 ? _b : Number((_c = read.MM) !== null && _c !== void 0 ? _c : read.M);
|
|
14777
14931
|
const day = Number((_d = read.DD) !== null && _d !== void 0 ? _d : read.D);
|
|
14778
|
-
if (
|
|
14932
|
+
if (readYear === undefined || !month || !day)
|
|
14779
14933
|
return null;
|
|
14780
|
-
const date = parseIsoDate(`${pad(
|
|
14934
|
+
const date = parseIsoDate(`${pad(readYear, 4)}-${pad(month)}-${pad(day)}`);
|
|
14781
14935
|
if (!date)
|
|
14782
14936
|
return null;
|
|
14783
14937
|
const hourText = (_g = (_f = (_e = read.HH) !== null && _e !== void 0 ? _e : read.H) !== null && _f !== void 0 ? _f : read.hh) !== null && _g !== void 0 ? _g : read.h;
|
|
@@ -14799,6 +14953,40 @@ function parseFieldText(text, format = DEFAULT_FORMAT, locale = 'en-US') {
|
|
|
14799
14953
|
var _a;
|
|
14800
14954
|
return (_a = parseWith(text, format, locale)) !== null && _a !== void 0 ? _a : parseDateTime(text);
|
|
14801
14955
|
}
|
|
14956
|
+
/**
|
|
14957
|
+
* The locale's way of writing a month and day, as a format of tokens: `MMMM D` in English, `D MMMM`
|
|
14958
|
+
* in French, `M月D日` in Japanese, or with `numeric`, `M/D` and `D/M`.
|
|
14959
|
+
*/
|
|
14960
|
+
function monthDayFormat(locale = 'en-US', month = 'long') {
|
|
14961
|
+
const parts = dateFormatter(locale, { month, day: 'numeric' }).formatToParts(new Date(Date.UTC(MONTH_DAY_YEAR, 11, 31)));
|
|
14962
|
+
return parts
|
|
14963
|
+
.map((part) => {
|
|
14964
|
+
// Some locales write even the long month in digits, as Japanese `12月31日`.
|
|
14965
|
+
if (part.type === 'month')
|
|
14966
|
+
return /^\d+$/.test(part.value) ? 'M' : 'MMMM';
|
|
14967
|
+
if (part.type === 'day')
|
|
14968
|
+
return 'D';
|
|
14969
|
+
// Bracketed, spaces included, only when it has letters a token could be read from, as
|
|
14970
|
+
// Spanish `D[ de ]MMMM`.
|
|
14971
|
+
return /[A-Za-z]/.test(part.value) ? `[${part.value}]` : part.value;
|
|
14972
|
+
})
|
|
14973
|
+
.join('');
|
|
14974
|
+
}
|
|
14975
|
+
/**
|
|
14976
|
+
* Reads a typed month and day, into month-day mode's year: in the format, then as the locale writes
|
|
14977
|
+
* it with a month name or in numbers, with the English order too, then as `--MM-DD` or a full ISO
|
|
14978
|
+
* date, whose year is dropped.
|
|
14979
|
+
*/
|
|
14980
|
+
function parseMonthDayText(text, format, locale = 'en-US') {
|
|
14981
|
+
const formats = [format, monthDayFormat(locale), monthDayFormat(locale, 'numeric'), 'MMMM D', 'D MMMM', 'MMM D', 'D MMM'];
|
|
14982
|
+
for (const candidate of formats) {
|
|
14983
|
+
const read = parseWith(text, candidate, locale, MONTH_DAY_YEAR);
|
|
14984
|
+
if (read)
|
|
14985
|
+
return { date: inMonthDayYear(read.date), time: null };
|
|
14986
|
+
}
|
|
14987
|
+
const date = parseMonthDay(text);
|
|
14988
|
+
return date ? { date, time: null } : null;
|
|
14989
|
+
}
|
|
14802
14990
|
/**
|
|
14803
14991
|
* Parses a typed range: two dates (with times, optionally) joined by a dash or `to` with spaces
|
|
14804
14992
|
* around it, as `2026-09-13 – 2026-10-13`, or by `/` when the format doesn't use slashes. The
|
|
@@ -14853,6 +15041,8 @@ function clockFor(locale) {
|
|
|
14853
15041
|
const pdsDatepickerCss = () => `:host{--pds-datepicker-day-size:var(--pine-dimension-500);--pds-datepicker-presets-width:200px;display:inline-block}:host([full-width]){display:block}pds-input{display:block}:host(.pds-datepicker--time) pds-input{min-width:220px}:host(.pds-datepicker--range) pds-input{min-width:260px}:host(.pds-datepicker--range.pds-datepicker--time) pds-input{min-width:min(380px, 100%)}.pds-datepicker__trigger,.pds-datepicker__clear{-ms-flex-align:center;align-items:center;background:transparent;border:0;border-radius:var(--pine-border-radius-sm);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-2xs)}.pds-datepicker__trigger:hover:not(:disabled),.pds-datepicker__clear:hover:not(:disabled){background:var(--pine-color-background-muted);color:var(--pine-color-text-strong)}.pds-datepicker__trigger:focus-visible,.pds-datepicker__clear:focus-visible{outline:var(--pine-outline-focus)}.pds-datepicker__trigger:disabled,.pds-datepicker__clear:disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-datepicker__clear{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-datepicker__nav{-ms-flex-align:center;align-items:center;background:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;height:var(--pine-dimension-400);-ms-flex-pack:center;justify-content:center;padding:0;width:var(--pine-dimension-400)}.pds-datepicker__nav:hover:not(:disabled){background:var(--pine-color-secondary-hover);border-color:var(--pine-color-border-hover)}.pds-datepicker__nav:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-datepicker__nav:disabled{border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-secondary-disabled);cursor:not-allowed}.pds-datepicker__nav:dir(rtl) pds-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.pds-datepicker__dialog:focus{outline:none}.pds-datepicker__dialog{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-150);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);-webkit-box-sizing:border-box;box-sizing:border-box;left:0;max-height:calc(100vh - var(--pine-dimension-sm));max-height:calc(100dvh - var(--pine-dimension-sm));max-width:calc(100vw - var(--pine-dimension-sm));overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:var(--pine-dimension-sm);pointer-events:auto;position:fixed;top:0;visibility:hidden;z-index:var(--pine-z-index-priority)}:host-context([data-theme=dark]) .pds-datepicker__dialog{border:var(--pine-border)}.pds-datepicker__header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-datepicker__nav-spacer{-ms-flex:none;flex:none;width:var(--pine-dimension-400)}.pds-datepicker__heading{color:var(--pine-color-text);font:var(--pine-typography-heading-5);font-weight:var(--pine-font-weight-semi-bold)}.pds-datepicker__grid{border-collapse:collapse;border-spacing:0}.pds-datepicker__weekday{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm);height:var(--pds-datepicker-day-size);padding:0;text-align:center;width:var(--pds-datepicker-day-size)}.pds-datepicker__day{border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);cursor:pointer;font:var(--pine-typography-body);height:var(--pds-datepicker-day-size);padding:0;position:relative;text-align:center;-webkit-transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);width:var(--pds-datepicker-day-size)}.pds-datepicker__day:hover{background:var(--pine-color-background-muted)}.pds-datepicker__day:focus-visible{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width-thick) * -1)}.pds-datepicker__day--empty{cursor:default;pointer-events:none}.pds-datepicker__day--today::after{background:var(--pine-color-primary);border-radius:var(--pine-border-radius-full);content:"";height:var(--pine-dimension-050);inset-block-end:var(--pine-dimension-050);inset-inline-start:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:var(--pine-dimension-050)}.pds-datepicker__day--selected,.pds-datepicker__day--selected:hover{background:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-datepicker__day--selected:focus-visible{outline-offset:var(--pine-border-width)}.pds-datepicker__day--range-start{border-end-end-radius:0;border-start-end-radius:0}.pds-datepicker__day--range-end{border-end-start-radius:0;border-start-start-radius:0}.pds-datepicker__day--range-start.pds-datepicker__day--row-end{border-end-end-radius:var(--pine-border-radius-full);border-start-end-radius:var(--pine-border-radius-full)}.pds-datepicker__day--range-end.pds-datepicker__day--row-start{border-end-start-radius:var(--pine-border-radius-full);border-start-start-radius:var(--pine-border-radius-full)}.pds-datepicker__day--selected.pds-datepicker__day--today::after{background:var(--pine-color-text-primary)}.pds-datepicker__day--in-range{border-radius:0}.pds-datepicker__day--in-range,.pds-datepicker__day--in-range:hover{background:var(--pine-color-background-muted);color:var(--pine-color-text-secondary)}.pds-datepicker__day--row-start{border-end-start-radius:var(--pine-border-radius-full);border-start-start-radius:var(--pine-border-radius-full)}.pds-datepicker__day--row-end{border-end-end-radius:var(--pine-border-radius-full);border-start-end-radius:var(--pine-border-radius-full)}.pds-datepicker__day--disabled,.pds-datepicker__day--disabled:hover{background:transparent;color:var(--pine-color-text-disabled);cursor:not-allowed;text-decoration:line-through}.pds-datepicker__day--in-range:hover{background:var(--pine-color-background-inset)}.pds-datepicker__dialog--range{display:-ms-flexbox;display:flex;padding:0}.pds-datepicker__panel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0}.pds-datepicker__dialog--range .pds-datepicker__panel{padding:var(--pine-dimension-sm)}.pds-datepicker__months{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-lg)}.pds-datepicker__presets-column{-webkit-border-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-inline-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-ms-flex:none;flex:none;position:relative;width:var(--pds-datepicker-presets-width)}.pds-datepicker__presets{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);inset:0;list-style:none;margin:0;overflow-y:auto;padding:var(--pine-dimension-150);position:absolute}.pds-datepicker__preset{-ms-flex-align:center;align-items:center;background:transparent;border:0;border-radius:var(--pine-border-radius-md);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);text-align:start;-webkit-transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);width:100%}.pds-datepicker__preset:hover:not(:disabled){background:var(--pine-color-background-muted)}.pds-datepicker__preset:focus-visible{outline:var(--pine-outline-focus)}.pds-datepicker__preset:disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-datepicker__preset--selected{background:var(--pine-color-background-muted);color:var(--pine-color-text-active)}.pds-datepicker__footer{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-overlay);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-xs);inset-block-end:calc(var(--pine-dimension-sm) * -1);-ms-flex-pack:end;justify-content:flex-end;margin-block:var(--pine-dimension-sm) calc(var(--pine-dimension-sm) * -1);padding-block:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky}.pds-datepicker__selection{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto}.pds-datepicker__dropdowns{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-datepicker__select-wrap{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-datepicker__heading-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-md);color:var(--pine-color-text);cursor:pointer;field-sizing:content;font:var(--pine-typography-heading-5);font-weight:var(--pine-font-weight-semi-bold);padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-xs) calc(var(--pine-dimension-xs) + var(--pine-dimension-sm))}.pds-datepicker__heading-select:hover{background:var(--pine-color-background-muted)}.pds-datepicker__heading-select:focus-visible{outline:var(--pine-outline-focus)}.pds-datepicker__select-caret{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-xs);pointer-events:none;position:absolute}.pds-datepicker__time{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm);padding-inline:var(--pine-dimension-xs)}.pds-datepicker__time-label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium)}.pds-datepicker__time-field{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-md);display:-ms-inline-flexbox;display:inline-flex;min-height:var(--pine-dimension-400);padding-inline:var(--pine-dimension-2xs)}.pds-datepicker__time-field:hover{border-color:var(--pine-color-border-hover)}.pds-datepicker__time-field:focus-within{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-datepicker__time-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-sm);color:var(--pine-color-text-strong);cursor:pointer;font:var(--pine-typography-body);font-variant-numeric:tabular-nums;padding:var(--pine-dimension-2xs);text-align:center}.pds-datepicker__time-select:focus-visible{background:var(--pine-color-background-muted);outline:none}.pds-datepicker__time-select--period{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-datepicker__time-separator{color:var(--pine-color-text-secondary)}:host-context([data-theme=dark]) select{color-scheme:dark}.pds-datepicker__action{background:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);cursor:pointer;font:var(--pine-typography-body-medium);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-datepicker__action:hover:not(:disabled){background:var(--pine-color-secondary-hover);border-color:var(--pine-color-border-hover)}.pds-datepicker__action:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-datepicker__action:disabled{background:var(--pine-color-secondary-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-secondary-disabled);cursor:not-allowed}.pds-datepicker__action--primary{background:var(--pine-color-primary);border-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-datepicker__action--primary:hover:not(:disabled){background:var(--pine-color-primary-hover);border-color:var(--pine-color-primary-hover)}.pds-datepicker__action--primary:disabled{background:var(--pine-color-primary-disabled);border-color:var(--pine-color-primary-disabled);color:var(--pine-color-text-primary-disabled)}@media (max-width: 600px){.pds-datepicker__dialog--range{-ms-flex-direction:column;flex-direction:column}.pds-datepicker__presets-column{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-end:0;border-inline-end:0;width:auto}.pds-datepicker__presets{-ms-flex-direction:row;flex-direction:row;overflow-x:auto;position:static}.pds-datepicker__preset{white-space:nowrap}.pds-datepicker__selection{-ms-flex-preferred-size:100%;flex-basis:100%}}.pds-datepicker__trigger,.pds-datepicker__clear,.pds-datepicker__nav,.pds-datepicker__weekday,.pds-datepicker__day,.pds-datepicker__preset,.pds-datepicker__action{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (forced-colors: active){.pds-datepicker__day--selected,.pds-datepicker__day--selected:hover{background:Highlight;color:HighlightText;forced-color-adjust:none}.pds-datepicker__day--in-range,.pds-datepicker__day--in-range:hover{border-block:var(--pine-border-width-thin) solid Highlight}.pds-datepicker__day--today::after{background:CanvasText;forced-color-adjust:none}.pds-datepicker__day--selected.pds-datepicker__day--today::after{background:HighlightText}.pds-datepicker__day--disabled{color:GrayText}}.visually-hidden{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}`;
|
|
14854
15042
|
|
|
14855
15043
|
const FULL_DATE = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
15044
|
+
/** A day in month-day mode, which has no year and so no weekday. */
|
|
15045
|
+
const MONTH_AND_DAY = { month: 'long', day: 'numeric' };
|
|
14856
15046
|
const DEFAULT_START_TIME = '00:00';
|
|
14857
15047
|
const DEFAULT_END_TIME = '23:59';
|
|
14858
15048
|
/** Ids for datepickers without a `component-id`, so their calendars' ids stay unique. */
|
|
@@ -14880,7 +15070,8 @@ const dayNumberText = (formatter, date) => { var _a, _b; return (_b = (_a = form
|
|
|
14880
15070
|
/**
|
|
14881
15071
|
* A field for one date, or in range mode a start and end date, with a calendar to pick from.
|
|
14882
15072
|
* The value is `YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` for a range; with the time picker, each
|
|
14883
|
-
* date carries a time, as `YYYY-MM-DDTHH:mm`.
|
|
15073
|
+
* date carries a time, as `YYYY-MM-DDTHH:mm`. In month-day mode, for a date that comes round every
|
|
15074
|
+
* year such as a birthday, it's a month and day with no year, as `--MM-DD`.
|
|
14884
15075
|
*
|
|
14885
15076
|
* @part calendar - The open calendar. It's portaled out of the datepicker, so style it with `.pds-datepicker-calendar-portal::part(calendar)`.
|
|
14886
15077
|
* @part presets - The list of preset ranges in the calendar, styled with `.pds-datepicker-calendar-portal::part(presets)`.
|
|
@@ -14939,8 +15130,10 @@ class PdsDatepicker {
|
|
|
14939
15130
|
* in the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`
|
|
14940
15131
|
* (24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,
|
|
14941
15132
|
* `MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value
|
|
14942
|
-
* and the change event stay ISO (`YYYY-MM-DD`), whatever the format.
|
|
14943
|
-
* accepted too.
|
|
15133
|
+
* and the change event stay ISO (`YYYY-MM-DD`; `--MM-DD` with `month-day`), whatever the format.
|
|
15134
|
+
* Typed ISO dates are always accepted too. With `month-day`, a format without `YYYY` is taken as a
|
|
15135
|
+
* month-and-day format and used as given, rather than reordered for the locale; leave it unset to
|
|
15136
|
+
* follow the locale instead.
|
|
14944
15137
|
*/
|
|
14945
15138
|
this.format = 'YYYY-MM-DD';
|
|
14946
15139
|
/**
|
|
@@ -14973,6 +15166,15 @@ class PdsDatepicker {
|
|
|
14973
15166
|
* Accessible label for the month dropdown, when `show-dropdowns` is set.
|
|
14974
15167
|
*/
|
|
14975
15168
|
this.monthLabel = 'Month';
|
|
15169
|
+
/**
|
|
15170
|
+
* Picks a month and day with no year, for a date that comes round every year, such as a birthday.
|
|
15171
|
+
* The value is `--MM-DD` (ISO 8601 without a year), the field shows the date as the locale writes
|
|
15172
|
+
* a month and day, and the calendar shows each month without a year or weekdays, with February
|
|
15173
|
+
* always having its 29th. Turns off `range`, `time-picker`, `show-dropdowns`, `min` and `max`, and
|
|
15174
|
+
* has no effect with `auto-apply`, `presets`, `first-day-of-week`, `min-date-message` or
|
|
15175
|
+
* `max-date-message`, which all depend on them.
|
|
15176
|
+
*/
|
|
15177
|
+
this.monthDay = false;
|
|
14976
15178
|
/**
|
|
14977
15179
|
* Accessible label for the button that shows the next month.
|
|
14978
15180
|
*/
|
|
@@ -15021,7 +15223,9 @@ class PdsDatepicker {
|
|
|
15021
15223
|
this.triggerLabel = 'Choose date';
|
|
15022
15224
|
/**
|
|
15023
15225
|
* The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with
|
|
15024
|
-
* the time picker, each date as `YYYY-MM-DDTHH:mm
|
|
15226
|
+
* the time picker, each date as `YYYY-MM-DDTHH:mm`; with `month-day`, the month and day with no
|
|
15227
|
+
* year, as `--MM-DD` (a full date is read too, as that month and day, and rewritten to it). An
|
|
15228
|
+
* empty string when nothing is selected.
|
|
15025
15229
|
*/
|
|
15026
15230
|
this.value = '';
|
|
15027
15231
|
/**
|
|
@@ -15212,17 +15416,17 @@ class PdsDatepicker {
|
|
|
15212
15416
|
// The times before the typed text changed them, for a pick in the calendar to go back to.
|
|
15213
15417
|
(_b = this.timesBeforeTyping) !== null && _b !== void 0 ? _b : (this.timesBeforeTyping = [startTime, endTime]);
|
|
15214
15418
|
this.loadDraft(parts);
|
|
15215
|
-
if (this.
|
|
15419
|
+
if (this.hasTime) {
|
|
15216
15420
|
// A time picked in the calendar survives typing that doesn't change the time: text with no
|
|
15217
15421
|
// time, as a date part-way typed, or with the time as committed.
|
|
15218
15422
|
const format = this.resolvedFormat;
|
|
15219
15423
|
const locale = this.resolvedLocale;
|
|
15220
|
-
const typed = this.
|
|
15424
|
+
const typed = this.isRange ? parseRangeText(this.text, format, locale) : [parseFieldText(this.text, format, locale)];
|
|
15221
15425
|
const committed = this.parsedValue();
|
|
15222
15426
|
const keeps = (i) => { var _a, _b, _c; return !((_a = typed === null || typed === void 0 ? void 0 : typed[i]) === null || _a === void 0 ? void 0 : _a.time) || ((_b = typed[i]) === null || _b === void 0 ? void 0 : _b.time) === ((_c = committed === null || committed === void 0 ? void 0 : committed[i]) === null || _c === void 0 ? void 0 : _c.time); };
|
|
15223
15427
|
if (keeps(0))
|
|
15224
15428
|
this.startTime = startTime;
|
|
15225
|
-
if (this.
|
|
15429
|
+
if (this.isRange && keeps(1))
|
|
15226
15430
|
this.endTime = endTime;
|
|
15227
15431
|
}
|
|
15228
15432
|
this.showDate(parts[parts.length - 1].date);
|
|
@@ -15331,7 +15535,8 @@ class PdsDatepicker {
|
|
|
15331
15535
|
if (!active)
|
|
15332
15536
|
return;
|
|
15333
15537
|
const rtl = getComputedStyle(this.el).direction === 'rtl';
|
|
15334
|
-
|
|
15538
|
+
// Month-day mode's rows start on the 1st, not on a weekday.
|
|
15539
|
+
const column = this.monthDay ? (active.getUTCDate() - 1) % 7 : weekdayColumn(active, this.weekStart);
|
|
15335
15540
|
let next = null;
|
|
15336
15541
|
switch (event.key) {
|
|
15337
15542
|
case 'ArrowLeft':
|
|
@@ -15349,14 +15554,21 @@ class PdsDatepicker {
|
|
|
15349
15554
|
case 'Home':
|
|
15350
15555
|
next = addDays(active, -column);
|
|
15351
15556
|
break;
|
|
15352
|
-
case 'End':
|
|
15353
|
-
next
|
|
15557
|
+
case 'End': {
|
|
15558
|
+
// Month-day mode's rows don't carry into the next month, so End stops at the month's last day.
|
|
15559
|
+
const lastColumn = this.monthDay
|
|
15560
|
+
? Math.min(6, daysInMonth(active.getUTCFullYear(), active.getUTCMonth()) - active.getUTCDate() + column)
|
|
15561
|
+
: 6;
|
|
15562
|
+
next = addDays(active, lastColumn - column);
|
|
15354
15563
|
break;
|
|
15564
|
+
}
|
|
15355
15565
|
case 'PageUp':
|
|
15356
|
-
|
|
15566
|
+
// Month-day mode has no year to jump by, so Shift+PageUp stays put rather than passing
|
|
15567
|
+
// through a real, possibly non-leap year and clamping Feb 29 to the 28th.
|
|
15568
|
+
next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? -12 : -1);
|
|
15357
15569
|
break;
|
|
15358
15570
|
case 'PageDown':
|
|
15359
|
-
next = addMonths(active, event.shiftKey ? 12 : 1);
|
|
15571
|
+
next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? 12 : 1);
|
|
15360
15572
|
break;
|
|
15361
15573
|
case 'Enter':
|
|
15362
15574
|
case ' ':
|
|
@@ -15369,9 +15581,9 @@ class PdsDatepicker {
|
|
|
15369
15581
|
return;
|
|
15370
15582
|
}
|
|
15371
15583
|
event.preventDefault();
|
|
15372
|
-
const target = clampDate(next, this.minDate, this.maxDate);
|
|
15584
|
+
const target = clampDate(this.inView(next), this.minDate, this.maxDate);
|
|
15373
15585
|
this.showDate(target);
|
|
15374
|
-
if (this.
|
|
15586
|
+
if (this.isRange)
|
|
15375
15587
|
this.previewDate = toIsoDate(target);
|
|
15376
15588
|
this.focusActiveDay = true;
|
|
15377
15589
|
};
|
|
@@ -15382,7 +15594,7 @@ class PdsDatepicker {
|
|
|
15382
15594
|
this.pickDate(date);
|
|
15383
15595
|
};
|
|
15384
15596
|
this.onGridPointerOver = (event) => {
|
|
15385
|
-
if (!this.
|
|
15597
|
+
if (!this.isRange || !this.draftStart || this.draftEnd)
|
|
15386
15598
|
return;
|
|
15387
15599
|
const date = this.dayFromEvent(event);
|
|
15388
15600
|
const iso = date && toIsoDate(date);
|
|
@@ -15431,19 +15643,28 @@ class PdsDatepicker {
|
|
|
15431
15643
|
var _a;
|
|
15432
15644
|
this.text = this.fieldText();
|
|
15433
15645
|
this.textError = '';
|
|
15646
|
+
const parts = this.parsedValue();
|
|
15647
|
+
// A full date reads as its month and day; keep what's submitted in step with what's shown,
|
|
15648
|
+
// rather than passing through whichever spelling was set until the next pick rewrites it.
|
|
15649
|
+
if (this.monthDay && parts) {
|
|
15650
|
+
const normalized = this.dayValue(parts[0].date);
|
|
15651
|
+
if (this.value !== normalized)
|
|
15652
|
+
this.value = normalized;
|
|
15653
|
+
}
|
|
15434
15654
|
this.updateFormValue();
|
|
15435
15655
|
if (!this.isOpen)
|
|
15436
15656
|
return;
|
|
15437
|
-
const parts = this.parsedValue();
|
|
15438
15657
|
this.loadDraft(parts);
|
|
15439
|
-
const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a :
|
|
15658
|
+
const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : this.now;
|
|
15440
15659
|
this.showDate(clampDate(day, this.minDate, this.maxDate), true);
|
|
15441
15660
|
}
|
|
15442
15661
|
requiredChanged() {
|
|
15443
15662
|
this.updateFormValue();
|
|
15444
15663
|
}
|
|
15445
15664
|
componentWillLoad() {
|
|
15446
|
-
|
|
15665
|
+
// Through the same path a later value/context change takes, so an initial full date in
|
|
15666
|
+
// month-day mode submits normalized too, not only after the first pick rewrites it.
|
|
15667
|
+
this.refreshFromValue();
|
|
15447
15668
|
}
|
|
15448
15669
|
connectedCallback() {
|
|
15449
15670
|
if (this.el.attachInternals && !this.internals) {
|
|
@@ -15493,10 +15714,30 @@ class PdsDatepicker {
|
|
|
15493
15714
|
return localeFirstDayOfWeek(this.resolvedLocale);
|
|
15494
15715
|
}
|
|
15495
15716
|
get minDate() {
|
|
15496
|
-
return parseIsoDate(this.min);
|
|
15717
|
+
return this.monthDay ? null : parseIsoDate(this.min);
|
|
15497
15718
|
}
|
|
15498
15719
|
get maxDate() {
|
|
15499
|
-
return parseIsoDate(this.max);
|
|
15720
|
+
return this.monthDay ? null : parseIsoDate(this.max);
|
|
15721
|
+
}
|
|
15722
|
+
/** Range mode, which month-day mode turns off. */
|
|
15723
|
+
get isRange() {
|
|
15724
|
+
return this.range && !this.monthDay;
|
|
15725
|
+
}
|
|
15726
|
+
/** The time picker, which month-day mode turns off. */
|
|
15727
|
+
get hasTime() {
|
|
15728
|
+
return this.timePicker && !this.monthDay;
|
|
15729
|
+
}
|
|
15730
|
+
/** Today, or in month-day mode today's month and day. */
|
|
15731
|
+
get now() {
|
|
15732
|
+
return this.monthDay ? inMonthDayYear(today()) : today();
|
|
15733
|
+
}
|
|
15734
|
+
/** In month-day mode, a date moved to the mode's year, as when the calendar wraps past December. */
|
|
15735
|
+
inView(date) {
|
|
15736
|
+
return this.monthDay ? inMonthDayYear(date) : date;
|
|
15737
|
+
}
|
|
15738
|
+
/** One day as the value holds it: `YYYY-MM-DD`, or `--MM-DD` in month-day mode. */
|
|
15739
|
+
dayValue(date) {
|
|
15740
|
+
return this.monthDay ? toMonthDay(date) : toIsoDate(date);
|
|
15500
15741
|
}
|
|
15501
15742
|
get isInteractive() {
|
|
15502
15743
|
return !this.disabled && !this.readonly;
|
|
@@ -15504,22 +15745,22 @@ class PdsDatepicker {
|
|
|
15504
15745
|
/** How many months the calendar shows side by side. */
|
|
15505
15746
|
get monthCount() {
|
|
15506
15747
|
const narrow = typeof window !== 'undefined' && window.innerWidth < TWO_MONTHS_MIN_WIDTH;
|
|
15507
|
-
return this.
|
|
15748
|
+
return this.isRange && !narrow ? 2 : 1;
|
|
15508
15749
|
}
|
|
15509
15750
|
/** Whether picks apply at once, without the footer: `auto-apply` in range mode, without times. */
|
|
15510
15751
|
get appliesOnPick() {
|
|
15511
|
-
return this.
|
|
15752
|
+
return this.isRange && this.autoApply && !this.hasTime;
|
|
15512
15753
|
}
|
|
15513
15754
|
/** Whether picks wait for Apply: for a range, unless it auto-applies, and for a date with a time. */
|
|
15514
15755
|
get hasFooter() {
|
|
15515
|
-
return (this.
|
|
15756
|
+
return (this.isRange || this.hasTime) && !this.appliesOnPick;
|
|
15516
15757
|
}
|
|
15517
15758
|
get resolvedPresets() {
|
|
15518
|
-
return this.
|
|
15759
|
+
return this.isRange ? resolvePresets(this.presets, today()) : [];
|
|
15519
15760
|
}
|
|
15520
15761
|
/** The committed value, parsed: one date, or a range's start and end. */
|
|
15521
15762
|
parsedValue(value = this.value) {
|
|
15522
|
-
if (this.
|
|
15763
|
+
if (this.isRange) {
|
|
15523
15764
|
const [start, end, extra] = (value !== null && value !== void 0 ? value : '').split('/');
|
|
15524
15765
|
const startValue = parseDateTime(start);
|
|
15525
15766
|
const endValue = parseDateTime(end);
|
|
@@ -15527,12 +15768,22 @@ class PdsDatepicker {
|
|
|
15527
15768
|
? [startValue, endValue]
|
|
15528
15769
|
: null;
|
|
15529
15770
|
}
|
|
15771
|
+
if (this.monthDay) {
|
|
15772
|
+
const date = parseMonthDay(value);
|
|
15773
|
+
return date ? [{ date, time: null }] : null;
|
|
15774
|
+
}
|
|
15530
15775
|
const single = parseDateTime(value);
|
|
15531
15776
|
return single ? [single] : null;
|
|
15532
15777
|
}
|
|
15533
15778
|
/** The format the field shows and reads, with a time when the time picker is on. */
|
|
15534
15779
|
get resolvedFormat() {
|
|
15535
|
-
|
|
15780
|
+
var _a, _b;
|
|
15781
|
+
if (this.monthDay) {
|
|
15782
|
+
// A format with a year is the default, or one for full dates: use the locale's month and day.
|
|
15783
|
+
const format = (_b = (_a = this.format) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
|
|
15784
|
+
return format !== '' && !/YYYY/.test(format.replace(/\[[^\]]*\]/g, '')) ? format : monthDayFormat(this.resolvedLocale);
|
|
15785
|
+
}
|
|
15786
|
+
return fieldFormat(this.format, this.hasTime, this.hasTime && clockFor(this.resolvedLocale).hour12);
|
|
15536
15787
|
}
|
|
15537
15788
|
/** What the field shows for the committed value. */
|
|
15538
15789
|
fieldText() {
|
|
@@ -15548,20 +15799,24 @@ class PdsDatepicker {
|
|
|
15548
15799
|
/** Drops a time the time picker doesn't show, or adds the default one it does. */
|
|
15549
15800
|
withTimePicker(value, fallback = DEFAULT_START_TIME) {
|
|
15550
15801
|
var _a;
|
|
15551
|
-
return { date: value.date, time: this.
|
|
15802
|
+
return { date: value.date, time: this.hasTime ? ((_a = value.time) !== null && _a !== void 0 ? _a : fallback) : null };
|
|
15552
15803
|
}
|
|
15553
15804
|
get fieldPlaceholder() {
|
|
15554
15805
|
if (this.placeholder)
|
|
15555
15806
|
return this.placeholder;
|
|
15807
|
+
// Month-day tokens, as `MMMM D`, don't read as a hint; an example date does.
|
|
15808
|
+
if (this.monthDay) {
|
|
15809
|
+
return formatWith({ date: parseMonthDay('--12-31'), time: null }, this.resolvedFormat, this.resolvedLocale);
|
|
15810
|
+
}
|
|
15556
15811
|
const one = this.resolvedFormat;
|
|
15557
|
-
return this.
|
|
15812
|
+
return this.isRange ? `${one}${RANGE_SEPARATOR}${one}` : one;
|
|
15558
15813
|
}
|
|
15559
15814
|
/** Loads the committed value into the draft the calendar edits. */
|
|
15560
15815
|
loadDraft(parts) {
|
|
15561
15816
|
var _a, _b;
|
|
15562
15817
|
const [start, end] = parts !== null && parts !== void 0 ? parts : [];
|
|
15563
15818
|
this.draftStart = start ? toIsoDate(start.date) : '';
|
|
15564
|
-
this.draftEnd = this.
|
|
15819
|
+
this.draftEnd = this.isRange && end ? toIsoDate(end.date) : '';
|
|
15565
15820
|
this.startTime = (_a = start === null || start === void 0 ? void 0 : start.time) !== null && _a !== void 0 ? _a : DEFAULT_START_TIME;
|
|
15566
15821
|
this.endTime = (_b = end === null || end === void 0 ? void 0 : end.time) !== null && _b !== void 0 ? _b : DEFAULT_END_TIME;
|
|
15567
15822
|
this.previewDate = '';
|
|
@@ -15577,7 +15832,7 @@ class PdsDatepicker {
|
|
|
15577
15832
|
const parts = this.parsedValue();
|
|
15578
15833
|
this.loadDraft(parts);
|
|
15579
15834
|
this.valueAtOpen = (_a = this.value) !== null && _a !== void 0 ? _a : '';
|
|
15580
|
-
const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b :
|
|
15835
|
+
const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b : this.now;
|
|
15581
15836
|
this.showDate(clampDate(start, this.minDate, this.maxDate), true);
|
|
15582
15837
|
this.focusActiveDay = focusDay;
|
|
15583
15838
|
this.isOpen = true;
|
|
@@ -15599,7 +15854,8 @@ class PdsDatepicker {
|
|
|
15599
15854
|
* Makes a day the active one and brings it into view. With two months, a day already on view
|
|
15600
15855
|
* doesn't move the view; `reset` lines the view up so the day is in the last month shown.
|
|
15601
15856
|
*/
|
|
15602
|
-
showDate(
|
|
15857
|
+
showDate(day, reset = false) {
|
|
15858
|
+
const date = this.inView(day);
|
|
15603
15859
|
const first = firstOfMonth(date);
|
|
15604
15860
|
const view = parseIsoDate(this.viewMonth);
|
|
15605
15861
|
const lastView = view && addMonths(view, this.monthCount - 1);
|
|
@@ -15617,15 +15873,15 @@ class PdsDatepicker {
|
|
|
15617
15873
|
// A pick in the calendar takes over from typed text, so dismissing afterwards commits nothing,
|
|
15618
15874
|
// as when nothing was typed.
|
|
15619
15875
|
this.dropTypedText();
|
|
15620
|
-
if (this.
|
|
15876
|
+
if (this.isRange) {
|
|
15621
15877
|
this.pickRangeDay(date);
|
|
15622
15878
|
}
|
|
15623
|
-
else if (this.
|
|
15879
|
+
else if (this.hasTime) {
|
|
15624
15880
|
this.draftStart = toIsoDate(date);
|
|
15625
15881
|
this.activeDate = this.draftStart;
|
|
15626
15882
|
}
|
|
15627
15883
|
else {
|
|
15628
|
-
this.commitValue(
|
|
15884
|
+
this.commitValue(this.dayValue(date));
|
|
15629
15885
|
this.closeCalendar(true);
|
|
15630
15886
|
}
|
|
15631
15887
|
}
|
|
@@ -15669,7 +15925,11 @@ class PdsDatepicker {
|
|
|
15669
15925
|
}
|
|
15670
15926
|
/** Commits one date, or a range with its start, end and matching preset. */
|
|
15671
15927
|
commitParts(parts) {
|
|
15672
|
-
if (
|
|
15928
|
+
if (this.monthDay) {
|
|
15929
|
+
this.commitValue(toMonthDay(parts[0].date));
|
|
15930
|
+
return;
|
|
15931
|
+
}
|
|
15932
|
+
if (!this.isRange) {
|
|
15673
15933
|
this.commitValue(toValueString(parts[0]));
|
|
15674
15934
|
return;
|
|
15675
15935
|
}
|
|
@@ -15684,7 +15944,7 @@ class PdsDatepicker {
|
|
|
15684
15944
|
if (!startDate)
|
|
15685
15945
|
return null;
|
|
15686
15946
|
const start = this.withTimePicker({ date: startDate, time: this.startTime });
|
|
15687
|
-
if (!this.
|
|
15947
|
+
if (!this.isRange)
|
|
15688
15948
|
return [start];
|
|
15689
15949
|
const end = this.withTimePicker({ date: (_a = parseIsoDate(this.draftEnd)) !== null && _a !== void 0 ? _a : startDate, time: this.endTime });
|
|
15690
15950
|
// An end time before the start time on the same day ends at the start.
|
|
@@ -15810,7 +16070,11 @@ class PdsDatepicker {
|
|
|
15810
16070
|
readText(text) {
|
|
15811
16071
|
const format = this.resolvedFormat;
|
|
15812
16072
|
const locale = this.resolvedLocale;
|
|
15813
|
-
const parts = this.
|
|
16073
|
+
const parts = this.monthDay
|
|
16074
|
+
? [parseMonthDayText(text, format, locale)]
|
|
16075
|
+
: this.isRange
|
|
16076
|
+
? parseRangeText(text, format, locale)
|
|
16077
|
+
: [parseFieldText(text, format, locale)];
|
|
15814
16078
|
if (!parts || parts.some((part) => !part))
|
|
15815
16079
|
return null;
|
|
15816
16080
|
return parts.map((part, i) => this.withTimePicker(part, i === 1 ? DEFAULT_END_TIME : DEFAULT_START_TIME));
|
|
@@ -15854,17 +16118,17 @@ class PdsDatepicker {
|
|
|
15854
16118
|
/** Whether the month before (`-1`) or after (`1`) the ones on view has a day in range. */
|
|
15855
16119
|
canShowMonth(direction) {
|
|
15856
16120
|
var _a;
|
|
15857
|
-
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a :
|
|
16121
|
+
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
|
|
15858
16122
|
if (direction < 0)
|
|
15859
16123
|
return !this.minDate || addDays(view, -1) >= this.minDate;
|
|
15860
16124
|
return !this.maxDate || addMonths(view, this.monthCount) <= this.maxDate;
|
|
15861
16125
|
}
|
|
15862
16126
|
showMonth(event, direction) {
|
|
15863
16127
|
var _a, _b;
|
|
15864
|
-
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a :
|
|
15865
|
-
const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b :
|
|
15866
|
-
this.viewMonth = toIsoDate(addMonths(view, direction));
|
|
15867
|
-
this.activeDate = toIsoDate(clampDate(addMonths(active, direction), this.minDate, this.maxDate));
|
|
16128
|
+
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
|
|
16129
|
+
const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b : this.now;
|
|
16130
|
+
this.viewMonth = toIsoDate(this.inView(addMonths(view, direction)));
|
|
16131
|
+
this.activeDate = toIsoDate(clampDate(this.inView(addMonths(active, direction)), this.minDate, this.maxDate));
|
|
15868
16132
|
if (this.canShowMonth(direction)) {
|
|
15869
16133
|
// Safari doesn't focus a clicked button; without this, focus falls to the page and Escape and
|
|
15870
16134
|
// the Tab trap stop working.
|
|
@@ -15986,7 +16250,7 @@ class PdsDatepicker {
|
|
|
15986
16250
|
const parts = this.parsedValue();
|
|
15987
16251
|
if (!parts)
|
|
15988
16252
|
return this.triggerLabel;
|
|
15989
|
-
const dates = parts.map((part) => formatDate(part.date, locale, FULL_DATE));
|
|
16253
|
+
const dates = parts.map((part) => formatDate(part.date, locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE));
|
|
15990
16254
|
return `${this.triggerLabel}, ${dates.join(RANGE_SEPARATOR)}`;
|
|
15991
16255
|
}
|
|
15992
16256
|
/** The range to highlight: the chosen one, or the start to the previewed day while picking the end. */
|
|
@@ -16000,15 +16264,15 @@ class PdsDatepicker {
|
|
|
16000
16264
|
}
|
|
16001
16265
|
/** The day shown as selected: the draft, which opens as the committed day and follows typing. */
|
|
16002
16266
|
selectedDay() {
|
|
16003
|
-
if (this.
|
|
16267
|
+
if (this.isRange)
|
|
16004
16268
|
return null;
|
|
16005
16269
|
return parseIsoDate(this.draftStart);
|
|
16006
16270
|
}
|
|
16007
16271
|
renderMonthHeading(view, index, locale, headingId) {
|
|
16008
|
-
const heading = formatDate(view, locale, { month: 'long', year: 'numeric' });
|
|
16272
|
+
const heading = formatDate(view, locale, this.monthDay ? { month: 'long' } : { month: 'long', year: 'numeric' });
|
|
16009
16273
|
// Only the first month announces itself as it changes; two months move together.
|
|
16010
16274
|
const live = index === 0 ? 'polite' : null;
|
|
16011
|
-
if (!this.showDropdowns) {
|
|
16275
|
+
if (!this.showDropdowns || this.monthDay) {
|
|
16012
16276
|
return (hAsync("div", { class: "pds-datepicker__heading", id: headingId, "aria-live": live }, heading));
|
|
16013
16277
|
}
|
|
16014
16278
|
const year = view.getUTCFullYear();
|
|
@@ -16034,14 +16298,14 @@ class PdsDatepicker {
|
|
|
16034
16298
|
const min = this.minDate;
|
|
16035
16299
|
const max = this.maxDate;
|
|
16036
16300
|
const selected = this.selectedDay();
|
|
16037
|
-
const [rangeStart, rangeEnd] = this.
|
|
16038
|
-
const now =
|
|
16039
|
-
const fullDate = dateFormatter(locale, FULL_DATE);
|
|
16301
|
+
const [rangeStart, rangeEnd] = this.isRange ? this.highlightedRange() : [null, null];
|
|
16302
|
+
const now = this.now;
|
|
16303
|
+
const fullDate = dateFormatter(locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE);
|
|
16040
16304
|
const dayNumber = dateFormatter(locale, { day: 'numeric' });
|
|
16041
16305
|
const headingId = `${this.baseId}-calendar-heading-${index}`;
|
|
16042
16306
|
const isFirst = index === 0;
|
|
16043
16307
|
const isLast = index === this.monthCount - 1;
|
|
16044
|
-
return (hAsync("div", { class: "pds-datepicker__month" }, hAsync("div", { class: "pds-datepicker__header" }, isFirst ? (hAsync("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--previous", "aria-label": this.previousMonthLabel, disabled: !this.canShowMonth(-1), onClick: (event) => this.showMonth(event, -1) }, hAsync("pds-icon", { icon: caretLeft, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-datepicker__nav-spacer" })), this.renderMonthHeading(view, index, locale, headingId), isLast ? (hAsync("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--next", "aria-label": this.nextMonthLabel, disabled: !this.canShowMonth(1), onClick: (event) => this.showMonth(event, 1) }, hAsync("pds-icon", { icon: caretRight, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-datepicker__nav-spacer" }))), hAsync("table", { class: "pds-datepicker__grid", role: "grid", "aria-labelledby": headingId, "aria-multiselectable": this.
|
|
16308
|
+
return (hAsync("div", { class: "pds-datepicker__month" }, hAsync("div", { class: "pds-datepicker__header" }, isFirst ? (hAsync("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--previous", "aria-label": this.previousMonthLabel, disabled: !this.canShowMonth(-1), onClick: (event) => this.showMonth(event, -1) }, hAsync("pds-icon", { icon: caretLeft, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-datepicker__nav-spacer" })), this.renderMonthHeading(view, index, locale, headingId), isLast ? (hAsync("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--next", "aria-label": this.nextMonthLabel, disabled: !this.canShowMonth(1), onClick: (event) => this.showMonth(event, 1) }, hAsync("pds-icon", { icon: caretRight, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-datepicker__nav-spacer" }))), hAsync("table", { class: "pds-datepicker__grid", role: "grid", "aria-labelledby": headingId, "aria-multiselectable": this.isRange ? 'true' : null, onKeyDown: this.onGridKeyDown, onClick: this.onGridClick, onPointerOver: this.onGridPointerOver }, !this.monthDay && (hAsync("thead", null, hAsync("tr", null, weekdayNames(locale, this.weekStart).map((name) => (hAsync("th", { scope: "col", class: "pds-datepicker__weekday" }, hAsync("span", { "aria-hidden": "true" }, name.short), hAsync("span", { class: "visually-hidden" }, name.long))))))), hAsync("tbody", null, (this.monthDay ? monthDayRows(month) : monthWeeks(year, month, this.weekStart)).map((week) => (hAsync("tr", null, week.map((date, column) => {
|
|
16045
16309
|
if (!date)
|
|
16046
16310
|
return hAsync("td", { class: "pds-datepicker__day pds-datepicker__day--empty" });
|
|
16047
16311
|
const iso = toIsoDate(date);
|
|
@@ -16063,14 +16327,14 @@ class PdsDatepicker {
|
|
|
16063
16327
|
'pds-datepicker__day--today': isToday,
|
|
16064
16328
|
'pds-datepicker__day--disabled': unavailable,
|
|
16065
16329
|
}, "data-date": iso, tabindex: iso === this.activeDate ? '0' : '-1', "aria-label": fullDate.format(date), "aria-selected": isSelected ? 'true' : null, "aria-current": isToday ? 'date' : null, "aria-disabled": unavailable ? 'true' : null }, dayNumberText(dayNumber, date)));
|
|
16066
|
-
})))))), this.
|
|
16330
|
+
})))))), this.hasTime && this.timesUnderMonth(index).map((which) => this.renderTime(which, locale))));
|
|
16067
16331
|
}
|
|
16068
16332
|
/**
|
|
16069
16333
|
* The time pickers under a month: the start time under the first and the end time under the
|
|
16070
16334
|
* second, or both under the one month a narrow range shows.
|
|
16071
16335
|
*/
|
|
16072
16336
|
timesUnderMonth(index) {
|
|
16073
|
-
if (!this.
|
|
16337
|
+
if (!this.isRange)
|
|
16074
16338
|
return ['start'];
|
|
16075
16339
|
if (this.monthCount === 1)
|
|
16076
16340
|
return ['start', 'end'];
|
|
@@ -16095,7 +16359,7 @@ class PdsDatepicker {
|
|
|
16095
16359
|
if (this.timesBeforeTyping)
|
|
16096
16360
|
this.timesBeforeTyping[which === 'start' ? 0 : 1] = time;
|
|
16097
16361
|
};
|
|
16098
|
-
const groupLabel = !this.
|
|
16362
|
+
const groupLabel = !this.isRange ? this.timeLabel : which === 'start' ? this.startTimeLabel : this.endTimeLabel;
|
|
16099
16363
|
const isPm = hours >= 12;
|
|
16100
16364
|
const hourOptions = clock.hour12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
|
|
16101
16365
|
const shownHour = clock.hour12 ? hours % 12 || 12 : hours;
|
|
@@ -16136,7 +16400,7 @@ class PdsDatepicker {
|
|
|
16136
16400
|
return '';
|
|
16137
16401
|
const format = this.resolvedFormat;
|
|
16138
16402
|
const locale = this.resolvedLocale;
|
|
16139
|
-
if (this.
|
|
16403
|
+
if (this.isRange && !this.draftEnd)
|
|
16140
16404
|
return `${toFieldText(parts[0], format, locale)}${RANGE_SEPARATOR}`;
|
|
16141
16405
|
return parts.map((part) => toFieldText(part, format, locale)).join(RANGE_SEPARATOR);
|
|
16142
16406
|
}
|
|
@@ -16147,25 +16411,25 @@ class PdsDatepicker {
|
|
|
16147
16411
|
}
|
|
16148
16412
|
renderCalendar(locale) {
|
|
16149
16413
|
var _a;
|
|
16150
|
-
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a :
|
|
16414
|
+
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
|
|
16151
16415
|
const months = Array.from({ length: this.monthCount }, (_, i) => addMonths(view, i));
|
|
16152
|
-
return (hAsync("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.
|
|
16416
|
+
return (hAsync("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.isRange }, id: `${this.baseId}-calendar`, role: "dialog",
|
|
16153
16417
|
// A click on a part that can't take focus, as the month heading, focuses the dialog
|
|
16154
16418
|
// rather than dropping focus to the page, which would report blur mid-selection.
|
|
16155
|
-
tabindex: "-1", "aria-labelledby": this.
|
|
16419
|
+
tabindex: "-1", "aria-labelledby": this.isRange ? null : `${this.baseId}-calendar-heading-0`, "aria-label": this.isRange ? this.label || this.triggerLabel : null, part: "calendar", ref: (el) => (this.dialogEl = el), onKeyDown: this.onDialogKeyDown, onFocusin: this.onCalendarFocusIn, onFocusout: this.onCalendarFocusOut }, this.isRange && this.renderPresets(), hAsync("div", { class: "pds-datepicker__panel" }, hAsync("div", { class: "pds-datepicker__months" }, months.map((month, index) => this.renderMonth(month, index, locale))), this.hasFooter && this.renderFooter(), this.appliesOnPick && (
|
|
16156
16420
|
// With no footer, still announce the start once it's picked, so it's clear an end comes next.
|
|
16157
16421
|
hAsync("span", { class: "visually-hidden", "aria-live": "polite" }, this.selectionText())))));
|
|
16158
16422
|
}
|
|
16159
16423
|
render() {
|
|
16160
16424
|
const locale = this.resolvedLocale;
|
|
16161
|
-
return (hAsync(Host, { key: '
|
|
16425
|
+
return (hAsync(Host, { key: '7c5388369fe78becfd26b0807f1c6cb54c7934a1', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, hAsync("pds-input", { key: 'fc565c99359715415886ae63ef1bcbf8671569c9', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (hAsync("button", {
|
|
16162
16426
|
// Keyed, as is the calendar button: when Clear appears after a pick, the focused
|
|
16163
16427
|
// calendar button must stay that button rather than be reused as Clear.
|
|
16164
16428
|
key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
|
|
16165
16429
|
// Out of the tab order, as a native search field's clear button is: Tab from a field
|
|
16166
16430
|
// just emptied would land on it as the change removes it, dropping focus to the page.
|
|
16167
16431
|
tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
|
|
16168
|
-
}, hAsync("pds-icon", { key: '
|
|
16432
|
+
}, hAsync("pds-icon", { key: '6a7da726d86654d3598f84b8ea7a8ed244a8e5da', icon: remove, "aria-hidden": "true" }))), hAsync("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, hAsync("pds-icon", { key: '92af87e66b7bb2e95861b873077a7bfb0268c2e0', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
|
|
16169
16433
|
}
|
|
16170
16434
|
static get formAssociated() { return true; }
|
|
16171
16435
|
get el() { return getElement(this); }
|
|
@@ -16185,6 +16449,9 @@ class PdsDatepicker {
|
|
|
16185
16449
|
"range": [{
|
|
16186
16450
|
"contextChanged": 0
|
|
16187
16451
|
}],
|
|
16452
|
+
"monthDay": [{
|
|
16453
|
+
"contextChanged": 0
|
|
16454
|
+
}],
|
|
16188
16455
|
"min": [{
|
|
16189
16456
|
"contextChanged": 0
|
|
16190
16457
|
}],
|
|
@@ -16236,6 +16503,7 @@ class PdsDatepicker {
|
|
|
16236
16503
|
"minuteIncrement": [2, "minute-increment"],
|
|
16237
16504
|
"minuteLabel": [1, "minute-label"],
|
|
16238
16505
|
"monthLabel": [1, "month-label"],
|
|
16506
|
+
"monthDay": [4, "month-day"],
|
|
16239
16507
|
"name": [1],
|
|
16240
16508
|
"nextMonthLabel": [1, "next-month-label"],
|
|
16241
16509
|
"periodLabel": [1, "period-label"],
|
|
@@ -16726,7 +16994,7 @@ class PdsDropdownMenu {
|
|
|
16726
16994
|
this.currentFocusIndex = -1;
|
|
16727
16995
|
// Return focus to trigger
|
|
16728
16996
|
if (this.isFocusInMenu()) {
|
|
16729
|
-
this.
|
|
16997
|
+
this.focusTrigger();
|
|
16730
16998
|
}
|
|
16731
16999
|
};
|
|
16732
17000
|
// Handle click on the trigger element
|
|
@@ -16777,6 +17045,14 @@ class PdsDropdownMenu {
|
|
|
16777
17045
|
const focused = this.host.getRootNode().activeElement;
|
|
16778
17046
|
return focused != null && this.host.contains(focused);
|
|
16779
17047
|
}
|
|
17048
|
+
// A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
|
|
17049
|
+
focusTrigger() {
|
|
17050
|
+
var _a, _b;
|
|
17051
|
+
this.triggerEl.focus();
|
|
17052
|
+
if (this.host.getRootNode().activeElement === this.triggerEl)
|
|
17053
|
+
return;
|
|
17054
|
+
(_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus();
|
|
17055
|
+
}
|
|
16780
17056
|
// Check if a menu item is disabled (handles both component and raw elements)
|
|
16781
17057
|
isItemDisabled(item) {
|
|
16782
17058
|
const tagName = item.tagName.toLowerCase();
|
|
@@ -16872,6 +17148,23 @@ class PdsDropdownMenu {
|
|
|
16872
17148
|
this.focusItemByIndex(prevIndex);
|
|
16873
17149
|
}
|
|
16874
17150
|
}
|
|
17151
|
+
// Unlike the arrow keys, Tab stops at either end of the menu instead of wrapping.
|
|
17152
|
+
adjacentEnabledIndex(fromIndex, step) {
|
|
17153
|
+
for (let index = fromIndex + step; index >= 0 && index < this.menuItems.length; index += step) {
|
|
17154
|
+
if (!this.isItemDisabled(this.menuItems[index]))
|
|
17155
|
+
return index;
|
|
17156
|
+
}
|
|
17157
|
+
return -1;
|
|
17158
|
+
}
|
|
17159
|
+
// An enabled item can still refuse focus (hidden, or a link with no href), so each one is tried in turn.
|
|
17160
|
+
focusAdjacentItem(fromIndex, step) {
|
|
17161
|
+
for (let index = this.adjacentEnabledIndex(fromIndex, step); index !== -1; index = this.adjacentEnabledIndex(index, step)) {
|
|
17162
|
+
this.focusItemByIndex(index);
|
|
17163
|
+
if (this.getFocusedItemIndex() === index)
|
|
17164
|
+
return true;
|
|
17165
|
+
}
|
|
17166
|
+
return false;
|
|
17167
|
+
}
|
|
16875
17168
|
// Escape is taken in document's capture phase, before a modal around the menu hears it on
|
|
16876
17169
|
// document and closes too.
|
|
16877
17170
|
handleEscapeKeyDown(event) {
|
|
@@ -16880,6 +17173,28 @@ class PdsDropdownMenu {
|
|
|
16880
17173
|
event.preventDefault();
|
|
16881
17174
|
this.closeDropdown();
|
|
16882
17175
|
}
|
|
17176
|
+
// Taken in the capture phase, so a modal or popover around the menu that traps Tab finds the key
|
|
17177
|
+
// already handled, or focus back on the trigger with the items hidden.
|
|
17178
|
+
handleTabKeyDown(event) {
|
|
17179
|
+
if (!this.isOpen || event.key !== 'Tab' || event.defaultPrevented)
|
|
17180
|
+
return;
|
|
17181
|
+
const currentIndex = this.getFocusedItemIndex();
|
|
17182
|
+
if (currentIndex === -1) {
|
|
17183
|
+
// The menu sits after the trigger, so Shift+Tab from the trigger leaves it behind. So does Shift+Tab
|
|
17184
|
+
// from outside the menu, where focus stays after a mouse open in Safari.
|
|
17185
|
+
if (event.shiftKey && (document.activeElement === this.triggerEl || !this.isFocusInMenu()))
|
|
17186
|
+
this.closeDropdown();
|
|
17187
|
+
return;
|
|
17188
|
+
}
|
|
17189
|
+
if (this.focusAdjacentItem(currentIndex, event.shiftKey ? -1 : 1)) {
|
|
17190
|
+
event.preventDefault();
|
|
17191
|
+
return;
|
|
17192
|
+
}
|
|
17193
|
+
// Past either end, closing moves focus to the trigger. Shift+Tab stays there; Tab carries on past it.
|
|
17194
|
+
if (event.shiftKey)
|
|
17195
|
+
event.preventDefault();
|
|
17196
|
+
this.closeDropdown();
|
|
17197
|
+
}
|
|
16883
17198
|
// Handle keyboard events for the dropdown
|
|
16884
17199
|
handleKeyDown(event) {
|
|
16885
17200
|
if (!this.isOpen)
|
|
@@ -16919,54 +17234,19 @@ class PdsDropdownMenu {
|
|
|
16919
17234
|
}
|
|
16920
17235
|
}
|
|
16921
17236
|
break;
|
|
16922
|
-
case 'Tab':
|
|
16923
|
-
|
|
16924
|
-
|
|
16925
|
-
|
|
16926
|
-
|
|
16927
|
-
|
|
16928
|
-
// If not on first item, prevent default and go to previous item
|
|
16929
|
-
event.preventDefault();
|
|
16930
|
-
this.focusPreviousItem(); // Use our method that skips disabled items
|
|
16931
|
-
}
|
|
16932
|
-
// If on first item or no item, let natural tab order move back to trigger
|
|
17237
|
+
case 'Tab': {
|
|
17238
|
+
// Tab from an item is handled in handleTabKeyDown; from anywhere else it moves into the menu.
|
|
17239
|
+
if (event.shiftKey || this.getFocusedItemIndex() !== -1)
|
|
17240
|
+
break;
|
|
17241
|
+
if (this.focusAdjacentItem(-1, 1)) {
|
|
17242
|
+
event.preventDefault();
|
|
16933
17243
|
}
|
|
16934
17244
|
else {
|
|
16935
|
-
//
|
|
16936
|
-
|
|
16937
|
-
const isTriggerFocused = activeElement === this.triggerEl;
|
|
16938
|
-
const currentIndex = this.getFocusedItemIndex();
|
|
16939
|
-
if (isTriggerFocused && this.menuItems.length > 0) {
|
|
16940
|
-
// If trigger is focused, move to first non-disabled menu item
|
|
16941
|
-
event.preventDefault();
|
|
16942
|
-
// Find the first non-disabled item
|
|
16943
|
-
let firstFocusableIndex = 0;
|
|
16944
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16945
|
-
firstFocusableIndex++;
|
|
16946
|
-
}
|
|
16947
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16948
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16949
|
-
}
|
|
16950
|
-
}
|
|
16951
|
-
else if (currentIndex === -1 && this.menuItems.length > 0) {
|
|
16952
|
-
// If no menu item is focused, focus the first non-disabled one
|
|
16953
|
-
event.preventDefault();
|
|
16954
|
-
// Find the first non-disabled item
|
|
16955
|
-
let firstFocusableIndex = 0;
|
|
16956
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16957
|
-
firstFocusableIndex++;
|
|
16958
|
-
}
|
|
16959
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16960
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16961
|
-
}
|
|
16962
|
-
}
|
|
16963
|
-
else if (currentIndex !== -1) {
|
|
16964
|
-
// Use our method that skips disabled items
|
|
16965
|
-
event.preventDefault();
|
|
16966
|
-
this.focusNextItem();
|
|
16967
|
-
}
|
|
17245
|
+
// With no item to move to, Tab carries on past the menu, as it does past the last item.
|
|
17246
|
+
this.closeDropdown();
|
|
16968
17247
|
}
|
|
16969
17248
|
break;
|
|
17249
|
+
}
|
|
16970
17250
|
}
|
|
16971
17251
|
}
|
|
16972
17252
|
// Handle clicks outside the dropdown to close it
|
|
@@ -16976,7 +17256,7 @@ class PdsDropdownMenu {
|
|
|
16976
17256
|
}
|
|
16977
17257
|
}
|
|
16978
17258
|
render() {
|
|
16979
|
-
return (hAsync(Host, { key: '
|
|
17259
|
+
return (hAsync(Host, { key: 'aa4ce84354cf87638ee46fd7ed69520228b7e656', id: this.componentId }, hAsync("slot", { key: '948800e67d18c8c6cc9e77ef3aeab635c5035453', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '3ce2a2879b14aad975cea8ae72fcbf8c3abcf20c', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'ad25fbf4f3c7a24653c229e64fe2ce893a92e4c8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '35a5903543e08577997b456bcd312bdd009fd8fc', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: 'a9593adacf047918c1d87494f8c951a2a4a5f76f', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: '8d2def1cc7020608220099f4ced0f44e9838cce8', onSlotchange: this.handleSlotChange })))));
|
|
16980
17260
|
}
|
|
16981
17261
|
get host() { return getElement(this); }
|
|
16982
17262
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16989,7 +17269,7 @@ class PdsDropdownMenu {
|
|
|
16989
17269
|
"currentFocusIndex": [32],
|
|
16990
17270
|
"hasHeader": [32]
|
|
16991
17271
|
},
|
|
16992
|
-
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
17272
|
+
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [6, "keydown", "handleTabKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
16993
17273
|
"$lazyBundleId$": "-",
|
|
16994
17274
|
"$attrsToReflect$": []
|
|
16995
17275
|
}; }
|