@crowdstrike/glide-core 0.25.0 → 0.26.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.
Files changed (64) hide show
  1. package/dist/button.d.ts +7 -0
  2. package/dist/button.js +1 -1
  3. package/dist/checkbox-group.styles.js +2 -2
  4. package/dist/checkbox.d.ts +2 -2
  5. package/dist/checkbox.styles.js +1 -1
  6. package/dist/dropdown.d.ts +2 -0
  7. package/dist/dropdown.js +17 -10
  8. package/dist/dropdown.option.d.ts +17 -3
  9. package/dist/dropdown.option.js +1 -1
  10. package/dist/dropdown.styles.js +17 -12
  11. package/dist/icon-button.d.ts +7 -0
  12. package/dist/icon-button.js +1 -1
  13. package/dist/inline-alert.d.ts +0 -6
  14. package/dist/inline-alert.js +1 -1
  15. package/dist/inline-alert.styles.js +18 -38
  16. package/dist/input.styles.js +1 -1
  17. package/dist/label.styles.js +3 -3
  18. package/dist/library/assert-slot.d.ts +4 -0
  19. package/dist/library/localize.d.ts +1 -1
  20. package/dist/link.d.ts +2 -2
  21. package/dist/link.js +1 -1
  22. package/dist/menu.button.d.ts +12 -1
  23. package/dist/menu.button.js +1 -1
  24. package/dist/menu.d.ts +6 -0
  25. package/dist/menu.js +1 -1
  26. package/dist/menu.link.d.ts +14 -3
  27. package/dist/menu.link.js +1 -1
  28. package/dist/menu.options.d.ts +13 -1
  29. package/dist/menu.options.js +1 -1
  30. package/dist/menu.options.styles.js +9 -1
  31. package/dist/modal.js +1 -1
  32. package/dist/modal.styles.js +3 -3
  33. package/dist/radio-group.radio.d.ts +2 -2
  34. package/dist/radio-group.styles.js +2 -2
  35. package/dist/split-button.primary-link.d.ts +2 -2
  36. package/dist/split-button.primary-link.js +1 -1
  37. package/dist/styles/skeleton.d.ts +2 -0
  38. package/dist/styles/skeleton.js +45 -0
  39. package/dist/styles/variables.css +1 -1
  40. package/dist/tab.d.ts +1 -0
  41. package/dist/tab.group.d.ts +1 -2
  42. package/dist/tab.group.js +1 -1
  43. package/dist/tab.js +1 -1
  44. package/dist/textarea.styles.js +1 -1
  45. package/dist/toast.d.ts +40 -0
  46. package/dist/toast.js +1 -0
  47. package/dist/toast.toasts.d.ts +31 -0
  48. package/dist/toast.toasts.js +90 -0
  49. package/dist/toast.toasts.styles.js +127 -0
  50. package/dist/tooltip.js +1 -1
  51. package/dist/translations/en.js +1 -1
  52. package/dist/translations/fr.d.ts +1 -1
  53. package/dist/translations/fr.js +1 -1
  54. package/dist/translations/ja.d.ts +1 -1
  55. package/dist/translations/ja.js +1 -1
  56. package/package.json +2 -2
  57. package/dist/toasts.d.ts +0 -33
  58. package/dist/toasts.js +0 -1
  59. package/dist/toasts.styles.js +0 -22
  60. package/dist/toasts.toast.d.ts +0 -31
  61. package/dist/toasts.toast.js +0 -1
  62. package/dist/toasts.toast.styles.d.ts +0 -2
  63. package/dist/toasts.toast.styles.js +0 -88
  64. /package/dist/{toasts.styles.d.ts → toast.toasts.styles.d.ts} +0 -0
package/dist/button.d.ts CHANGED
@@ -7,6 +7,7 @@ declare global {
7
7
  }
8
8
  /**
9
9
  * @attr {string} label
10
+ * @attr {string|null} [aria-description=null]
10
11
  * @attr {boolean} [disabled=false]
11
12
  * @attr {string} [name='']
12
13
  * @attr {'large'|'small'} [size='large']
@@ -30,6 +31,11 @@ export default class GlideCoreButton extends LitElement {
30
31
  static shadowRootOptions: ShadowRootInit;
31
32
  static styles: import("lit").CSSResult[];
32
33
  label?: string;
34
+ /**
35
+ * @default null
36
+ */
37
+ get ariaDescription(): string | null;
38
+ set ariaDescription(description: string | null);
33
39
  disabled: boolean;
34
40
  name: string;
35
41
  size: 'large' | 'small';
@@ -40,6 +46,7 @@ export default class GlideCoreButton extends LitElement {
40
46
  readonly version: string;
41
47
  get form(): HTMLFormElement | null;
42
48
  click(): void;
49
+ firstUpdated(): void;
43
50
  render(): import("lit").TemplateResult<1>;
44
51
  constructor();
45
52
  private hasPrefixIcon;
package/dist/button.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,l=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var n=e.length-1;n>=0;n--)(r=e[n])&&(l=(s<3?r(l):s>3?r(t,o,l):r(t,o))||l);return s>3&&l&&Object.defineProperty(t,o,l),l};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get form(){return this.#e.form}click(){this.#t.value?.click()}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" slot="target" @click="${this.#o}" ${ref(this.#t)}><slot name="prefix-icon" @slotchange="${this.#i}" ${ref(this.#r)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#s}" ${ref(this.#l)}></slot></button></glide-core-tooltip>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#r=createRef(),this.#l=createRef(),this.#e=this.attachInternals()}#t;#e;#r;#l;#o(e){this.disabled?e.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#i(){const e=this.#r.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#s(){const e=this.#l.value?.assignedNodes();this.hasSuffixIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button"),final],GlideCoreButton);export default GlideCoreButton;
1
+ var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}get form(){return this.#o.form}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" data-test="button" slot="target" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#s)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#a}" ${ref(this.#l)}></slot></button></glide-core-tooltip>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=null,this.#e=createRef(),this.#s=createRef(),this.#l=createRef(),this.#o=this.attachInternals()}#t;#e;#o;#s;#l;#i(t){this.disabled?t.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(t&&t.length>0)}#a(){const t=this.#l.value?.assignedNodes();this.hasSuffixIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButton.prototype,"label",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],GlideCoreButton.prototype,"ariaDescription",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button"),final],GlideCoreButton);export default GlideCoreButton;
@@ -2,7 +2,7 @@ import{css}from"lit";export default[css`
2
2
  :host(:not(:disabled)) .component {
3
3
  &.error {
4
4
  .checkbox {
5
- border-color: var(--glide-core-color-error-stroke-primary);
5
+ border-color: var(--glide-core-color-advisory-stroke-error-primary);
6
6
  }
7
7
  }
8
8
  }
@@ -17,7 +17,7 @@ import{css}from"lit";export default[css`
17
17
  inline-size: min-content;
18
18
 
19
19
  &.invalid {
20
- border: 1px solid var(--glide-core-color-error-stroke-primary);
20
+ border: 1px solid var(--glide-core-color-advisory-stroke-error-primary);
21
21
  border-radius: var(--glide-core-rounding-base-radius-sm);
22
22
  padding: var(--glide-core-spacing-base-xxs) 0.375rem;
23
23
  }
@@ -18,7 +18,7 @@ declare global {
18
18
  * @attr {boolean} [required=false]
19
19
  * @attr {string} [summary]
20
20
  * @attr {string} [tooltip]
21
- * @attr {string} [value]
21
+ * @attr {string} [value='']
22
22
  *
23
23
  * @readonly
24
24
  * @attr {string} [version]
@@ -88,7 +88,7 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
88
88
  summary?: string;
89
89
  tooltip?: string;
90
90
  /**
91
- * @default undefined
91
+ * @default ''
92
92
  */
93
93
  get value(): string;
94
94
  set value(value: string);
@@ -64,7 +64,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
64
64
  }
65
65
 
66
66
  &.error:not(.disabled) {
67
- border-color: var(--glide-core-color-error-stroke-primary);
67
+ border-color: var(--glide-core-color-advisory-stroke-error-primary);
68
68
  }
69
69
 
70
70
  &:not(.disabled):hover {
@@ -16,6 +16,7 @@ declare global {
16
16
  * @attr {boolean} [disabled=false]
17
17
  * @attr {boolean} [filterable=false]
18
18
  * @attr {boolean} [hide-label=false]
19
+ * @attr {boolean} [loading=false]
19
20
  * @attr {boolean} [multiple=false]
20
21
  * @attr {string} [name='']
21
22
  * @attr {boolean} [open=false]
@@ -88,6 +89,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
88
89
  get filterable(): boolean;
89
90
  set filterable(isFilterable: boolean);
90
91
  hideLabel: boolean;
92
+ loading: boolean;
91
93
  name: string;
92
94
  /**
93
95
  * @default false
package/dist/dropdown.js CHANGED
@@ -1,7 +1,7 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(l<3?o(n):l>3?o(t,i,n):o(t,i))||n);return l>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import onResize from"./library/on-resize.js";import GlideCoreDropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import GlideCoreTag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.open&&e?this.#t():this.open&&this.#i()}get filterable(){return this.#s}set filterable(e){this.#s!==e&&e&&!this.multiple?this.#o.value&&this.selectedOptions[0]?.label&&(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.#s!==e&&this.#l(),this.#s=e}get open(){return this.#n}set open(e){const t=e!==this.#n;if(this.#n=e,e&&t&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(!this.open&&t){!this.multiple&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label):(!this.multiple&&this.#o.value&&0===this.selectedOptions.length||this.multiple&&this.#o.value)&&(this.#o.value.value="",this.inputValue=""),this.isFiltering=!1,this.isNoResults=!1,this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value);for(const e of this.#a)e.hidden=!1;this.#t(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}}get multiple(){return this.#r}set multiple(e){const t=this.#r&&!e,i=!this.#r&&e;this.#r=e,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#o.value&&(this.#o.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#p())}get size(){return this.#d}set size(e){if(this.#d=e,this.#h)for(const t of this.#h)t.privateSize=e}get value(){return this.#c}set value(e){if(this.#c=e,!this.multiple&&e.length>1)throw new Error("Only one value is allowed when not `multiple`.");for(const t of this.#a)this.#u=!0,t.selected=e.some((e=>e&&e===t.value)),this.#u=!1,t.selected&&t.disabled&&(t.disabled=!1);!this.multiple&&0===this.value.length&&this.#o.value&&(this.#o.value.value="")}get activeOption(){return this.#h?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#v.checkValidity();return this.isCheckingValidity=!1,e}click(){this.filterable||this.isFilterable?(this.#o.value?.click(),this.#o.value?.select()):this.#m.value?.click()}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected&&!e.disabled))}get lastSelectedOption(){return this.#a.findLast((e=>e.selected))}get isAllSelected(){return this.#a.length>0&&this.#a.filter((({selected:e})=>e)).length===this.#a.filter((({disabled:e})=>!e)).length}get isSomeSelected(){return this.#a.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#f,{capture:!0})}createRenderRoot(){return this.#g=super.createRenderRoot(),this.#g}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#b),document.removeEventListener("click",this.#f,{capture:!0})}async filter(e){return this.#a.filter((({label:t})=>t?.toLowerCase().includes(e.toLowerCase().trim())))}firstUpdated(){this.#O.value&&(this.#O.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedOption&&this.#o.value&&this.lastSelectedOption.label&&(this.#o.value.value=this.lastSelectedOption.label);if(this.#a.every((({selected:e})=>!e)))for(const e of this.#a)e.selected=this.value.some((t=>""!==t&&t===e.value)),e.selected&&e.disabled&&(e.disabled=!1)}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#m.value?.focus(e)}get form(){return this.#v.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#v.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value),this.#v.validity):this.required&&this.#v.validity.valueMissing&&this.selectedOptions.length>0?(this.#v.setValidity({}),this.#v.validity):this.#v.validity}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#b)}formResetCallback(){for(const e of this.#a){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#a.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#c=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div
1
+ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(l<3?o(n):l>3?o(t,i,n):o(t,i))||n);return l>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{range}from"lit/directives/range.js";import{map}from"lit/directives/map.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import onResize from"./library/on-resize.js";import GlideCoreDropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import GlideCoreTag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.open&&e?this.#t():this.open&&this.#i()}get filterable(){return this.#s}set filterable(e){this.#s!==e&&e&&!this.multiple?this.#o.value&&this.selectedOptions[0]?.label&&(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.#s!==e&&this.#l(),this.#s=e}get open(){return this.#n}set open(e){const t=e!==this.#n;if(this.#n=e,e&&t&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(!this.open&&t){!this.multiple&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label):(!this.multiple&&this.#o.value&&0===this.selectedOptions.length||this.multiple&&this.#o.value)&&(this.#o.value.value="",this.inputValue=""),this.isFiltering=!1,this.isNoResults=!1,this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value);for(const e of this.#a)e.hidden=!1;this.#t(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}}get multiple(){return this.#r}set multiple(e){const t=this.#r&&!e,i=!this.#r&&e;this.#r=e,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#o.value&&(this.#o.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#d())}get size(){return this.#p}set size(e){if(this.#p=e,this.#h)for(const t of this.#h)t.privateSize=e}get value(){return this.#c}set value(e){if(this.#c=e,!this.multiple&&e.length>1)throw new Error("Only one value is allowed when not `multiple`.");for(const t of this.#a)this.#u=!0,t.selected=e.some((e=>e&&e===t.value)),this.#u=!1,t.selected&&t.disabled&&(t.disabled=!1);!this.multiple&&0===this.value.length&&this.#o.value&&(this.#o.value.value="")}get activeOption(){return this.#h?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#v.checkValidity();return this.isCheckingValidity=!1,e}click(){this.filterable||this.isFilterable?(this.#o.value?.click(),this.#o.value?.select()):this.#m.value?.click()}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected&&!e.disabled))}get lastSelectedOption(){return this.#a.findLast((e=>e.selected))}get isAllSelected(){return this.#a.length>0&&this.#a.filter((({selected:e})=>e)).length===this.#a.filter((({disabled:e})=>!e)).length}get isSomeSelected(){return this.#a.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#f,{capture:!0})}createRenderRoot(){return this.#g=super.createRenderRoot(),this.#g}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#b),document.removeEventListener("click",this.#f,{capture:!0})}async filter(e){return this.#a.filter((({label:t})=>t?.toLowerCase().includes(e.toLowerCase().trim())))}firstUpdated(){this.#O.value&&(this.#O.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedOption&&this.#o.value&&this.lastSelectedOption.label&&(this.#o.value.value=this.lastSelectedOption.label);if(this.#a.every((({selected:e})=>!e)))for(const e of this.#a)e.selected=this.value.some((t=>""!==t&&t===e.value)),e.selected&&e.disabled&&(e.disabled=!1)}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#m.value?.focus(e)}get form(){return this.#v.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#v.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value),this.#v.validity):this.required&&this.#v.validity.valueMissing&&this.selectedOptions.length>0?(this.#v.setValidity({}),this.#v.validity):this.#v.validity}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#b)}formResetCallback(){for(const e of this.#a){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#a.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#c=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div
2
2
  class=${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}
3
3
  @mouseup=${this.#E}
4
- ${onResize(this.#p.bind(this))}
4
+ ${onResize(this.#d.bind(this))}
5
5
  ${ref(this.#y)}
6
6
  >
7
7
  <glide-core-private-label
@@ -102,7 +102,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
102
102
  aria-controls="options"
103
103
  aria-describedby="description"
104
104
  aria-expanded=${this.open&&!this.disabled}
105
- aria-labelledby="selected-option-labels label ${this.isCommunicateItemCountToScreenreaders?"item-count":""}"
105
+ aria-labelledby="selected-option-labels label loading-feedback ${this.isCommunicateItemCountToScreenreaders?"item-count":""}"
106
106
  autocapitalize="off"
107
107
  autocomplete="off"
108
108
  class=${classMap({input:!0,quiet:"quiet"===this.variant})}
@@ -194,7 +194,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
194
194
  aria-expanded=${this.open&&!this.disabled}
195
195
  aria-haspopup="listbox"
196
196
  aria-hidden=${this.filterable||this.isFilterable}
197
- aria-labelledby="selected-option-labels label"
197
+ aria-labelledby="selected-option-labels label loading-feedback"
198
198
  class="primary-button"
199
199
  data-test="primary-button"
200
200
  id="primary-button"
@@ -213,13 +213,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
213
213
  </div>
214
214
 
215
215
  <div
216
- aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
217
- class="options-and-footer"
216
+ class=${classMap({"options-and-footer":!0,"no-results":this.isNoResults&&!this.loading})}
218
217
  ${ref(this.#O)}
219
218
  >
220
219
  <div
221
- aria-labelledby=${this.filterable||this.isFilterable?"input":"button"}
222
- class=${classMap({options:!0,hidden:this.isNoResults,[this.size]:!0})}
220
+ aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
221
+ class=${classMap({options:!0,hidden:this.isNoResults||this.loading,[this.size]:!0})}
223
222
  data-test="options"
224
223
  id="options"
225
224
  role="listbox"
@@ -259,7 +258,15 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
259
258
  </slot>
260
259
  </div>
261
260
 
262
- ${when(this.isNoResults,(()=>html`<div class="no-results">
261
+ ${when(this.loading,(()=>html`<div
262
+ aria-label=${this.#M.term("loading")}
263
+ class="loading-feedback"
264
+ data-test="loading-feedback"
265
+ id="loading-feedback"
266
+ >
267
+ ${map(range(7),(()=>html`<div></div>`))}
268
+ </div>`))}
269
+ ${when(this.isNoResults&&!this.loading,(()=>html`<div data-test="no-results">
263
270
  ${this.#M.term("noResults")}
264
271
  </div>`))}
265
272
 
@@ -297,7 +304,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
297
304
  >`))}
298
305
  </div>
299
306
  </glide-core-private-label>
300
- </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#v.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#v.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#m.value):this.#v.setValidity({customError:!0,valueMissing:this.#v.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}setValidity(e,t){this.validityMessage=t,this.#v.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.inputValue="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflow=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflow=!1,this.isInternalLabelTooltipOpen=!1,this.isNoResults=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#ae=createRef(),this.#y=createRef(),this.#se=createRef(),this.#D=createRef(),this.#q=createRef(),this.#o=createRef(),this.#N=createRef(),this.#re=!1,this.#e=!1,this.#pe=!1,this.#s=!1,this.#r=!1,this.#n=!1,this.#de=!1,this.#he=!1,this.#u=!1,this.#ce=!1,this.#ue=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#m=createRef(),this.#te=createRef(),this.#d="large",this.#I=createRef(),this.#c=[],this.#f=()=>{this.#re?setTimeout((()=>{this.#re=!1})):this.open=!1},this.#b=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#v=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#ae;#ve;#y;#se;#D;#q;#o;#N;#v;#re;#e;#pe;#s;#r;#n;#de;#he;#u;#ce;#ue;#M;#O;#me;#m;#te;#g;#d;#I;#c;#f;#b;#t(){this.#ve?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#me=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#w(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#oe(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#le(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#me=this.activeOption,this.activeOption.privateActive=!1)}#ne(){this.activeOption&&!this.#de&&(this.#me=this.activeOption,this.activeOption.privateActive=!1)}#E(){this.#re=!0}async#ie(){this.isFilterable=this.#a.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#fe?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#me=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#me=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#te.value&&(this.#u=!0,this.#te.value.selected=this.isAllSelected,this.#u=!1),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value)&&!e.disabled)).map((({value:e})=>e)):this.lastSelectedOption?.value&&!this.lastSelectedOption.disabled&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),await this.updateComplete,!this.multiple&&this.#o.value&&this.lastSelectedOption?.label?(this.#o.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.multiple||!this.#o.value||this.isFiltering||(this.#o.value.value="",this.inputValue="",this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}#R(e){this.open&&this.#me&&e.relatedTarget===this.#ae.value&&(this.#me.privateActive=!0,this.#me.privateIsTooltipOpen=!this.#me.editable)}#A(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#pe&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#C(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#q.value)return void(this.#re=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#ae.value)return this.focus(),void(this.#me&&(this.#me.privateActive=!0,this.#me.privateIsEditActive=this.#me.editable,this.#me.privateIsTooltipOpen=!this.#me.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#ae.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ge?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#me=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ae.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#ae.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key))return e.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.activeOption.privateIsEditActive)return this.activeOption.privateEdit(),void(this.open=!1);if("Enter"===e.key&&this.#ge&&this.#ge.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#ue=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#te.value&&this.#be(),this.#ue=!1,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const t=this.#fe?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#fe&&"number"==typeof t){e.preventDefault();const i=this.#fe.findLast(((e,i)=>!e.disabled&&i<t));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#me=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#fe&&"number"==typeof t){e.preventDefault();const i=this.#fe.find(((e,i)=>!e.disabled&&i>t));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#me=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#fe){e.preventDefault();const t=[...this.#fe].reverse().findLast((e=>!e.disabled));return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#me=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#fe){e.preventDefault();const t=[...this.#fe].findLast((e=>!e.disabled));return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#me=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#S(e){if(this.disabled||this.readonly)return;if(this.#pe)return void(this.#pe=!1);if(e.target instanceof Node&&this.#q.value?.contains(e.target))return void this.selectedOptions[0]?.privateEdit();const t=this.filterable||this.isFilterable;if(this.#ue||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#de=!0,void setTimeout((()=>{this.#de=!1}))):void 0;this.open=!1}#$(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#o.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#j(){this.open=!1}#_(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#L(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#G(e){let t;if(e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.#o.value?.value&&(this.inputValue=this.#o.value.value),this.multiple&&""!==this.#o.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#o.value?.value&&this.#o.value?.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.#o.value)try{t=await this.filter(this.#o.value.value)}catch{}if(t){for(const e of this.#a)e.hidden=!t.includes(e);const e=this.#ge?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#me=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ge||0===this.#ge.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ge&&(this.itemCount=this.#ge.length)}}#B(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#pe=!0,t.selected=!1,void(this.#pe=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart){this.#pe=!0;for(const e of i)e.selected=!1;this.#pe=!1}else;}#V(){this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth-1>this.#o.value.clientWidth)}#z(){this.#N.value&&(this.isInternalLabelOverflow=this.#N.value.scrollWidth>this.#N.value.clientWidth)}get#a(){return this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#h(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#te.value)return[this.#te.value,...e]}get#ge(){return this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#fe(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#te.value&&!this.#te.value.hidden&&e?[this.#te.value,...e]:e}#U(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#te.value&&this.#be(),this.#l()}#P(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");if(t instanceof GlideCoreDropdownOption&&t.disabled)return;if(t instanceof GlideCoreDropdownOption&&t.privateIsEditActive)return t.privateEdit(),void(this.open=!1);if(t&&!t.selected)return t.selected=!0,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#Q(e){if(e.target instanceof GlideCoreDropdownOption&&e.target.disabled&&e.target.selected){const t=this.#c.lastIndexOf(e.target.value);this.#c.splice(t,t+1)}else this.multiple&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value?this.#c.push(e.target.value):e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value&&e.target===this.lastSelectedOption&&(this.#c=[e.target.value]);this.requestUpdate()}#X(){this.requestUpdate()}#W(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#me=e.target)}#Y(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))):(this.filterable||this.isFilterable)&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.requestUpdate())}#K(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#J(e){if(e.target instanceof GlideCoreDropdownOption&&this.#fe){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#me=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#ae.value&&this.focus()}}#Z(e){if(!this.multiple)for(const t of this.#a)t!==e.target&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&t.selected&&e.target!==this.#te.value&&(t.selected=!1);e.target!==this.#te.value&&!this.#ce&&this.#te.value&&(this.#te.value.selected=this.isAllSelected),this.isShowSingleSelectIcon=!this.multiple&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple&&!this.#u?(this.#c=e.target.selected&&e.target.value&&!e.target.disabled?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#o.value&&!this.#pe&&(this.isFiltering=!1,this.#o.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&e.target.label&&(this.isFiltering=!1,this.#o.value.value=e.target.label,this.inputValue=e.target.label))),this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))}#ee(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}#x(){this.isInternalLabelTooltipOpen=!0}#H(){this.isInternalLabelTooltipOpen=!1}#k(){this.#pe=!0,this.open=!1}async#F(e){this.#pe=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#I.value?.querySelectorAll("glide-core-tag");if(t&&this.selectedOptions.length>0){const i=[...t].findIndex((t=>t.dataset.id===e)),s=t[i<t.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#pe=!1}))}else setTimeout((()=>{this.focus(),this.#pe=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#T(e){e.stopPropagation()}#be(){this.#ce=!0;for(const e of this.#a)!this.#te.value?.selected||e.selected||e.disabled?!this.#te.value?.selected&&e.selected&&(e.selected=!1):e.selected=!0;this.#ce=!1}async#p(){if(this.#y.value){const e=this.#y.value.scrollWidth>this.#y.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#p()):!e&&!this.#he&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#he=!0,await this.updateComplete,this.#p()):this.#he=!1}}#i(){this.#a.length>0&&(this.#ve?.(),this.#me&&(this.#me.privateActive=!0,this.ariaActivedescendant=this.#me.id),this.#D.value&&this.#O.value&&(this.#ve=autoUpdate(this.#D.value,this.#O.value,(()=>{(async()=>{if(this.#D.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#D.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#O.value.dataset.placement=i,Object.assign(this.#O.value.style,{left:`${e}px`,top:`${t}px`}),this.#O.value?.showPopover()}})()}))))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({reflect:!0}),required],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"version",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"inputValue",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isNoResults",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],GlideCoreDropdown.prototype,"itemCount",void 0),__decorate([state()],GlideCoreDropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"validityMessage",void 0),GlideCoreDropdown=__decorate([customElement("glide-core-dropdown"),final],GlideCoreDropdown);export default GlideCoreDropdown;const icons={plus:html`
307
+ </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#v.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#v.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#m.value):this.#v.setValidity({customError:!0,valueMissing:this.#v.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}setValidity(e,t){this.validityMessage=t,this.#v.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}constructor(){super(),this.hideLabel=!1,this.loading=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.inputValue="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflow=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflow=!1,this.isInternalLabelTooltipOpen=!1,this.isNoResults=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#ae=createRef(),this.#y=createRef(),this.#se=createRef(),this.#D=createRef(),this.#q=createRef(),this.#o=createRef(),this.#N=createRef(),this.#re=!1,this.#e=!1,this.#de=!1,this.#s=!1,this.#pe=!0,this.#r=!1,this.#n=!1,this.#he=!1,this.#ce=!1,this.#u=!1,this.#ue=!1,this.#ve=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#m=createRef(),this.#te=createRef(),this.#p="large",this.#I=createRef(),this.#c=[],this.#f=()=>{this.#re?setTimeout((()=>{this.#re=!1})):this.open=!1},this.#b=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#v=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#ae;#me;#y;#se;#D;#q;#o;#N;#v;#re;#e;#de;#s;#pe;#r;#n;#he;#ce;#u;#ue;#ve;#M;#O;#fe;#m;#te;#g;#p;#I;#c;#f;#b;#t(){this.#me?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#fe=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#w(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#oe(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#le(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#fe=this.activeOption,this.activeOption.privateActive=!1)}#ne(){this.activeOption&&!this.#he&&(this.#fe=this.activeOption,this.activeOption.privateActive=!1)}#E(){this.#re=!0}async#ie(){this.#pe&&(this.isFilterable=this.#a.length>10,this.#pe=!1),this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#ge?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#fe=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#fe=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#te.value&&(this.#u=!0,this.#te.value.selected=this.isAllSelected,this.#u=!1),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value)&&!e.disabled)).map((({value:e})=>e)):this.lastSelectedOption?.value&&!this.lastSelectedOption.disabled&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),await this.updateComplete,!this.multiple&&this.#o.value&&this.lastSelectedOption?.label?(this.#o.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.multiple||!this.#o.value||this.isFiltering||(this.#o.value.value="",this.inputValue="",this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}#R(e){this.open&&this.#fe&&e.relatedTarget===this.#ae.value&&(this.#fe.privateActive=!0,this.#fe.privateIsTooltipOpen=!this.#fe.editable)}#A(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#de&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#C(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#q.value)return void(this.#re=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#ae.value)return this.focus(),void(this.#fe&&(this.#fe.privateActive=!0,this.#fe.privateIsEditActive=this.#fe.editable,this.#fe.privateIsTooltipOpen=!this.#fe.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#ae.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#be?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#fe=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ae.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#ae.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key))return e.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.activeOption.privateIsEditActive)return this.activeOption.privateEdit(),void(this.open=!1);if("Enter"===e.key&&this.#be&&this.#be.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#ve=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#te.value&&this.#Oe(),this.#ve=!1,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const t=this.#ge?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#ge&&"number"==typeof t){e.preventDefault();const i=this.#ge.findLast(((e,i)=>!e.disabled&&i<t));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#fe=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#ge&&"number"==typeof t){e.preventDefault();const i=this.#ge.find(((e,i)=>!e.disabled&&i>t));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#fe=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#ge){e.preventDefault();const t=[...this.#ge].reverse().findLast((e=>!e.disabled));return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#fe=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#ge){e.preventDefault();const t=[...this.#ge].findLast((e=>!e.disabled));return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#fe=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#S(e){if(this.disabled||this.readonly)return;if(this.#de)return void(this.#de=!1);if(e.target instanceof Node&&this.#q.value?.contains(e.target))return void this.selectedOptions[0]?.privateEdit();const t=this.filterable||this.isFilterable;if(this.#ve||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#he=!0,void setTimeout((()=>{this.#he=!1}))):void 0;this.open=!1}#$(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#o.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#j(){this.open=!1}#_(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#L(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#G(e){let t;if(e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.#o.value?.value&&(this.inputValue=this.#o.value.value),this.multiple&&""!==this.#o.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#o.value?.value&&this.#o.value?.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.#o.value)try{t=await this.filter(this.#o.value.value)}catch{}if(t){for(const e of this.#a)e.hidden=!t.includes(e);const e=this.#be?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#fe=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#be||0===this.#be.length,this.isCommunicateItemCountToScreenreaders=!0,this.#be&&(this.itemCount=this.#be.length)}}#B(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#de=!0,t.selected=!1,void(this.#de=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart){this.#de=!0;for(const e of i)e.selected=!1;this.#de=!1}else;}#V(){this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth-1>this.#o.value.clientWidth)}#z(){this.#N.value&&(this.isInternalLabelOverflow=this.#N.value.scrollWidth>this.#N.value.clientWidth)}get#a(){return this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#h(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#te.value)return[this.#te.value,...e]}get#be(){return this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#ge(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#te.value&&!this.#te.value.hidden&&e?[this.#te.value,...e]:e}#U(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#te.value&&this.#Oe(),this.#l()}#P(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");if(t instanceof GlideCoreDropdownOption&&t.disabled)return;if(t instanceof GlideCoreDropdownOption&&t.privateIsEditActive)return t.privateEdit(),void(this.open=!1);if(t&&!t.selected)return t.selected=!0,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#Q(e){if(e.target instanceof GlideCoreDropdownOption&&e.target.disabled&&e.target.selected){const t=this.#c.lastIndexOf(e.target.value);this.#c.splice(t,t+1)}else this.multiple&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value?this.#c.push(e.target.value):e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value&&e.target===this.lastSelectedOption&&(this.#c=[e.target.value]);this.requestUpdate()}#X(){this.requestUpdate()}#W(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#fe=e.target)}#Y(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#d()}))):(this.filterable||this.isFilterable)&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.requestUpdate())}#K(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#J(e){if(e.target instanceof GlideCoreDropdownOption&&this.#ge){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#fe=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#ae.value&&this.focus()}}#Z(e){if(!this.multiple)for(const t of this.#a)t!==e.target&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&t.selected&&e.target!==this.#te.value&&(t.selected=!1);e.target!==this.#te.value&&!this.#ue&&this.#te.value&&(this.#te.value.selected=this.isAllSelected),this.isShowSingleSelectIcon=!this.multiple&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple&&!this.#u?(this.#c=e.target.selected&&e.target.value&&!e.target.disabled?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#o.value&&!this.#de&&(this.isFiltering=!1,this.#o.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&e.target.label&&(this.isFiltering=!1,this.#o.value.value=e.target.label,this.inputValue=e.target.label))),this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#d()}))}#ee(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}#x(){this.isInternalLabelTooltipOpen=!0}#H(){this.isInternalLabelTooltipOpen=!1}#k(){this.#de=!0,this.open=!1}async#F(e){this.#de=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#I.value?.querySelectorAll("glide-core-tag");if(t&&this.selectedOptions.length>0){const i=[...t].findIndex((t=>t.dataset.id===e)),s=t[i<t.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#de=!1}))}else setTimeout((()=>{this.focus(),this.#de=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#T(e){e.stopPropagation()}#Oe(){this.#ue=!0;for(const e of this.#a)!this.#te.value?.selected||e.selected||e.disabled?!this.#te.value?.selected&&e.selected&&(e.selected=!1):e.selected=!0;this.#ue=!1}async#d(){if(this.#y.value){const e=this.#y.value.scrollWidth>this.#y.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#d()):!e&&!this.#ce&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ce=!0,await this.updateComplete,this.#d()):this.#ce=!1}}#i(){this.#a.length>0&&(this.#me?.(),this.#fe&&(this.#fe.privateActive=!0,this.ariaActivedescendant=this.#fe.id),this.#D.value&&this.#O.value&&(this.#me=autoUpdate(this.#D.value,this.#O.value,(()=>{(async()=>{if(this.#D.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#D.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#O.value.dataset.placement=i,Object.assign(this.#O.value.style,{left:`${e}px`,top:`${t}px`}),this.#O.value?.showPopover()}})()}))))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({reflect:!0}),required],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"loading",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"version",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"inputValue",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isNoResults",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],GlideCoreDropdown.prototype,"itemCount",void 0),__decorate([state()],GlideCoreDropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"validityMessage",void 0),GlideCoreDropdown=__decorate([customElement("glide-core-dropdown"),final],GlideCoreDropdown);export default GlideCoreDropdown;const icons={plus:html`
301
308
  <svg
302
309
  aria-hidden="true"
303
310
  viewBox="0 0 16 16"
@@ -11,7 +11,18 @@ declare global {
11
11
  * @attr {number} [count]
12
12
  * @attr {boolean} [disabled=false]
13
13
  * @attr {boolean} [editable=false]
14
+ *
15
+ * @readonly
16
+ * @attr {string} [id]
17
+ *
18
+ * @readonly
19
+ * @attr {string} [role='option']
20
+ *
14
21
  * @attr {boolean} [selected=false]
22
+ *
23
+ * @readonly
24
+ * @attr {number} [tabindex=-1]
25
+ *
15
26
  * @attr {string} [value='']
16
27
  *
17
28
  * @readonly
@@ -41,17 +52,20 @@ export default class GlideCoreDropdownOption extends LitElement {
41
52
  */
42
53
  get editable(): boolean;
43
54
  set editable(isEditable: boolean);
55
+ readonly id: string;
56
+ privateActive: boolean;
44
57
  privateIndeterminate: boolean;
45
58
  privateIsEditActive: boolean;
59
+ privateIsTooltipOpen: boolean;
46
60
  privateMultiple: boolean;
61
+ privateSize: 'large' | 'small';
62
+ readonly role = "option";
47
63
  /**
48
64
  * @default false
49
65
  */
50
66
  get selected(): boolean;
51
67
  set selected(isSelected: boolean);
52
- privateSize: 'large' | 'small';
53
- privateActive: boolean;
54
- privateIsTooltipOpen: boolean;
68
+ readonly tabIndex = -1;
55
69
  readonly version: string;
56
70
  private get isMultiple();
57
71
  private get lastSelectedOption();
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(s<3?l(a):s>3?l(t,i,a):l(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./checkbox.js";import"./tooltip.js";import{html,LitElement}from"lit";import{ifDefined}from"lit/directives/if-defined.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import{LocalizeController}from"./library/localize.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIsTooltipOpen=!1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=!1,this.#s=createRef(),this.#a=new LocalizeController(this),this.#r=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#d}set label(e){this.#d=e,setTimeout((()=>{this.#c()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e,this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.ariaSelected=!e&&this.selected?"true":"false",this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){this.#r=e,this.ariaSelected=!this.disabled&&e?"true":"false",this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=!this.disabled&&this.selected?"true":"false",this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#p=new IntersectionObserver((()=>{this.checkVisibility()&&this.#c()})),this.#p.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#p?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}get value(){return this.#n}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#n=e}privateEdit(){this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-size="${this.privateSize}" private-variant="minimal" value="${this.value}" @click="${this.#h}" private-internally-inert ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="${classMap({"checkbox-icon-slot":!0,[this.privateSize]:!0})}" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#a.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#b}" @mouseout="${this.#v}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled,[this.privateSize]:!0})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}`),(()=>html`<div class="${classMap({option:!0,count:Boolean(this.count),disabled:this.disabled,editable:this.editable,[this.privateSize]:!0})}"><slot class="${classMap({"icon-slot":!0,[this.privateSize]:!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${ifDefined(this.label)}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#u}"><div class="label" data-test="label" slot="target" ${ref(this.#s)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#a.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#b}" @mouseout="${this.#v}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled,[this.privateSize]:!0})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}#e;#t;#i;#p;#o;#l;#d;#s;#a;#r;#n;#h(e){e.stopPropagation()}#v(){this.privateIsEditActive=!1}#b(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#c(){this.#s.value&&(this.isLabelOverflow=this.#s.value.scrollWidth>this.#s.value.clientWidth)}};__decorate([property({reflect:!0}),required],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],GlideCoreDropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0,useDefault:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"version",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"lastSelectedOption",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import"./checkbox.js";import"./tooltip.js";import{html,LitElement}from"lit";import{ifDefined}from"lit/directives/if-defined.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import{LocalizeController}from"./library/localize.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.id=nanoid(),this.privateActive=!1,this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateIsTooltipOpen=!1,this.privateMultiple=!1,this.privateSize="large",this.role="option",this.tabIndex=-1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#l=createRef(),this.#s=new LocalizeController(this),this.#r=!1,this.#a=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#n}set label(e){this.#n=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get disabled(){return this.#i}set disabled(e){this.#i=e,this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.ariaDisabled=e.toString(),this.ariaSelected=!e&&this.selected?"true":"false",this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#o}set editable(e){this.#o=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){this.#r=e,this.ariaSelected=!this.disabled&&e?"true":"false",this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.ariaDisabled=this.disabled.toString(),this.ariaSelected=!this.disabled&&this.selected?"true":"false",this.#p=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#p.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#p?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}get value(){return this.#a}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#a=e}privateEdit(){this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-size="${this.privateSize}" private-variant="minimal" value="${this.value}" @click="${this.#c}" private-internally-inert ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="${classMap({"checkbox-icon-slot":!0,[this.privateSize]:!0})}" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled,[this.privateSize]:!0})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}`),(()=>html`<div class="${classMap({option:!0,count:Boolean(this.count),disabled:this.disabled,editable:this.editable,[this.privateSize]:!0})}"><slot class="${classMap({"icon-slot":!0,[this.privateSize]:!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${ifDefined(this.label)}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#v}"><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled,[this.privateSize]:!0})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}#e;#t;#p;#i;#o;#n;#l;#s;#r;#a;#c(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#v(e){e.stopPropagation()}#d(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0}),required],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],GlideCoreDropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"id",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({attribute:"private-size",reflect:!0,useDefault:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"role",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"tabindex",reflect:!0,type:Number})],GlideCoreDropdownOption.prototype,"tabIndex",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"version",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"lastSelectedOption",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
@@ -1,6 +1,7 @@
1
- import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
1
+ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";import skeleton from"./styles/skeleton.js";export default[css`
2
2
  ${focusOutline(".add-button:focus-visible")}
3
3
  ${opacityAndScaleAnimation(".options-and-footer:popover-open")}
4
+ ${skeleton(".loading-feedback")}
4
5
  ${visuallyHidden(".item-count")}
5
6
  ${visuallyHidden(".selected-option-labels")}
6
7
  `,css`
@@ -74,8 +75,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
74
75
  }
75
76
 
76
77
  &.error {
77
- border-color: var(--glide-core-color-error-stroke-primary);
78
- color: var(--glide-core-color-error-stroke-primary);
78
+ border-color: var(--glide-core-color-advisory-stroke-error-primary);
79
+ color: var(--glide-core-color-advisory-stroke-error-primary);
79
80
  }
80
81
 
81
82
  &.readonly {
@@ -122,9 +123,21 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
122
123
  border-radius: var(--glide-core-rounding-base-radius-sm);
123
124
  box-shadow: var(--glide-core-effect-floating);
124
125
  inset: unset;
125
- min-inline-size: var(--private-min-inline-size);
126
126
  padding: 0;
127
127
  position: absolute;
128
+
129
+ &.no-results {
130
+ font-family: var(--glide-core-typography-family-primary);
131
+ font-size: var(--glide-core-typography-size-body-default);
132
+ font-weight: var(--glide-core-typography-weight-regular);
133
+ padding: var(--glide-core-spacing-base-xxs)
134
+ var(--glide-core-spacing-base-sm);
135
+ text-transform: capitalize;
136
+ }
137
+
138
+ &:not(.no-results) {
139
+ min-inline-size: var(--private-min-inline-size);
140
+ }
128
141
  }
129
142
 
130
143
  .options {
@@ -227,14 +240,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
227
240
  }
228
241
  }
229
242
 
230
- .no-results {
231
- font-family: var(--glide-core-typography-family-primary);
232
- font-size: var(--glide-core-typography-size-body-default);
233
- font-weight: var(--glide-core-typography-weight-regular);
234
- padding: 0.625rem 0.875rem;
235
- text-transform: capitalize;
236
- }
237
-
238
243
  .placeholder {
239
244
  color: var(--glide-core-color-interactive-text-placeholder);
240
245
 
@@ -7,6 +7,7 @@ declare global {
7
7
  /**
8
8
  * @attr {string} label - For screenreaders
9
9
  * @attr {string|null} [aria-controls=null]
10
+ * @attr {string|null} [aria-description=null]
10
11
  * @attr {'true'|'false'|null} [aria-expanded=null]
11
12
  * @attr {'true'|'false'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null} [aria-haspopup=null]
12
13
  * @attr {boolean} [disabled=false]
@@ -26,11 +27,17 @@ export default class GlideCoreIconButton extends LitElement {
26
27
  **/
27
28
  label?: string;
28
29
  ariaControls: string | null;
30
+ /**
31
+ * @default null
32
+ */
33
+ get ariaDescription(): string | null;
34
+ set ariaDescription(description: string | null);
29
35
  ariaExpanded: 'true' | 'false' | null;
30
36
  ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
31
37
  disabled: boolean;
32
38
  variant: 'primary' | 'secondary' | 'tertiary';
33
39
  readonly version: string;
34
40
  click(): void;
41
+ firstUpdated(): void;
35
42
  render(): import("lit").TemplateResult<1>;
36
43
  }
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,r){var i,a=arguments.length,s=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(s=(a<3?i(s):a>3?i(t,o,s):i(t,o))||s);return a>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#e.value?.click()}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#t)}></slot></button>`}#e;#t};__decorate([property({reflect:!0}),required],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button"),final],GlideCoreIconButton);export default GlideCoreIconButton;
1
+ var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.version=packageJson.version,this.#t=null,this.#e=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#o)}></slot></button>`}#t;#e;#o};__decorate([property({reflect:!0}),required],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],GlideCoreIconButton.prototype,"ariaDescription",null),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button"),final],GlideCoreIconButton);export default GlideCoreIconButton;
@@ -1,4 +1,3 @@
1
- import './icon-button.js';
2
1
  import { LitElement } from 'lit';
3
2
  declare global {
4
3
  interface HTMLElementTagNameMap {
@@ -6,24 +5,19 @@ declare global {
6
5
  }
7
6
  }
8
7
  /**
9
- * @attr {boolean} [removable=false]
10
8
  * @attr {'informational'|'medium'|'high'|'critical'} [variant='informational']
11
9
  *
12
10
  * @readonly
13
11
  * @attr {string} [version]
14
12
  *
15
13
  * @slot {Element | string} - The content of the alert
16
- *
17
- * @fires {Event} remove
18
14
  */
19
15
  export default class GlideCoreInlineAlert extends LitElement {
20
16
  #private;
21
17
  static shadowRootOptions: ShadowRootInit;
22
18
  static styles: import("lit").CSSResult[];
23
19
  variant: 'informational' | 'medium' | 'high' | 'critical';
24
- removable?: boolean | undefined;
25
20
  readonly version: string;
26
21
  firstUpdated(): void;
27
- focus(): void;
28
22
  render(): import("lit").TemplateResult<1>;
29
23
  }
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#n}" @keydown="${this.#l}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#n(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#l(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,n=arguments.length,a=n<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(n<3?r(a):n>3?r(t,i,a):r(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./inline-alert.styles.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.version=packageJson.version,this.#e=100,this.#t=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" style="--private-animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div></div>`}#e;#t};__decorate([property({reflect:!0,useDefault:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert"),final],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:severityInformationalIcon,medium:severityMediumIcon,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:severityCriticalIcon};