@crowdstrike/glide-core 0.20.4 → 0.22.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 (43) hide show
  1. package/dist/checkbox-group.js +5 -4
  2. package/dist/checkbox.js +6 -4
  3. package/dist/checkbox.styles.js +4 -0
  4. package/dist/dropdown.js +11 -10
  5. package/dist/dropdown.option.d.ts +1 -0
  6. package/dist/dropdown.option.js +1 -1
  7. package/dist/dropdown.styles.js +15 -1
  8. package/dist/icons/x.js +1 -1
  9. package/dist/input.d.ts +2 -2
  10. package/dist/input.js +10 -10
  11. package/dist/library/localize.d.ts +6 -1
  12. package/dist/menu.link.js +1 -1
  13. package/dist/modal.d.ts +3 -0
  14. package/dist/modal.js +1 -1
  15. package/dist/radio-group.js +15 -14
  16. package/dist/tag.js +1 -1
  17. package/dist/tag.styles.js +24 -21
  18. package/dist/textarea.d.ts +0 -2
  19. package/dist/textarea.js +1 -2
  20. package/dist/toasts.toast.js +1 -1
  21. package/dist/toasts.toast.styles.js +3 -1
  22. package/dist/translations/en.js +1 -1
  23. package/dist/translations/fr.d.ts +1 -1
  24. package/dist/translations/fr.js +1 -1
  25. package/dist/translations/ja.d.ts +1 -1
  26. package/dist/translations/ja.js +1 -1
  27. package/package.json +11 -12
  28. package/dist/tree.d.ts +0 -29
  29. package/dist/tree.item.d.ts +0 -55
  30. package/dist/tree.item.icon-button.d.ts +0 -22
  31. package/dist/tree.item.icon-button.js +0 -1
  32. package/dist/tree.item.icon-button.styles.d.ts +0 -2
  33. package/dist/tree.item.icon-button.styles.js +0 -9
  34. package/dist/tree.item.js +0 -1
  35. package/dist/tree.item.menu.d.ts +0 -29
  36. package/dist/tree.item.menu.js +0 -1
  37. package/dist/tree.item.menu.styles.d.ts +0 -2
  38. package/dist/tree.item.menu.styles.js +0 -17
  39. package/dist/tree.item.styles.d.ts +0 -2
  40. package/dist/tree.item.styles.js +0 -151
  41. package/dist/tree.js +0 -1
  42. package/dist/tree.styles.d.ts +0 -2
  43. package/dist/tree.styles.js +0 -7
@@ -1,4 +1,4 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var r,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 l=e.length-1;l>=0;l--)(r=e[l])&&(a=(s<3?r(a):s>3?r(t,i,a):r(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./label.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{ifDefined}from"lit/directives/if-defined.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 GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.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 GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup 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;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#r}set value(e){this.#r=e;for(const t of this.#t){e.some((e=>e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal",e.addEventListener("blur",this.#a.bind(this))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#o.validity.valueMissing&&e&&this.#o.setValidity({}),this.required||!this.#o.validity.valueMissing||e||this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<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 l=e.length-1;l>=0;l--)(s=e[l])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./label.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{ifDefined}from"lit/directives/if-defined.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 GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.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 GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup 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;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#s}set value(e){this.#s=e;for(const t of this.#t){e.some((e=>""!==e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;const e=this.#t.every((({checked:e})=>!e));for(const t of this.#t)t.privateVariant="minimal",t.addEventListener("blur",this.#a.bind(this)),e&&(t.checked=this.value.includes(t.value),t.checked&&!this.disabled&&(t.disabled=!1))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#o.validity.valueMissing&&e&&this.#o.setValidity({}),this.required||!this.#o.validity.valueMissing||e||this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
2
2
  class="component"
3
3
  data-test="component"
4
4
  ${ref(this.#l)}
@@ -26,8 +26,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length
26
26
  class="default-slot"
27
27
  @change=${this.#n}
28
28
  @private-value-change=${this.#c}
29
+ @slotchange=${this.#h}
29
30
  ${assertSlot([GlideCoreCheckbox])}
30
- ${ref(this.#h)}
31
+ ${ref(this.#p)}
31
32
  >
32
33
  <!--
33
34
  @type {GlideCoreCheckbox}
@@ -41,7 +42,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length
41
42
  class=${classMap({description:!0,hidden:Boolean(this.#d&&this.validityMessage)})}
42
43
  name="description"
43
44
  >
44
- <!--
45
+ <!--
45
46
  Additional information or context
46
47
  @type {Element | string}
47
48
  -->
@@ -52,4 +53,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length
52
53
  >`))}
53
54
  </div>
54
55
  </glide-core-private-label>
55
- </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#l.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#h=createRef(),this.#e=!1,this.#i=!1,this.#r=[],this.#s=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#h;#o;#e;#i;#r;get#t(){return this.#h.value?this.#h.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#s;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#p(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#p()}#n(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.value=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.value=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#c(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#r.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#r.filter((t=>t!==e.detail.old)))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0}),required],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
56
+ </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#l.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#p=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#p;#o;#e;#i;#s;get#t(){return this.#p.value?this.#p.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#n(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.value=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.value=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#c(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#h(){this.#s=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0}),required],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
package/dist/checkbox.js CHANGED
@@ -4,7 +4,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,r){var o,a=arguments.length
4
4
  class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
5
5
  part="private-label-and-input-and-checkbox"
6
6
  >
7
- <div class="input-and-checkbox">
7
+ <div
8
+ class=${classMap({"input-and-checkbox":!0,disabled:this.disabled})}
9
+ >
8
10
  <input
9
11
  aria-invalid=${this.#l}
10
12
  class="input"
@@ -99,9 +101,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,r){var o,a=arguments.length
99
101
 
100
102
  <div id="description" slot="description">
101
103
  <!--
102
- Additional information or context
103
- @type {Element | string}
104
- -->
104
+ Additional information or context
105
+ @type {Element | string}
106
+ -->
105
107
  <slot
106
108
  class=${classMap({description:!0,hidden:Boolean(this.#l&&this.validityMessage)})}
107
109
  name="description"
@@ -38,6 +38,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
38
38
  flex-shrink: 0;
39
39
  inline-size: 0.875rem;
40
40
  position: relative;
41
+
42
+ &.disabled {
43
+ cursor: not-allowed;
44
+ }
41
45
  }
42
46
 
43
47
  .checkbox {
package/dist/dropdown.js CHANGED
@@ -1,4 +1,4 @@
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`.");this.updateComplete.then((()=>{this.#u=!0;for(const t of this.#a)t.selected=e.some((e=>e&&e===t.value));this.#u=!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))}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)}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 l,o=arguments.length,n=o<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--)(l=e[a])&&(n=(o<3?l(n):o>3?l(t,i,n):l(t,i))||n);return o>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.#l.value&&this.selectedOptions[0]?.label&&(this.#l.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth):this.#s!==e&&this.#o(),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.#l.value&&this.selectedOptions[0]?.label?(this.#l.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label):(!this.multiple&&this.#l.value&&0===this.selectedOptions.length||this.multiple&&this.#l.value)&&(this.#l.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.#l.value&&(this.#l.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`.");this.#u=!0;for(const t of this.#a)t.selected=e.some((e=>e&&e===t.value)),t.selected&&t.disabled&&(t.disabled=!1);this.#u=!1,!this.multiple&&0===this.value.length&&this.#l.value&&(this.#l.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.#l.value?.click(),this.#l.value?.select()):this.#m.value?.click()}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}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.#l.value&&this.lastSelectedOption.label&&(this.#l.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.#l.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.#l.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
4
  ${onResize(this.#p.bind(this))}
@@ -40,10 +40,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
40
40
  class="tags"
41
41
  ${ref(this.#D)}
42
42
  >
43
- ${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,editable:t,label:i,value:s},o)=>html`<li
44
- class=${classMap({"tag-container":!0,hidden:o>this.tagOverflowLimit-1})}
43
+ ${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,editable:t,label:i,value:s},l)=>html`<li
44
+ class=${classMap({"tag-container":!0,hidden:l>this.tagOverflowLimit-1})}
45
45
  data-test="tag-container"
46
- data-test-hidden=${o>this.tagOverflowLimit-1}
46
+ data-test-hidden=${l>this.tagOverflowLimit-1}
47
47
  >
48
48
  <glide-core-tag
49
49
  data-test="tag"
@@ -116,9 +116,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
116
116
  @blur=${this.#_}
117
117
  @focus=${this.#L}
118
118
  @input=${this.#B}
119
- @keydown=${this.#V}
120
- ${onResize(this.#G.bind(this))}
121
- ${ref(this.#o)}
119
+ @keydown=${this.#G}
120
+ ${onResize(this.#V.bind(this))}
121
+ ${ref(this.#l)}
122
122
  />
123
123
 
124
124
  ${when(!this.multiple&&this.isInputOverflow&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span aria-hidden="true" data-test="ellipsis">
@@ -171,6 +171,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
171
171
  <span data-test="tag-overflow-count">
172
172
  ${this.selectedOptions.length-this.tagOverflowLimit}
173
173
  </span>
174
+
174
175
  more
175
176
  </div>`))}
176
177
  ${when(!this.multiple&&this.selectedOptions[0]?.editable,(()=>html`<glide-core-icon-button
@@ -268,8 +269,8 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
268
269
  data-test="add-button"
269
270
  type="button"
270
271
  @click=${this.#se}
271
- @focusin=${this.#oe}
272
- @mouseover=${this.#le}
272
+ @focusin=${this.#le}
273
+ @mouseover=${this.#oe}
273
274
  ${ref(this.#ne)}
274
275
  >
275
276
  ${icons.plus} ${this.addButtonLabel}
@@ -294,7 +295,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
294
295
  >`))}
295
296
  </div>
296
297
  </glide-core-private-label>
297
- </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.#ne=createRef(),this.#y=createRef(),this.#ie=createRef(),this.#I=createRef(),this.#q=createRef(),this.#o=createRef(),this.#N=createRef(),this.#ae=!1,this.#e=!1,this.#re=!1,this.#s=!1,this.#r=!1,this.#n=!1,this.#pe=!1,this.#de=!1,this.#he=!1,this.#ce=!1,this.#u=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#m=createRef(),this.#ee=createRef(),this.#d="large",this.#D=createRef(),this.#c=[],this.#f=()=>{this.#ae?setTimeout((()=>{this.#ae=!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()}))}#ne;#ue;#y;#ie;#I;#q;#o;#N;#v;#ae;#e;#re;#s;#r;#n;#pe;#de;#he;#ce;#u;#M;#O;#ve;#m;#ee;#g;#d;#D;#c;#f;#b;#t(){this.#ue?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#ve=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#w(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#se(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#oe(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#ve=this.activeOption,this.activeOption.privateActive=!1)}#le(){this.activeOption&&!this.#pe&&(this.#ve=this.activeOption,this.activeOption.privateActive=!1)}#E(){this.#ae=!0}async#te(){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.#me?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#ve=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#ve=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#ee.value&&(this.#ee.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(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.#o.value.value="",this.inputValue="",this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}#R(e){this.open&&this.#ve&&e.relatedTarget===this.#ne.value&&(this.#ve.privateActive=!0,this.#ve.privateIsTooltipOpen=!this.#ve.editable)}#A(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#re&&(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.#ae=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#ne.value)return this.focus(),void(this.#ve&&(this.#ve.privateActive=!0,this.#ve.privateIsEditActive=this.#ve.editable,this.#ve.privateIsTooltipOpen=!this.#ve.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#ne.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#fe?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#ve=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ne.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#ne.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.#fe&&this.#fe.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#ce=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#ee.value&&this.#ge(),this.#ce=!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.#me?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#me&&"number"==typeof t){e.preventDefault();const i=this.#me.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.#ve=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#me&&"number"==typeof t){e.preventDefault();const i=this.#me.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.#ve=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#me){e.preventDefault();const t=[...this.#me].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.#ve=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#me){e.preventDefault();const t=[...this.#me].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.#ve=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#S(e){if(this.disabled||this.readonly)return;if(this.#re)return void(this.#re=!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.#ce||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#pe=!0,void setTimeout((()=>{this.#pe=!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#B(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.#fe?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#ve=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#fe||0===this.#fe.length,this.isCommunicateItemCountToScreenreaders=!0,this.#fe&&(this.itemCount=this.#fe.length)}}#V(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.#re=!0,t.selected=!1,void(this.#re=!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.#re=!0;for(const e of i)e.selected=!1;this.#re=!1}else;}#G(){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.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#h(){const e=this.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#ee.value)return[this.#ee.value,...e]}get#fe(){return this.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#me(){const e=this.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#ee.value&&!this.#ee.value.hidden&&e?[this.#ee.value,...e]:e}#U(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#ee.value&&this.#ge(),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(){this.requestUpdate()}#W(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#ve=e.target)}#X(){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.#me){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#ve=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#ne.value&&this.focus()}}#Y(e){e.target!==this.#ee.value&&!this.#he&&this.#ee.value&&(this.#ee.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.#re&&(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()}))}#Z(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.#re=!0,this.open=!1}async#F(e){this.#re=!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.#D.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.#re=!1}))}else setTimeout((()=>{this.focus(),this.#re=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#T(e){e.stopPropagation()}#ge(){this.#he=!0;for(const e of this.#a)!this.#ee.value?.selected||e.selected||e.disabled?!this.#ee.value?.selected&&e.selected&&(e.selected=!1):e.selected=!0;this.#he=!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.#de&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#de=!0,await this.updateComplete,this.#p()):this.#de=!1}}#i(){this.#a.length>0&&(this.#ue?.(),this.#ve&&(this.#ve.privateActive=!0,this.ariaActivedescendant=this.#ve.id),this.#I.value&&this.#O.value&&(this.#ue=autoUpdate(this.#I.value,this.#O.value,(()=>{(async()=>{if(this.#I.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#I.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-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({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}),required],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!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`
298
+ </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.#l.value:this.#m.value):this.#v.setValidity({customError:!0,valueMissing:this.#v.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#l.value:this.#m.value)}setValidity(e,t){this.validityMessage=t,this.#v.setValidity(e," ",this.filterable||this.isFilterable?this.#l.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.#ne=createRef(),this.#y=createRef(),this.#ie=createRef(),this.#I=createRef(),this.#q=createRef(),this.#l=createRef(),this.#N=createRef(),this.#ae=!1,this.#e=!1,this.#re=!1,this.#s=!1,this.#r=!1,this.#n=!1,this.#pe=!1,this.#de=!1,this.#he=!1,this.#ce=!1,this.#u=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#m=createRef(),this.#ee=createRef(),this.#d="large",this.#D=createRef(),this.#c=[],this.#f=()=>{this.#ae?setTimeout((()=>{this.#ae=!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()}))}#ne;#ue;#y;#ie;#I;#q;#l;#N;#v;#ae;#e;#re;#s;#r;#n;#pe;#de;#he;#ce;#u;#M;#O;#ve;#m;#ee;#g;#d;#D;#c;#f;#b;#t(){this.#ue?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#ve=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#w(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#se(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#le(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#ve=this.activeOption,this.activeOption.privateActive=!1)}#oe(){this.activeOption&&!this.#pe&&(this.#ve=this.activeOption,this.activeOption.privateActive=!1)}#E(){this.#ae=!0}async#te(){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.#me?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#ve=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#ve=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#ee.value&&(this.#ee.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),await this.updateComplete,!this.multiple&&this.#l.value&&this.lastSelectedOption?.label?(this.#l.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth):!this.multiple&&this.#l.value&&(this.#l.value.value="",this.inputValue="",this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}#R(e){this.open&&this.#ve&&e.relatedTarget===this.#ne.value&&(this.#ve.privateActive=!0,this.#ve.privateIsTooltipOpen=!this.#ve.editable)}#A(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#re&&(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.#ae=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#ne.value)return this.focus(),void(this.#ve&&(this.#ve.privateActive=!0,this.#ve.privateIsEditActive=this.#ve.editable,this.#ve.privateIsTooltipOpen=!this.#ve.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#ne.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#fe?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#ve=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ne.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#ne.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#l.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.#fe&&this.#fe.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#ce=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#ee.value&&this.#ge(),this.#ce=!1,this.#o(),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.#me?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#me&&"number"==typeof t){e.preventDefault();const i=this.#me.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.#ve=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#me&&"number"==typeof t){e.preventDefault();const i=this.#me.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.#ve=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#me){e.preventDefault();const t=[...this.#me].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.#ve=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#me){e.preventDefault();const t=[...this.#me].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.#ve=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#S(e){if(this.disabled||this.readonly)return;if(this.#re)return void(this.#re=!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.#ce||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#pe=!0,void setTimeout((()=>{this.#pe=!1}))):void 0;this.open=!1}#$(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#l.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#j(){this.open=!1}#_(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#L(){this.#l.value?.select(),this.isInputTooltipOpen=!0}async#B(e){let t;if(e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.#l.value?.value&&(this.inputValue=this.#l.value.value),this.multiple&&""!==this.#l.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#l.value?.value&&this.#l.value?.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.#l.value)try{t=await this.filter(this.#l.value.value)}catch{}if(t){for(const e of this.#a)e.hidden=!t.includes(e);const e=this.#fe?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#ve=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#fe||0===this.#fe.length,this.isCommunicateItemCountToScreenreaders=!0,this.#fe&&(this.itemCount=this.#fe.length)}}#G(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#l.value&&0===this.#l.value.selectionStart)return this.#re=!0,t.selected=!1,void(this.#re=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#l.value&&0===this.#l.value.selectionStart){this.#re=!0;for(const e of i)e.selected=!1;this.#re=!1}else;}#V(){this.#l.value&&(this.isInputOverflow=this.#l.value.scrollWidth-1>this.#l.value.clientWidth)}#z(){this.#N.value&&(this.isInternalLabelOverflow=this.#N.value.scrollWidth>this.#N.value.clientWidth)}get#a(){return this.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#h(){const e=this.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#ee.value)return[this.#ee.value,...e]}get#fe(){return this.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#me(){const e=this.#ie.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#ee.value&&!this.#ee.value.hidden&&e?[this.#ee.value,...e]:e}#U(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#ee.value&&this.#ge(),this.#o()}#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.#o(),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(){this.requestUpdate()}#W(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#ve=e.target)}#X(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))):(this.filterable||this.isFilterable)&&this.#l.value&&this.selectedOptions[0]?.label?(this.#l.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth):this.requestUpdate())}#K(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#J(e){if(e.target instanceof GlideCoreDropdownOption&&this.#me){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#ve=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#ne.value&&this.focus()}}#Y(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.#ee.value&&(t.selected=!1);e.target!==this.#ee.value&&!this.#he&&this.#ee.value&&(this.#ee.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.#l.value&&!this.#re&&(this.isFiltering=!1,this.#l.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#l.value&&e.target.label&&(this.isFiltering=!1,this.#l.value.value=e.target.label,this.inputValue=e.target.label))),this.#l.value&&(this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))}#Z(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.#re=!0,this.open=!1}async#F(e){this.#re=!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.#D.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.#re=!1}))}else setTimeout((()=>{this.focus(),this.#re=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#T(e){e.stopPropagation()}#ge(){this.#he=!0;for(const e of this.#a)!this.#ee.value?.selected||e.selected||e.disabled?!this.#ee.value?.selected&&e.selected&&(e.selected=!1):e.selected=!0;this.#he=!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.#de&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#de=!0,await this.updateComplete,this.#p()):this.#de=!1}}#i(){this.#a.length>0&&(this.#ue?.(),this.#ve&&(this.#ve.privateActive=!0,this.ariaActivedescendant=this.#ve.id),this.#I.value&&this.#O.value&&(this.#ue=autoUpdate(this.#I.value,this.#O.value,(()=>{(async()=>{if(this.#I.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#I.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-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()}})()}))))}#o(){if((this.filterable||this.isFilterable)&&this.#l.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__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}),required],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!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`
298
299
  <svg
299
300
  aria-hidden="true"
300
301
  viewBox="0 0 16 16"
@@ -52,6 +52,7 @@ export default class GlideCoreDropdownOption extends LitElement {
52
52
  privateIsTooltipOpen: boolean;
53
53
  readonly version: string;
54
54
  private get isMultiple();
55
+ private get lastSelectedOption();
55
56
  click(): void;
56
57
  connectedCallback(): void;
57
58
  disconnectedCallback(): void;
@@ -1 +1 @@
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 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.#r=!1,this.#a=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#n}set label(e){this.#n=e,setTimeout((()=>{this.#p()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){if(this.#r=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#d)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#p()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}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.#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 class="${classMap({"edit-button":!0,active:this.privateIsEditActive,disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}`),(()=>html`<div class="${classMap({option:!0,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,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#c;#o;#l;#n;#s;#r;#a;get#d(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#h(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#v(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#p(){this.#s.value&&(this.isLabelOverflow=this.#s.value.scrollWidth>this.#s.value.clientWidth)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({reflect:!0}),required],GlideCoreDropdownOption.prototype,"label",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})],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([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 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.#r=!1,this.#a=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#n}set label(e){this.#n=e,setTimeout((()=>{this.#p()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){this.#r=e,this.ariaSelected=e.toString(),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(){return this.#d.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.selected.toString(),this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#p()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}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.#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 class="${classMap({"edit-button":!0,active:this.privateIsEditActive,disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}`),(()=>html`<div class="${classMap({option:!0,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,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#c;#o;#l;#n;#s;#r;#a;get#d(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#h(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#v(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#p(){this.#s.value&&(this.isLabelOverflow=this.#s.value.scrollWidth>this.#s.value.clientWidth)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({reflect:!0}),required],GlideCoreDropdownOption.prototype,"label",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})],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;
@@ -238,8 +238,22 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
238
238
  }
239
239
 
240
240
  .tags {
241
- display: flex;
241
+ display: grid;
242
242
  gap: var(--glide-core-spacing-xs);
243
+
244
+ /*
245
+ Tags will shrink down to zero and never overflow if they don't have a minimum
246
+ width. If they don't overflow, they'll remain visible and additionally won't be
247
+ included in the overflow count text. Thus a minimum width.
248
+
249
+ "3.5rem" is the size of a tag with only a single character. Ideally, its
250
+ minimum would be wider so a few characters are always visible. But a single-
251
+ character tag is possible and even likely. Setting a higher minimum width
252
+ would mean single or double-character tags would have whitespace between them.
253
+ It's equally unfortunate that Dropdown has to know anything about Tag's width.
254
+ */
255
+ grid-auto-columns: minmax(3.5rem, auto);
256
+ grid-auto-flow: column;
243
257
  list-style-type: none;
244
258
  margin-block: 0;
245
259
  padding-inline-start: 0;
package/dist/icons/x.js CHANGED
@@ -1 +1 @@
1
- import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}" viewBox="0 0 20 20" fill="none"><path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
1
+ import{html}from"lit";import{styleMap}from"lit/directives/style-map.js";export default html`<svg aria-hidden="true" style="${styleMap({height:"var(--private-size, 1rem)",width:"var(--private-size, 1rem)"})}" viewBox="0 0 20 20" fill="none"><path d="M15 5L5 15M5 5L15 15" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
package/dist/input.d.ts CHANGED
@@ -18,7 +18,7 @@ declare global {
18
18
  * @attr {string} [name='']
19
19
  * @attr {'horizontal'|'vertical'} [orientation='horizontal']
20
20
  * @attr {boolean} [password-toggle=false] - For 'password' type, whether to show a button to toggle the password's visibility
21
- * @attr {string} [pattern]
21
+ * @attr {string} [pattern='']
22
22
  * @attr {string} [placeholder]
23
23
  * @attr {boolean} [readonly=false]
24
24
  * @attr {boolean} [required=false]
@@ -73,7 +73,7 @@ export default class GlideCoreInput extends LitElement implements FormControl {
73
73
  label?: string;
74
74
  hideLabel: boolean;
75
75
  orientation: 'horizontal' | 'vertical';
76
- pattern?: string;
76
+ pattern: string | undefined;
77
77
  placeholder?: string;
78
78
  clearable: boolean;
79
79
  spellcheck: boolean;
package/dist/input.js CHANGED
@@ -1,4 +1,4 @@
1
- var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length,r=a<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(o=t[l])&&(r=(a<3?o(r):a>3?o(e,i,r):o(e,i))||r);return a>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{html,LitElement,nothing}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{ifDefined}from"lit/directives/if-defined.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{LocalizeController}from"./library/localize.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:!new RegExp(this.pattern).test(this.value),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
1
+ var __decorate=this&&this.__decorate||function(t,e,i,s){var a,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,i,s);else for(var l=t.length-1;l>=0;l--)(a=t[l])&&(r=(o<3?a(r):o>3?a(e,i,r):a(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};import"./icon-button.js";import"./label.js";import{html,LitElement,nothing}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{ifDefined}from"lit/directives/if-defined.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{LocalizeController}from"./library/localize.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import styles from"./input.styles.js";import xIcon from"./icons/x.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreInput=class GlideCoreInput extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode,delegatesFocus:!0}}static{this.styles=styles}get form(){return this.#t.form}get validity(){return this.pattern&&this.pattern.length>0?(this.#t.setValidity({customError:Boolean(this.validityMessage),patternMismatch:Boolean(this.value&&!new RegExp(`^(?:${this.pattern})$`,"v").test(this.value)),valueMissing:Boolean(this.required&&!this.value)}," ",this.#e.value),this.#t.validity):!this.pattern&&this.#t.validity.patternMismatch?(this.#t.setValidity({}),this.#t.validity):!this.required||this.value||this.disabled?this.required&&this.#t.validity.valueMissing&&this.value?(this.#t.setValidity({}),this.#t.validity):(this.required||!this.#t.validity.valueMissing||this.value||this.#t.setValidity({}),this.#t.validity):(this.#t.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#e.value),this.#t.validity)}checkValidity(){this.isCheckingValidity=!0;const t=this.#t.checkValidity();return this.isCheckingValidity=!1,t}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#i)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#i)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
2
2
  <glide-core-private-label
3
3
  class=${classMap({left:"left"===this.privateSplit,middle:"middle"===this.privateSplit})}
4
4
  label=${ifDefined(this.label)}
@@ -6,18 +6,18 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length
6
6
  split=${ifDefined(this.privateSplit??void 0)}
7
7
  tooltip=${ifDefined(this.tooltip)}
8
8
  ?disabled=${this.disabled}
9
- ?error=${this.#s||this.#o}
9
+ ?error=${this.#s||this.#a}
10
10
  ?hide=${this.hideLabel}
11
11
  ?required=${this.required}
12
12
  >
13
13
  <label for="input"> ${this.label} </label>
14
14
 
15
15
  <div
16
- class=${classMap({"input-container":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#s||this.#o})}
16
+ class=${classMap({"input-container":!0,focused:this.hasFocus,empty:""===this.value,disabled:this.disabled,readonly:this.readonly&&!this.disabled,error:this.#s||this.#a})}
17
17
  slot="control"
18
18
  >
19
19
  <slot name="prefix-icon">
20
- <!--
20
+ <!--
21
21
  An icon before the input field
22
22
  @type {Element}
23
23
  -->
@@ -25,7 +25,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length
25
25
 
26
26
  <input
27
27
  aria-describedby="meta"
28
- aria-invalid=${this.#s||this.#o}
28
+ aria-invalid=${this.#s||this.#a}
29
29
  class="input"
30
30
  data-test="input"
31
31
  id="input"
@@ -38,7 +38,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length
38
38
  ?required=${this.required}
39
39
  ?readonly=${this.readonly}
40
40
  ?disabled=${this.disabled}
41
- @focus=${this.#a}
41
+ @focus=${this.#o}
42
42
  @blur=${this.#r}
43
43
  @change=${this.#l}
44
44
  @input=${this.#n}
@@ -88,8 +88,8 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length
88
88
  class=${classMap({description:!0,hidden:Boolean(this.#s&&this.validityMessage)})}
89
89
  name="description"
90
90
  >
91
- <!--
92
- Additional information or context
91
+ <!--
92
+ Additional information or context
93
93
  @type {Element | string}
94
94
  -->
95
95
  </slot>
@@ -99,7 +99,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length
99
99
  >`))}
100
100
  ${this.maxlength?html`
101
101
  <div
102
- class=${classMap({"character-count":!0,error:this.#o})}
102
+ class=${classMap({"character-count":!0,error:this.#a})}
103
103
  data-test="character-count-container"
104
104
  >
105
105
  <!--
@@ -118,7 +118,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,a=arguments.length
118
118
  `:nothing}
119
119
  </div>
120
120
  </glide-core-private-label>
121
- `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.version=packageJson.version,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#p(){return this.clearable&&!this.disabled&&!this.readonly}get#h(){return this.#p&&this.value.length>0}get#m(){return this.value.length}#i;get#o(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(){this.#e.value?.value&&(this.value=this.#e.value?.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#a(){this.hasFocus=!0}#n(){this.#e.value&&(this.value=this.#e.value.value)}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property({reflect:!0})],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0}),required],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"version",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"tooltip",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input"),final],GlideCoreInput);export default GlideCoreInput;const icons={eye:html`<svg
121
+ `}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#t.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#t.setValidity({customError:!1},"",this.#e.value):this.#t.setValidity({customError:!0,patternMismatch:this.#t.validity.patternMismatch,valueMissing:this.#t.validity.valueMissing}," ",this.#e.value)}setValidity(t,e){this.validityMessage=e,this.#t.setValidity(t," ",this.#e.value)}constructor(){super(),this.type="text",this.name="",this.value="",this.hideLabel=!1,this.orientation="horizontal",this.pattern="",this.clearable=!1,this.spellcheck=!1,this.autocapitalize="on",this.autocomplete="on",this.passwordToggle=!1,this.required=!1,this.readonly=!1,this.disabled=!1,this.version=packageJson.version,this.hasFocus=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.passwordVisible=!1,this.#e=createRef(),this.#c=new LocalizeController(this),this.#i=({formData:t})=>{this.name&&this.value&&!this.disabled&&t.append(this.name,this.value)},this.#t=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#e;#t;#c;get#p(){return this.clearable&&!this.disabled&&!this.readonly}get#h(){return this.#p&&this.value.length>0}get#m(){return this.value.length}#i;get#a(){return Boolean(!this.disabled&&!this.readonly&&this.maxlength&&this.#m>this.maxlength)}get#s(){return!this.disabled&&!this.validity?.valid&&this.isReportValidityOrSubmit}#u(t){this.value="",this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.#e.value?.focus(),t.stopPropagation()}#r(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1,this.hasFocus=!1}#l(){this.#e.value?.value&&(this.value=this.#e.value?.value),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#o(){this.hasFocus=!0}#n(){this.#e.value&&(this.value=this.#e.value.value)}#d(t){"Enter"===t.key&&this.form?.requestSubmit()}#y(){this.passwordVisible=!this.passwordVisible}};__decorate([property({reflect:!0})],GlideCoreInput.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"name",void 0),__decorate([property()],GlideCoreInput.prototype,"value",void 0),__decorate([property({reflect:!0}),required],GlideCoreInput.prototype,"label",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreInput.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"pattern",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"placeholder",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"clearable",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"spellcheck",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocapitalize",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"autocomplete",void 0),__decorate([property({attribute:"password-toggle",type:Boolean})],GlideCoreInput.prototype,"passwordToggle",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"required",void 0),__decorate([property({type:Boolean})],GlideCoreInput.prototype,"readonly",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInput.prototype,"disabled",void 0),__decorate([property()],GlideCoreInput.prototype,"privateSplit",void 0),__decorate([property({type:Number,converter:t=>t&&Number.parseInt(t,10),reflect:!0})],GlideCoreInput.prototype,"maxlength",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"version",void 0),__decorate([property({reflect:!0})],GlideCoreInput.prototype,"tooltip",void 0),__decorate([state()],GlideCoreInput.prototype,"hasFocus",void 0),__decorate([state()],GlideCoreInput.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreInput.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreInput.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreInput.prototype,"passwordVisible",void 0),__decorate([state()],GlideCoreInput.prototype,"validityMessage",void 0),GlideCoreInput=__decorate([customElement("glide-core-input"),final],GlideCoreInput);export default GlideCoreInput;const icons={eye:html`<svg
122
122
  aria-hidden="true"
123
123
  style=${styleMap({height:"1rem",width:"1rem"})}
124
124
  fill="none"
@@ -14,13 +14,18 @@ export interface Translation extends DefaultTranslation {
14
14
  previousTab: string;
15
15
  noResults: string;
16
16
  tooltip: string;
17
+ severityInformational: string;
18
+ severityCritical: string;
19
+ severityMedium: string;
20
+ success: string;
21
+ error: string;
22
+ informational: string;
17
23
  announcedCharacterCount: (current: number, maximum: number) => string;
18
24
  displayedCharacterCount: (current: number, maximum: number) => string;
19
25
  clearEntry: (label: string) => string;
20
26
  editOption: (name: string) => string;
21
27
  editTag: (name: string) => string;
22
28
  removeTag: (name: string) => string;
23
- actionsFor: (label: string) => string;
24
29
  itemCount: (count: string) => string;
25
30
  closeInlineAlert: (variant: string) => string;
26
31
  }
package/dist/menu.link.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,i,n):r(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};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{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.link.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.disabled||this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" href="${ifDefined(this.url)}" @click="${this.#o}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t;#i;#o(e){this.disabled&&(e.preventDefault(),e.stopPropagation())}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuLink.prototype,"disabled",null),__decorate([property({reflect:!0}),required],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"version",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link"),final],GlideCoreMenuLink);export default GlideCoreMenuLink;
1
+ var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,i,n):r(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};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{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.link.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.disabled||this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a aria-disabled="${this.disabled}" class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" href="${ifDefined(this.url)}" @click="${this.#o}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t;#i;#o(e){this.disabled&&(e.preventDefault(),e.stopPropagation())}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuLink.prototype,"disabled",null),__decorate([property({reflect:!0}),required],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"version",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link"),final],GlideCoreMenuLink);export default GlideCoreMenuLink;
package/dist/modal.d.ts CHANGED
@@ -40,4 +40,7 @@ export default class GlideCoreModal extends LitElement {
40
40
  disconnectedCallback(): void;
41
41
  firstUpdated(): void;
42
42
  render(): import("lit").TemplateResult<1>;
43
+ private hasPrimarySlotContent;
44
+ private hasSecondarySlotContent;
45
+ private hasTertiarySlotContent;
43
46
  }
package/dist/modal.js CHANGED
@@ -1 +1 @@
1
- var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(n=(s<3?l(n):s>3?l(t,o,n):l(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};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 GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreButton from"./button.js";import GlideCoreTooltip from"./tooltip.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import final from"./library/final.js";import required from"./library/required.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n .private-glide-core-modal-lock-scroll {\n scrollbar-gutter: stable !important;\n overflow: hidden !important;\n }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=createRef(),this.#l=createRef(),this.#s=!1,this.#n=!1,this.#r=new LocalizeController(this),this.#a=()=>{this.#s=!0},this.#c=()=>{this.#s=!0},this.#d=()=>{const e=this.open;setTimeout((()=>{this.#s?setTimeout((()=>{this.#s=!1})):e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#n}set open(e){const t=e!==this.#n;this.#n=e,e&&t?(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#p(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#d,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#d,{capture:!0})}firstUpdated(){this.open&&this.#m(),this.#i.value?.addEventListener("click",this.#a,{capture:!0}),this.#i.value?.addEventListener("mouseup",this.#c)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#h}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#i)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.severity,(()=>html`<span class="${classMap({severity:!0,critical:"critical"===this.severity,informational:"informational"===this.severity,medium:"medium"===this.severity})}" data-test="severity">${this.severity&&icons[this.severity]}</span>`))} ${when(this.backButton&&!this.severity,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#r.term("dismiss")}" @click="${this.#u}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" ${assertSlot([GlideCoreModalIconButton],!0)} ${ref(this.#l)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#r.term("close")}" @click="${this.#u}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot ${assertSlot()}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" ${assertSlot([GlideCoreButton,GlideCoreTooltip],!0)}></slot></li><li class="action"><slot name="secondary" ${assertSlot([GlideCoreButton],!0)}></slot></li><li class="action"><slot name="primary" ${assertSlot([GlideCoreButton],!0)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#i;#l;#s;#n;#r;#a;#c;#d;#p(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#h(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#m(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0}),required],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"severity",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal"),final],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,critical:severityCriticalIcon,informational:severityInformationalIcon,medium:severityMediumIcon};
1
+ var __decorate=this&&this.__decorate||function(e,t,o,i){var l,n=arguments.length,s=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(s=(n<3?l(s):n>3?l(t,o,s):l(t,o))||s);return n>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,state}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 GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreButton from"./button.js";import GlideCoreTooltip from"./tooltip.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import final from"./library/final.js";import required from"./library/required.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n .private-glide-core-modal-lock-scroll {\n scrollbar-gutter: stable !important;\n overflow: hidden !important;\n }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.hasPrimarySlotContent=!1,this.hasSecondarySlotContent=!1,this.hasTertiarySlotContent=!1,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#i=createRef(),this.#l=createRef(),this.#n=!1,this.#s=!1,this.#r=new LocalizeController(this),this.#a=createRef(),this.#c=createRef(),this.#d=createRef(),this.#m=()=>{this.#n=!0},this.#h=()=>{this.#n=!0},this.#p=()=>{const e=this.open;setTimeout((()=>{this.#n?setTimeout((()=>{this.#n=!1})):e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#s}set open(e){const t=e!==this.#s;this.#s=e,e&&t?(this.#y(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#u(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#p,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#p,{capture:!0})}firstUpdated(){this.open&&this.#y(),this.#i.value?.addEventListener("click",this.#m,{capture:!0}),this.#i.value?.addEventListener("mouseup",this.#h)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#f}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#i)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.severity,(()=>html`<span aria-label="${this.#r.term("informational"===this.severity?"severityInformational":"critical"===this.severity?"severityCritical":"severityMedium")} - " class="${classMap({severity:!0,critical:"critical"===this.severity,informational:"informational"===this.severity,medium:"medium"===this.severity})}" data-test="severity">${this.severity&&icons[this.severity]}</span>`))} ${when(this.backButton&&!this.severity,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#r.term("dismiss")}" @click="${this.#C}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" ${assertSlot([GlideCoreModalIconButton],!0)} ${ref(this.#l)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#r.term("close")}" @click="${this.#C}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot ${assertSlot()}></slot></article><footer><menu aria-hidden="${!this.hasTertiarySlotContent&&!this.hasSecondarySlotContent&&!this.hasPrimarySlotContent}" class="actions"><li aria-hidden="${!this.hasTertiarySlotContent}" class="action"><slot class="tertiary-slot" name="tertiary" @slotchange="${this.#v}" ${assertSlot([GlideCoreButton,GlideCoreTooltip],!0)} ${ref(this.#d)}></slot></li><li aria-hidden="${!this.hasSecondarySlotContent}" class="action"><slot name="secondary" @slotchange="${this.#S}" ${assertSlot([GlideCoreButton],!0)} ${ref(this.#c)}></slot></li><li aria-hidden="${!this.hasPrimarySlotContent}" class="action"><slot name="primary" @slotchange="${this.#b}" ${assertSlot([GlideCoreButton],!0)} ${ref(this.#a)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#i;#l;#n;#s;#r;#a;#c;#d;#m;#h;#p;#u(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#C(){this.open=!1}#f(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#b(){this.hasPrimarySlotContent=Boolean(this.#a.value?.assignedElements().length)}#S(){this.hasSecondarySlotContent=Boolean(this.#c.value?.assignedElements().length)}#v(){this.hasTertiarySlotContent=Boolean(this.#d.value?.assignedElements().length)}#y(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0}),required],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"severity",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),__decorate([state()],GlideCoreModal.prototype,"hasPrimarySlotContent",void 0),__decorate([state()],GlideCoreModal.prototype,"hasSecondarySlotContent",void 0),__decorate([state()],GlideCoreModal.prototype,"hasTertiarySlotContent",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal"),final],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,critical:severityCriticalIcon,informational:severityInformationalIcon,medium:severityMediumIcon};