@crowdstrike/glide-core 0.26.0 → 0.26.1
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/dropdown.d.ts +4 -3
- package/dist/dropdown.js +11 -11
- package/dist/dropdown.styles.js +2 -3
- package/dist/icon-button.js +1 -1
- package/dist/icon-button.styles.js +29 -0
- package/dist/library/localize.d.ts +2 -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 +1 -1
package/dist/dropdown.d.ts
CHANGED
@@ -54,7 +54,7 @@ declare global {
|
|
54
54
|
*
|
55
55
|
* @method filter
|
56
56
|
* @param {string} query
|
57
|
-
* @returns Promise<GlideCoreDropdownOption[]>
|
57
|
+
* @returns Promise<GlideCoreDropdownOption[] | undefined | void>
|
58
58
|
*
|
59
59
|
* @method formAssociatedCallback
|
60
60
|
* @method formResetCallback
|
@@ -131,7 +131,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
131
131
|
connectedCallback(): void;
|
132
132
|
createRenderRoot(): ShadowRoot;
|
133
133
|
disconnectedCallback(): void;
|
134
|
-
filter(query: string): Promise<GlideCoreDropdownOption[]>;
|
134
|
+
filter(query: string): Promise<GlideCoreDropdownOption[] | undefined | void>;
|
135
135
|
firstUpdated(): void;
|
136
136
|
focus(options?: FocusOptions): void;
|
137
137
|
get form(): HTMLFormElement | null;
|
@@ -145,6 +145,8 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
145
145
|
setValidity(flags?: ValidityStateFlags, message?: string): void;
|
146
146
|
constructor();
|
147
147
|
private ariaActivedescendant;
|
148
|
+
private hasNoAvailableOptions;
|
149
|
+
private hasNoMatchingOptions;
|
148
150
|
private inputValue;
|
149
151
|
private isBlurring;
|
150
152
|
private isCheckingValidity;
|
@@ -155,7 +157,6 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
155
157
|
private isInputTooltipOpen;
|
156
158
|
private isInternalLabelOverflow;
|
157
159
|
private isInternalLabelTooltipOpen;
|
158
|
-
private isNoResults;
|
159
160
|
private isReportValidityOrSubmit;
|
160
161
|
private isShowSingleSelectIcon;
|
161
162
|
private itemCount;
|
package/dist/dropdown.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(l<3?o(n):l>3?o(t,i,n):o(t,i))||n);return l>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{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.
|
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.hasNoAvailableOptions=0===this.#a.length,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.hasNoMatchingOptions=!1,this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value);for(const e of this.#a)e.hidden=!1;this.#t(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}}get multiple(){return this.#r}set multiple(e){const t=this.#r&&!e,i=!this.#r&&e;this.#r=e,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#o.value&&(this.#o.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#p())}get size(){return this.#d}set size(e){if(this.#d=e,this.#h)for(const t of this.#h)t.privateSize=e}get value(){return this.#c}set value(e){if(this.#c=e,!this.multiple&&e.length>1)throw new Error("Only one value is allowed when not `multiple`.");!this.multiple&&0===this.value.length&&this.#o.value&&1===this.selectedOptions.length&&(this.#o.value.value="");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)}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.#p.bind(this))}
|
5
5
|
${ref(this.#y)}
|
6
6
|
>
|
7
7
|
<glide-core-private-label
|
@@ -150,8 +150,8 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
150
150
|
class="internal-label"
|
151
151
|
data-test="internal-label"
|
152
152
|
slot="target"
|
153
|
-
${onResize(this.#
|
154
|
-
${ref(this.#
|
153
|
+
${onResize(this.#N.bind(this))}
|
154
|
+
${ref(this.#z)}
|
155
155
|
>
|
156
156
|
${when(this.internalLabel===this.placeholder,(()=>html`<span
|
157
157
|
class=${classMap({placeholder:!0,quiet:"quiet"===this.variant})}
|
@@ -213,12 +213,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
213
213
|
</div>
|
214
214
|
|
215
215
|
<div
|
216
|
-
class=${classMap({"options-and-footer":!0,
|
216
|
+
class=${classMap({"options-and-footer":!0,optionless:(this.hasNoAvailableOptions||this.hasNoMatchingOptions)&&!this.loading})}
|
217
217
|
${ref(this.#O)}
|
218
218
|
>
|
219
219
|
<div
|
220
220
|
aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
|
221
|
-
class=${classMap({options:!0,hidden:this.
|
221
|
+
class=${classMap({options:!0,hidden:this.hasNoAvailableOptions||this.hasNoMatchingOptions||this.loading,[this.size]:!0})}
|
222
222
|
data-test="options"
|
223
223
|
id="options"
|
224
224
|
role="listbox"
|
@@ -248,7 +248,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
248
248
|
<slot
|
249
249
|
class="default-slot"
|
250
250
|
@slotchange=${this.#ie}
|
251
|
-
${assertSlot([GlideCoreDropdownOption,Text])}
|
251
|
+
${assertSlot([GlideCoreDropdownOption,Text],!0)}
|
252
252
|
${ref(this.#se)}
|
253
253
|
>
|
254
254
|
<!--
|
@@ -266,9 +266,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
266
266
|
>
|
267
267
|
${map(range(7),(()=>html`<div></div>`))}
|
268
268
|
</div>`))}
|
269
|
-
${when(this.
|
270
|
-
|
271
|
-
|
269
|
+
${when((this.hasNoAvailableOptions||this.hasNoMatchingOptions)&&!this.loading,(()=>html`<div data-test="optionless-feedback">
|
270
|
+
${this.hasNoAvailableOptions?this.#M.term("noAvailableOptions"):this.#M.term("noMatchingOptions")}
|
271
|
+
</div>`))}
|
272
272
|
|
273
273
|
<footer
|
274
274
|
class=${classMap({footer:!0,visible:Boolean(this.addButtonLabel)})}
|
@@ -304,7 +304,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
304
304
|
>`))}
|
305
305
|
</div>
|
306
306
|
</glide-core-private-label>
|
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`
|
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.hasNoAvailableOptions=!1,this.hasNoMatchingOptions=!1,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.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.#z=createRef(),this.#re=!1,this.#e=!1,this.#pe=!1,this.#s=!1,this.#de=!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.#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;#me;#y;#se;#D;#q;#o;#z;#v;#re;#e;#pe;#s;#de;#r;#n;#he;#ce;#u;#ue;#ve;#M;#O;#fe;#m;#te;#g;#d;#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.#de&&(this.isFilterable=this.#a.length>10,this.#de=!1),this.tagOverflowLimit=this.selectedOptions.length,this.hasNoAvailableOptions=0===this.#a.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.#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.#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.#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.#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.hasNoMatchingOptions=!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.#pe=!0,t.selected=!1,void(this.#pe=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart){this.#pe=!0;for(const e of i)e.selected=!1;this.#pe=!1}else;}#V(){this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth-1>this.#o.value.clientWidth)}#N(){this.#z.value&&(this.isInternalLabelOverflow=this.#z.value.scrollWidth>this.#z.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.#p()}))):(this.filterable||this.isFilterable)&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.requestUpdate())}#K(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#J(e){if(e.target instanceof GlideCoreDropdownOption&&this.#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.#pe&&(this.isFiltering=!1,this.#o.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&e.target.label&&(this.isFiltering=!1,this.#o.value.value=e.target.label,this.inputValue=e.target.label))),this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))}#ee(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}#x(){this.isInternalLabelTooltipOpen=!0}#H(){this.isInternalLabelTooltipOpen=!1}#k(){this.#pe=!0,this.open=!1}async#F(e){this.#pe=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#I.value?.querySelectorAll("glide-core-tag");if(t&&this.selectedOptions.length>0){const i=[...t].findIndex((t=>t.dataset.id===e)),s=t[i<t.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#pe=!1}))}else setTimeout((()=>{this.focus(),this.#pe=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#T(e){e.stopPropagation()}#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#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.#ce&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ce=!0,await this.updateComplete,this.#p()):this.#ce=!1}}#i(){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,"hasNoAvailableOptions",void 0),__decorate([state()],GlideCoreDropdown.prototype,"hasNoMatchingOptions",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,"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`
|
308
308
|
<svg
|
309
309
|
aria-hidden="true"
|
310
310
|
viewBox="0 0 16 16"
|
package/dist/dropdown.styles.js
CHANGED
@@ -126,16 +126,15 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
|
|
126
126
|
padding: 0;
|
127
127
|
position: absolute;
|
128
128
|
|
129
|
-
&.
|
129
|
+
&.optionless {
|
130
130
|
font-family: var(--glide-core-typography-family-primary);
|
131
131
|
font-size: var(--glide-core-typography-size-body-default);
|
132
132
|
font-weight: var(--glide-core-typography-weight-regular);
|
133
133
|
padding: var(--glide-core-spacing-base-xxs)
|
134
134
|
var(--glide-core-spacing-base-sm);
|
135
|
-
text-transform: capitalize;
|
136
135
|
}
|
137
136
|
|
138
|
-
&:not(.
|
137
|
+
&:not(.optionless) {
|
139
138
|
min-inline-size: var(--private-min-inline-size);
|
140
139
|
}
|
141
140
|
}
|
package/dist/icon-button.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.version=packageJson.version,this.#t=null,this.#e=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#o)}></slot></button>`}#t;#e;#o};__decorate([property({reflect:!0}),required],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],GlideCoreIconButton.prototype,"ariaDescription",null),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button"),final],GlideCoreIconButton);export default GlideCoreIconButton;
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.variant="primary",this.version=packageJson.version,this.#t=null,this.#e=createRef(),this.#o=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#e)}><slot class="default-slot" ${assertSlot()} ${ref(this.#o)}></slot></button>`}#t;#e;#o};__decorate([property({reflect:!0}),required],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({attribute:"aria-controls",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],GlideCoreIconButton.prototype,"ariaDescription",null),__decorate([property({attribute:"aria-expanded",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button"),final],GlideCoreIconButton);export default GlideCoreIconButton;
|
@@ -128,4 +128,33 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
128
128
|
}
|
129
129
|
}
|
130
130
|
}
|
131
|
+
|
132
|
+
.default-slot {
|
133
|
+
&::slotted(*) {
|
134
|
+
/*
|
135
|
+
So that teams clicking Icon Button using Playwright don't have to use "force: true".
|
136
|
+
Playwright uses "elementsFromPoint()" internally to locate elements. But there's a
|
137
|
+
Chromium bug¹ where that method returns content slotted into the element clicked
|
138
|
+
instead of the element itself.
|
139
|
+
|
140
|
+
Or it may² be a specification issue. Either way, to reproduce it, use the "getByRole"
|
141
|
+
locator to locate and click Icon Button: "page.getByRole('button').click()". The
|
142
|
+
click will fail with a Playwright "intercepts pointer events" error related to the
|
143
|
+
slotted content.
|
144
|
+
|
145
|
+
It's not clear if Playwright can work around it like it has³ other "elementsFromPoint()"
|
146
|
+
problems or if the fix needs to come from Chromium. I'll file a bug with Playwright and
|
147
|
+
update this comment if I find out.
|
148
|
+
|
149
|
+
In the meantime, disabling pointer events on the slotted content prevents it from being
|
150
|
+
included in the array returned by "elementsFromPoint()". As a result, Playwright won't
|
151
|
+
falsely believe it's intercepting events.
|
152
|
+
|
153
|
+
1. https://issues.chromium.org/issues/40755138
|
154
|
+
2. https://github.com/w3c/csswg-drafts/issues/556
|
155
|
+
3. https://github.com/microsoft/playwright/blob/00429efc4ac67ece5d9ba220d7470ea97c0ca265/packages/injected/src/injectedScript.ts#L962-L968
|
156
|
+
*/
|
157
|
+
pointer-events: none;
|
158
|
+
}
|
159
|
+
}
|
131
160
|
`];
|
@@ -12,7 +12,8 @@ export interface Translation extends DefaultTranslation {
|
|
12
12
|
notifications: string;
|
13
13
|
nextTab: string;
|
14
14
|
previousTab: string;
|
15
|
-
|
15
|
+
noAvailableOptions: string;
|
16
|
+
noMatchingOptions: string;
|
16
17
|
tooltip: string;
|
17
18
|
severityInformational: string;
|
18
19
|
severityCritical: string;
|
package/dist/translations/en.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",
|
1
|
+
const translation={$code:"en",$name:"English",$dir:"ltr",close:"Close",dismiss:"Dismiss",selectAll:"Select all",notifications:"Notifications",nextTab:"Next tab",previousTab:"Previous tab",noAvailableOptions:"No options available",noMatchingOptions:"No matching options",tooltip:"Tooltip:",severityInformational:"Severity: Informational",severityCritical:"Severity: Critical",severityMedium:"Severity: Medium",success:"Success:",error:"Error:",informational:"Informational:",loading:"Loading",announcedCharacterCount:(t,i)=>`Character count ${t} of ${i}`,displayedCharacterCount:(t,i)=>`${t}/${i}`,clearEntry:t=>`Clear ${t} entry`,editOption:t=>`Edit option: ${t}`,editTag:t=>`Edit tag: ${t}`,removeTag:t=>`Remove tag: ${t}`,itemCount:t=>`${t} items`};export default translation;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Translation } from '../library/localize.js';
|
2
|
-
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading"];
|
2
|
+
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions"];
|
3
3
|
type PendingTranslation = (typeof PENDING_STRINGS)[number];
|
4
4
|
declare const translation: Omit<Translation, PendingTranslation>;
|
5
5
|
export default translation;
|
package/dist/translations/fr.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",
|
1
|
+
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions"];const translation={$code:"fr",$name:"French",$dir:"ltr",close:"FERMER",dismiss:"Ignorer",selectAll:"Tout sélectionner",notifications:"Notifications",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"Info-bulle :",announcedCharacterCount:(e,t)=>`Nombre de caractères ${e} sur ${t}`,displayedCharacterCount:(e,t)=>`${e}/${t}`,clearEntry:e=>`Effacer l'entrée ${e}`,editOption:e=>`Modifier l'option : ${e}`,editTag:e=>`Modifier la balise : ${e}`,removeTag:e=>`Enlever la balise : ${e}`,itemCount:e=>`${e} éléments`};export default translation;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import type { Translation } from '../library/localize.js';
|
2
|
-
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading"];
|
2
|
+
export declare const PENDING_STRINGS: readonly ["severityInformational", "severityCritical", "severityMedium", "success", "error", "informational", "loading", "noAvailableOptions", "noMatchingOptions"];
|
3
3
|
type PendingTranslation = (typeof PENDING_STRINGS)[number];
|
4
4
|
declare const translation: Omit<Translation, PendingTranslation>;
|
5
5
|
export default translation;
|
package/dist/translations/ja.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",
|
1
|
+
export const PENDING_STRINGS=["severityInformational","severityCritical","severityMedium","success","error","informational","loading","noAvailableOptions","noMatchingOptions"];const translation={$code:"ja",$name:"Japanese",$dir:"ltr",close:"閉じる",dismiss:"閉じる",selectAll:"すべて選択",notifications:"通知",nextTab:"Onglet suivant",previousTab:"Onglet précédent",tooltip:"ツールチップ:",announcedCharacterCount:(t,e)=>`文字数 ${t}/${e}`,displayedCharacterCount:(t,e)=>`${t}/${e}`,clearEntry:t=>`${t}入力をクリア`,editOption:t=>`編集オプション:${t}`,editTag:t=>`タグの編集:${t}`,removeTag:t=>`タグの削除:${t}`,itemCount:t=>`${t}件`};export default translation;
|