@crowdstrike/glide-core 0.9.4 → 0.9.5

package/dist/dropdown.js

@@ -1 +1 @@
-var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";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{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}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 open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#i():!this.multiple&&this.#o.value&&this.selectedOptions.length>0?(this.#o.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.#t()):this.#t()}get size(){return this.#s}set size(e){if(this.#s=e,this.#n)for(const t of this.#n)t.privateSize=e}get multiple(){return this.#a}set multiple(e){const t=this.#a&&!e,i=!this.#a&&e;this.#a=e;for(const i of this.#r)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#d=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#d}set value(e){this.#d=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#r)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#n?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#p.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?(this.#o.value.click(),this.#o.value.select()):this.#h.value?.click()}get selectedOptions(){return this.#r.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#r.findLast((e=>e.selected))}get isAllSelected(){return this.#r.filter((({selected:e})=>e)).length===this.#r.length}get isSomeSelected(){return this.#r.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:html`<span class="${classMap({placeholder:!0,disabled:this.disabled,quiet:"quiet"===this.variant})}">${this.placeholder}</span>`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#u=super.createRenderRoot(),this.#u}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#f),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.#v.value&&(this.#v.value.popover="manual"),this.open&&!this.disabled&&this.#i()}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#h.value?.focus(e)}get form(){return this.#p.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#p.setValidity({valueMissing:!0}," ",this.#o.value):this.#p.setValidity({}),this.#p.validity}get willValidate(){return this.#p.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#f)}formResetCallback(){for(const e of this.#r){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#r.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#d=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}" @blur="${this.#g}"><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#b}" ?hide="${this.hideLabel}" ?required="${this.required}" @blur="${this.#g}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#w}" @keydown="${this.#E}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#b,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#y}" @mousedown="${this.#O}" ${ref(this.#R)}><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#A)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#S-1})}" data-test="tag-container" data-test-hidden="${i>this.#S-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#C.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.filterable||this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="input" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#D}" @keydown="${this.#$}" ${ref(this.#o)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))}<div class="tag-overflow-text-and-button">${when(this.selectedOptions.length>this.#S,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#S} </span>more</div>`))} <button aria-expanded="${this.open}" aria-haspopup="listbox" aria-hidden="${this.filterable||this.isFilterable}" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.filterable||this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>html`<svg aria-label="${this.#k.term("open")}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div></div><div aria-labelledby="${this.filterable||this.isFilterable?"input":"button"}" class="${classMap({options:!0,hidden:this.isOptionsHidden})}" data-test="options" id="options" role="listbox" @click="${this.#G}" @input="${this.#_}" @focusin="${this.#F}" @mousedown="${this.#I}" @mouseover="${this.#V}" @private-selected-change="${this.#L}" @private-value-change="${this.#x}" ${ref(this.#v)}><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#k.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" ?private-indeterminate="${this.isSomeSelected&&!this.isAllSelected}" ${ref(this.#N)}></glide-core-dropdown-option><slot @slotchange="${this.#j}" ${ref(this.#m)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#p.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.filterable=!1,this.hideLabel=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isFilterable=!1,this.isFiltering=!1,this.isOptionsHidden=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#m=createRef(),this.#R=createRef(),this.#o=createRef(),this.#e=!1,this.#a=!1,this.#l=!1,this.#H=!1,this.#M=!1,this.#z=!1,this.#k=new LocalizeController(this),this.#v=createRef(),this.#N=createRef(),this.#s="large",this.#S=3,this.#A=createRef(),this.#d=[],this.#c=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?this.open=!1:this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1)},this.#f=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#p=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#h;#B;#m;#R;#o;#p;#e;#a;#l;#H;#M;#z;#k;#v;#N;#u;#s;#S;#A;#d;#c;#f;#T(){if(this.#n)for(const e of this.#n)e.privateActive=!1}#t(){this.#B?.(),this.#v.value?.hidePopover(),this.ariaActivedescendant=""}get#r(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#n(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#N.value)return[this.#N.value,...e]}get#U(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#q(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#N.value&&!this.#N.value.hidden&&e?[this.#N.value,...e]:e}get#b(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#g(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#j(){if(owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#r.length>10,this.#n)for(const e of this.#n)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#q?.at(0);this.lastSelectedOption?(this.#T(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#T(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#N.value&&(this.#N.value.selected=this.isAllSelected),this.multiple?this.#d=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&this.#o.value?(this.#d=[this.lastSelectedOption.value],this.#o.value.value=this.lastSelectedOption.label):this.lastSelectedOption?.value&&(this.#d=[this.lastSelectedOption.value]),this.requestUpdate()}#w(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#u?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#H&&(this.open=!1),this.#g()}#E(e){if(this.disabled||this.readonly)return;if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#h.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),void(this.open=!0);if(this.activeOption&&this.open){if(("Enter"===e.key||" "===e.key)&&(this.#z=!0,"Enter"===e.key||" "===e.key&&!this.filterable&&!this.isFilterable))return e.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#N.value&&this.#P(),this.#K(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));const t=this.#q?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t-1);return void(i&&0!==t&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t+1);return void(i&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(0);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView({block:"end"}),this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(-1);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id))}}}}#y(e){this.disabled||this.readonly||(this.#H?this.#H=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#z&&this.open?this.open=!1:0!==e.detail&&(this.open=!0,this.#o.value?.select()))}#O(e){const t=this.filterable||this.isFilterable;e.target instanceof GlideCoreTag||!t?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#D(e){if(ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.activeOption){this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#o.value.value.trim();for(const e of this.#r)e.hidden=!e.label?.toLowerCase().includes(this.#o.value?.value.toLowerCase().trim());const e=this.#U?.at(0);e&&this.activeOption?.hidden&&(this.#T(),e.privateActive=!0),this.open=!0,this.isOptionsHidden=!this.#U||0===this.#U.length}}#$(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#S-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return void(t.selected=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.#S-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)for(const e of i)e.selected=!1;else;}#G(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");t instanceof GlideCoreDropdownOption&&!t.selected&&(t.selected=!0,this.#K(),this.multiple||this.#t(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}}#F(e){e.target instanceof GlideCoreDropdownOption&&(this.#T(),e.target.privateActive=!0)}#_(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#N.value&&this.#P(),this.#K(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#I(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#V(e){if(e.target instanceof GlideCoreDropdownOption&&this.#q){this.#T(),e.target.privateActive=!0;for(const e of this.#q)e.privateActive&&(this.ariaActivedescendant=e.id)}}#L(e){e.target!==this.#N.value&&!this.#M&&this.#N.value&&(this.#N.value.selected=this.isAllSelected),e.target instanceof GlideCoreDropdownOption&&(this.multiple?this.#d=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)):!this.multiple&&e.target.selected&&(this.#d=e.target.value?[e.target.value]:[],this.#o.value&&(this.#o.value.value=e.target.label))),this.requestUpdate()}#x(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#d=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#d=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#d=e.target.value?[e.target.value]:[])}async#C(e){this.#H=!0;for(const t of this.#r)t.id===e&&(t.selected=!1,this.#d=this.value.filter((e=>e!==t.value)));const t=this.#A.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus();this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#P(){ow(this.#N.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#M=!0;for(const e of this.#r)e.selected=this.#N.value.selected;this.#M=!1}#i(){this.#B?.(),this.#R.value&&this.#v.value&&(this.#B=autoUpdate(this.#R.value,this.#v.value,(()=>{(async()=>{if(this.#R.value&&this.#v.value){const{x:e,y:t,placement:i}=await computePosition(this.#R.value,this.#v.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#v.value.dataset.placement=i,Object.assign(this.#v.value.style,{left:`${e}px`,top:`${t}px`}),this.#v.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#K(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#r)e.hidden=!1}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],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})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isOptionsHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;
+var _a,GlideCoreDropdown_1,__decorate=this&&this.__decorate||function(e,t,i,l){var o,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,i):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,l);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(s<3?o(n):s>3?o(t,i,n):o(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";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{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{GlideCoreDropdown_1=this}static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}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 open(){return this.#l}set open(e){this.#l=e,e&&!this.disabled?this.#i():!this.multiple&&this.#o.value&&this.selectedOptions.length>0?(this.#o.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.#t()):this.#t()}get size(){return this.#s}set size(e){if(this.#s=e,this.#n)for(const t of this.#n)t.privateSize=e}get multiple(){return this.#a}set multiple(e){const t=this.#a&&!e,i=!this.#a&&e;this.#a=e;for(const i of this.#r)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.#d=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&this.lastSelectedOption.privateUpdateCheckbox()}get value(){return this.#d}set value(e){this.#d=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`."));for(const t of this.#r)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#n?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#p.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?(this.#o.value.click(),this.#o.value.select()):this.#h.value?.click()}get selectedOptions(){return this.#r.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#r.findLast((e=>e.selected))}get isAllSelected(){return this.#r.filter((({selected:e})=>e)).length===this.#r.length}get isSomeSelected(){return this.#r.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:html`<span class="${classMap({placeholder:!0,disabled:this.disabled,quiet:"quiet"===this.variant})}">${this.placeholder}</span>`}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#c,{capture:!0})}createRenderRoot(){return this.#u=super.createRenderRoot(),this.#u}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#f),document.removeEventListener("click",this.#c,{capture:!0})}firstUpdated(){owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.#v.value&&(this.#v.value.popover="manual"),this.open&&!this.disabled&&this.#i()}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#h.value?.focus(e)}get form(){return this.#p.form}get validity(){return this.required&&0===this.selectedOptions.length?this.#p.setValidity({valueMissing:!0}," ",this.#o.value):this.#p.setValidity({}),this.#p.validity}get willValidate(){return this.#p.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#f)}formResetCallback(){for(const e of this.#r){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#r.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#d=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}" @blur="${this.#g}"><glide-core-private-label split="${ifDefined(this.privateSplit??void 0)}" orientation="${this.orientation}" ?disabled="${this.disabled}" ?error="${this.#b}" ?hide="${this.hideLabel}" ?required="${this.required}" @blur="${this.#g}"><label id="label">${this.label}</label><slot name="tooltip" slot="tooltip"></slot><div class="dropdown-and-options" slot="control" @focusout="${this.#w}" @keydown="${this.#E}"><div class="${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#b,readonly:this.readonly,multiple:this.multiple})}" @click="${this.#y}" @mousedown="${this.#O}" ${ref(this.#R)}><span class="selected-option-labels" id="selected-option-labels">${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">${e},</span>`))} </span>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul aria-describedby="tag-overflow-text" class="tags" ${ref(this.#A)}>${when(this.multiple&&this.selectedOptions.length>0,(()=>html`${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,label:t},i)=>html`<li class="${classMap({"tag-container":!0,hidden:i>this.#C-1})}" data-test="tag-container" data-test-hidden="${i>this.#C-1}"><glide-core-tag data-test="tag" data-id="${e}" removable-label="${t??""}" @remove="${this.#S.bind(this,e)}">${t}</glide-core-tag></li>`))}`))}</ul>`))} ${when(this.filterable||this.isFilterable,(()=>html`<input aria-activedescendant="${this.ariaActivedescendant}" aria-controls="options" aria-describedby="description" aria-expanded="${this.open}" aria-labelledby="selected-option-labels label" autocapitalize="off" autocomplete="off" class="input" data-test="input" id="input" placeholder="${this.multiple||!this.selectedOptions.at(-1)?.label?this.placeholder??"":""}" role="combobox" spellcheck="false" tabindex="${this.disabled?"-1":"0"}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" @input="${this.#D}" @keydown="${this.#$}" ${ref(this.#o)}>`))} ${when(this.internalLabel,(()=>html`<div data-test="internal-label">${this.internalLabel}</div>`))}<div class="tag-overflow-text-and-button">${when(this.selectedOptions.length>this.#C,(()=>html`<div aria-hidden="true" class="tag-overflow-text" id="tag-overflow-text" data-test="tag-overflow-text">+ <span data-test="tag-overflow-count">${this.selectedOptions.length-this.#C} </span>more</div>`))} <button aria-expanded="${this.open}" aria-haspopup="listbox" aria-hidden="${this.filterable||this.isFilterable}" aria-labelledby="selected-option-labels label" aria-describedby="description" aria-controls="options" class="button" data-test="button" id="button" tabindex="${this.filterable||this.isFilterable||this.disabled?"-1":"0"}" type="button" ${ref(this.#h)}>${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">${magnifyingGlassIcon}</div>`),(()=>html`<svg aria-label="${this.#k.term("open")}" width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`))}</button></div></div><div aria-labelledby="${this.filterable||this.isFilterable?"input":"button"}" class="${classMap({options:!0,hidden:this.isOptionsHidden})}" data-test="options" id="options" role="listbox" @click="${this.#G}" @input="${this.#_}" @focusin="${this.#F}" @mousedown="${this.#I}" @mouseover="${this.#V}" @private-selected-change="${this.#L}" @private-value-change="${this.#x}" ${ref(this.#v)}><glide-core-dropdown-option class="select-all" data-test="select-all" label="${this.#k.term("selectAll")}" ?hidden="${!this.selectAll||!this.multiple||this.isFiltering}" ?private-indeterminate="${this.isSomeSelected&&!this.isAllSelected}" ${ref(this.#N)}></glide-core-dropdown-option><slot @slotchange="${this.#j}" ${ref(this.#m)}></slot></div></div><slot id="description" name="description" slot="description"></slot></glide-core-private-label></div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#p.reportValidity();return this.requestUpdate(),e}constructor(){super(),this.filterable=!1,this.hideLabel=!1,this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isFilterable=!1,this.isFiltering=!1,this.isOptionsHidden=!1,this.isReportValidityOrSubmit=!1,this.#h=createRef(),this.#m=createRef(),this.#R=createRef(),this.#o=createRef(),this.#e=!1,this.#a=!1,this.#l=!1,this.#H=!1,this.#M=!1,this.#z=!1,this.#k=new LocalizeController(this),this.#v=createRef(),this.#N=createRef(),this.#s="large",this.#C=3,this.#A=createRef(),this.#d=[],this.#c=e=>{this.multiple&&!(e.target instanceof GlideCoreDropdown_1||e.target instanceof GlideCoreDropdownOption)?this.open=!1:this.multiple||e.target instanceof GlideCoreDropdown_1||(this.open=!1)},this.#f=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#p=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#h;#B;#m;#R;#o;#p;#e;#a;#l;#H;#M;#z;#k;#v;#N;#u;#s;#C;#A;#d;#c;#f;#T(){if(this.#n)for(const e of this.#n)e.privateActive=!1}#t(){this.#B?.(),this.#v.value?.hidePopover(),this.ariaActivedescendant=""}get#r(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#n(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#N.value)return[this.#N.value,...e]}get#U(){return this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#q(){const e=this.#m.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#N.value&&!this.#N.value.hidden&&e?[this.#N.value,...e]:e}get#b(){return this.required&&!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#g(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#j(){if(owSlotType(this.#m.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#r.length>10,this.#n)for(const e of this.#n)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#q?.at(0);this.lastSelectedOption?(this.#T(),this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):e&&(this.#T(),e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#N.value&&(this.#N.value.selected=this.isAllSelected),this.multiple?this.#d=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#d=[this.lastSelectedOption.value]),this.requestUpdate(),this.updateComplete.then((()=>{!this.multiple&&this.#o.value&&this.lastSelectedOption?.value&&(this.#o.value.value=this.lastSelectedOption.label)}))}#w(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#u?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#H&&(this.open=!1),this.#g()}#E(e){if(this.disabled||this.readonly)return;if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#h.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),void(this.open=!0);if(this.activeOption&&this.open){if(("Enter"===e.key||" "===e.key)&&(this.#z=!0,"Enter"===e.key||" "===e.key&&!this.filterable&&!this.isFilterable))return e.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#N.value&&this.#P(),this.#K(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));const t=this.#q?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t-1);return void(i&&0!==t&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if("ArrowDown"===e.key&&!e.metaKey&&this.#q&&"number"==typeof t){e.preventDefault();const i=this.#q.at(t+1);return void(i&&(this.#T(),i.privateActive=!0,i.scrollIntoView({block:"center"}),this.ariaActivedescendant=i.id))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(0);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView({block:"end"}),this.ariaActivedescendant=t.id))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#q){e.preventDefault();const t=this.#q.at(-1);return void(t&&(this.#T(),t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id))}}}}#y(e){this.disabled||this.readonly||(this.#H?this.#H=!1:e.target instanceof Node&&this.#h.value?.contains(e.target)&&!this.#z&&this.open?this.open=!1:0!==e.detail&&(this.open=!0,this.#o.value?.select()))}#O(e){const t=this.filterable||this.isFilterable;e.target instanceof GlideCoreTag||!t?e.target instanceof GlideCoreTag||e.preventDefault():(e.preventDefault(),this.focus())}#D(e){if(ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.activeOption){this.ariaActivedescendant=this.activeOption.id,this.isFiltering=""!==this.#o.value.value.trim();for(const e of this.#r)e.hidden=!e.label?.toLowerCase().includes(this.#o.value?.value.toLowerCase().trim());const e=this.#U?.at(0);e&&this.activeOption?.hidden&&(this.#T(),e.privateActive=!0),this.open=!0,this.isOptionsHidden=!this.#U||0===this.#U.length}}#$(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.#C-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return void(t.selected=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.#C-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)for(const e of i)e.selected=!1;else;}#G(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");t instanceof GlideCoreDropdownOption&&!t.selected&&(t.selected=!0,this.#K(),this.multiple||this.#t(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}}#F(e){e.target instanceof GlideCoreDropdownOption&&(this.#T(),e.target.privateActive=!0)}#_(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#N.value&&this.#P(),this.#K(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#I(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#V(e){if(e.target instanceof GlideCoreDropdownOption&&this.#q){this.#T(),e.target.privateActive=!0;for(const e of this.#q)e.privateActive&&(this.ariaActivedescendant=e.id)}}#L(e){e.target!==this.#N.value&&!this.#M&&this.#N.value&&(this.#N.value.selected=this.isAllSelected),e.target instanceof GlideCoreDropdownOption&&(this.multiple?this.#d=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)):!this.multiple&&e.target.selected&&(this.#d=e.target.value?[e.target.value]:[],this.#o.value&&(this.#o.value.value=e.target.label))),this.requestUpdate()}#x(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.target.value?this.#d=[...this.value.filter((t=>t!==e.detail)),e.target.value]:e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#d=this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.detail)):e.target instanceof GlideCoreDropdownOption&&(this.#d=e.target.value?[e.target.value]:[])}async#S(e){this.#H=!0;for(const t of this.#r)t.id===e&&(t.selected=!1,this.#d=this.value.filter((e=>e!==t.value)));const t=this.#A.value?.querySelectorAll("glide-core-tag");if(t&&this.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,t[i<t.length-1?i+1:i-1]?.focus()}else this.focus();this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#P(){ow(this.#N.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#M=!0;for(const e of this.#r)e.selected=this.#N.value.selected;this.#M=!1}#i(){this.#B?.(),this.#R.value&&this.#v.value&&(this.#B=autoUpdate(this.#R.value,this.#v.value,(()=>{(async()=>{if(this.#R.value&&this.#v.value){const{x:e,y:t,placement:i}=await computePosition(this.#R.value,this.#v.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#v.value.dataset.placement=i,Object.assign(this.#v.value.style,{left:`${e}px`,top:`${t}px`}),this.#v.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#K(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#r)e.hidden=!1}}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",void 0),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],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})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isOptionsHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),GlideCoreDropdown=GlideCoreDropdown_1=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;

package/dist/dropdown.test.basics.filterable.js

@@ -84,11 +84,7 @@ it('uses `placeholder` as a placeholder when not `multiple` and no option is sel
     expect(input?.placeholder).to.equal('Placeholder');
 });
 it('sets `value` of its `<input>` when an option is initially selected', async () => {
-    const component = await fixture(html `<glide-core-dropdown
-      label="Label"
-      placeholder="Placeholder"
-      filterable
-    >
+    const component = await fixture(html `<glide-core-dropdown label="Label" placeholder="Placeholder">
       <glide-core-dropdown-option
         label="One"
         value="one"
@@ -99,6 +95,51 @@ it('sets `value` of its `<input>` when an option is initially selected', async (
         label="Two"
         value="two"
       ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Three"
+        value="three"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Four"
+        value="four"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Five"
+        value="five"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Six"
+        value="six"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Seven"
+        value="seven"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Eight"
+        value="eight"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Nine"
+        value="nine"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Ten"
+        value="ten"
+      ></glide-core-dropdown-option>
+
+      <glide-core-dropdown-option
+        label="Eleven"
+        value="eleven"
+      ></glide-core-dropdown-option>
     </glide-core-dropdown>`);
     const input = component.shadowRoot?.querySelector('[data-test="input"]');
     expect(input?.value).to.equal('One');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crowdstrike/glide-core",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "description": "CrowdStrike's Glide Design System components package for providing web components",
   "author": "CrowdStrike UX Team",
   "license": "Apache-2.0",