@pine-ds/core 3.27.0 → 3.28.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/i18n-format.js +1 -0
- package/components/pds-alert.js +1 -1
- package/components/pds-avatar.js +1 -1
- package/components/pds-chip2.js +1 -1
- package/components/pds-multiselect.js +1 -1
- package/components/pds-textarea.js +1 -1
- package/components/pds-toast.js +1 -1
- package/dist/cjs/i18n-format-CrpIhahc.js +64 -0
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/pds-alert.cjs.entry.js +7 -1
- package/dist/cjs/pds-avatar.cjs.entry.js +8 -2
- package/dist/cjs/pds-chip.cjs.entry.js +8 -3
- package/dist/cjs/pds-multiselect.cjs.entry.js +91 -12
- package/dist/cjs/pds-textarea.cjs.entry.js +12 -5
- package/dist/cjs/pds-toast.cjs.entry.js +9 -3
- package/dist/cjs/pine-core.cjs.js +1 -1
- package/dist/collection/components/pds-alert/pds-alert.js +30 -1
- package/dist/collection/components/pds-avatar/pds-avatar.js +31 -2
- package/dist/collection/components/pds-chip/pds-chip.js +31 -3
- package/dist/collection/components/pds-multiselect/pds-multiselect.js +358 -17
- package/dist/collection/components/pds-textarea/pds-textarea.js +35 -5
- package/dist/collection/components/pds-toast/pds-toast.js +32 -3
- package/dist/collection/i18n/i18n-format.js +59 -0
- package/dist/collection/i18n/index.js +1 -0
- package/dist/docs.json +505 -6
- package/dist/esm/i18n-format-BKsJZTyn.js +61 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/pds-alert.entry.js +7 -1
- package/dist/esm/pds-avatar.entry.js +8 -2
- package/dist/esm/pds-chip.entry.js +8 -3
- package/dist/esm/pds-multiselect.entry.js +91 -12
- package/dist/esm/pds-textarea.entry.js +12 -5
- package/dist/esm/pds-toast.entry.js +9 -3
- package/dist/esm/pine-core.js +1 -1
- package/dist/esm-es5/i18n-format-BKsJZTyn.js +1 -0
- package/dist/esm-es5/loader.js +1 -1
- package/dist/esm-es5/pds-alert.entry.js +1 -1
- package/dist/esm-es5/pds-avatar.entry.js +1 -1
- package/dist/esm-es5/pds-chip.entry.js +1 -1
- package/dist/esm-es5/pds-multiselect.entry.js +1 -1
- package/dist/esm-es5/pds-textarea.entry.js +1 -1
- package/dist/esm-es5/pds-toast.entry.js +1 -1
- package/dist/esm-es5/pine-core.js +1 -1
- package/dist/pine-core/p-041243ee.system.entry.js +1 -0
- package/dist/pine-core/{p-7b71f1bf.system.entry.js → p-1f4910b0.system.entry.js} +1 -1
- package/dist/pine-core/p-25f8690f.entry.js +1 -0
- package/dist/pine-core/p-2af1d1d3.system.entry.js +1 -0
- package/dist/pine-core/p-2cc1ec4c.entry.js +1 -0
- package/dist/pine-core/{p-1e1804ed.system.entry.js → p-5f36fafa.system.entry.js} +1 -1
- package/dist/pine-core/p-621fdce1.entry.js +1 -0
- package/dist/pine-core/{p-b0b6acdb.system.entry.js → p-8a00e32b.system.entry.js} +1 -1
- package/dist/pine-core/p-BKsJZTyn.js +1 -0
- package/dist/pine-core/p-C61CFP22.system.js +1 -1
- package/dist/pine-core/p-Cr7-rJtJ.system.js +1 -0
- package/dist/pine-core/p-af48e6ae.entry.js +1 -0
- package/dist/pine-core/{p-cce6dcf0.system.entry.js → p-c7c17fe3.system.entry.js} +1 -1
- package/dist/pine-core/p-e48161a5.entry.js +1 -0
- package/dist/pine-core/p-fda3f3c6.entry.js +1 -0
- package/dist/pine-core/pine-core.esm.js +1 -1
- package/dist/types/components/pds-alert/pds-alert.d.ts +6 -0
- package/dist/types/components/pds-avatar/pds-avatar.d.ts +6 -0
- package/dist/types/components/pds-chip/pds-chip.d.ts +5 -0
- package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +67 -4
- package/dist/types/components/pds-textarea/pds-textarea.d.ts +6 -0
- package/dist/types/components/pds-toast/pds-toast.d.ts +6 -0
- package/dist/types/components.d.ts +187 -9
- package/dist/types/i18n/i18n-format.d.ts +38 -0
- package/dist/types/i18n/index.d.ts +2 -0
- package/hydrate/index.js +211 -28
- package/hydrate/index.mjs +211 -28
- package/package.json +3 -2
- package/dist/pine-core/p-190ba1df.entry.js +0 -1
- package/dist/pine-core/p-638e9cb3.entry.js +0 -1
- package/dist/pine-core/p-68121613.system.entry.js +0 -1
- package/dist/pine-core/p-829c52dc.entry.js +0 -1
- package/dist/pine-core/p-a739bdfa.entry.js +0 -1
- package/dist/pine-core/p-b88be8be.entry.js +0 -1
- package/dist/pine-core/p-f2315f2a.entry.js +0 -1
- package/dist/pine-core/p-f928817f.system.entry.js +0 -1
package/hydrate/index.js
CHANGED
|
@@ -5652,6 +5652,12 @@ class PdsAlert {
|
|
|
5652
5652
|
* @defaultValue 'default'
|
|
5653
5653
|
*/
|
|
5654
5654
|
this.variant = 'default';
|
|
5655
|
+
/**
|
|
5656
|
+
* Accessible label for the dismiss button. Pass a translated string to
|
|
5657
|
+
* localize it; defaults to English.
|
|
5658
|
+
* @defaultValue 'Dismiss alert'
|
|
5659
|
+
*/
|
|
5660
|
+
this.dismissLabel = 'Dismiss alert';
|
|
5655
5661
|
this.hasActionsContent = false;
|
|
5656
5662
|
this.handleCloseClick = () => {
|
|
5657
5663
|
this.pdsAlertDismissClick.emit();
|
|
@@ -5682,7 +5688,7 @@ class PdsAlert {
|
|
|
5682
5688
|
};
|
|
5683
5689
|
// Get the icon name based on the current variant
|
|
5684
5690
|
const iconName = iconMap[this.variant] || iconMap.default;
|
|
5685
|
-
return (hAsync(Host, { key: '
|
|
5691
|
+
return (hAsync(Host, { key: 'b143df0c24c077e412894f5f77f1bd7c0ced1c92', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '928e3852507a1776069ee80906443ef650607ce7', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '778046ab1c651a57e910e45fe00944a74a3c32f7', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (hAsync("pds-icon", { key: '0199ef3e12a8dc9da20006fc8c4e133f83f4caf4', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), hAsync("pds-box", { key: 'b7b973c0c6154d72f90a585a116ea76ac48cc6e4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c969f9a7eabdc31bc2faca247033e89cc15caea0', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: '168c21de5a0112a65b73a854add4393fea9ede6f', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: 'f8e9311a4934c1b8458879cd6244a99e3a730be2', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
|
|
5686
5692
|
}
|
|
5687
5693
|
get el() { return getElement(this); }
|
|
5688
5694
|
static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
|
|
@@ -5696,6 +5702,7 @@ class PdsAlert {
|
|
|
5696
5702
|
"dismissible": [4],
|
|
5697
5703
|
"hideIcon": [4, "hide-icon"],
|
|
5698
5704
|
"variant": [1],
|
|
5705
|
+
"dismissLabel": [1, "dismiss-label"],
|
|
5699
5706
|
"hasActionsContent": [32]
|
|
5700
5707
|
},
|
|
5701
5708
|
"$listeners$": undefined,
|
|
@@ -5749,6 +5756,12 @@ class PdsAvatar {
|
|
|
5749
5756
|
* @defaultValue customer
|
|
5750
5757
|
*/
|
|
5751
5758
|
this.variant = 'customer';
|
|
5759
|
+
/**
|
|
5760
|
+
* Accessible label for the dropdown trigger button. Pass a translated string
|
|
5761
|
+
* to localize it; defaults to English.
|
|
5762
|
+
* @defaultValue 'Avatar dropdown trigger'
|
|
5763
|
+
*/
|
|
5764
|
+
this.triggerLabel = 'Avatar dropdown trigger';
|
|
5752
5765
|
this.renderAssetWrapper = () => {
|
|
5753
5766
|
const style = {
|
|
5754
5767
|
height: this.avatarSize(),
|
|
@@ -5759,7 +5772,7 @@ class PdsAvatar {
|
|
|
5759
5772
|
this.renderAvatar = () => {
|
|
5760
5773
|
return (this.dropdown
|
|
5761
5774
|
?
|
|
5762
|
-
hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label":
|
|
5775
|
+
hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": this.triggerLabel }, this.renderAssetWrapper())
|
|
5763
5776
|
:
|
|
5764
5777
|
this.renderAssetWrapper());
|
|
5765
5778
|
};
|
|
@@ -5803,7 +5816,7 @@ class PdsAvatar {
|
|
|
5803
5816
|
}
|
|
5804
5817
|
}
|
|
5805
5818
|
render() {
|
|
5806
|
-
return (hAsync(Host, { key: '
|
|
5819
|
+
return (hAsync(Host, { key: 'd8c417ed6fca497bac5bb51a184b1f7d0077bc03', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
|
|
5807
5820
|
}
|
|
5808
5821
|
static get style() { return pdsAvatarCss(); }
|
|
5809
5822
|
static get cmpMeta() { return {
|
|
@@ -5817,7 +5830,8 @@ class PdsAvatar {
|
|
|
5817
5830
|
"image": [1],
|
|
5818
5831
|
"initials": [1],
|
|
5819
5832
|
"size": [513],
|
|
5820
|
-
"variant": [513]
|
|
5833
|
+
"variant": [513],
|
|
5834
|
+
"triggerLabel": [1, "trigger-label"]
|
|
5821
5835
|
},
|
|
5822
5836
|
"$listeners$": undefined,
|
|
5823
5837
|
"$lazyBundleId$": "-",
|
|
@@ -6697,6 +6711,11 @@ class PdsChip {
|
|
|
6697
6711
|
* @defaultValue 'text'
|
|
6698
6712
|
*/
|
|
6699
6713
|
this.variant = 'text';
|
|
6714
|
+
/**
|
|
6715
|
+
* Accessible label for the remove button. Pass a translated string to localize it; defaults to English.
|
|
6716
|
+
* @defaultValue 'Remove'
|
|
6717
|
+
*/
|
|
6718
|
+
this.dismissLabel = 'Remove';
|
|
6700
6719
|
this.handleCloseClick = () => {
|
|
6701
6720
|
this.pdsTagCloseClick.emit();
|
|
6702
6721
|
};
|
|
@@ -6750,7 +6769,7 @@ class PdsChip {
|
|
|
6750
6769
|
const linkAttrs = {
|
|
6751
6770
|
class: 'pds-chip__close',
|
|
6752
6771
|
href: this.removeUrl,
|
|
6753
|
-
'aria-label':
|
|
6772
|
+
'aria-label': this.dismissLabel,
|
|
6754
6773
|
};
|
|
6755
6774
|
// Add target if specified
|
|
6756
6775
|
if (this.removeTarget) {
|
|
@@ -6781,13 +6800,13 @@ class PdsChip {
|
|
|
6781
6800
|
return {
|
|
6782
6801
|
class: 'pds-chip__close',
|
|
6783
6802
|
type: 'button',
|
|
6784
|
-
'aria-label':
|
|
6803
|
+
'aria-label': this.dismissLabel,
|
|
6785
6804
|
};
|
|
6786
6805
|
};
|
|
6787
6806
|
return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
|
|
6788
6807
|
}
|
|
6789
6808
|
render() {
|
|
6790
|
-
return (hAsync(Host, { key: '
|
|
6809
|
+
return (hAsync(Host, { key: 'ff02e96839049b313681389308faba50c5989842', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
|
|
6791
6810
|
}
|
|
6792
6811
|
static get style() { return pdsChipTokensCss() + pdsChipCss(); }
|
|
6793
6812
|
static get cmpMeta() { return {
|
|
@@ -6803,7 +6822,8 @@ class PdsChip {
|
|
|
6803
6822
|
"variant": [1],
|
|
6804
6823
|
"removeUrl": [1, "remove-url"],
|
|
6805
6824
|
"removeHttpMethod": [1, "remove-http-method"],
|
|
6806
|
-
"removeTarget": [1, "remove-target"]
|
|
6825
|
+
"removeTarget": [1, "remove-target"],
|
|
6826
|
+
"dismissLabel": [1, "dismiss-label"]
|
|
6807
6827
|
},
|
|
6808
6828
|
"$listeners$": undefined,
|
|
6809
6829
|
"$lazyBundleId$": "-",
|
|
@@ -14367,6 +14387,66 @@ class PdsModalHeader {
|
|
|
14367
14387
|
}; }
|
|
14368
14388
|
}
|
|
14369
14389
|
|
|
14390
|
+
/**
|
|
14391
|
+
* i18n formatting helpers for Pine components.
|
|
14392
|
+
*
|
|
14393
|
+
* Pine stays string-agnostic: user-facing text is supplied by the consumer as
|
|
14394
|
+
* props (English-defaulted). These helpers only handle the two things a prop
|
|
14395
|
+
* value can't express on its own — interpolating live component state into a
|
|
14396
|
+
* translated template, and picking the right plural form. No stored strings, no
|
|
14397
|
+
* locale registry; the locale is read from the DOM (`lang`), the web-standard
|
|
14398
|
+
* signal a consumer already sets.
|
|
14399
|
+
*
|
|
14400
|
+
* Two limitations of DOM-`lang` locale resolution, both inherent to inferring
|
|
14401
|
+
* locale from the DOM rather than being told it:
|
|
14402
|
+
*
|
|
14403
|
+
* 1. Not reactive. `resolveLocale` is read during render; Stencil has no
|
|
14404
|
+
* reactive dependency on a DOM attribute, so changing `lang` at runtime
|
|
14405
|
+
* (`document.documentElement.lang = 'pl'`) does NOT re-render mounted
|
|
14406
|
+
* components — the plural form stays stale until unrelated state forces a
|
|
14407
|
+
* render. Fine when locale changes via full-page navigation; a consumer that
|
|
14408
|
+
* switches locale client-side should pass the already-formatted/pluralized
|
|
14409
|
+
* string as the prop instead.
|
|
14410
|
+
* 2. Does not cross shadow boundaries. `el.closest('[lang]')` stops at the host's
|
|
14411
|
+
* shadow root. A Pine component nested inside another custom element whose
|
|
14412
|
+
* `lang` sits on that outer host will not see it and falls back to
|
|
14413
|
+
* `document.documentElement.lang`. Set `lang` on (or above) the Pine element
|
|
14414
|
+
* in the same tree, or pass a pre-formatted string, when that matters.
|
|
14415
|
+
*/
|
|
14416
|
+
/** Replace `{token}` placeholders with `vars`; unknown tokens stay literal. */
|
|
14417
|
+
function formatMessage(template, vars) {
|
|
14418
|
+
if (!vars)
|
|
14419
|
+
return template;
|
|
14420
|
+
return template.replace(/\{(\w+)\}/g, (_match, key) => key in vars ? String(vars[key]) : `{${key}}`);
|
|
14421
|
+
}
|
|
14422
|
+
/** Nearest `[lang]` ancestor, then `<html lang>`, then `'en'`. */
|
|
14423
|
+
function resolveLocale(el) {
|
|
14424
|
+
var _a;
|
|
14425
|
+
const fromEl = el && typeof el.closest === 'function' ? (_a = el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang') : null;
|
|
14426
|
+
const fromDoc = typeof document !== 'undefined' ? document.documentElement.lang : '';
|
|
14427
|
+
return fromEl || fromDoc || 'en';
|
|
14428
|
+
}
|
|
14429
|
+
/**
|
|
14430
|
+
* Pick the CLDR plural form for `count` in the element's locale (via the
|
|
14431
|
+
* platform `Intl.PluralRules`) and interpolate `{count}`. `forms` come from the
|
|
14432
|
+
* caller — component props, English-defaulted — and fall back to `other`.
|
|
14433
|
+
*/
|
|
14434
|
+
function pluralize(el, count, forms, vars) {
|
|
14435
|
+
let category = 'other';
|
|
14436
|
+
try {
|
|
14437
|
+
category = new Intl.PluralRules(resolveLocale(el)).select(count);
|
|
14438
|
+
}
|
|
14439
|
+
catch (_a) {
|
|
14440
|
+
/* invalid locale tag → fall back to 'other' */
|
|
14441
|
+
}
|
|
14442
|
+
// Prefer the selected category, then the required `other`, then `one`; never
|
|
14443
|
+
// return empty. `||` (not `??`) so an empty-string form is skipped too, not
|
|
14444
|
+
// treated as present — a bare `{count}` still shows the number rather than
|
|
14445
|
+
// leaving the trigger with no accessible name.
|
|
14446
|
+
const template = forms[category] || forms.other || forms.one || '{count}';
|
|
14447
|
+
return formatMessage(template, Object.assign({ count }, vars));
|
|
14448
|
+
}
|
|
14449
|
+
|
|
14370
14450
|
const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
|
|
14371
14451
|
|
|
14372
14452
|
/**
|
|
@@ -14385,14 +14465,65 @@ class PdsMultiselect {
|
|
|
14385
14465
|
this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate");
|
|
14386
14466
|
this.pdsMultiselectDismiss = createEvent(this, "pdsMultiselectDismiss");
|
|
14387
14467
|
/**
|
|
14388
|
-
* Placeholder text for the input field.
|
|
14468
|
+
* Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
|
|
14469
|
+
* @defaultValue 'Select...'
|
|
14389
14470
|
*/
|
|
14390
14471
|
this.placeholder = 'Select...';
|
|
14391
14472
|
/**
|
|
14392
|
-
* Placeholder text for the search input inside the dropdown panel.
|
|
14393
|
-
* @
|
|
14473
|
+
* Placeholder text for the search input inside the dropdown panel. Pass a translated string to localize it; defaults to English.
|
|
14474
|
+
* @defaultValue 'Find...'
|
|
14394
14475
|
*/
|
|
14395
14476
|
this.searchPlaceholder = 'Find...';
|
|
14477
|
+
/**
|
|
14478
|
+
* Accessible label for the search input. Pass a translated string to localize it; defaults to English.
|
|
14479
|
+
* @defaultValue 'Search options'
|
|
14480
|
+
*/
|
|
14481
|
+
this.searchOptionsLabel = 'Search options';
|
|
14482
|
+
/**
|
|
14483
|
+
* Accessible label for the selected-items region. Pass a translated string to localize it; defaults to English.
|
|
14484
|
+
* @defaultValue 'Selected items'
|
|
14485
|
+
*/
|
|
14486
|
+
this.selectedItemsLabel = 'Selected items';
|
|
14487
|
+
/**
|
|
14488
|
+
* Accessible label for the options listbox (falls back to this when `label` is unset). Pass a translated string to localize it; defaults to English.
|
|
14489
|
+
* @defaultValue 'Options'
|
|
14490
|
+
*/
|
|
14491
|
+
this.optionsLabel = 'Options';
|
|
14492
|
+
/**
|
|
14493
|
+
* Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
|
|
14494
|
+
* @defaultValue 'No options found'
|
|
14495
|
+
*/
|
|
14496
|
+
this.noOptionsFoundLabel = 'No options found';
|
|
14497
|
+
/**
|
|
14498
|
+
* Visible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
|
|
14499
|
+
* @defaultValue 'Add "{text}"'
|
|
14500
|
+
*/
|
|
14501
|
+
this.createOptionLabel = 'Add "{text}"';
|
|
14502
|
+
/**
|
|
14503
|
+
* Accessible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
|
|
14504
|
+
* @defaultValue 'Create new tag: {text}'
|
|
14505
|
+
*/
|
|
14506
|
+
this.createOptionAriaLabel = 'Create new tag: {text}';
|
|
14507
|
+
/**
|
|
14508
|
+
* Screen-reader announcement when an item is removed. Pass a translated string to localize it; `{item}` is interpolated.
|
|
14509
|
+
* @defaultValue '{item} removed'
|
|
14510
|
+
*/
|
|
14511
|
+
this.itemRemovedLabel = '{item} removed';
|
|
14512
|
+
/**
|
|
14513
|
+
* Accessible label for the remove button on each selected-item pill. Pass a translated string to localize it; defaults to English.
|
|
14514
|
+
* @defaultValue 'Remove'
|
|
14515
|
+
*/
|
|
14516
|
+
this.pillRemoveLabel = 'Remove';
|
|
14517
|
+
/**
|
|
14518
|
+
* Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.
|
|
14519
|
+
* @defaultValue '{count} item'
|
|
14520
|
+
*/
|
|
14521
|
+
this.selectedCountLabelOne = '{count} item';
|
|
14522
|
+
/**
|
|
14523
|
+
* Plural (and fallback) form of the selected-count trigger text — used for English and any locale whose selected plural category isn't supplied via `selectedCountLabels`. Pass a translated string to localize it; `{count}` is interpolated.
|
|
14524
|
+
* @defaultValue '{count} items'
|
|
14525
|
+
*/
|
|
14526
|
+
this.selectedCountLabelOther = '{count} items';
|
|
14396
14527
|
/**
|
|
14397
14528
|
* Whether to close the panel after an option is selected.
|
|
14398
14529
|
* Defaults to `false` (panel stays open for multi-select).
|
|
@@ -14631,7 +14762,7 @@ class PdsMultiselect {
|
|
|
14631
14762
|
this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
|
|
14632
14763
|
// Clear first so screen readers re-announce even when the same item is removed twice
|
|
14633
14764
|
this.removalAnnouncement = '';
|
|
14634
|
-
queueMicrotask(() => { this.removalAnnouncement =
|
|
14765
|
+
queueMicrotask(() => { this.removalAnnouncement = formatMessage(this.itemRemovedLabel, { item: item.text }); });
|
|
14635
14766
|
this.isClosingViaSelection = true;
|
|
14636
14767
|
if (this.isOpen) {
|
|
14637
14768
|
(_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
|
|
@@ -15268,7 +15399,7 @@ class PdsMultiselect {
|
|
|
15268
15399
|
'pds-multiselect__option--selected': isSelected,
|
|
15269
15400
|
'pds-multiselect__option--create': isCreateOption,
|
|
15270
15401
|
'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
|
|
15271
|
-
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ?
|
|
15402
|
+
}, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }))));
|
|
15272
15403
|
}
|
|
15273
15404
|
renderSelectedItemsList() {
|
|
15274
15405
|
if (this.hideSelectedItems || this.selectedItems.length === 0)
|
|
@@ -15282,7 +15413,7 @@ class PdsMultiselect {
|
|
|
15282
15413
|
const valueArray = this.ensureValueArray();
|
|
15283
15414
|
const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
|
|
15284
15415
|
const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
|
|
15285
|
-
return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label":
|
|
15416
|
+
return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
|
|
15286
15417
|
if (item.type === 'group') {
|
|
15287
15418
|
return (hAsync("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, hAsync("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), hAsync("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
|
|
15288
15419
|
}
|
|
@@ -15297,27 +15428,54 @@ class PdsMultiselect {
|
|
|
15297
15428
|
const variant = this.disabled ? 'text' : 'tag';
|
|
15298
15429
|
const visibleItems = this.selectedItems.slice(0, Math.max(1, this.maxInlinePills));
|
|
15299
15430
|
const overflowCount = this.selectedItems.length - visibleItems.length;
|
|
15300
|
-
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label":
|
|
15431
|
+
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label": this.selectedItemsLabel }, visibleItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "sm", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text))), overflowCount > 0 && (hAsync("span", { class: "pds-multiselect__pill-overflow" }, "+", overflowCount))));
|
|
15301
15432
|
}
|
|
15302
15433
|
renderBelowPills() {
|
|
15303
15434
|
if (this.selectedItems.length === 0)
|
|
15304
15435
|
return null;
|
|
15305
15436
|
const variant = this.disabled ? 'text' : 'tag';
|
|
15306
|
-
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label":
|
|
15437
|
+
return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": this.selectedItemsLabel }, this.selectedItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
|
|
15307
15438
|
}
|
|
15308
15439
|
getTriggerText() {
|
|
15309
15440
|
const count = this.selectedItems.length;
|
|
15310
15441
|
if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
|
|
15442
|
+
// Fall back to a non-empty string: the trigger's accessible name comes from
|
|
15443
|
+
// this text, so an empty/undefined placeholder must never leave it nameless
|
|
15444
|
+
// (WCAG 4.1.2). The prop is localizable; this last-resort default is not.
|
|
15311
15445
|
return this.placeholder || 'Select...';
|
|
15312
15446
|
}
|
|
15313
|
-
return
|
|
15447
|
+
return pluralize(this.el, count, this.resolveCountForms());
|
|
15448
|
+
}
|
|
15449
|
+
/**
|
|
15450
|
+
* The `one`/`other` props are the ergonomic English defaults; `selectedCountLabels`
|
|
15451
|
+
* (object or JSON-string attribute) layers full CLDR forms on top for locales
|
|
15452
|
+
* that need `few`/`many`/`two`/`zero`. Malformed JSON degrades to the defaults.
|
|
15453
|
+
*/
|
|
15454
|
+
resolveCountForms() {
|
|
15455
|
+
const base = {
|
|
15456
|
+
one: this.selectedCountLabelOne,
|
|
15457
|
+
other: this.selectedCountLabelOther,
|
|
15458
|
+
};
|
|
15459
|
+
const extra = this.selectedCountLabels;
|
|
15460
|
+
if (!extra)
|
|
15461
|
+
return base;
|
|
15462
|
+
if (typeof extra === 'string') {
|
|
15463
|
+
try {
|
|
15464
|
+
const parsed = JSON.parse(extra);
|
|
15465
|
+
return parsed && typeof parsed === 'object' ? Object.assign(Object.assign({}, base), parsed) : base;
|
|
15466
|
+
}
|
|
15467
|
+
catch (_a) {
|
|
15468
|
+
return base; // not valid JSON → fall back to the English-shape defaults
|
|
15469
|
+
}
|
|
15470
|
+
}
|
|
15471
|
+
return Object.assign(Object.assign({}, base), extra);
|
|
15314
15472
|
}
|
|
15315
15473
|
render() {
|
|
15316
15474
|
const hasSelections = this.selectedItems.length > 0;
|
|
15317
|
-
return (hAsync(Host, { key: '
|
|
15475
|
+
return (hAsync(Host, { key: '4a54a778522d0a1d2f45c32928e7a663f19c0189', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3593eb4fa1a0ae575b1c0ed03f0763dcea04c9e6', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'f91a680ae3c3021bac6bd99368d3ef6ad6438898', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
|
|
15318
15476
|
'pds-multiselect__label': true,
|
|
15319
15477
|
'visually-hidden': this.hideLabel,
|
|
15320
|
-
} }, this.label)), hAsync("div", { key: '
|
|
15478
|
+
} }, this.label)), hAsync("div", { key: 'de2899f19057b8cd19cf3467251d03c1b43b73f5', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
|
|
15321
15479
|
'pds-multiselect__trigger': true,
|
|
15322
15480
|
'pds-multiselect__trigger--open': this.isOpen,
|
|
15323
15481
|
'pds-multiselect__trigger--disabled': this.disabled,
|
|
@@ -15333,7 +15491,7 @@ class PdsMultiselect {
|
|
|
15333
15491
|
}, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
|
|
15334
15492
|
'pds-multiselect__trigger-text': true,
|
|
15335
15493
|
'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
|
|
15336
|
-
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '
|
|
15494
|
+
} }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '973443f9eb29dcf7fb1bde3f9101ac02967a8fd9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '568aab2b278abb7f4426d84ee926b4883375fb11', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'daddf192efd47df8c15267b9896913b926e02544', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'd0c72ab75a8e02e61c09e980ae817790804a776a', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '0453db2fca10b3573b1dd244875f90c856c8887b', style: { display: 'none' } }, hAsync("slot", { key: 'a612741afc9545e5e50c47d27c3c27c1d7cade3c' })))));
|
|
15337
15495
|
}
|
|
15338
15496
|
static get formAssociated() { return true; }
|
|
15339
15497
|
get el() { return getElement(this); }
|
|
@@ -15360,6 +15518,17 @@ class PdsMultiselect {
|
|
|
15360
15518
|
"label": [1],
|
|
15361
15519
|
"placeholder": [1],
|
|
15362
15520
|
"searchPlaceholder": [1, "search-placeholder"],
|
|
15521
|
+
"searchOptionsLabel": [1, "search-options-label"],
|
|
15522
|
+
"selectedItemsLabel": [1, "selected-items-label"],
|
|
15523
|
+
"optionsLabel": [1, "options-label"],
|
|
15524
|
+
"noOptionsFoundLabel": [1, "no-options-found-label"],
|
|
15525
|
+
"createOptionLabel": [1, "create-option-label"],
|
|
15526
|
+
"createOptionAriaLabel": [1, "create-option-aria-label"],
|
|
15527
|
+
"itemRemovedLabel": [1, "item-removed-label"],
|
|
15528
|
+
"pillRemoveLabel": [1, "pill-remove-label"],
|
|
15529
|
+
"selectedCountLabelOne": [1, "selected-count-label-one"],
|
|
15530
|
+
"selectedCountLabelOther": [1, "selected-count-label-other"],
|
|
15531
|
+
"selectedCountLabels": [1, "selected-count-labels"],
|
|
15363
15532
|
"closePanelOnSelect": [4, "close-panel-on-select"],
|
|
15364
15533
|
"name": [1],
|
|
15365
15534
|
"value": [1040],
|
|
@@ -20920,6 +21089,12 @@ class PdsTextarea {
|
|
|
20920
21089
|
* If true, the textarea has action content in the label area
|
|
20921
21090
|
*/
|
|
20922
21091
|
this.hasAction = false;
|
|
21092
|
+
/**
|
|
21093
|
+
* Template for the character-counter's accessible label. Pass a translated
|
|
21094
|
+
* string to localize it; `{current}` and `{max}` are interpolated.
|
|
21095
|
+
* @defaultValue '{current} of {max} characters'
|
|
21096
|
+
*/
|
|
21097
|
+
this.characterCountLabel = '{current} of {max} characters';
|
|
20923
21098
|
this.onBlur = (ev) => {
|
|
20924
21099
|
this.hasFocus = false;
|
|
20925
21100
|
if (this.focusedValue !== this.value) {
|
|
@@ -21117,7 +21292,7 @@ class PdsTextarea {
|
|
|
21117
21292
|
return null;
|
|
21118
21293
|
}
|
|
21119
21294
|
const currentLength = this.getValue().length;
|
|
21120
|
-
return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label":
|
|
21295
|
+
return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": formatMessage(this.characterCountLabel, { current: currentLength, max: this.maxLength }) }, currentLength, " / ", this.maxLength));
|
|
21121
21296
|
}
|
|
21122
21297
|
renderAction() {
|
|
21123
21298
|
const hasAction = this.el.querySelector('[slot="action"]') !== null;
|
|
@@ -21171,10 +21346,10 @@ class PdsTextarea {
|
|
|
21171
21346
|
}
|
|
21172
21347
|
render() {
|
|
21173
21348
|
const value = this.getValue();
|
|
21174
|
-
return (hAsync(Host, { key: '
|
|
21175
|
-
hAsync("div", { key: '
|
|
21176
|
-
hAsync("p", { key: '
|
|
21177
|
-
hAsync("p", { key: '
|
|
21349
|
+
return (hAsync(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
|
|
21350
|
+
hAsync("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, hAsync("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '74713a5d438fc01103ca99f0c77abd84b7d2d16a', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
|
|
21351
|
+
hAsync("p", { key: 'e42f174f4153363ce745db264fd3a9ee46178a03', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
|
|
21352
|
+
hAsync("p", { key: '44189515611ff9fa51d2815a7066626b6ba5df2c', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '64d275da09cdf1c2cc27d4c0a780dd414c265534', icon: danger, size: "small" }), this.errorMessage))));
|
|
21178
21353
|
}
|
|
21179
21354
|
static get formAssociated() { return true; }
|
|
21180
21355
|
get el() { return getElement(this); }
|
|
@@ -21211,6 +21386,7 @@ class PdsTextarea {
|
|
|
21211
21386
|
"maxLength": [514, "max-length"],
|
|
21212
21387
|
"highlight": [516],
|
|
21213
21388
|
"value": [1025],
|
|
21389
|
+
"characterCountLabel": [1, "character-count-label"],
|
|
21214
21390
|
"hasFocus": [32],
|
|
21215
21391
|
"hasAction": [32],
|
|
21216
21392
|
"setFocus": [64]
|
|
@@ -21252,6 +21428,12 @@ class PdsToast {
|
|
|
21252
21428
|
* @default 'default'
|
|
21253
21429
|
*/
|
|
21254
21430
|
this.type = 'default';
|
|
21431
|
+
/**
|
|
21432
|
+
* Accessible label for the dismiss button. Pass a translated string to
|
|
21433
|
+
* localize it; defaults to English.
|
|
21434
|
+
* @defaultValue 'Dismiss message'
|
|
21435
|
+
*/
|
|
21436
|
+
this.dismissLabel = 'Dismiss message';
|
|
21255
21437
|
/**
|
|
21256
21438
|
* Whether the toast is currently visible.
|
|
21257
21439
|
*/
|
|
@@ -21341,13 +21523,13 @@ class PdsToast {
|
|
|
21341
21523
|
return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
|
|
21342
21524
|
}
|
|
21343
21525
|
render() {
|
|
21344
|
-
return (hAsync(Host, { key: '
|
|
21526
|
+
return (hAsync(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, hAsync("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
|
|
21345
21527
|
'pds-toast': true,
|
|
21346
21528
|
[`pds-toast--${this.type}`]: this.type !== 'default',
|
|
21347
21529
|
'pds-toast--animating-out': this.isAnimatingOut
|
|
21348
|
-
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '
|
|
21530
|
+
}, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, hAsync("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (hAsync("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
|
|
21349
21531
|
this.dismiss();
|
|
21350
|
-
}, "aria-label":
|
|
21532
|
+
}, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
|
|
21351
21533
|
}
|
|
21352
21534
|
get el() { return getElement(this); }
|
|
21353
21535
|
static get watchers() { return {
|
|
@@ -21365,6 +21547,7 @@ class PdsToast {
|
|
|
21365
21547
|
"duration": [2],
|
|
21366
21548
|
"icon": [1],
|
|
21367
21549
|
"type": [1],
|
|
21550
|
+
"dismissLabel": [1, "dismiss-label"],
|
|
21368
21551
|
"isVisible": [32],
|
|
21369
21552
|
"isAnimatingOut": [32],
|
|
21370
21553
|
"dismiss": [64]
|