@crowdstrike/glide-core 0.24.5 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button-group.button.js +1 -1
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +8 -1
- package/dist/button.js +1 -1
- package/dist/checkbox-group.d.ts +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox-group.styles.js +2 -2
- package/dist/checkbox.d.ts +7 -7
- package/dist/checkbox.js +2 -2
- package/dist/checkbox.styles.js +1 -1
- package/dist/dropdown.d.ts +3 -1
- package/dist/dropdown.js +23 -16
- package/dist/dropdown.option.d.ts +22 -8
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.styles.js +20 -13
- package/dist/icon-button.d.ts +11 -4
- package/dist/icon-button.js +1 -1
- package/dist/inline-alert.d.ts +0 -6
- package/dist/inline-alert.js +1 -1
- package/dist/inline-alert.styles.js +18 -38
- package/dist/input.d.ts +14 -14
- package/dist/input.js +1 -1
- package/dist/input.styles.js +2 -2
- package/dist/label.js +1 -1
- package/dist/label.styles.js +3 -3
- package/dist/library/assert-slot.d.ts +4 -0
- package/dist/library/localize.d.ts +1 -1
- package/dist/link.d.ts +30 -0
- package/dist/link.js +1 -0
- package/dist/link.styles.js +27 -0
- package/dist/menu.button.d.ts +13 -2
- package/dist/menu.button.js +1 -1
- package/dist/menu.d.ts +6 -0
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +15 -4
- package/dist/menu.link.js +1 -1
- package/dist/menu.options.d.ts +13 -1
- package/dist/menu.options.js +1 -1
- package/dist/menu.options.styles.js +9 -1
- package/dist/modal.d.ts +1 -1
- package/dist/modal.icon-button.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/modal.styles.js +3 -3
- package/dist/radio-group.d.ts +1 -1
- package/dist/radio-group.js +1 -1
- package/dist/radio-group.radio.d.ts +7 -7
- package/dist/radio-group.radio.js +1 -1
- package/dist/radio-group.styles.js +2 -2
- package/dist/spinner.js +1 -1
- package/dist/spinner.styles.js +1 -4
- package/dist/split-button.primary-button.d.ts +1 -1
- package/dist/split-button.primary-button.js +1 -1
- package/dist/split-button.primary-link.d.ts +3 -3
- package/dist/split-button.primary-link.js +1 -1
- package/dist/split-button.secondary-button.d.ts +1 -1
- package/dist/split-button.secondary-button.js +1 -1
- package/dist/styles/skeleton.d.ts +2 -0
- package/dist/styles/skeleton.js +45 -0
- package/dist/styles/variables.css +1 -1
- package/dist/tab.d.ts +1 -0
- package/dist/tab.group.d.ts +1 -2
- package/dist/tab.group.js +1 -1
- package/dist/tab.group.styles.js +4 -0
- package/dist/tab.js +1 -1
- package/dist/tag.d.ts +1 -1
- package/dist/tag.js +1 -1
- package/dist/tag.styles.js +30 -37
- package/dist/textarea.d.ts +9 -9
- package/dist/textarea.js +1 -1
- package/dist/textarea.styles.js +2 -2
- package/dist/toast.d.ts +40 -0
- package/dist/toast.js +1 -0
- package/dist/toast.toasts.d.ts +31 -0
- package/dist/toast.toasts.js +90 -0
- package/dist/toast.toasts.styles.js +127 -0
- package/dist/toggle.d.ts +1 -1
- package/dist/toggle.js +1 -1
- package/dist/tooltip.d.ts +5 -5
- package/dist/tooltip.js +1 -1
- package/dist/translations/en.js +1 -1
- package/dist/translations/fr.d.ts +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/ja.d.ts +1 -1
- package/dist/translations/ja.js +1 -1
- package/package.json +8 -8
- package/dist/toasts.d.ts +0 -33
- package/dist/toasts.js +0 -1
- package/dist/toasts.styles.js +0 -22
- package/dist/toasts.toast.d.ts +0 -31
- package/dist/toasts.toast.js +0 -1
- package/dist/toasts.toast.styles.js +0 -88
- /package/dist/{toasts.styles.d.ts → link.styles.d.ts} +0 -0
- /package/dist/{toasts.toast.styles.d.ts → toast.toasts.styles.d.ts} +0 -0
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(e){this.#o=e,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" data-test="radio" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#t)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#e;#t;#o;#r(){const e=this.#t.value?.assignedNodes();this.hasIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"version",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"hasIcon",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button"),final],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(e){this.#o=e,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#e.value?.click()}focus(e){this.#e.value?.focus(e)}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" data-test="radio" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#t)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#e;#t;#o;#r(){const e=this.#t.value?.assignedNodes();this.hasIcon=Boolean(e&&e.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"version",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"hasIcon",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button"),final],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;
|
package/dist/button-group.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,l=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(l=(n<3?i(l):n>3?i(e,o,l):i(e,o))||l);return n>3&&l&&Object.defineProperty(e,o,l),l};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 packageJson from"../package.json"with{type:"json"};import GlideCoreButtonGroupButton from"./button-group.button.js";import styles from"./button-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 GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#t=t}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#i}" @keydown="${this.#n}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${assertSlot([GlideCoreButtonGroupButton])} ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#i(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}#n(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.at(-1);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#r.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.at(0);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#r)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"version",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group"),final],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,l=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(l=(n<3?i(l):n>3?i(e,o,l):i(e,o))||l);return n>3&&l&&Object.defineProperty(e,o,l),l};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 packageJson from"../package.json"with{type:"json"};import GlideCoreButtonGroupButton from"./button-group.button.js";import styles from"./button-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 GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#t=t}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#i}" @keydown="${this.#n}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${assertSlot([GlideCoreButtonGroupButton])} ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#i(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}#n(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.at(-1);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#r.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.at(0);o instanceof GlideCoreButtonGroupButton&&o.privateSelect();break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#r)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0}),required],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButtonGroup.prototype,"orientation",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"version",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group"),final],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
|
package/dist/button.d.ts
CHANGED
@@ -7,6 +7,7 @@ declare global {
|
|
7
7
|
}
|
8
8
|
/**
|
9
9
|
* @attr {string} label
|
10
|
+
* @attr {string|null} [aria-description=null]
|
10
11
|
* @attr {boolean} [disabled=false]
|
11
12
|
* @attr {string} [name='']
|
12
13
|
* @attr {'large'|'small'} [size='large']
|
@@ -29,8 +30,13 @@ export default class GlideCoreButton extends LitElement {
|
|
29
30
|
static formAssociated: boolean;
|
30
31
|
static shadowRootOptions: ShadowRootInit;
|
31
32
|
static styles: import("lit").CSSResult[];
|
32
|
-
disabled: boolean;
|
33
33
|
label?: string;
|
34
|
+
/**
|
35
|
+
* @default null
|
36
|
+
*/
|
37
|
+
get ariaDescription(): string | null;
|
38
|
+
set ariaDescription(description: string | null);
|
39
|
+
disabled: boolean;
|
34
40
|
name: string;
|
35
41
|
size: 'large' | 'small';
|
36
42
|
tooltip?: string;
|
@@ -40,6 +46,7 @@ export default class GlideCoreButton extends LitElement {
|
|
40
46
|
readonly version: string;
|
41
47
|
get form(): HTMLFormElement | null;
|
42
48
|
click(): void;
|
49
|
+
firstUpdated(): void;
|
43
50
|
render(): import("lit").TemplateResult<1>;
|
44
51
|
constructor();
|
45
52
|
private hasPrefixIcon;
|
package/dist/button.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var l=t.length-1;l>=0;l--)(r=t[l])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}get form(){return this.#o.form}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" data-test="button" slot="target" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#s)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#a}" ${ref(this.#l)}></slot></button></glide-core-tooltip>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=null,this.#e=createRef(),this.#s=createRef(),this.#l=createRef(),this.#o=this.attachInternals()}#t;#e;#o;#s;#l;#i(t){this.disabled?t.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(t&&t.length>0)}#a(){const t=this.#l.value?.assignedNodes();this.hasSuffixIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],GlideCoreButton.prototype,"label",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],GlideCoreButton.prototype,"ariaDescription",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button"),final],GlideCoreButton);export default GlideCoreButton;
|
package/dist/checkbox-group.d.ts
CHANGED
@@ -54,13 +54,13 @@ export default class GlideCoreCheckboxGroup extends LitElement implements FormCo
|
|
54
54
|
static formAssociated: boolean;
|
55
55
|
static shadowRootOptions: ShadowRootInit;
|
56
56
|
static styles: import("lit").CSSResult[];
|
57
|
+
label?: string;
|
57
58
|
/**
|
58
59
|
* @default false
|
59
60
|
*/
|
60
61
|
get disabled(): boolean;
|
61
62
|
set disabled(isDisabled: boolean);
|
62
63
|
hideLabel: boolean;
|
63
|
-
label?: string;
|
64
64
|
name: string;
|
65
65
|
orientation: "horizontal";
|
66
66
|
privateSplit?: 'left' | 'middle' | 'right';
|
package/dist/checkbox-group.js
CHANGED
@@ -54,4 +54,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
|
|
54
54
|
>`))}
|
55
55
|
</div>
|
56
56
|
</glide-core-private-label>
|
57
|
-
</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.#u=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;#u;#o;#e;#i;#s;get#t(){return this.#u.value?this.#u.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#
|
57
|
+
</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.#u=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;#u;#o;#e;#i;#s;get#t(){return this.#u.value?this.#u.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#d(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#f(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#f()}#n(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.#s=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.#s=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#c(e){if(e.target instanceof GlideCoreCheckbox&&e.target.disabled&&e.target.checked){const t=this.#s.lastIndexOf(e.target.value);this.#s.splice(t,t+1)}else e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value&&this.#s.push(e.target.value)}#h(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)))}#p(){for(const e of this.#t)e.privateVariant="minimal";this.#s=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0}),required],GlideCoreCheckboxGroup.prototype,"label",void 0),__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,useDefault:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!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({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;
|
@@ -2,7 +2,7 @@ import{css}from"lit";export default[css`
|
|
2
2
|
:host(:not(:disabled)) .component {
|
3
3
|
&.error {
|
4
4
|
.checkbox {
|
5
|
-
border-color: var(--glide-core-color-
|
5
|
+
border-color: var(--glide-core-color-advisory-stroke-error-primary);
|
6
6
|
}
|
7
7
|
}
|
8
8
|
}
|
@@ -17,7 +17,7 @@ import{css}from"lit";export default[css`
|
|
17
17
|
inline-size: min-content;
|
18
18
|
|
19
19
|
&.invalid {
|
20
|
-
border: 1px solid var(--glide-core-color-
|
20
|
+
border: 1px solid var(--glide-core-color-advisory-stroke-error-primary);
|
21
21
|
border-radius: var(--glide-core-rounding-base-radius-sm);
|
22
22
|
padding: var(--glide-core-spacing-base-xxs) 0.375rem;
|
23
23
|
}
|
package/dist/checkbox.d.ts
CHANGED
@@ -18,7 +18,7 @@ declare global {
|
|
18
18
|
* @attr {boolean} [required=false]
|
19
19
|
* @attr {string} [summary]
|
20
20
|
* @attr {string} [tooltip]
|
21
|
-
* @attr {string} [value]
|
21
|
+
* @attr {string} [value='']
|
22
22
|
*
|
23
23
|
* @readonly
|
24
24
|
* @attr {string} [version]
|
@@ -58,6 +58,11 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
|
|
58
58
|
static formAssociated: boolean;
|
59
59
|
static shadowRootOptions: ShadowRootInit;
|
60
60
|
static styles: import("lit").CSSResult[];
|
61
|
+
/**
|
62
|
+
* @default undefined
|
63
|
+
*/
|
64
|
+
get label(): string | undefined;
|
65
|
+
set label(label: string | undefined);
|
61
66
|
/**
|
62
67
|
@default false
|
63
68
|
*/
|
@@ -71,11 +76,6 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
|
|
71
76
|
set disabled(isDisabled: boolean);
|
72
77
|
hideLabel: boolean;
|
73
78
|
indeterminate: boolean;
|
74
|
-
/**
|
75
|
-
* @default undefined
|
76
|
-
*/
|
77
|
-
get label(): string | undefined;
|
78
|
-
set label(label: string | undefined);
|
79
79
|
orientation: 'horizontal' | 'vertical';
|
80
80
|
name: string;
|
81
81
|
privateLabelTooltipOffset: number;
|
@@ -88,7 +88,7 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
|
|
88
88
|
summary?: string;
|
89
89
|
tooltip?: string;
|
90
90
|
/**
|
91
|
-
* @default
|
91
|
+
* @default ''
|
92
92
|
*/
|
93
93
|
get value(): string;
|
94
94
|
set value(value: string);
|
package/dist/checkbox.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get checked(){return this.#i}set checked(e){const t=e!==this.#i;this.#i=e,t&&this.dispatchEvent(new Event("private-checked-change",{bubbles:!0}))}get disabled(){return this.#s}set disabled(e){this.#s=e,this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get value(){return this.#a}set value(e){const t=this.#a;this.#a=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#r.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#l=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#l.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#n),this.#l?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.value),this.#r.validity):this.required&&this.#r.validity.valueMissing&&this.checked?(this.#r.setValidity({}),this.#r.validity):(this.required||!this.#r.validity.valueMissing||this.checked||this.#r.setValidity({}),this.#r.validity)}focus(e){this.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#n)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
|
2
2
|
${when("minimal"===this.privateVariant,(()=>html`
|
3
3
|
<label
|
4
4
|
class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
|
@@ -127,7 +127,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
|
|
127
127
|
>`))}
|
128
128
|
</div>
|
129
129
|
</glide-core-private-label>`))}
|
130
|
-
</div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#
|
130
|
+
</div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#i=!1,this.#s=!1,this.#p=createRef(),this.#a="",this.#n=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#o;#r;#l;#i;#s;#e;#p;#a;#n;get#d(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#b(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#h(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#p.value&&(this.isLabelOverflow=this.#p.value.scrollWidth>this.#p.value.clientWidth)}};__decorate([property({reflect:!0}),required],GlideCoreCheckbox.prototype,"label",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",null),__decorate([property({attribute:"private-internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,useDefault:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"version",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox"),final],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
|
131
131
|
<svg
|
132
132
|
aria-hidden="true"
|
133
133
|
style=${styleMap({height:"0.875rem",width:"0.875rem"})}
|
package/dist/checkbox.styles.js
CHANGED
@@ -64,7 +64,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
64
64
|
}
|
65
65
|
|
66
66
|
&.error:not(.disabled) {
|
67
|
-
border-color: var(--glide-core-color-
|
67
|
+
border-color: var(--glide-core-color-advisory-stroke-error-primary);
|
68
68
|
}
|
69
69
|
|
70
70
|
&:not(.disabled):hover {
|
package/dist/dropdown.d.ts
CHANGED
@@ -16,6 +16,7 @@ declare global {
|
|
16
16
|
* @attr {boolean} [disabled=false]
|
17
17
|
* @attr {boolean} [filterable=false]
|
18
18
|
* @attr {boolean} [hide-label=false]
|
19
|
+
* @attr {boolean} [loading=false]
|
19
20
|
* @attr {boolean} [multiple=false]
|
20
21
|
* @attr {string} [name='']
|
21
22
|
* @attr {boolean} [open=false]
|
@@ -75,6 +76,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
75
76
|
static formAssociated: boolean;
|
76
77
|
static shadowRootOptions: ShadowRootInit;
|
77
78
|
static styles: import("lit").CSSResult[];
|
79
|
+
label?: string;
|
78
80
|
addButtonLabel?: string;
|
79
81
|
/**
|
80
82
|
* @default false
|
@@ -87,7 +89,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
87
89
|
get filterable(): boolean;
|
88
90
|
set filterable(isFilterable: boolean);
|
89
91
|
hideLabel: boolean;
|
90
|
-
|
92
|
+
loading: boolean;
|
91
93
|
name: string;
|
92
94
|
/**
|
93
95
|
* @default false
|
package/dist/dropdown.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,s){var l
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(l<3?o(n):l>3?o(t,i,n):o(t,i))||n);return l>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{range}from"lit/directives/range.js";import{map}from"lit/directives/map.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import onResize from"./library/on-resize.js";import GlideCoreDropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import GlideCoreTag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.open&&e?this.#t():this.open&&this.#i()}get filterable(){return this.#s}set filterable(e){this.#s!==e&&e&&!this.multiple?this.#o.value&&this.selectedOptions[0]?.label&&(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.#s!==e&&this.#l(),this.#s=e}get open(){return this.#n}set open(e){const t=e!==this.#n;if(this.#n=e,e&&t&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(!this.open&&t){!this.multiple&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label):(!this.multiple&&this.#o.value&&0===this.selectedOptions.length||this.multiple&&this.#o.value)&&(this.#o.value.value="",this.inputValue=""),this.isFiltering=!1,this.isNoResults=!1,this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value);for(const e of this.#a)e.hidden=!1;this.#t(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}}get multiple(){return this.#r}set multiple(e){const t=this.#r&&!e,i=!this.#r&&e;this.#r=e,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#o.value&&(this.#o.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#d())}get size(){return this.#p}set size(e){if(this.#p=e,this.#h)for(const t of this.#h)t.privateSize=e}get value(){return this.#c}set value(e){if(this.#c=e,!this.multiple&&e.length>1)throw new Error("Only one value is allowed when not `multiple`.");for(const t of this.#a)this.#u=!0,t.selected=e.some((e=>e&&e===t.value)),this.#u=!1,t.selected&&t.disabled&&(t.disabled=!1);!this.multiple&&0===this.value.length&&this.#o.value&&(this.#o.value.value="")}get activeOption(){return this.#h?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#v.checkValidity();return this.isCheckingValidity=!1,e}click(){this.filterable||this.isFilterable?(this.#o.value?.click(),this.#o.value?.select()):this.#m.value?.click()}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected&&!e.disabled))}get lastSelectedOption(){return this.#a.findLast((e=>e.selected))}get isAllSelected(){return this.#a.length>0&&this.#a.filter((({selected:e})=>e)).length===this.#a.filter((({disabled:e})=>!e)).length}get isSomeSelected(){return this.#a.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#f,{capture:!0})}createRenderRoot(){return this.#g=super.createRenderRoot(),this.#g}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#b),document.removeEventListener("click",this.#f,{capture:!0})}async filter(e){return this.#a.filter((({label:t})=>t?.toLowerCase().includes(e.toLowerCase().trim())))}firstUpdated(){this.#O.value&&(this.#O.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedOption&&this.#o.value&&this.lastSelectedOption.label&&(this.#o.value.value=this.lastSelectedOption.label);if(this.#a.every((({selected:e})=>!e)))for(const e of this.#a)e.selected=this.value.some((t=>""!==t&&t===e.value)),e.selected&&e.disabled&&(e.disabled=!1)}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#m.value?.focus(e)}get form(){return this.#v.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#v.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value),this.#v.validity):this.required&&this.#v.validity.valueMissing&&this.selectedOptions.length>0?(this.#v.setValidity({}),this.#v.validity):this.#v.validity}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#b)}formResetCallback(){for(const e of this.#a){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#a.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#c=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div
|
2
2
|
class=${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}
|
3
3
|
@mouseup=${this.#E}
|
4
|
-
${onResize(this.#
|
4
|
+
${onResize(this.#d.bind(this))}
|
5
5
|
${ref(this.#y)}
|
6
6
|
>
|
7
7
|
<glide-core-private-label
|
@@ -40,10 +40,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
40
40
|
class="tags"
|
41
41
|
${ref(this.#I)}
|
42
42
|
>
|
43
|
-
${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,editable:t,label:i,value:s},
|
44
|
-
class=${classMap({"tag-container":!0,hidden:
|
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})}
|
45
45
|
data-test="tag-container"
|
46
|
-
data-test-hidden=${
|
46
|
+
data-test-hidden=${o>this.tagOverflowLimit-1}
|
47
47
|
>
|
48
48
|
<glide-core-tag
|
49
49
|
data-test="tag"
|
@@ -102,7 +102,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
102
102
|
aria-controls="options"
|
103
103
|
aria-describedby="description"
|
104
104
|
aria-expanded=${this.open&&!this.disabled}
|
105
|
-
aria-labelledby="selected-option-labels label ${this.isCommunicateItemCountToScreenreaders?"item-count":""}"
|
105
|
+
aria-labelledby="selected-option-labels label loading-feedback ${this.isCommunicateItemCountToScreenreaders?"item-count":""}"
|
106
106
|
autocapitalize="off"
|
107
107
|
autocomplete="off"
|
108
108
|
class=${classMap({input:!0,quiet:"quiet"===this.variant})}
|
@@ -119,7 +119,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
119
119
|
@input=${this.#G}
|
120
120
|
@keydown=${this.#B}
|
121
121
|
${onResize(this.#V.bind(this))}
|
122
|
-
${ref(this.#
|
122
|
+
${ref(this.#o)}
|
123
123
|
/>
|
124
124
|
|
125
125
|
${when(!this.multiple&&this.isInputOverflow&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span aria-hidden="true" data-test="ellipsis">
|
@@ -194,7 +194,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
194
194
|
aria-expanded=${this.open&&!this.disabled}
|
195
195
|
aria-haspopup="listbox"
|
196
196
|
aria-hidden=${this.filterable||this.isFilterable}
|
197
|
-
aria-labelledby="selected-option-labels label"
|
197
|
+
aria-labelledby="selected-option-labels label loading-feedback"
|
198
198
|
class="primary-button"
|
199
199
|
data-test="primary-button"
|
200
200
|
id="primary-button"
|
@@ -213,13 +213,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
213
213
|
</div>
|
214
214
|
|
215
215
|
<div
|
216
|
-
|
217
|
-
class="options-and-footer"
|
216
|
+
class=${classMap({"options-and-footer":!0,"no-results":this.isNoResults&&!this.loading})}
|
218
217
|
${ref(this.#O)}
|
219
218
|
>
|
220
219
|
<div
|
221
|
-
aria-labelledby=${this.filterable||this.isFilterable?"input":"button"}
|
222
|
-
class=${classMap({options:!0,hidden:this.isNoResults,[this.size]:!0})}
|
220
|
+
aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
|
221
|
+
class=${classMap({options:!0,hidden:this.isNoResults||this.loading,[this.size]:!0})}
|
223
222
|
data-test="options"
|
224
223
|
id="options"
|
225
224
|
role="listbox"
|
@@ -259,7 +258,15 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
259
258
|
</slot>
|
260
259
|
</div>
|
261
260
|
|
262
|
-
${when(this.
|
261
|
+
${when(this.loading,(()=>html`<div
|
262
|
+
aria-label=${this.#M.term("loading")}
|
263
|
+
class="loading-feedback"
|
264
|
+
data-test="loading-feedback"
|
265
|
+
id="loading-feedback"
|
266
|
+
>
|
267
|
+
${map(range(7),(()=>html`<div></div>`))}
|
268
|
+
</div>`))}
|
269
|
+
${when(this.isNoResults&&!this.loading,(()=>html`<div data-test="no-results">
|
263
270
|
${this.#M.term("noResults")}
|
264
271
|
</div>`))}
|
265
272
|
|
@@ -270,8 +277,8 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
270
277
|
class=${classMap({"add-button":!0,[this.size]:!0})}
|
271
278
|
data-test="add-button"
|
272
279
|
type="button"
|
273
|
-
@click=${this.#
|
274
|
-
@focusin=${this.#
|
280
|
+
@click=${this.#oe}
|
281
|
+
@focusin=${this.#le}
|
275
282
|
@mouseover=${this.#ne}
|
276
283
|
${ref(this.#ae)}
|
277
284
|
>
|
@@ -297,7 +304,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
|
|
297
304
|
>`))}
|
298
305
|
</div>
|
299
306
|
</glide-core-private-label>
|
300
|
-
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#v.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#v.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#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.#ae=createRef(),this.#y=createRef(),this.#se=createRef(),this.#D=createRef(),this.#q=createRef(),this.#l=createRef(),this.#N=createRef(),this.#re=!1,this.#e=!1,this.#pe=!1,this.#s=!1,this.#r=!1,this.#n=!1,this.#de=!1,this.#he=!1,this.#ce=!1,this.#ue=!1,this.#u=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#m=createRef(),this.#te=createRef(),this.#d="large",this.#I=createRef(),this.#c=[],this.#f=()=>{this.#re?setTimeout((()=>{this.#re=!1})):this.open=!1},this.#b=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#v=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#ae;#ve;#y;#se;#D;#q;#l;#N;#v;#re;#e;#pe;#s;#r;#n;#de;#he;#ce;#ue;#u;#M;#O;#me;#m;#te;#g;#d;#I;#c;#f;#b;#t(){this.#ve?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#me=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#w(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#le(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#oe(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#me=this.activeOption,this.activeOption.privateActive=!1)}#ne(){this.activeOption&&!this.#de&&(this.#me=this.activeOption,this.activeOption.privateActive=!1)}#E(){this.#re=!0}async#ie(){this.isFilterable=this.#a.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#fe?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#me=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#me=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#te.value&&(this.#te.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value)&&!e.disabled)).map((({value:e})=>e)):this.lastSelectedOption?.value&&!this.lastSelectedOption.disabled&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),await this.updateComplete,!this.multiple&&this.#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.#me&&e.relatedTarget===this.#ae.value&&(this.#me.privateActive=!0,this.#me.privateIsTooltipOpen=!this.#me.editable)}#A(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#pe&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#C(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#q.value)return void(this.#re=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#ae.value)return this.focus(),void(this.#me&&(this.#me.privateActive=!0,this.#me.privateIsEditActive=this.#me.editable,this.#me.privateIsTooltipOpen=!this.#me.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#ae.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ge?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#me=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ae.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#ae.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#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.#ge&&this.#ge.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#ue=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#te.value&&this.#be(),this.#ue=!1,this.#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.#fe?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#fe&&"number"==typeof t){e.preventDefault();const i=this.#fe.findLast(((e,i)=>!e.disabled&&i<t));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#me=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#fe&&"number"==typeof t){e.preventDefault();const i=this.#fe.find(((e,i)=>!e.disabled&&i>t));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#me=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#fe){e.preventDefault();const t=[...this.#fe].reverse().findLast((e=>!e.disabled));return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#me=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#fe){e.preventDefault();const t=[...this.#fe].findLast((e=>!e.disabled));return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#me=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#S(e){if(this.disabled||this.readonly)return;if(this.#pe)return void(this.#pe=!1);if(e.target instanceof Node&&this.#q.value?.contains(e.target))return void this.selectedOptions[0]?.privateEdit();const t=this.filterable||this.isFilterable;if(this.#ue||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#de=!0,void setTimeout((()=>{this.#de=!1}))):void 0;this.open=!1}#$(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#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#G(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.#ge?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#me=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ge||0===this.#ge.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ge&&(this.itemCount=this.#ge.length)}}#B(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#l.value&&0===this.#l.value.selectionStart)return this.#pe=!0,t.selected=!1,void(this.#pe=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#l.value&&0===this.#l.value.selectionStart){this.#pe=!0;for(const e of i)e.selected=!1;this.#pe=!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.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#h(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#te.value)return[this.#te.value,...e]}get#ge(){return this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#fe(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#te.value&&!this.#te.value.hidden&&e?[this.#te.value,...e]:e}#U(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#te.value&&this.#be(),this.#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(e){if(e.target instanceof GlideCoreDropdownOption&&e.target.disabled&&e.target.selected){const t=this.#c.lastIndexOf(e.target.value);this.#c.splice(t,t+1)}else this.multiple&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value?this.#c.push(e.target.value):e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value&&e.target===this.lastSelectedOption&&(this.#c=[e.target.value]);this.requestUpdate()}#X(){this.requestUpdate()}#W(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#me=e.target)}#Y(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))):(this.filterable||this.isFilterable)&&this.#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.#fe){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#me=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#ae.value&&this.focus()}}#Z(e){if(!this.multiple)for(const t of this.#a)t!==e.target&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&t.selected&&e.target!==this.#te.value&&(t.selected=!1);e.target!==this.#te.value&&!this.#ce&&this.#te.value&&(this.#te.value.selected=this.isAllSelected),this.isShowSingleSelectIcon=!this.multiple&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple&&!this.#u?(this.#c=e.target.selected&&e.target.value&&!e.target.disabled?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#l.value&&!this.#pe&&(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()}))}#ee(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}#x(){this.isInternalLabelTooltipOpen=!0}#H(){this.isInternalLabelTooltipOpen=!1}#k(){this.#pe=!0,this.open=!1}async#F(e){this.#pe=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#I.value?.querySelectorAll("glide-core-tag");if(t&&this.selectedOptions.length>0){const i=[...t].findIndex((t=>t.dataset.id===e)),s=t[i<t.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#pe=!1}))}else setTimeout((()=>{this.focus(),this.#pe=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#T(e){e.stopPropagation()}#be(){this.#ce=!0;for(const e of this.#a)!this.#te.value?.selected||e.selected||e.disabled?!this.#te.value?.selected&&e.selected&&(e.selected=!1):e.selected=!0;this.#ce=!1}async#p(){if(this.#y.value){const e=this.#y.value.scrollWidth>this.#y.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#p()):!e&&!this.#he&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#he=!0,await this.updateComplete,this.#p()):this.#he=!1}}#i(){this.#a.length>0&&(this.#ve?.(),this.#me&&(this.#me.privateActive=!0,this.ariaActivedescendant=this.#me.id),this.#D.value&&this.#O.value&&(this.#ve=autoUpdate(this.#D.value,this.#O.value,(()=>{(async()=>{if(this.#D.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#D.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#O.value.dataset.placement=i,Object.assign(this.#O.value.style,{left:`${e}px`,top:`${t}px`}),this.#O.value?.showPopover()}})()}))))}#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`
|
307
|
+
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#v.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#v.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#m.value):this.#v.setValidity({customError:!0,valueMissing:this.#v.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}setValidity(e,t){this.validityMessage=t,this.#v.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}constructor(){super(),this.hideLabel=!1,this.loading=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.inputValue="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflow=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflow=!1,this.isInternalLabelTooltipOpen=!1,this.isNoResults=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#ae=createRef(),this.#y=createRef(),this.#se=createRef(),this.#D=createRef(),this.#q=createRef(),this.#o=createRef(),this.#N=createRef(),this.#re=!1,this.#e=!1,this.#de=!1,this.#s=!1,this.#pe=!0,this.#r=!1,this.#n=!1,this.#he=!1,this.#ce=!1,this.#u=!1,this.#ue=!1,this.#ve=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#m=createRef(),this.#te=createRef(),this.#p="large",this.#I=createRef(),this.#c=[],this.#f=()=>{this.#re?setTimeout((()=>{this.#re=!1})):this.open=!1},this.#b=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#v=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#ae;#me;#y;#se;#D;#q;#o;#N;#v;#re;#e;#de;#s;#pe;#r;#n;#he;#ce;#u;#ue;#ve;#M;#O;#fe;#m;#te;#g;#p;#I;#c;#f;#b;#t(){this.#me?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#fe=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#w(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#oe(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#le(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#fe=this.activeOption,this.activeOption.privateActive=!1)}#ne(){this.activeOption&&!this.#he&&(this.#fe=this.activeOption,this.activeOption.privateActive=!1)}#E(){this.#re=!0}async#ie(){this.#pe&&(this.isFilterable=this.#a.length>10,this.#pe=!1),this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#ge?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#fe=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#fe=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#te.value&&(this.#u=!0,this.#te.value.selected=this.isAllSelected,this.#u=!1),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value)&&!e.disabled)).map((({value:e})=>e)):this.lastSelectedOption?.value&&!this.lastSelectedOption.disabled&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),await this.updateComplete,!this.multiple&&this.#o.value&&this.lastSelectedOption?.label?(this.#o.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.multiple||!this.#o.value||this.isFiltering||(this.#o.value.value="",this.inputValue="",this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}#R(e){this.open&&this.#fe&&e.relatedTarget===this.#ae.value&&(this.#fe.privateActive=!0,this.#fe.privateIsTooltipOpen=!this.#fe.editable)}#A(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#de&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#C(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#q.value)return void(this.#re=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#ae.value)return this.focus(),void(this.#fe&&(this.#fe.privateActive=!0,this.#fe.privateIsEditActive=this.#fe.editable,this.#fe.privateIsTooltipOpen=!this.#fe.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#ae.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#be?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#fe=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ae.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#ae.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key))return e.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.activeOption.privateIsEditActive)return this.activeOption.privateEdit(),void(this.open=!1);if("Enter"===e.key&&this.#be&&this.#be.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#ve=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#te.value&&this.#Oe(),this.#ve=!1,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const t=this.#ge?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#ge&&"number"==typeof t){e.preventDefault();const i=this.#ge.findLast(((e,i)=>!e.disabled&&i<t));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#fe=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#ge&&"number"==typeof t){e.preventDefault();const i=this.#ge.find(((e,i)=>!e.disabled&&i>t));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#fe=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#ge){e.preventDefault();const t=[...this.#ge].reverse().findLast((e=>!e.disabled));return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#fe=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#ge){e.preventDefault();const t=[...this.#ge].findLast((e=>!e.disabled));return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#fe=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#S(e){if(this.disabled||this.readonly)return;if(this.#de)return void(this.#de=!1);if(e.target instanceof Node&&this.#q.value?.contains(e.target))return void this.selectedOptions[0]?.privateEdit();const t=this.filterable||this.isFilterable;if(this.#ve||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#he=!0,void setTimeout((()=>{this.#he=!1}))):void 0;this.open=!1}#$(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#o.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#j(){this.open=!1}#_(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#L(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#G(e){let t;if(e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.#o.value?.value&&(this.inputValue=this.#o.value.value),this.multiple&&""!==this.#o.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#o.value?.value&&this.#o.value?.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.#o.value)try{t=await this.filter(this.#o.value.value)}catch{}if(t){for(const e of this.#a)e.hidden=!t.includes(e);const e=this.#be?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#fe=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#be||0===this.#be.length,this.isCommunicateItemCountToScreenreaders=!0,this.#be&&(this.itemCount=this.#be.length)}}#B(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#de=!0,t.selected=!1,void(this.#de=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart){this.#de=!0;for(const e of i)e.selected=!1;this.#de=!1}else;}#V(){this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth-1>this.#o.value.clientWidth)}#z(){this.#N.value&&(this.isInternalLabelOverflow=this.#N.value.scrollWidth>this.#N.value.clientWidth)}get#a(){return this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#h(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#te.value)return[this.#te.value,...e]}get#be(){return this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#ge(){const e=this.#se.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#te.value&&!this.#te.value.hidden&&e?[this.#te.value,...e]:e}#U(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#te.value&&this.#Oe(),this.#l()}#P(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");if(t instanceof GlideCoreDropdownOption&&t.disabled)return;if(t instanceof GlideCoreDropdownOption&&t.privateIsEditActive)return t.privateEdit(),void(this.open=!1);if(t&&!t.selected)return t.selected=!0,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#Q(e){if(e.target instanceof GlideCoreDropdownOption&&e.target.disabled&&e.target.selected){const t=this.#c.lastIndexOf(e.target.value);this.#c.splice(t,t+1)}else this.multiple&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value?this.#c.push(e.target.value):e.target instanceof GlideCoreDropdownOption&&e.target.selected&&e.target.value&&e.target===this.lastSelectedOption&&(this.#c=[e.target.value]);this.requestUpdate()}#X(){this.requestUpdate()}#W(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#fe=e.target)}#Y(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#d()}))):(this.filterable||this.isFilterable)&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.requestUpdate())}#K(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#J(e){if(e.target instanceof GlideCoreDropdownOption&&this.#ge){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#fe=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#ae.value&&this.focus()}}#Z(e){if(!this.multiple)for(const t of this.#a)t!==e.target&&e.target instanceof GlideCoreDropdownOption&&e.target.selected&&t.selected&&e.target!==this.#te.value&&(t.selected=!1);e.target!==this.#te.value&&!this.#ue&&this.#te.value&&(this.#te.value.selected=this.isAllSelected),this.isShowSingleSelectIcon=!this.multiple&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple&&!this.#u?(this.#c=e.target.selected&&e.target.value&&!e.target.disabled?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#o.value&&!this.#de&&(this.isFiltering=!1,this.#o.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&e.target.label&&(this.isFiltering=!1,this.#o.value.value=e.target.label,this.inputValue=e.target.label))),this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#d()}))}#ee(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}#x(){this.isInternalLabelTooltipOpen=!0}#H(){this.isInternalLabelTooltipOpen=!1}#k(){this.#de=!0,this.open=!1}async#F(e){this.#de=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#I.value?.querySelectorAll("glide-core-tag");if(t&&this.selectedOptions.length>0){const i=[...t].findIndex((t=>t.dataset.id===e)),s=t[i<t.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#de=!1}))}else setTimeout((()=>{this.focus(),this.#de=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#T(e){e.stopPropagation()}#Oe(){this.#ue=!0;for(const e of this.#a)!this.#te.value?.selected||e.selected||e.disabled?!this.#te.value?.selected&&e.selected&&(e.selected=!1):e.selected=!0;this.#ue=!1}async#d(){if(this.#y.value){const e=this.#y.value.scrollWidth>this.#y.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#d()):!e&&!this.#ce&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ce=!0,await this.updateComplete,this.#d()):this.#ce=!1}}#i(){this.#a.length>0&&(this.#me?.(),this.#fe&&(this.#fe.privateActive=!0,this.ariaActivedescendant=this.#fe.id),this.#D.value&&this.#O.value&&(this.#me=autoUpdate(this.#D.value,this.#O.value,(()=>{(async()=>{if(this.#D.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#D.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#O.value.dataset.placement=i,Object.assign(this.#O.value.style,{left:`${e}px`,top:`${t}px`}),this.#O.value?.showPopover()}})()}))))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({reflect:!0}),required],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"loading",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"version",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"inputValue",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isNoResults",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],GlideCoreDropdown.prototype,"itemCount",void 0),__decorate([state()],GlideCoreDropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"validityMessage",void 0),GlideCoreDropdown=__decorate([customElement("glide-core-dropdown"),final],GlideCoreDropdown);export default GlideCoreDropdown;const icons={plus:html`
|
301
308
|
<svg
|
302
309
|
aria-hidden="true"
|
303
310
|
viewBox="0 0 16 16"
|
@@ -11,7 +11,18 @@ declare global {
|
|
11
11
|
* @attr {number} [count]
|
12
12
|
* @attr {boolean} [disabled=false]
|
13
13
|
* @attr {boolean} [editable=false]
|
14
|
+
*
|
15
|
+
* @readonly
|
16
|
+
* @attr {string} [id]
|
17
|
+
*
|
18
|
+
* @readonly
|
19
|
+
* @attr {string} [role='option']
|
20
|
+
*
|
14
21
|
* @attr {boolean} [selected=false]
|
22
|
+
*
|
23
|
+
* @readonly
|
24
|
+
* @attr {number} [tabindex=-1]
|
25
|
+
*
|
15
26
|
* @attr {string} [value='']
|
16
27
|
*
|
17
28
|
* @readonly
|
@@ -25,6 +36,11 @@ export default class GlideCoreDropdownOption extends LitElement {
|
|
25
36
|
#private;
|
26
37
|
static shadowRootOptions: ShadowRootInit;
|
27
38
|
static styles: import("lit").CSSResult[];
|
39
|
+
/**
|
40
|
+
* @default undefined
|
41
|
+
*/
|
42
|
+
get label(): string | undefined;
|
43
|
+
set label(label: string | undefined);
|
28
44
|
count?: number;
|
29
45
|
/**
|
30
46
|
* @default false
|
@@ -36,22 +52,20 @@ export default class GlideCoreDropdownOption extends LitElement {
|
|
36
52
|
*/
|
37
53
|
get editable(): boolean;
|
38
54
|
set editable(isEditable: boolean);
|
39
|
-
|
40
|
-
|
41
|
-
*/
|
42
|
-
get label(): string | undefined;
|
43
|
-
set label(label: string | undefined);
|
55
|
+
readonly id: string;
|
56
|
+
privateActive: boolean;
|
44
57
|
privateIndeterminate: boolean;
|
45
58
|
privateIsEditActive: boolean;
|
59
|
+
privateIsTooltipOpen: boolean;
|
46
60
|
privateMultiple: boolean;
|
61
|
+
privateSize: 'large' | 'small';
|
62
|
+
readonly role = "option";
|
47
63
|
/**
|
48
64
|
* @default false
|
49
65
|
*/
|
50
66
|
get selected(): boolean;
|
51
67
|
set selected(isSelected: boolean);
|
52
|
-
|
53
|
-
privateActive: boolean;
|
54
|
-
privateIsTooltipOpen: boolean;
|
68
|
+
readonly tabIndex = -1;
|
55
69
|
readonly version: string;
|
56
70
|
private get isMultiple();
|
57
71
|
private get lastSelectedOption();
|