@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.js
CHANGED
|
@@ -7127,7 +7127,7 @@ const isSpecTest = () => {
|
|
|
7127
7127
|
|
|
7128
7128
|
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)}`;
|
|
7129
7129
|
|
|
7130
|
-
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
|
|
7130
|
+
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)))}}`;
|
|
7131
7131
|
|
|
7132
7132
|
/**
|
|
7133
7133
|
* @slot label - Content displayed as the checkbox label in place of the `label` text. Clicking it toggles the checkbox.
|
|
@@ -9065,7 +9065,7 @@ function matchesSafely(el, selector) {
|
|
|
9065
9065
|
|
|
9066
9066
|
// Controls that clipped text can sit inside that already take focus, so the text adds no tab stop of its own.
|
|
9067
9067
|
// Not any `[tabindex]`: a focusable scroll region full of chips would show every chip's tooltip at once.
|
|
9068
|
-
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"]';
|
|
9068
|
+
const FOCUSABLE_WRAPPER = 'a[href], button, summary, pds-button, pds-link, pds-tab, pds-dropdown-menu-item, [role="option"], [role="treeitem"]';
|
|
9069
9069
|
/** CSS class prefix used for truncation tooltip portal elements */
|
|
9070
9070
|
const TOOLTIP_CLASS = 'pds-truncation-tooltip';
|
|
9071
9071
|
/**
|
|
@@ -9518,12 +9518,14 @@ class PdsChip {
|
|
|
9518
9518
|
this.destroyTruncationTooltip();
|
|
9519
9519
|
if (this.labelTextEl) {
|
|
9520
9520
|
const wrapper = this.el.closest(FOCUSABLE_WRAPPER);
|
|
9521
|
+
// Hidden from assistive tech, a tab stop would be focusable with no name; hover still reveals it.
|
|
9522
|
+
const hidden = this.el.closest('[aria-hidden="true"]') !== null;
|
|
9521
9523
|
this.truncationCleanup = setupTruncationTooltip(Object.assign({ hostEl: this.el, contentEl: this.labelTextEl, getTooltipText: () => this.el.textContent || '',
|
|
9522
9524
|
// The dropdown variant's label span already sits inside
|
|
9523
9525
|
// `<button class="pds-chip__button">`, which is already focusable and
|
|
9524
9526
|
// bubbles focusin to the host — a tabindex on the span too would nest
|
|
9525
9527
|
// a second tab stop inside the button.
|
|
9526
|
-
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper,
|
|
9528
|
+
manageTabIndex: this.effectiveVariant !== 'dropdown' && !wrapper && !hidden,
|
|
9527
9529
|
// A wrapping control sits outside the host, so its focus never reaches the host's listener.
|
|
9528
9530
|
focusEl: wrapper !== null && wrapper !== void 0 ? wrapper : this.el }, besideListbox(wrapper)));
|
|
9529
9531
|
this.tooltipBoundEl = this.labelTextEl;
|
|
@@ -9657,7 +9659,7 @@ class PdsChip {
|
|
|
9657
9659
|
const hostClass = this.classNames();
|
|
9658
9660
|
const hostStyles = this.hostStyles;
|
|
9659
9661
|
this.hostKeeper.record(hostClass, hostStyles);
|
|
9660
|
-
return (hAsync(Host, { key: '
|
|
9662
|
+
return (hAsync(Host, { key: '0e6b05bfeae1d3b7d5cc23e71aaad2fa00fc7ddf', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
9661
9663
|
}
|
|
9662
9664
|
get el() { return getElement(this); }
|
|
9663
9665
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
@@ -11106,6 +11108,44 @@ function groupIconOf(optgroup) {
|
|
|
11106
11108
|
function optionIconOf(option) {
|
|
11107
11109
|
return iconOf(option);
|
|
11108
11110
|
}
|
|
11111
|
+
/** Every `pds-chip` sentiment: a sentiment added to `ChipSentimentType` fails to compile until it's listed. */
|
|
11112
|
+
const BADGE_SENTIMENTS = {
|
|
11113
|
+
accent: true,
|
|
11114
|
+
brand: true,
|
|
11115
|
+
danger: true,
|
|
11116
|
+
info: true,
|
|
11117
|
+
neutral: true,
|
|
11118
|
+
solid: true,
|
|
11119
|
+
subtle: true,
|
|
11120
|
+
success: true,
|
|
11121
|
+
warning: true,
|
|
11122
|
+
};
|
|
11123
|
+
const isBadgeSentiment = (value) => value !== null && Object.prototype.hasOwnProperty.call(BADGE_SENTIMENTS, value);
|
|
11124
|
+
/**
|
|
11125
|
+
* An option's badge from its `data-badge*` attributes, or null without a label. An unknown
|
|
11126
|
+
* sentiment falls back to `neutral`, and an icon that isn't a Pine icon name is dropped: the
|
|
11127
|
+
* badge is a `pds-chip`, whose `icon` also loads URLs.
|
|
11128
|
+
*/
|
|
11129
|
+
function optionBadgeOf(option) {
|
|
11130
|
+
return badgeOf(option);
|
|
11131
|
+
}
|
|
11132
|
+
/** An optgroup's badge from its `data-badge*` attributes, or null; the same check as an option's. */
|
|
11133
|
+
function groupBadgeOf(optgroup) {
|
|
11134
|
+
return badgeOf(optgroup);
|
|
11135
|
+
}
|
|
11136
|
+
function badgeOf(element) {
|
|
11137
|
+
var _a;
|
|
11138
|
+
const label = (_a = element.getAttribute('data-badge')) === null || _a === void 0 ? void 0 : _a.trim();
|
|
11139
|
+
if (label === undefined || label === '')
|
|
11140
|
+
return null;
|
|
11141
|
+
const sentiment = element.getAttribute('data-badge-sentiment');
|
|
11142
|
+
const icon = element.getAttribute('data-badge-icon');
|
|
11143
|
+
return {
|
|
11144
|
+
label,
|
|
11145
|
+
sentiment: isBadgeSentiment(sentiment) ? sentiment : 'neutral',
|
|
11146
|
+
icon: icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null,
|
|
11147
|
+
};
|
|
11148
|
+
}
|
|
11109
11149
|
function iconOf(element) {
|
|
11110
11150
|
const icon = element.getAttribute('data-icon');
|
|
11111
11151
|
return icon !== null && PINE_ICON_NAME$1.test(icon) ? icon : null;
|
|
@@ -11142,7 +11182,7 @@ function buildPanelEntries(items, position) {
|
|
|
11142
11182
|
if (optgroup !== null) {
|
|
11143
11183
|
let group = groups.get(optgroup);
|
|
11144
11184
|
if (!group) {
|
|
11145
|
-
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), options: [] };
|
|
11185
|
+
group = { optgroup, label: optgroup.label, icon: groupIconOf(optgroup), badge: groupBadgeOf(optgroup), options: [] };
|
|
11146
11186
|
groups.set(optgroup, group);
|
|
11147
11187
|
entries.push({ kind: 'group', group });
|
|
11148
11188
|
}
|
|
@@ -11367,7 +11407,7 @@ class FlyoutController {
|
|
|
11367
11407
|
}
|
|
11368
11408
|
}
|
|
11369
11409
|
|
|
11370
|
-
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)}`;
|
|
11410
|
+
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)}`;
|
|
11371
11411
|
|
|
11372
11412
|
/**
|
|
11373
11413
|
* @slot option - Option elements for the combobox dropdown
|
|
@@ -12501,6 +12541,7 @@ class PdsCombobox {
|
|
|
12501
12541
|
// Only strings group an option or name an icon; anything else from JS is ignored, not coerced.
|
|
12502
12542
|
if (typeof opt.icon === 'string' && opt.icon !== '')
|
|
12503
12543
|
optionEl.setAttribute('data-icon', opt.icon);
|
|
12544
|
+
this.setBadgeAttributes(optionEl, opt.badge);
|
|
12504
12545
|
if (typeof opt.group !== 'string' || opt.group === '') {
|
|
12505
12546
|
ungrouped.push(optionEl);
|
|
12506
12547
|
this.panelPositions.set(optionEl, position);
|
|
@@ -12517,6 +12558,8 @@ class PdsCombobox {
|
|
|
12517
12558
|
if (!optgroup.hasAttribute('data-icon') && typeof opt.groupIcon === 'string' && opt.groupIcon !== '') {
|
|
12518
12559
|
optgroup.setAttribute('data-icon', opt.groupIcon);
|
|
12519
12560
|
}
|
|
12561
|
+
if (!optgroup.hasAttribute('data-badge'))
|
|
12562
|
+
this.setBadgeAttributes(optgroup, opt.groupBadge);
|
|
12520
12563
|
optgroup.appendChild(optionEl);
|
|
12521
12564
|
});
|
|
12522
12565
|
[...ungrouped, ...groupEntries].forEach(entry => {
|
|
@@ -13005,7 +13048,10 @@ class PdsCombobox {
|
|
|
13005
13048
|
};
|
|
13006
13049
|
const reveal = () => {
|
|
13007
13050
|
e.preventDefault();
|
|
13008
|
-
|
|
13051
|
+
// The row's name, badge and all, as the row itself is named.
|
|
13052
|
+
const optgroup = current;
|
|
13053
|
+
const badge = groupBadgeOf(optgroup);
|
|
13054
|
+
this.revealedGroupLabel = badge === null ? optgroup.label : `${optgroup.label}, ${badge.label}`;
|
|
13009
13055
|
return true;
|
|
13010
13056
|
};
|
|
13011
13057
|
switch (e.key) {
|
|
@@ -13554,11 +13600,16 @@ class PdsCombobox {
|
|
|
13554
13600
|
return;
|
|
13555
13601
|
const { optgroup, key, options, members } = group;
|
|
13556
13602
|
const groupIcon = groupIconOf(optgroup);
|
|
13603
|
+
const badge = groupBadgeOf(optgroup);
|
|
13557
13604
|
// As in the grouped displays: disabled when there's nothing left in it to choose.
|
|
13558
13605
|
const disabled = members.length > 0 && members.every(member => isOptionDisabled(member));
|
|
13559
|
-
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: {
|
|
13606
|
+
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: {
|
|
13607
|
+
'pds-combobox__group-label': true,
|
|
13608
|
+
'pds-combobox__group-label--with-icon': groupIcon !== null,
|
|
13609
|
+
'pds-combobox__group-label--with-badge': badge !== null,
|
|
13610
|
+
}, "aria-hidden": "true" }, groupIcon !== null && (
|
|
13560
13611
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13561
|
-
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)));
|
|
13612
|
+
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)));
|
|
13562
13613
|
group = null;
|
|
13563
13614
|
};
|
|
13564
13615
|
this.filteredItems.forEach((item, itemIdx) => {
|
|
@@ -13684,20 +13735,56 @@ class PdsCombobox {
|
|
|
13684
13735
|
const isChip = this.isOptionChip(option);
|
|
13685
13736
|
const isDisabled = isOptionDisabled(option);
|
|
13686
13737
|
const tree = level !== undefined;
|
|
13687
|
-
|
|
13738
|
+
const badge = isLayout || isChip ? null : optionBadgeOf(option);
|
|
13739
|
+
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
|
|
13740
|
+
? option.getAttribute('aria-label') || this.getOptionLabel(option)
|
|
13741
|
+
: badge && `${this.getOptionLabel(option)}, ${badge.label}`, tabindex: this.usesBodyPortal || this.usesPanelSearch || tree ? '-1' : isHighlighted ? '0' : '-1', class: {
|
|
13688
13742
|
'pds-combobox__option': true,
|
|
13689
13743
|
'pds-combobox__option--highlighted': isHighlighted,
|
|
13690
13744
|
'pds-combobox__option--layout': isLayout,
|
|
13691
13745
|
'pds-combobox__option--chip': isChip,
|
|
13692
13746
|
'pds-combobox__option--disabled': isDisabled,
|
|
13693
|
-
|
|
13747
|
+
'pds-combobox__option--with-badge': badge !== null,
|
|
13748
|
+
}, "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" })));
|
|
13749
|
+
}
|
|
13750
|
+
/** Copies an `options` badge to an option's or optgroup's `data-badge*` attributes; only strings count. */
|
|
13751
|
+
setBadgeAttributes(element, badge) {
|
|
13752
|
+
if (typeof badge !== 'object' || badge === null)
|
|
13753
|
+
return;
|
|
13754
|
+
const { label, sentiment, icon } = badge;
|
|
13755
|
+
if (typeof label !== 'string' || label.trim() === '')
|
|
13756
|
+
return;
|
|
13757
|
+
element.setAttribute('data-badge', label);
|
|
13758
|
+
if (typeof sentiment === 'string')
|
|
13759
|
+
element.setAttribute('data-badge-sentiment', sentiment);
|
|
13760
|
+
if (typeof icon === 'string')
|
|
13761
|
+
element.setAttribute('data-badge-icon', icon);
|
|
13762
|
+
}
|
|
13763
|
+
/** An option's badge, after its text. */
|
|
13764
|
+
renderOptionBadge(option) {
|
|
13765
|
+
return this.renderBadge(optionBadgeOf(option), 'pds-combobox__option-badge');
|
|
13766
|
+
}
|
|
13767
|
+
/** A badge as a `pds-chip`: after an option's text, or a group's label. */
|
|
13768
|
+
renderBadge(badge, className) {
|
|
13769
|
+
var _a;
|
|
13770
|
+
if (badge === null)
|
|
13771
|
+
return null;
|
|
13772
|
+
return (hAsync("pds-chip", { size: "sm", sentiment: badge.sentiment,
|
|
13773
|
+
// A Pine icon name only, checked by optionBadgeOf; pds-chip's `icon` also loads URLs.
|
|
13774
|
+
icon: (_a = badge.icon) !== null && _a !== void 0 ? _a : undefined,
|
|
13775
|
+
// A long label, often a translated one, truncates rather than squeezing the option's text.
|
|
13776
|
+
maxWidth: "50%", class: className }, badge.label));
|
|
13694
13777
|
}
|
|
13695
|
-
/**
|
|
13778
|
+
/**
|
|
13779
|
+
* An option's text, after its `data-icon` when it has one. Beside a badge the text is always
|
|
13780
|
+
* wrapped, so it can shrink and wrap rather than push the badge out of the row.
|
|
13781
|
+
*/
|
|
13696
13782
|
renderOptionLabel(option) {
|
|
13697
13783
|
const icon = optionIconOf(option);
|
|
13698
13784
|
const label = this.truncate ? (hAsync("span", { key: this.getOptionLabel(option), class: "pds-combobox__option-text" }, this.getOptionLabel(option))) : this.getOptionLabel(option);
|
|
13699
|
-
if (icon === null)
|
|
13700
|
-
return label;
|
|
13785
|
+
if (icon === null) {
|
|
13786
|
+
return optionBadgeOf(option) === null ? label : hAsync("span", { class: "pds-combobox__option-label" }, label);
|
|
13787
|
+
}
|
|
13701
13788
|
return (hAsync("span", { class: "pds-combobox__option-label" }, hAsync("pds-icon", { name: icon, size: "regular", "aria-hidden": "true", class: "pds-combobox__option-icon" }), label));
|
|
13702
13789
|
}
|
|
13703
13790
|
/** The grouped panel's rows, in the order the panel draws them and the keyboard moves through. */
|
|
@@ -13736,7 +13823,8 @@ class PdsCombobox {
|
|
|
13736
13823
|
}
|
|
13737
13824
|
/**
|
|
13738
13825
|
* Drilled into a group: its treeitem, expanded. Its row reads as a way back ("Back: Tag") and
|
|
13739
|
-
* leads its options.
|
|
13826
|
+
* leads its options. It leaves out the group's badge: the row is a way back, not a group to
|
|
13827
|
+
* choose, and the badge was on the row that opened it. An option's own badge still shows.
|
|
13740
13828
|
*/
|
|
13741
13829
|
renderGroupBackRow(group, { posinset, setsize }) {
|
|
13742
13830
|
const id = this.groupDomId(group.optgroup);
|
|
@@ -13765,9 +13853,9 @@ class PdsCombobox {
|
|
|
13765
13853
|
'pds-combobox__group-row--highlighted': isCurrent && (flyout || this.keyboardNavigating),
|
|
13766
13854
|
'pds-combobox__group-row--keyboard': isCurrent && this.keyboardNavigating,
|
|
13767
13855
|
'pds-combobox__group-row--disabled': disabled,
|
|
13768
|
-
}, 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 && (
|
|
13856
|
+
}, 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 && (
|
|
13769
13857
|
// `name`, not `icon`: `icon` also loads URLs and data: SVGs, unsanitized.
|
|
13770
|
-
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)))));
|
|
13858
|
+
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)))));
|
|
13771
13859
|
}
|
|
13772
13860
|
// Helper method to render the caret icon
|
|
13773
13861
|
renderCaretIcon() {
|
|
@@ -13924,13 +14012,13 @@ class PdsCombobox {
|
|
|
13924
14012
|
]
|
|
13925
14013
|
.filter(Boolean)
|
|
13926
14014
|
.join(' ');
|
|
13927
|
-
return (hAsync(Host, { key: '
|
|
14015
|
+
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 => {
|
|
13928
14016
|
this.inputEl = el;
|
|
13929
14017
|
this.triggerEl = el;
|
|
13930
14018
|
}, class: {
|
|
13931
14019
|
'pds-combobox__input': true,
|
|
13932
14020
|
'pds-combobox__input--invalid': this.isInvalid(),
|
|
13933
|
-
}, 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: '
|
|
14021
|
+
}, 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' && [
|
|
13934
14022
|
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 : ''),
|
|
13935
14023
|
// Its own region: sharing one, revealing a row then opening it would leave the text the
|
|
13936
14024
|
// same, and opening the group would go unannounced.
|
|
@@ -14419,6 +14507,48 @@ function dateFormatter(locale, options) {
|
|
|
14419
14507
|
function formatDate(date, locale, options) {
|
|
14420
14508
|
return dateFormatter(locale, options).format(date);
|
|
14421
14509
|
}
|
|
14510
|
+
/**
|
|
14511
|
+
* Month-day mode's year. A leap year, so February has its 29th; every date the mode holds is in it,
|
|
14512
|
+
* and the value drops it (`--MM-DD`).
|
|
14513
|
+
*/
|
|
14514
|
+
const MONTH_DAY_YEAR = 2000;
|
|
14515
|
+
const MONTH_DAY = /^--(\d{2})-(\d{2})$/;
|
|
14516
|
+
/** The same month and day in month-day mode's year. */
|
|
14517
|
+
function inMonthDayYear(date) {
|
|
14518
|
+
return new Date(Date.UTC(MONTH_DAY_YEAR, date.getUTCMonth(), date.getUTCDate()));
|
|
14519
|
+
}
|
|
14520
|
+
/**
|
|
14521
|
+
* Parses a month and day, `--MM-DD` (ISO 8601 without a year), to a date in month-day mode's year.
|
|
14522
|
+
* A full `YYYY-MM-DD` reads as its month and day. `null` when it isn't a real month and day.
|
|
14523
|
+
*/
|
|
14524
|
+
function parseMonthDay(value) {
|
|
14525
|
+
const text = (value !== null && value !== void 0 ? value : '').trim();
|
|
14526
|
+
const match = MONTH_DAY.exec(text);
|
|
14527
|
+
if (match)
|
|
14528
|
+
return parseIsoDate(`${MONTH_DAY_YEAR}-${match[1]}-${match[2]}`);
|
|
14529
|
+
const date = parseIsoDate(text);
|
|
14530
|
+
return date && inMonthDayYear(date);
|
|
14531
|
+
}
|
|
14532
|
+
/** A date's month and day as `--MM-DD`. */
|
|
14533
|
+
function toMonthDay(date) {
|
|
14534
|
+
return `-${toIsoDate(date).slice(4)}`;
|
|
14535
|
+
}
|
|
14536
|
+
/**
|
|
14537
|
+
* A month's days for month-day mode, which has no weekdays: rows of seven from the 1st, with the
|
|
14538
|
+
* last row filled out with `null`.
|
|
14539
|
+
*/
|
|
14540
|
+
function monthDayRows(month) {
|
|
14541
|
+
const cells = [];
|
|
14542
|
+
for (let day = 1; day <= daysInMonth(MONTH_DAY_YEAR, month); day++) {
|
|
14543
|
+
cells.push(new Date(Date.UTC(MONTH_DAY_YEAR, month, day)));
|
|
14544
|
+
}
|
|
14545
|
+
while (cells.length % 7 !== 0)
|
|
14546
|
+
cells.push(null);
|
|
14547
|
+
const rows = [];
|
|
14548
|
+
for (let i = 0; i < cells.length; i += 7)
|
|
14549
|
+
rows.push(cells.slice(i, i + 7));
|
|
14550
|
+
return rows;
|
|
14551
|
+
}
|
|
14422
14552
|
|
|
14423
14553
|
/**
|
|
14424
14554
|
* Where the open calendar lives: a `div` in `document.body`, or in the nearest `<dialog>` so it
|
|
@@ -14662,32 +14792,50 @@ const wordsCache = new Map();
|
|
|
14662
14792
|
function localeWords(locale) {
|
|
14663
14793
|
let words = wordsCache.get(locale);
|
|
14664
14794
|
if (!words) {
|
|
14665
|
-
const month = (style) => {
|
|
14666
|
-
const format = new Intl.DateTimeFormat(locale, {
|
|
14667
|
-
|
|
14668
|
-
|
|
14669
|
-
|
|
14795
|
+
const month = (style, withDay) => {
|
|
14796
|
+
const format = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({ month: style }, (withDay ? { day: 'numeric' } : {})), { timeZone: 'UTC', calendar: 'gregory' }));
|
|
14797
|
+
return Array.from({ length: 12 }, (_, m) => {
|
|
14798
|
+
const date = new Date(Date.UTC(2023, m, 1));
|
|
14799
|
+
if (!withDay)
|
|
14800
|
+
return format.format(date);
|
|
14801
|
+
const parts = format.formatToParts(date);
|
|
14802
|
+
const index = parts.findIndex((part) => part.type === 'month');
|
|
14803
|
+
if (index === -1)
|
|
14804
|
+
return format.format(date);
|
|
14805
|
+
// CJK locales split a counter word, as Japanese `月`, into its own literal right after the
|
|
14806
|
+
// month; a literal with no space is that word, not the separator before the day.
|
|
14807
|
+
const suffix = parts[index + 1];
|
|
14808
|
+
return (suffix === null || suffix === void 0 ? void 0 : suffix.type) === 'literal' && !/\s/.test(suffix.value) ? parts[index].value + suffix.value : parts[index].value;
|
|
14670
14809
|
});
|
|
14671
|
-
return Array.from({ length: 12 }, (_, m) => format.format(new Date(Date.UTC(2023, m, 1))));
|
|
14672
14810
|
};
|
|
14673
14811
|
const clock = clockFor(locale);
|
|
14674
|
-
words = {
|
|
14812
|
+
words = {
|
|
14813
|
+
months: month('long', false),
|
|
14814
|
+
shortMonths: month('short', false),
|
|
14815
|
+
monthsWithDay: month('long', true),
|
|
14816
|
+
shortMonthsWithDay: month('short', true),
|
|
14817
|
+
am: clock.am,
|
|
14818
|
+
pm: clock.pm,
|
|
14819
|
+
};
|
|
14675
14820
|
wordsCache.set(locale, words);
|
|
14676
14821
|
}
|
|
14677
14822
|
return words;
|
|
14678
14823
|
}
|
|
14824
|
+
/** Whether a format's tokens (see `tokensOnly`) have a day, so a month name should inflect for one. */
|
|
14825
|
+
const hasDayToken = (tokens) => /D/.test(tokens);
|
|
14679
14826
|
/** Writes a date in a format of tokens (see `FORMAT_PARTS`), with month names and AM/PM in the locale. */
|
|
14680
14827
|
function formatWith(value, format, locale = 'en-US') {
|
|
14681
14828
|
var _a;
|
|
14682
14829
|
const words = localeWords(locale);
|
|
14830
|
+
const withDay = hasDayToken(tokensOnly(format));
|
|
14683
14831
|
const [hours, minutes] = splitTime((_a = value.time) !== null && _a !== void 0 ? _a : '00:00');
|
|
14684
14832
|
const hour12 = hours % 12 || 12;
|
|
14685
14833
|
const month = value.date.getUTCMonth();
|
|
14686
14834
|
const period = hours < 12 ? words.am : words.pm;
|
|
14687
14835
|
const parts = {
|
|
14688
14836
|
YYYY: pad(value.date.getUTCFullYear(), 4),
|
|
14689
|
-
MMMM: words.months[month],
|
|
14690
|
-
MMM: words.shortMonths[month],
|
|
14837
|
+
MMMM: withDay ? words.monthsWithDay[month] : words.months[month],
|
|
14838
|
+
MMM: withDay ? words.shortMonthsWithDay[month] : words.shortMonths[month],
|
|
14691
14839
|
MM: pad(month + 1),
|
|
14692
14840
|
M: String(month + 1),
|
|
14693
14841
|
DD: pad(value.date.getUTCDate()),
|
|
@@ -14709,17 +14857,23 @@ const alternatives = (words) => `(${words.map(escapeRegExp).join('|')})`;
|
|
|
14709
14857
|
/**
|
|
14710
14858
|
* Reads typed text in a format of tokens, as written by `formatWith`. Leading zeros are optional,
|
|
14711
14859
|
* spaces are loose, and month names and AM/PM are matched without regard to case, in the locale or
|
|
14712
|
-
* in English.
|
|
14860
|
+
* in English. A format without `YYYY` reads into `year`, and without `year` it reads nothing.
|
|
14861
|
+
* Returns `null` for anything that isn't a real date and time in that format.
|
|
14713
14862
|
*/
|
|
14714
|
-
function parseWith(text, format, locale = 'en-US') {
|
|
14863
|
+
function parseWith(text, format, locale = 'en-US', year) {
|
|
14715
14864
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
14716
14865
|
const words = localeWords(locale);
|
|
14717
14866
|
const english = localeWords('en-US');
|
|
14867
|
+
const withDay = hasDayToken(tokensOnly(format));
|
|
14868
|
+
const months = withDay ? words.monthsWithDay : words.months;
|
|
14869
|
+
const shortMonths = withDay ? words.shortMonthsWithDay : words.shortMonths;
|
|
14870
|
+
const englishMonths = withDay ? english.monthsWithDay : english.months;
|
|
14871
|
+
const englishShortMonths = withDay ? english.shortMonthsWithDay : english.shortMonths;
|
|
14718
14872
|
const periods = [words.am, words.pm, english.am, english.pm];
|
|
14719
14873
|
const patterns = {
|
|
14720
14874
|
YYYY: '(\\d{4})',
|
|
14721
|
-
MMMM: alternatives([...
|
|
14722
|
-
MMM: alternatives([...
|
|
14875
|
+
MMMM: alternatives([...months, ...englishMonths]),
|
|
14876
|
+
MMM: alternatives([...shortMonths, ...englishShortMonths]),
|
|
14723
14877
|
MM: '(\\d{1,2})',
|
|
14724
14878
|
M: '(\\d{1,2})',
|
|
14725
14879
|
DD: '(\\d{1,2})',
|
|
@@ -14766,7 +14920,7 @@ function parseWith(text, format, locale = 'en-US') {
|
|
|
14766
14920
|
const monthIndex = (name, long) => {
|
|
14767
14921
|
if (name === undefined)
|
|
14768
14922
|
return undefined;
|
|
14769
|
-
const lists = long ? [
|
|
14923
|
+
const lists = long ? [months, englishMonths] : [shortMonths, englishShortMonths];
|
|
14770
14924
|
for (const list of lists) {
|
|
14771
14925
|
const index = list.findIndex((candidate) => candidate.toLowerCase() === name.toLowerCase());
|
|
14772
14926
|
if (index >= 0)
|
|
@@ -14774,12 +14928,12 @@ function parseWith(text, format, locale = 'en-US') {
|
|
|
14774
14928
|
}
|
|
14775
14929
|
return undefined;
|
|
14776
14930
|
};
|
|
14777
|
-
const
|
|
14931
|
+
const readYear = read.YYYY ? Number(read.YYYY) : year;
|
|
14778
14932
|
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);
|
|
14779
14933
|
const day = Number((_d = read.DD) !== null && _d !== void 0 ? _d : read.D);
|
|
14780
|
-
if (
|
|
14934
|
+
if (readYear === undefined || !month || !day)
|
|
14781
14935
|
return null;
|
|
14782
|
-
const date = parseIsoDate(`${pad(
|
|
14936
|
+
const date = parseIsoDate(`${pad(readYear, 4)}-${pad(month)}-${pad(day)}`);
|
|
14783
14937
|
if (!date)
|
|
14784
14938
|
return null;
|
|
14785
14939
|
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;
|
|
@@ -14801,6 +14955,40 @@ function parseFieldText(text, format = DEFAULT_FORMAT, locale = 'en-US') {
|
|
|
14801
14955
|
var _a;
|
|
14802
14956
|
return (_a = parseWith(text, format, locale)) !== null && _a !== void 0 ? _a : parseDateTime(text);
|
|
14803
14957
|
}
|
|
14958
|
+
/**
|
|
14959
|
+
* The locale's way of writing a month and day, as a format of tokens: `MMMM D` in English, `D MMMM`
|
|
14960
|
+
* in French, `M月D日` in Japanese, or with `numeric`, `M/D` and `D/M`.
|
|
14961
|
+
*/
|
|
14962
|
+
function monthDayFormat(locale = 'en-US', month = 'long') {
|
|
14963
|
+
const parts = dateFormatter(locale, { month, day: 'numeric' }).formatToParts(new Date(Date.UTC(MONTH_DAY_YEAR, 11, 31)));
|
|
14964
|
+
return parts
|
|
14965
|
+
.map((part) => {
|
|
14966
|
+
// Some locales write even the long month in digits, as Japanese `12月31日`.
|
|
14967
|
+
if (part.type === 'month')
|
|
14968
|
+
return /^\d+$/.test(part.value) ? 'M' : 'MMMM';
|
|
14969
|
+
if (part.type === 'day')
|
|
14970
|
+
return 'D';
|
|
14971
|
+
// Bracketed, spaces included, only when it has letters a token could be read from, as
|
|
14972
|
+
// Spanish `D[ de ]MMMM`.
|
|
14973
|
+
return /[A-Za-z]/.test(part.value) ? `[${part.value}]` : part.value;
|
|
14974
|
+
})
|
|
14975
|
+
.join('');
|
|
14976
|
+
}
|
|
14977
|
+
/**
|
|
14978
|
+
* Reads a typed month and day, into month-day mode's year: in the format, then as the locale writes
|
|
14979
|
+
* it with a month name or in numbers, with the English order too, then as `--MM-DD` or a full ISO
|
|
14980
|
+
* date, whose year is dropped.
|
|
14981
|
+
*/
|
|
14982
|
+
function parseMonthDayText(text, format, locale = 'en-US') {
|
|
14983
|
+
const formats = [format, monthDayFormat(locale), monthDayFormat(locale, 'numeric'), 'MMMM D', 'D MMMM', 'MMM D', 'D MMM'];
|
|
14984
|
+
for (const candidate of formats) {
|
|
14985
|
+
const read = parseWith(text, candidate, locale, MONTH_DAY_YEAR);
|
|
14986
|
+
if (read)
|
|
14987
|
+
return { date: inMonthDayYear(read.date), time: null };
|
|
14988
|
+
}
|
|
14989
|
+
const date = parseMonthDay(text);
|
|
14990
|
+
return date ? { date, time: null } : null;
|
|
14991
|
+
}
|
|
14804
14992
|
/**
|
|
14805
14993
|
* Parses a typed range: two dates (with times, optionally) joined by a dash or `to` with spaces
|
|
14806
14994
|
* around it, as `2026-09-13 – 2026-10-13`, or by `/` when the format doesn't use slashes. The
|
|
@@ -14855,6 +15043,8 @@ function clockFor(locale) {
|
|
|
14855
15043
|
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}`;
|
|
14856
15044
|
|
|
14857
15045
|
const FULL_DATE = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
|
|
15046
|
+
/** A day in month-day mode, which has no year and so no weekday. */
|
|
15047
|
+
const MONTH_AND_DAY = { month: 'long', day: 'numeric' };
|
|
14858
15048
|
const DEFAULT_START_TIME = '00:00';
|
|
14859
15049
|
const DEFAULT_END_TIME = '23:59';
|
|
14860
15050
|
/** Ids for datepickers without a `component-id`, so their calendars' ids stay unique. */
|
|
@@ -14882,7 +15072,8 @@ const dayNumberText = (formatter, date) => { var _a, _b; return (_b = (_a = form
|
|
|
14882
15072
|
/**
|
|
14883
15073
|
* A field for one date, or in range mode a start and end date, with a calendar to pick from.
|
|
14884
15074
|
* The value is `YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` for a range; with the time picker, each
|
|
14885
|
-
* date carries a time, as `YYYY-MM-DDTHH:mm`.
|
|
15075
|
+
* date carries a time, as `YYYY-MM-DDTHH:mm`. In month-day mode, for a date that comes round every
|
|
15076
|
+
* year such as a birthday, it's a month and day with no year, as `--MM-DD`.
|
|
14886
15077
|
*
|
|
14887
15078
|
* @part calendar - The open calendar. It's portaled out of the datepicker, so style it with `.pds-datepicker-calendar-portal::part(calendar)`.
|
|
14888
15079
|
* @part presets - The list of preset ranges in the calendar, styled with `.pds-datepicker-calendar-portal::part(presets)`.
|
|
@@ -14941,8 +15132,10 @@ class PdsDatepicker {
|
|
|
14941
15132
|
* in the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`
|
|
14942
15133
|
* (24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,
|
|
14943
15134
|
* `MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value
|
|
14944
|
-
* and the change event stay ISO (`YYYY-MM-DD`), whatever the format.
|
|
14945
|
-
* accepted too.
|
|
15135
|
+
* and the change event stay ISO (`YYYY-MM-DD`; `--MM-DD` with `month-day`), whatever the format.
|
|
15136
|
+
* Typed ISO dates are always accepted too. With `month-day`, a format without `YYYY` is taken as a
|
|
15137
|
+
* month-and-day format and used as given, rather than reordered for the locale; leave it unset to
|
|
15138
|
+
* follow the locale instead.
|
|
14946
15139
|
*/
|
|
14947
15140
|
this.format = 'YYYY-MM-DD';
|
|
14948
15141
|
/**
|
|
@@ -14975,6 +15168,15 @@ class PdsDatepicker {
|
|
|
14975
15168
|
* Accessible label for the month dropdown, when `show-dropdowns` is set.
|
|
14976
15169
|
*/
|
|
14977
15170
|
this.monthLabel = 'Month';
|
|
15171
|
+
/**
|
|
15172
|
+
* Picks a month and day with no year, for a date that comes round every year, such as a birthday.
|
|
15173
|
+
* The value is `--MM-DD` (ISO 8601 without a year), the field shows the date as the locale writes
|
|
15174
|
+
* a month and day, and the calendar shows each month without a year or weekdays, with February
|
|
15175
|
+
* always having its 29th. Turns off `range`, `time-picker`, `show-dropdowns`, `min` and `max`, and
|
|
15176
|
+
* has no effect with `auto-apply`, `presets`, `first-day-of-week`, `min-date-message` or
|
|
15177
|
+
* `max-date-message`, which all depend on them.
|
|
15178
|
+
*/
|
|
15179
|
+
this.monthDay = false;
|
|
14978
15180
|
/**
|
|
14979
15181
|
* Accessible label for the button that shows the next month.
|
|
14980
15182
|
*/
|
|
@@ -15023,7 +15225,9 @@ class PdsDatepicker {
|
|
|
15023
15225
|
this.triggerLabel = 'Choose date';
|
|
15024
15226
|
/**
|
|
15025
15227
|
* The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with
|
|
15026
|
-
* the time picker, each date as `YYYY-MM-DDTHH:mm
|
|
15228
|
+
* the time picker, each date as `YYYY-MM-DDTHH:mm`; with `month-day`, the month and day with no
|
|
15229
|
+
* year, as `--MM-DD` (a full date is read too, as that month and day, and rewritten to it). An
|
|
15230
|
+
* empty string when nothing is selected.
|
|
15027
15231
|
*/
|
|
15028
15232
|
this.value = '';
|
|
15029
15233
|
/**
|
|
@@ -15214,17 +15418,17 @@ class PdsDatepicker {
|
|
|
15214
15418
|
// The times before the typed text changed them, for a pick in the calendar to go back to.
|
|
15215
15419
|
(_b = this.timesBeforeTyping) !== null && _b !== void 0 ? _b : (this.timesBeforeTyping = [startTime, endTime]);
|
|
15216
15420
|
this.loadDraft(parts);
|
|
15217
|
-
if (this.
|
|
15421
|
+
if (this.hasTime) {
|
|
15218
15422
|
// A time picked in the calendar survives typing that doesn't change the time: text with no
|
|
15219
15423
|
// time, as a date part-way typed, or with the time as committed.
|
|
15220
15424
|
const format = this.resolvedFormat;
|
|
15221
15425
|
const locale = this.resolvedLocale;
|
|
15222
|
-
const typed = this.
|
|
15426
|
+
const typed = this.isRange ? parseRangeText(this.text, format, locale) : [parseFieldText(this.text, format, locale)];
|
|
15223
15427
|
const committed = this.parsedValue();
|
|
15224
15428
|
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); };
|
|
15225
15429
|
if (keeps(0))
|
|
15226
15430
|
this.startTime = startTime;
|
|
15227
|
-
if (this.
|
|
15431
|
+
if (this.isRange && keeps(1))
|
|
15228
15432
|
this.endTime = endTime;
|
|
15229
15433
|
}
|
|
15230
15434
|
this.showDate(parts[parts.length - 1].date);
|
|
@@ -15333,7 +15537,8 @@ class PdsDatepicker {
|
|
|
15333
15537
|
if (!active)
|
|
15334
15538
|
return;
|
|
15335
15539
|
const rtl = getComputedStyle(this.el).direction === 'rtl';
|
|
15336
|
-
|
|
15540
|
+
// Month-day mode's rows start on the 1st, not on a weekday.
|
|
15541
|
+
const column = this.monthDay ? (active.getUTCDate() - 1) % 7 : weekdayColumn(active, this.weekStart);
|
|
15337
15542
|
let next = null;
|
|
15338
15543
|
switch (event.key) {
|
|
15339
15544
|
case 'ArrowLeft':
|
|
@@ -15351,14 +15556,21 @@ class PdsDatepicker {
|
|
|
15351
15556
|
case 'Home':
|
|
15352
15557
|
next = addDays(active, -column);
|
|
15353
15558
|
break;
|
|
15354
|
-
case 'End':
|
|
15355
|
-
next
|
|
15559
|
+
case 'End': {
|
|
15560
|
+
// Month-day mode's rows don't carry into the next month, so End stops at the month's last day.
|
|
15561
|
+
const lastColumn = this.monthDay
|
|
15562
|
+
? Math.min(6, daysInMonth(active.getUTCFullYear(), active.getUTCMonth()) - active.getUTCDate() + column)
|
|
15563
|
+
: 6;
|
|
15564
|
+
next = addDays(active, lastColumn - column);
|
|
15356
15565
|
break;
|
|
15566
|
+
}
|
|
15357
15567
|
case 'PageUp':
|
|
15358
|
-
|
|
15568
|
+
// Month-day mode has no year to jump by, so Shift+PageUp stays put rather than passing
|
|
15569
|
+
// through a real, possibly non-leap year and clamping Feb 29 to the 28th.
|
|
15570
|
+
next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? -12 : -1);
|
|
15359
15571
|
break;
|
|
15360
15572
|
case 'PageDown':
|
|
15361
|
-
next = addMonths(active, event.shiftKey ? 12 : 1);
|
|
15573
|
+
next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? 12 : 1);
|
|
15362
15574
|
break;
|
|
15363
15575
|
case 'Enter':
|
|
15364
15576
|
case ' ':
|
|
@@ -15371,9 +15583,9 @@ class PdsDatepicker {
|
|
|
15371
15583
|
return;
|
|
15372
15584
|
}
|
|
15373
15585
|
event.preventDefault();
|
|
15374
|
-
const target = clampDate(next, this.minDate, this.maxDate);
|
|
15586
|
+
const target = clampDate(this.inView(next), this.minDate, this.maxDate);
|
|
15375
15587
|
this.showDate(target);
|
|
15376
|
-
if (this.
|
|
15588
|
+
if (this.isRange)
|
|
15377
15589
|
this.previewDate = toIsoDate(target);
|
|
15378
15590
|
this.focusActiveDay = true;
|
|
15379
15591
|
};
|
|
@@ -15384,7 +15596,7 @@ class PdsDatepicker {
|
|
|
15384
15596
|
this.pickDate(date);
|
|
15385
15597
|
};
|
|
15386
15598
|
this.onGridPointerOver = (event) => {
|
|
15387
|
-
if (!this.
|
|
15599
|
+
if (!this.isRange || !this.draftStart || this.draftEnd)
|
|
15388
15600
|
return;
|
|
15389
15601
|
const date = this.dayFromEvent(event);
|
|
15390
15602
|
const iso = date && toIsoDate(date);
|
|
@@ -15433,19 +15645,28 @@ class PdsDatepicker {
|
|
|
15433
15645
|
var _a;
|
|
15434
15646
|
this.text = this.fieldText();
|
|
15435
15647
|
this.textError = '';
|
|
15648
|
+
const parts = this.parsedValue();
|
|
15649
|
+
// A full date reads as its month and day; keep what's submitted in step with what's shown,
|
|
15650
|
+
// rather than passing through whichever spelling was set until the next pick rewrites it.
|
|
15651
|
+
if (this.monthDay && parts) {
|
|
15652
|
+
const normalized = this.dayValue(parts[0].date);
|
|
15653
|
+
if (this.value !== normalized)
|
|
15654
|
+
this.value = normalized;
|
|
15655
|
+
}
|
|
15436
15656
|
this.updateFormValue();
|
|
15437
15657
|
if (!this.isOpen)
|
|
15438
15658
|
return;
|
|
15439
|
-
const parts = this.parsedValue();
|
|
15440
15659
|
this.loadDraft(parts);
|
|
15441
|
-
const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a :
|
|
15660
|
+
const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : this.now;
|
|
15442
15661
|
this.showDate(clampDate(day, this.minDate, this.maxDate), true);
|
|
15443
15662
|
}
|
|
15444
15663
|
requiredChanged() {
|
|
15445
15664
|
this.updateFormValue();
|
|
15446
15665
|
}
|
|
15447
15666
|
componentWillLoad() {
|
|
15448
|
-
|
|
15667
|
+
// Through the same path a later value/context change takes, so an initial full date in
|
|
15668
|
+
// month-day mode submits normalized too, not only after the first pick rewrites it.
|
|
15669
|
+
this.refreshFromValue();
|
|
15449
15670
|
}
|
|
15450
15671
|
connectedCallback() {
|
|
15451
15672
|
if (this.el.attachInternals && !this.internals) {
|
|
@@ -15495,10 +15716,30 @@ class PdsDatepicker {
|
|
|
15495
15716
|
return localeFirstDayOfWeek(this.resolvedLocale);
|
|
15496
15717
|
}
|
|
15497
15718
|
get minDate() {
|
|
15498
|
-
return parseIsoDate(this.min);
|
|
15719
|
+
return this.monthDay ? null : parseIsoDate(this.min);
|
|
15499
15720
|
}
|
|
15500
15721
|
get maxDate() {
|
|
15501
|
-
return parseIsoDate(this.max);
|
|
15722
|
+
return this.monthDay ? null : parseIsoDate(this.max);
|
|
15723
|
+
}
|
|
15724
|
+
/** Range mode, which month-day mode turns off. */
|
|
15725
|
+
get isRange() {
|
|
15726
|
+
return this.range && !this.monthDay;
|
|
15727
|
+
}
|
|
15728
|
+
/** The time picker, which month-day mode turns off. */
|
|
15729
|
+
get hasTime() {
|
|
15730
|
+
return this.timePicker && !this.monthDay;
|
|
15731
|
+
}
|
|
15732
|
+
/** Today, or in month-day mode today's month and day. */
|
|
15733
|
+
get now() {
|
|
15734
|
+
return this.monthDay ? inMonthDayYear(today()) : today();
|
|
15735
|
+
}
|
|
15736
|
+
/** In month-day mode, a date moved to the mode's year, as when the calendar wraps past December. */
|
|
15737
|
+
inView(date) {
|
|
15738
|
+
return this.monthDay ? inMonthDayYear(date) : date;
|
|
15739
|
+
}
|
|
15740
|
+
/** One day as the value holds it: `YYYY-MM-DD`, or `--MM-DD` in month-day mode. */
|
|
15741
|
+
dayValue(date) {
|
|
15742
|
+
return this.monthDay ? toMonthDay(date) : toIsoDate(date);
|
|
15502
15743
|
}
|
|
15503
15744
|
get isInteractive() {
|
|
15504
15745
|
return !this.disabled && !this.readonly;
|
|
@@ -15506,22 +15747,22 @@ class PdsDatepicker {
|
|
|
15506
15747
|
/** How many months the calendar shows side by side. */
|
|
15507
15748
|
get monthCount() {
|
|
15508
15749
|
const narrow = typeof window !== 'undefined' && window.innerWidth < TWO_MONTHS_MIN_WIDTH;
|
|
15509
|
-
return this.
|
|
15750
|
+
return this.isRange && !narrow ? 2 : 1;
|
|
15510
15751
|
}
|
|
15511
15752
|
/** Whether picks apply at once, without the footer: `auto-apply` in range mode, without times. */
|
|
15512
15753
|
get appliesOnPick() {
|
|
15513
|
-
return this.
|
|
15754
|
+
return this.isRange && this.autoApply && !this.hasTime;
|
|
15514
15755
|
}
|
|
15515
15756
|
/** Whether picks wait for Apply: for a range, unless it auto-applies, and for a date with a time. */
|
|
15516
15757
|
get hasFooter() {
|
|
15517
|
-
return (this.
|
|
15758
|
+
return (this.isRange || this.hasTime) && !this.appliesOnPick;
|
|
15518
15759
|
}
|
|
15519
15760
|
get resolvedPresets() {
|
|
15520
|
-
return this.
|
|
15761
|
+
return this.isRange ? resolvePresets(this.presets, today()) : [];
|
|
15521
15762
|
}
|
|
15522
15763
|
/** The committed value, parsed: one date, or a range's start and end. */
|
|
15523
15764
|
parsedValue(value = this.value) {
|
|
15524
|
-
if (this.
|
|
15765
|
+
if (this.isRange) {
|
|
15525
15766
|
const [start, end, extra] = (value !== null && value !== void 0 ? value : '').split('/');
|
|
15526
15767
|
const startValue = parseDateTime(start);
|
|
15527
15768
|
const endValue = parseDateTime(end);
|
|
@@ -15529,12 +15770,22 @@ class PdsDatepicker {
|
|
|
15529
15770
|
? [startValue, endValue]
|
|
15530
15771
|
: null;
|
|
15531
15772
|
}
|
|
15773
|
+
if (this.monthDay) {
|
|
15774
|
+
const date = parseMonthDay(value);
|
|
15775
|
+
return date ? [{ date, time: null }] : null;
|
|
15776
|
+
}
|
|
15532
15777
|
const single = parseDateTime(value);
|
|
15533
15778
|
return single ? [single] : null;
|
|
15534
15779
|
}
|
|
15535
15780
|
/** The format the field shows and reads, with a time when the time picker is on. */
|
|
15536
15781
|
get resolvedFormat() {
|
|
15537
|
-
|
|
15782
|
+
var _a, _b;
|
|
15783
|
+
if (this.monthDay) {
|
|
15784
|
+
// A format with a year is the default, or one for full dates: use the locale's month and day.
|
|
15785
|
+
const format = (_b = (_a = this.format) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
|
|
15786
|
+
return format !== '' && !/YYYY/.test(format.replace(/\[[^\]]*\]/g, '')) ? format : monthDayFormat(this.resolvedLocale);
|
|
15787
|
+
}
|
|
15788
|
+
return fieldFormat(this.format, this.hasTime, this.hasTime && clockFor(this.resolvedLocale).hour12);
|
|
15538
15789
|
}
|
|
15539
15790
|
/** What the field shows for the committed value. */
|
|
15540
15791
|
fieldText() {
|
|
@@ -15550,20 +15801,24 @@ class PdsDatepicker {
|
|
|
15550
15801
|
/** Drops a time the time picker doesn't show, or adds the default one it does. */
|
|
15551
15802
|
withTimePicker(value, fallback = DEFAULT_START_TIME) {
|
|
15552
15803
|
var _a;
|
|
15553
|
-
return { date: value.date, time: this.
|
|
15804
|
+
return { date: value.date, time: this.hasTime ? ((_a = value.time) !== null && _a !== void 0 ? _a : fallback) : null };
|
|
15554
15805
|
}
|
|
15555
15806
|
get fieldPlaceholder() {
|
|
15556
15807
|
if (this.placeholder)
|
|
15557
15808
|
return this.placeholder;
|
|
15809
|
+
// Month-day tokens, as `MMMM D`, don't read as a hint; an example date does.
|
|
15810
|
+
if (this.monthDay) {
|
|
15811
|
+
return formatWith({ date: parseMonthDay('--12-31'), time: null }, this.resolvedFormat, this.resolvedLocale);
|
|
15812
|
+
}
|
|
15558
15813
|
const one = this.resolvedFormat;
|
|
15559
|
-
return this.
|
|
15814
|
+
return this.isRange ? `${one}${RANGE_SEPARATOR}${one}` : one;
|
|
15560
15815
|
}
|
|
15561
15816
|
/** Loads the committed value into the draft the calendar edits. */
|
|
15562
15817
|
loadDraft(parts) {
|
|
15563
15818
|
var _a, _b;
|
|
15564
15819
|
const [start, end] = parts !== null && parts !== void 0 ? parts : [];
|
|
15565
15820
|
this.draftStart = start ? toIsoDate(start.date) : '';
|
|
15566
|
-
this.draftEnd = this.
|
|
15821
|
+
this.draftEnd = this.isRange && end ? toIsoDate(end.date) : '';
|
|
15567
15822
|
this.startTime = (_a = start === null || start === void 0 ? void 0 : start.time) !== null && _a !== void 0 ? _a : DEFAULT_START_TIME;
|
|
15568
15823
|
this.endTime = (_b = end === null || end === void 0 ? void 0 : end.time) !== null && _b !== void 0 ? _b : DEFAULT_END_TIME;
|
|
15569
15824
|
this.previewDate = '';
|
|
@@ -15579,7 +15834,7 @@ class PdsDatepicker {
|
|
|
15579
15834
|
const parts = this.parsedValue();
|
|
15580
15835
|
this.loadDraft(parts);
|
|
15581
15836
|
this.valueAtOpen = (_a = this.value) !== null && _a !== void 0 ? _a : '';
|
|
15582
|
-
const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b :
|
|
15837
|
+
const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b : this.now;
|
|
15583
15838
|
this.showDate(clampDate(start, this.minDate, this.maxDate), true);
|
|
15584
15839
|
this.focusActiveDay = focusDay;
|
|
15585
15840
|
this.isOpen = true;
|
|
@@ -15601,7 +15856,8 @@ class PdsDatepicker {
|
|
|
15601
15856
|
* Makes a day the active one and brings it into view. With two months, a day already on view
|
|
15602
15857
|
* doesn't move the view; `reset` lines the view up so the day is in the last month shown.
|
|
15603
15858
|
*/
|
|
15604
|
-
showDate(
|
|
15859
|
+
showDate(day, reset = false) {
|
|
15860
|
+
const date = this.inView(day);
|
|
15605
15861
|
const first = firstOfMonth(date);
|
|
15606
15862
|
const view = parseIsoDate(this.viewMonth);
|
|
15607
15863
|
const lastView = view && addMonths(view, this.monthCount - 1);
|
|
@@ -15619,15 +15875,15 @@ class PdsDatepicker {
|
|
|
15619
15875
|
// A pick in the calendar takes over from typed text, so dismissing afterwards commits nothing,
|
|
15620
15876
|
// as when nothing was typed.
|
|
15621
15877
|
this.dropTypedText();
|
|
15622
|
-
if (this.
|
|
15878
|
+
if (this.isRange) {
|
|
15623
15879
|
this.pickRangeDay(date);
|
|
15624
15880
|
}
|
|
15625
|
-
else if (this.
|
|
15881
|
+
else if (this.hasTime) {
|
|
15626
15882
|
this.draftStart = toIsoDate(date);
|
|
15627
15883
|
this.activeDate = this.draftStart;
|
|
15628
15884
|
}
|
|
15629
15885
|
else {
|
|
15630
|
-
this.commitValue(
|
|
15886
|
+
this.commitValue(this.dayValue(date));
|
|
15631
15887
|
this.closeCalendar(true);
|
|
15632
15888
|
}
|
|
15633
15889
|
}
|
|
@@ -15671,7 +15927,11 @@ class PdsDatepicker {
|
|
|
15671
15927
|
}
|
|
15672
15928
|
/** Commits one date, or a range with its start, end and matching preset. */
|
|
15673
15929
|
commitParts(parts) {
|
|
15674
|
-
if (
|
|
15930
|
+
if (this.monthDay) {
|
|
15931
|
+
this.commitValue(toMonthDay(parts[0].date));
|
|
15932
|
+
return;
|
|
15933
|
+
}
|
|
15934
|
+
if (!this.isRange) {
|
|
15675
15935
|
this.commitValue(toValueString(parts[0]));
|
|
15676
15936
|
return;
|
|
15677
15937
|
}
|
|
@@ -15686,7 +15946,7 @@ class PdsDatepicker {
|
|
|
15686
15946
|
if (!startDate)
|
|
15687
15947
|
return null;
|
|
15688
15948
|
const start = this.withTimePicker({ date: startDate, time: this.startTime });
|
|
15689
|
-
if (!this.
|
|
15949
|
+
if (!this.isRange)
|
|
15690
15950
|
return [start];
|
|
15691
15951
|
const end = this.withTimePicker({ date: (_a = parseIsoDate(this.draftEnd)) !== null && _a !== void 0 ? _a : startDate, time: this.endTime });
|
|
15692
15952
|
// An end time before the start time on the same day ends at the start.
|
|
@@ -15812,7 +16072,11 @@ class PdsDatepicker {
|
|
|
15812
16072
|
readText(text) {
|
|
15813
16073
|
const format = this.resolvedFormat;
|
|
15814
16074
|
const locale = this.resolvedLocale;
|
|
15815
|
-
const parts = this.
|
|
16075
|
+
const parts = this.monthDay
|
|
16076
|
+
? [parseMonthDayText(text, format, locale)]
|
|
16077
|
+
: this.isRange
|
|
16078
|
+
? parseRangeText(text, format, locale)
|
|
16079
|
+
: [parseFieldText(text, format, locale)];
|
|
15816
16080
|
if (!parts || parts.some((part) => !part))
|
|
15817
16081
|
return null;
|
|
15818
16082
|
return parts.map((part, i) => this.withTimePicker(part, i === 1 ? DEFAULT_END_TIME : DEFAULT_START_TIME));
|
|
@@ -15856,17 +16120,17 @@ class PdsDatepicker {
|
|
|
15856
16120
|
/** Whether the month before (`-1`) or after (`1`) the ones on view has a day in range. */
|
|
15857
16121
|
canShowMonth(direction) {
|
|
15858
16122
|
var _a;
|
|
15859
|
-
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a :
|
|
16123
|
+
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
|
|
15860
16124
|
if (direction < 0)
|
|
15861
16125
|
return !this.minDate || addDays(view, -1) >= this.minDate;
|
|
15862
16126
|
return !this.maxDate || addMonths(view, this.monthCount) <= this.maxDate;
|
|
15863
16127
|
}
|
|
15864
16128
|
showMonth(event, direction) {
|
|
15865
16129
|
var _a, _b;
|
|
15866
|
-
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a :
|
|
15867
|
-
const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b :
|
|
15868
|
-
this.viewMonth = toIsoDate(addMonths(view, direction));
|
|
15869
|
-
this.activeDate = toIsoDate(clampDate(addMonths(active, direction), this.minDate, this.maxDate));
|
|
16130
|
+
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
|
|
16131
|
+
const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b : this.now;
|
|
16132
|
+
this.viewMonth = toIsoDate(this.inView(addMonths(view, direction)));
|
|
16133
|
+
this.activeDate = toIsoDate(clampDate(this.inView(addMonths(active, direction)), this.minDate, this.maxDate));
|
|
15870
16134
|
if (this.canShowMonth(direction)) {
|
|
15871
16135
|
// Safari doesn't focus a clicked button; without this, focus falls to the page and Escape and
|
|
15872
16136
|
// the Tab trap stop working.
|
|
@@ -15988,7 +16252,7 @@ class PdsDatepicker {
|
|
|
15988
16252
|
const parts = this.parsedValue();
|
|
15989
16253
|
if (!parts)
|
|
15990
16254
|
return this.triggerLabel;
|
|
15991
|
-
const dates = parts.map((part) => formatDate(part.date, locale, FULL_DATE));
|
|
16255
|
+
const dates = parts.map((part) => formatDate(part.date, locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE));
|
|
15992
16256
|
return `${this.triggerLabel}, ${dates.join(RANGE_SEPARATOR)}`;
|
|
15993
16257
|
}
|
|
15994
16258
|
/** The range to highlight: the chosen one, or the start to the previewed day while picking the end. */
|
|
@@ -16002,15 +16266,15 @@ class PdsDatepicker {
|
|
|
16002
16266
|
}
|
|
16003
16267
|
/** The day shown as selected: the draft, which opens as the committed day and follows typing. */
|
|
16004
16268
|
selectedDay() {
|
|
16005
|
-
if (this.
|
|
16269
|
+
if (this.isRange)
|
|
16006
16270
|
return null;
|
|
16007
16271
|
return parseIsoDate(this.draftStart);
|
|
16008
16272
|
}
|
|
16009
16273
|
renderMonthHeading(view, index, locale, headingId) {
|
|
16010
|
-
const heading = formatDate(view, locale, { month: 'long', year: 'numeric' });
|
|
16274
|
+
const heading = formatDate(view, locale, this.monthDay ? { month: 'long' } : { month: 'long', year: 'numeric' });
|
|
16011
16275
|
// Only the first month announces itself as it changes; two months move together.
|
|
16012
16276
|
const live = index === 0 ? 'polite' : null;
|
|
16013
|
-
if (!this.showDropdowns) {
|
|
16277
|
+
if (!this.showDropdowns || this.monthDay) {
|
|
16014
16278
|
return (hAsync("div", { class: "pds-datepicker__heading", id: headingId, "aria-live": live }, heading));
|
|
16015
16279
|
}
|
|
16016
16280
|
const year = view.getUTCFullYear();
|
|
@@ -16036,14 +16300,14 @@ class PdsDatepicker {
|
|
|
16036
16300
|
const min = this.minDate;
|
|
16037
16301
|
const max = this.maxDate;
|
|
16038
16302
|
const selected = this.selectedDay();
|
|
16039
|
-
const [rangeStart, rangeEnd] = this.
|
|
16040
|
-
const now =
|
|
16041
|
-
const fullDate = dateFormatter(locale, FULL_DATE);
|
|
16303
|
+
const [rangeStart, rangeEnd] = this.isRange ? this.highlightedRange() : [null, null];
|
|
16304
|
+
const now = this.now;
|
|
16305
|
+
const fullDate = dateFormatter(locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE);
|
|
16042
16306
|
const dayNumber = dateFormatter(locale, { day: 'numeric' });
|
|
16043
16307
|
const headingId = `${this.baseId}-calendar-heading-${index}`;
|
|
16044
16308
|
const isFirst = index === 0;
|
|
16045
16309
|
const isLast = index === this.monthCount - 1;
|
|
16046
|
-
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.
|
|
16310
|
+
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) => {
|
|
16047
16311
|
if (!date)
|
|
16048
16312
|
return hAsync("td", { class: "pds-datepicker__day pds-datepicker__day--empty" });
|
|
16049
16313
|
const iso = toIsoDate(date);
|
|
@@ -16065,14 +16329,14 @@ class PdsDatepicker {
|
|
|
16065
16329
|
'pds-datepicker__day--today': isToday,
|
|
16066
16330
|
'pds-datepicker__day--disabled': unavailable,
|
|
16067
16331
|
}, "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)));
|
|
16068
|
-
})))))), this.
|
|
16332
|
+
})))))), this.hasTime && this.timesUnderMonth(index).map((which) => this.renderTime(which, locale))));
|
|
16069
16333
|
}
|
|
16070
16334
|
/**
|
|
16071
16335
|
* The time pickers under a month: the start time under the first and the end time under the
|
|
16072
16336
|
* second, or both under the one month a narrow range shows.
|
|
16073
16337
|
*/
|
|
16074
16338
|
timesUnderMonth(index) {
|
|
16075
|
-
if (!this.
|
|
16339
|
+
if (!this.isRange)
|
|
16076
16340
|
return ['start'];
|
|
16077
16341
|
if (this.monthCount === 1)
|
|
16078
16342
|
return ['start', 'end'];
|
|
@@ -16097,7 +16361,7 @@ class PdsDatepicker {
|
|
|
16097
16361
|
if (this.timesBeforeTyping)
|
|
16098
16362
|
this.timesBeforeTyping[which === 'start' ? 0 : 1] = time;
|
|
16099
16363
|
};
|
|
16100
|
-
const groupLabel = !this.
|
|
16364
|
+
const groupLabel = !this.isRange ? this.timeLabel : which === 'start' ? this.startTimeLabel : this.endTimeLabel;
|
|
16101
16365
|
const isPm = hours >= 12;
|
|
16102
16366
|
const hourOptions = clock.hour12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
|
|
16103
16367
|
const shownHour = clock.hour12 ? hours % 12 || 12 : hours;
|
|
@@ -16138,7 +16402,7 @@ class PdsDatepicker {
|
|
|
16138
16402
|
return '';
|
|
16139
16403
|
const format = this.resolvedFormat;
|
|
16140
16404
|
const locale = this.resolvedLocale;
|
|
16141
|
-
if (this.
|
|
16405
|
+
if (this.isRange && !this.draftEnd)
|
|
16142
16406
|
return `${toFieldText(parts[0], format, locale)}${RANGE_SEPARATOR}`;
|
|
16143
16407
|
return parts.map((part) => toFieldText(part, format, locale)).join(RANGE_SEPARATOR);
|
|
16144
16408
|
}
|
|
@@ -16149,25 +16413,25 @@ class PdsDatepicker {
|
|
|
16149
16413
|
}
|
|
16150
16414
|
renderCalendar(locale) {
|
|
16151
16415
|
var _a;
|
|
16152
|
-
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a :
|
|
16416
|
+
const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
|
|
16153
16417
|
const months = Array.from({ length: this.monthCount }, (_, i) => addMonths(view, i));
|
|
16154
|
-
return (hAsync("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.
|
|
16418
|
+
return (hAsync("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.isRange }, id: `${this.baseId}-calendar`, role: "dialog",
|
|
16155
16419
|
// A click on a part that can't take focus, as the month heading, focuses the dialog
|
|
16156
16420
|
// rather than dropping focus to the page, which would report blur mid-selection.
|
|
16157
|
-
tabindex: "-1", "aria-labelledby": this.
|
|
16421
|
+
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 && (
|
|
16158
16422
|
// With no footer, still announce the start once it's picked, so it's clear an end comes next.
|
|
16159
16423
|
hAsync("span", { class: "visually-hidden", "aria-live": "polite" }, this.selectionText())))));
|
|
16160
16424
|
}
|
|
16161
16425
|
render() {
|
|
16162
16426
|
const locale = this.resolvedLocale;
|
|
16163
|
-
return (hAsync(Host, { key: '
|
|
16427
|
+
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", {
|
|
16164
16428
|
// Keyed, as is the calendar button: when Clear appears after a pick, the focused
|
|
16165
16429
|
// calendar button must stay that button rather than be reused as Clear.
|
|
16166
16430
|
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,
|
|
16167
16431
|
// Out of the tab order, as a native search field's clear button is: Tab from a field
|
|
16168
16432
|
// just emptied would land on it as the change removes it, dropping focus to the page.
|
|
16169
16433
|
tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
|
|
16170
|
-
}, hAsync("pds-icon", { key: '
|
|
16434
|
+
}, 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)));
|
|
16171
16435
|
}
|
|
16172
16436
|
static get formAssociated() { return true; }
|
|
16173
16437
|
get el() { return getElement(this); }
|
|
@@ -16187,6 +16451,9 @@ class PdsDatepicker {
|
|
|
16187
16451
|
"range": [{
|
|
16188
16452
|
"contextChanged": 0
|
|
16189
16453
|
}],
|
|
16454
|
+
"monthDay": [{
|
|
16455
|
+
"contextChanged": 0
|
|
16456
|
+
}],
|
|
16190
16457
|
"min": [{
|
|
16191
16458
|
"contextChanged": 0
|
|
16192
16459
|
}],
|
|
@@ -16238,6 +16505,7 @@ class PdsDatepicker {
|
|
|
16238
16505
|
"minuteIncrement": [2, "minute-increment"],
|
|
16239
16506
|
"minuteLabel": [1, "minute-label"],
|
|
16240
16507
|
"monthLabel": [1, "month-label"],
|
|
16508
|
+
"monthDay": [4, "month-day"],
|
|
16241
16509
|
"name": [1],
|
|
16242
16510
|
"nextMonthLabel": [1, "next-month-label"],
|
|
16243
16511
|
"periodLabel": [1, "period-label"],
|
|
@@ -16728,7 +16996,7 @@ class PdsDropdownMenu {
|
|
|
16728
16996
|
this.currentFocusIndex = -1;
|
|
16729
16997
|
// Return focus to trigger
|
|
16730
16998
|
if (this.isFocusInMenu()) {
|
|
16731
|
-
this.
|
|
16999
|
+
this.focusTrigger();
|
|
16732
17000
|
}
|
|
16733
17001
|
};
|
|
16734
17002
|
// Handle click on the trigger element
|
|
@@ -16779,6 +17047,14 @@ class PdsDropdownMenu {
|
|
|
16779
17047
|
const focused = this.host.getRootNode().activeElement;
|
|
16780
17048
|
return focused != null && this.host.contains(focused);
|
|
16781
17049
|
}
|
|
17050
|
+
// A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
|
|
17051
|
+
focusTrigger() {
|
|
17052
|
+
var _a, _b;
|
|
17053
|
+
this.triggerEl.focus();
|
|
17054
|
+
if (this.host.getRootNode().activeElement === this.triggerEl)
|
|
17055
|
+
return;
|
|
17056
|
+
(_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();
|
|
17057
|
+
}
|
|
16782
17058
|
// Check if a menu item is disabled (handles both component and raw elements)
|
|
16783
17059
|
isItemDisabled(item) {
|
|
16784
17060
|
const tagName = item.tagName.toLowerCase();
|
|
@@ -16874,6 +17150,23 @@ class PdsDropdownMenu {
|
|
|
16874
17150
|
this.focusItemByIndex(prevIndex);
|
|
16875
17151
|
}
|
|
16876
17152
|
}
|
|
17153
|
+
// Unlike the arrow keys, Tab stops at either end of the menu instead of wrapping.
|
|
17154
|
+
adjacentEnabledIndex(fromIndex, step) {
|
|
17155
|
+
for (let index = fromIndex + step; index >= 0 && index < this.menuItems.length; index += step) {
|
|
17156
|
+
if (!this.isItemDisabled(this.menuItems[index]))
|
|
17157
|
+
return index;
|
|
17158
|
+
}
|
|
17159
|
+
return -1;
|
|
17160
|
+
}
|
|
17161
|
+
// An enabled item can still refuse focus (hidden, or a link with no href), so each one is tried in turn.
|
|
17162
|
+
focusAdjacentItem(fromIndex, step) {
|
|
17163
|
+
for (let index = this.adjacentEnabledIndex(fromIndex, step); index !== -1; index = this.adjacentEnabledIndex(index, step)) {
|
|
17164
|
+
this.focusItemByIndex(index);
|
|
17165
|
+
if (this.getFocusedItemIndex() === index)
|
|
17166
|
+
return true;
|
|
17167
|
+
}
|
|
17168
|
+
return false;
|
|
17169
|
+
}
|
|
16877
17170
|
// Escape is taken in document's capture phase, before a modal around the menu hears it on
|
|
16878
17171
|
// document and closes too.
|
|
16879
17172
|
handleEscapeKeyDown(event) {
|
|
@@ -16882,6 +17175,28 @@ class PdsDropdownMenu {
|
|
|
16882
17175
|
event.preventDefault();
|
|
16883
17176
|
this.closeDropdown();
|
|
16884
17177
|
}
|
|
17178
|
+
// Taken in the capture phase, so a modal or popover around the menu that traps Tab finds the key
|
|
17179
|
+
// already handled, or focus back on the trigger with the items hidden.
|
|
17180
|
+
handleTabKeyDown(event) {
|
|
17181
|
+
if (!this.isOpen || event.key !== 'Tab' || event.defaultPrevented)
|
|
17182
|
+
return;
|
|
17183
|
+
const currentIndex = this.getFocusedItemIndex();
|
|
17184
|
+
if (currentIndex === -1) {
|
|
17185
|
+
// The menu sits after the trigger, so Shift+Tab from the trigger leaves it behind. So does Shift+Tab
|
|
17186
|
+
// from outside the menu, where focus stays after a mouse open in Safari.
|
|
17187
|
+
if (event.shiftKey && (document.activeElement === this.triggerEl || !this.isFocusInMenu()))
|
|
17188
|
+
this.closeDropdown();
|
|
17189
|
+
return;
|
|
17190
|
+
}
|
|
17191
|
+
if (this.focusAdjacentItem(currentIndex, event.shiftKey ? -1 : 1)) {
|
|
17192
|
+
event.preventDefault();
|
|
17193
|
+
return;
|
|
17194
|
+
}
|
|
17195
|
+
// Past either end, closing moves focus to the trigger. Shift+Tab stays there; Tab carries on past it.
|
|
17196
|
+
if (event.shiftKey)
|
|
17197
|
+
event.preventDefault();
|
|
17198
|
+
this.closeDropdown();
|
|
17199
|
+
}
|
|
16885
17200
|
// Handle keyboard events for the dropdown
|
|
16886
17201
|
handleKeyDown(event) {
|
|
16887
17202
|
if (!this.isOpen)
|
|
@@ -16921,54 +17236,19 @@ class PdsDropdownMenu {
|
|
|
16921
17236
|
}
|
|
16922
17237
|
}
|
|
16923
17238
|
break;
|
|
16924
|
-
case 'Tab':
|
|
16925
|
-
|
|
16926
|
-
|
|
16927
|
-
|
|
16928
|
-
|
|
16929
|
-
|
|
16930
|
-
// If not on first item, prevent default and go to previous item
|
|
16931
|
-
event.preventDefault();
|
|
16932
|
-
this.focusPreviousItem(); // Use our method that skips disabled items
|
|
16933
|
-
}
|
|
16934
|
-
// If on first item or no item, let natural tab order move back to trigger
|
|
17239
|
+
case 'Tab': {
|
|
17240
|
+
// Tab from an item is handled in handleTabKeyDown; from anywhere else it moves into the menu.
|
|
17241
|
+
if (event.shiftKey || this.getFocusedItemIndex() !== -1)
|
|
17242
|
+
break;
|
|
17243
|
+
if (this.focusAdjacentItem(-1, 1)) {
|
|
17244
|
+
event.preventDefault();
|
|
16935
17245
|
}
|
|
16936
17246
|
else {
|
|
16937
|
-
//
|
|
16938
|
-
|
|
16939
|
-
const isTriggerFocused = activeElement === this.triggerEl;
|
|
16940
|
-
const currentIndex = this.getFocusedItemIndex();
|
|
16941
|
-
if (isTriggerFocused && this.menuItems.length > 0) {
|
|
16942
|
-
// If trigger is focused, move to first non-disabled menu item
|
|
16943
|
-
event.preventDefault();
|
|
16944
|
-
// Find the first non-disabled item
|
|
16945
|
-
let firstFocusableIndex = 0;
|
|
16946
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16947
|
-
firstFocusableIndex++;
|
|
16948
|
-
}
|
|
16949
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16950
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16951
|
-
}
|
|
16952
|
-
}
|
|
16953
|
-
else if (currentIndex === -1 && this.menuItems.length > 0) {
|
|
16954
|
-
// If no menu item is focused, focus the first non-disabled one
|
|
16955
|
-
event.preventDefault();
|
|
16956
|
-
// Find the first non-disabled item
|
|
16957
|
-
let firstFocusableIndex = 0;
|
|
16958
|
-
while (firstFocusableIndex < this.menuItems.length && this.isItemDisabled(this.menuItems[firstFocusableIndex])) {
|
|
16959
|
-
firstFocusableIndex++;
|
|
16960
|
-
}
|
|
16961
|
-
if (firstFocusableIndex < this.menuItems.length) {
|
|
16962
|
-
this.focusItemByIndex(firstFocusableIndex);
|
|
16963
|
-
}
|
|
16964
|
-
}
|
|
16965
|
-
else if (currentIndex !== -1) {
|
|
16966
|
-
// Use our method that skips disabled items
|
|
16967
|
-
event.preventDefault();
|
|
16968
|
-
this.focusNextItem();
|
|
16969
|
-
}
|
|
17247
|
+
// With no item to move to, Tab carries on past the menu, as it does past the last item.
|
|
17248
|
+
this.closeDropdown();
|
|
16970
17249
|
}
|
|
16971
17250
|
break;
|
|
17251
|
+
}
|
|
16972
17252
|
}
|
|
16973
17253
|
}
|
|
16974
17254
|
// Handle clicks outside the dropdown to close it
|
|
@@ -16978,7 +17258,7 @@ class PdsDropdownMenu {
|
|
|
16978
17258
|
}
|
|
16979
17259
|
}
|
|
16980
17260
|
render() {
|
|
16981
|
-
return (hAsync(Host, { key: '
|
|
17261
|
+
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 })))));
|
|
16982
17262
|
}
|
|
16983
17263
|
get host() { return getElement(this); }
|
|
16984
17264
|
static get style() { return pdsDropdownMenuCss(); }
|
|
@@ -16991,7 +17271,7 @@ class PdsDropdownMenu {
|
|
|
16991
17271
|
"currentFocusIndex": [32],
|
|
16992
17272
|
"hasHeader": [32]
|
|
16993
17273
|
},
|
|
16994
|
-
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
17274
|
+
"$listeners$": [[6, "keydown", "handleEscapeKeyDown"], [6, "keydown", "handleTabKeyDown"], [8, "keydown", "handleKeyDown"], [8, "click", "handleWindowClick"]],
|
|
16995
17275
|
"$lazyBundleId$": "-",
|
|
16996
17276
|
"$attrsToReflect$": []
|
|
16997
17277
|
}; }
|