@crowdstrike/glide-core 0.15.0 → 0.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/button-group.d.ts +3 -4
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +0 -11
- package/dist/button.js +1 -1
- package/dist/drawer.js +1 -1
- package/dist/drawer.styles.js +1 -2
- package/dist/dropdown.d.ts +1 -1
- package/dist/dropdown.js +53 -53
- package/dist/dropdown.styles.js +1 -0
- package/dist/form-controls-layout.d.ts +1 -1
- package/dist/inline-alert.styles.js +9 -5
- package/dist/library/localize.d.ts +1 -0
- package/dist/library/localize.test.js +1 -3
- package/dist/library/ow.test.js +0 -1
- package/dist/menu.d.ts +1 -1
- package/dist/popover.d.ts +26 -0
- package/dist/popover.js +1 -0
- package/dist/popover.styles.js +119 -0
- package/dist/radio-group.d.ts +8 -7
- package/dist/radio-group.js +7 -5
- package/dist/radio-group.radio.d.ts +25 -0
- package/dist/radio-group.radio.js +1 -0
- package/dist/radio-group.radio.styles.d.ts +2 -0
- package/dist/split-button.d.ts +2 -2
- package/dist/styles/variables.css +1 -1
- package/dist/tab.group.d.ts +0 -3
- package/dist/tab.group.js +1 -1
- package/dist/tag.styles.js +9 -5
- package/dist/toasts.toast.styles.js +6 -3
- package/dist/toggle.styles.js +8 -0
- package/dist/tooltip.d.ts +1 -1
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.styles.js +8 -11
- 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/dist/tree.d.ts +1 -2
- package/dist/tree.item.d.ts +0 -2
- package/dist/tree.item.js +1 -1
- package/dist/tree.item.styles.js +8 -2
- package/dist/tree.js +1 -1
- package/package.json +38 -38
- package/dist/radio.d.ts +0 -20
- package/dist/radio.js +0 -1
- /package/dist/{radio.styles.d.ts → popover.styles.d.ts} +0 -0
- /package/dist/{radio.styles.js → radio-group.radio.styles.js} +0 -0
package/dist/button-group.d.ts
CHANGED
@@ -5,8 +5,7 @@ declare global {
|
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
8
|
-
* @event
|
9
|
-
* @event input - `(event: Event) => void`
|
8
|
+
* @event selected - `(event: Event) => void`
|
10
9
|
*
|
11
10
|
* @slot - One or more of `<glide-core-button-group-button>`.
|
12
11
|
*/
|
@@ -15,9 +14,9 @@ export default class GlideCoreButtonGroup extends LitElement {
|
|
15
14
|
static shadowRootOptions: ShadowRootInit;
|
16
15
|
static styles: import("lit").CSSResult[];
|
17
16
|
label?: string | undefined;
|
18
|
-
get variant():
|
17
|
+
get variant(): "icon-only" | undefined;
|
19
18
|
set variant(variant: 'icon-only' | undefined);
|
20
|
-
get orientation():
|
19
|
+
get orientation(): "horizontal" | "vertical";
|
21
20
|
set orientation(orientation: 'horizontal' | 'vertical');
|
22
21
|
firstUpdated(): void;
|
23
22
|
render(): import("lit").TemplateResult<1>;
|
package/dist/button-group.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,l=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(l=(i<3?r(l):i>3?r(e,o,l):r(e,o))||l);return i>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}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 GlideCoreButtonGroupButton from"./button-group.button.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#n)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#n)e.privateOrientation=t;this.#t=t}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton])}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#r}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#n(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){ow(this.#n.length,ow.number.greaterThan(1).message("A Button Group must contain two or more Button Group Buttons.")),owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton]);if(!this.#n.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#n.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#n)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#r(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0)}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(ow(e,ow.object.instanceOf(GlideCoreButtonGroupButton)),t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#n.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#n.at(-1);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#n.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#n.at(0);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button")
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,l=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(l=(i<3?r(l):i>3?r(e,o,l):r(e,o))||l);return i>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}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 GlideCoreButtonGroupButton from"./button-group.button.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#n)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#n)e.privateOrientation=t;this.#t=t}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton])}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#r}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#n(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){ow(this.#n.length,ow.number.greaterThan(1).message("A Button Group must contain two or more Button Group Buttons.")),owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton]);if(!this.#n.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#n.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#n)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#r(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0,e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})))}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(ow(e,ow.object.instanceOf(GlideCoreButtonGroupButton)),t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#n.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#n.at(-1);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0,o.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})));break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#n.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#n.at(0);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0,o.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})));break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0,e.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0})))}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#n)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
|
package/dist/button.d.ts
CHANGED
@@ -14,20 +14,9 @@ export default class GlideCoreButton extends LitElement {
|
|
14
14
|
static formAssociated: boolean;
|
15
15
|
static shadowRootOptions: ShadowRootInit;
|
16
16
|
static styles: import("lit").CSSResult[];
|
17
|
-
ariaControls: string | null;
|
18
|
-
ariaExpanded: 'true' | 'false' | null;
|
19
|
-
ariaHasPopup: 'true' | 'false' | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | null;
|
20
|
-
autofocus: boolean;
|
21
17
|
disabled: boolean;
|
22
|
-
formAction: string;
|
23
|
-
formEncType: '' | 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
|
24
|
-
formMethod: '' | 'dialog' | 'get' | 'post';
|
25
|
-
formNoValidate: boolean;
|
26
|
-
formTarget: '' | '_blank' | '_parent' | '_self' | '_top';
|
27
18
|
label?: string;
|
28
19
|
name: string;
|
29
|
-
popoverTarget?: string;
|
30
|
-
popoverTargetAction: '' | 'hide' | 'show' | 'toggle';
|
31
20
|
size: 'large' | 'small';
|
32
21
|
type: 'button' | 'submit' | 'reset';
|
33
22
|
value: string;
|
package/dist/button.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,o,n):r(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import styles from"./button.styles.js";let GlideCoreButton=class GlideCoreButton extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get form(){return this.#e.form}click(){this.#t.value?.click()}render(){return html`<button class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" ?disabled="${this.disabled}" @click="${this.#o}" ${ref(this.#t)}><slot name="prefix-icon" @slotchange="${this.#i}" ${ref(this.#r)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#s}" ${ref(this.#n)}></slot></button>`}constructor(){super(),this.disabled=!1,this.name="",this.size="large",this.type="button",this.value="",this.variant="primary",this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#r=createRef(),this.#n=createRef(),this.#e=this.attachInternals()}#t;#e;#r;#n;#o(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#i(){const e=this.#r.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#s(){const e=this.#n.value?.assignedNodes();this.hasSuffixIcon=Boolean(e&&e.length>0)}};__decorate([property({type:Boolean,reflect:!0})],GlideCoreButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"type",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"value",void 0),__decorate([property({reflect:!0})],GlideCoreButton.prototype,"variant",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;
|
package/dist/drawer.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,a){var o,s=arguments.length,n=s<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(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{LitElement,html,nothing}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{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#i}set open(e){this.#i=e;const t=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#i?(async()=>{this.#a?.cancel(),this.#e?.value?.classList?.add("open"),this.#o=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:t,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:t,fill:"forwards",easing:"ease-in",composite:"add"}),await(this.#o?.finished),this.#e?.value?.focus()})():(async()=>{this.#o?.cancel(),this.#a=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:t,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:t,fill:"forwards",composite:"add"}),await(this.#a?.finished),this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("close",{bubbles:!0}))})()}close(){this.open=!1}firstUpdated(){owSlot(this.#t.value),this.#i&&(this.#e?.value?.classList?.add("open"),this.#o=this.#e?.value?.animate({transform:"translateX(0)"},{duration:0,fill:"forwards"}),this.#e?.value?.animate({opacity:1},{duration:0,fill:"forwards",composite:"add"}))}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test="${this.#i?"open":"closed"}" @keydown="${this.#s}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot></aside>`}show(){this.open=!0}#e;#a;#t;#i;#o;#n(){owSlot(this.#t.value)}#s(e){"Escape"===e.key&&(e.preventDefault(),this.close())}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;
|
package/dist/drawer.styles.js
CHANGED
@@ -15,6 +15,7 @@ import{css}from"lit";export default[css`
|
|
15
15
|
visibility: hidden;
|
16
16
|
|
17
17
|
&.pinned {
|
18
|
+
background-color: var(--glide-core-surface-base-xlightest);
|
18
19
|
box-shadow: none;
|
19
20
|
}
|
20
21
|
|
@@ -24,8 +25,6 @@ import{css}from"lit";export default[css`
|
|
24
25
|
}
|
25
26
|
|
26
27
|
.open {
|
27
|
-
/* stylelint-disable-next-line property-no-vendor-prefix */
|
28
|
-
-webkit-backdrop-filter: blur(25px);
|
29
28
|
backdrop-filter: blur(25px);
|
30
29
|
block-size: auto;
|
31
30
|
inline-size: var(--width, 27.375rem);
|
package/dist/dropdown.d.ts
CHANGED
@@ -40,7 +40,7 @@ export default class GlideCoreDropdown extends LitElement {
|
|
40
40
|
privateSplit?: 'left' | 'middle';
|
41
41
|
readonly: boolean;
|
42
42
|
selectAll: boolean;
|
43
|
-
get size():
|
43
|
+
get size(): "small" | "large";
|
44
44
|
set size(size: 'small' | 'large');
|
45
45
|
get multiple(): boolean;
|
46
46
|
set multiple(isMultiple: boolean);
|
package/dist/dropdown.js
CHANGED
@@ -1,13 +1,13 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,s){var o
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length,n=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(o<3?l(n):o>3?l(t,i,n):l(t,i))||n);return o>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./icon-button.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{unsafeHTML}from"lit/directives/unsafe-html.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 pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{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 filterable(){return this.#s}set filterable(e){this.#s!==e&&e&&!this.multiple?this.#l.value&&this.selectedOptions.length>0&&(this.#l.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth):this.#s!==e&&this.#o(),this.#s=e}get open(){return this.#n}set open(e){if(this.#n=e,!e||this.disabled){if(!this.multiple&&this.#l.value&&this.selectedOptions.length>0){this.#l.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isFiltering=!1,this.isNoResults=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value);for(const e of this.#a)e.hidden=!1}this.#t()}else this.#i()}get size(){return this.#r}set size(e){if(this.#r=e,this.#p)for(const t of this.#p)t.privateSize=e}get multiple(){return this.#d}set multiple(e){const t=this.#d&&!e,i=!this.#d&&e;this.#d=e,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#l.value&&(this.#l.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#h())}get value(){return this.#c}set value(e){this.#c=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`.")),this.#u=!0;for(const t of this.#a)t.selected=e.some((e=>e&&e===t.value));this.#u=!1}get activeOption(){return this.#p?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#v.checkValidity();return this.isCheckingValidity=!1,e}click(){this.filterable||this.isFilterable?(this.#l.value?.click(),this.#l.value?.select()):this.#m.value?.click()}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#a.findLast((e=>e.selected))}get isAllSelected(){return this.#a.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(){if(owSlotType(this.#O.value,[GlideCoreDropdownOption,Text]),this.#E.value&&(this.#E.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedOption&&this.#l.value&&(this.#l.value.value=this.lastSelectedOption.label),this.#w.value){new ResizeObserver((()=>{this.#h()})).observe(this.#w.value)}if(this.#y.value){new ResizeObserver((()=>{this.#y.value&&(this.isInternalLabelOverflow=this.#y.value.scrollWidth>this.#y.value.clientWidth)})).observe(this.#y.value)}if(this.#l.value){new ResizeObserver((()=>{this.#l.value&&(this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)})).observe(this.#l.value)}}focus(e){this.filterable||this.isFilterable?this.#l.value?.focus(e):this.#m.value?.focus(e)}get form(){return this.#v.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#v.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#l.value:this.#m.value),this.#v.validity):this.required&&this.#v.validity.valueMissing&&this.selectedOptions.length>0?(this.#v.setValidity({}),this.#v.validity):this.#v.validity}get willValidate(){return this.#v.willValidate}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
|
-
@mouseup=${this.#
|
4
|
-
${ref(this.#
|
3
|
+
@mouseup=${this.#R}
|
4
|
+
${ref(this.#w)}
|
5
5
|
>
|
6
6
|
<glide-core-private-label
|
7
7
|
orientation=${this.orientation}
|
8
8
|
split=${ifDefined(this.privateSplit??void 0)}
|
9
9
|
?disabled=${this.disabled}
|
10
|
-
?error=${this.#
|
10
|
+
?error=${this.#A}
|
11
11
|
?hide=${this.hideLabel}
|
12
12
|
?required=${this.required}
|
13
13
|
>
|
@@ -17,15 +17,15 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
17
17
|
<div
|
18
18
|
class="dropdown-and-options"
|
19
19
|
slot="control"
|
20
|
-
@focusin=${this.#
|
21
|
-
@focusout=${this.#
|
22
|
-
@keydown=${this
|
20
|
+
@focusin=${this.#C}
|
21
|
+
@focusout=${this.#S}
|
22
|
+
@keydown=${this.#$}
|
23
23
|
>
|
24
24
|
<div
|
25
|
-
class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#
|
26
|
-
@click=${this
|
27
|
-
@mousedown=${this.#
|
28
|
-
${ref(this.#
|
25
|
+
class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#A,readonly:this.readonly,multiple:this.multiple})}
|
26
|
+
@click=${this.#I}
|
27
|
+
@mousedown=${this.#D}
|
28
|
+
${ref(this.#k)}
|
29
29
|
>
|
30
30
|
<span class="selected-option-labels" id="selected-option-labels">
|
31
31
|
${this.selectedOptions.map((({label:e})=>html`<span data-test="selected-option-label">
|
@@ -36,12 +36,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
36
36
|
${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul
|
37
37
|
aria-describedby="tag-overflow-text"
|
38
38
|
class="tags"
|
39
|
-
${ref(this.#
|
39
|
+
${ref(this.#F)}
|
40
40
|
>
|
41
|
-
${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,editable:t,label:i,value:s},
|
42
|
-
class=${classMap({"tag-container":!0,hidden:
|
41
|
+
${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,editable:t,label:i,value:s},l)=>html`<li
|
42
|
+
class=${classMap({"tag-container":!0,hidden:l>this.tagOverflowLimit-1})}
|
43
43
|
data-test="tag-container"
|
44
|
-
data-test-hidden=${
|
44
|
+
data-test-hidden=${l>this.tagOverflowLimit-1}
|
45
45
|
>
|
46
46
|
<glide-core-tag
|
47
47
|
data-test="tag"
|
@@ -51,8 +51,8 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
51
51
|
size=${this.size}
|
52
52
|
?disabled=${this.disabled||this.readonly}
|
53
53
|
?private-editable=${t}
|
54
|
-
@edit=${this.#
|
55
|
-
@remove=${this.#
|
54
|
+
@edit=${this.#T}
|
55
|
+
@remove=${this.#L.bind(this,e)}
|
56
56
|
>
|
57
57
|
${when(s,(()=>html`
|
58
58
|
<slot
|
@@ -96,11 +96,11 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
96
96
|
tabindex=${this.disabled?"-1":"0"}
|
97
97
|
?disabled=${this.disabled}
|
98
98
|
?readonly=${this.readonly}
|
99
|
-
@blur=${this.#
|
100
|
-
@focus=${this.#
|
101
|
-
@input=${this.#
|
102
|
-
@keydown=${this.#
|
103
|
-
${ref(this.#
|
99
|
+
@blur=${this.#_}
|
100
|
+
@focus=${this.#B}
|
101
|
+
@input=${this.#G}
|
102
|
+
@keydown=${this.#V}
|
103
|
+
${ref(this.#l)}
|
104
104
|
/>
|
105
105
|
|
106
106
|
${when(!this.multiple&&this.isInputOverflow&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span
|
@@ -112,7 +112,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
112
112
|
</span>`))}
|
113
113
|
|
114
114
|
<span
|
115
|
-
aria-label=${this.#
|
115
|
+
aria-label=${this.#M.term("itemCount",this.itemCount.toString())}
|
116
116
|
aria-live="assertive"
|
117
117
|
class="item-count"
|
118
118
|
data-test="item-count"
|
@@ -133,7 +133,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
133
133
|
class="internal-label"
|
134
134
|
data-test="internal-label"
|
135
135
|
slot="target"
|
136
|
-
${ref(this.#
|
136
|
+
${ref(this.#y)}
|
137
137
|
>
|
138
138
|
${when(this.internalLabel===this.placeholder,(()=>html`<span
|
139
139
|
class=${classMap({placeholder:!0,quiet:"quiet"===this.variant})}
|
@@ -159,12 +159,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
159
159
|
${when(!this.multiple&&this.selectedOptions.length>0&&this.selectedOptions[0].editable,(()=>html`<glide-core-icon-button
|
160
160
|
class="edit-button"
|
161
161
|
data-test="edit-button"
|
162
|
-
label=${this.#
|
162
|
+
label=${this.#M.term("editOption",this.selectedOptions[0].label)}
|
163
163
|
tabindex=${this.disabled||this.readonly?"-1":"0"}
|
164
164
|
variant="tertiary"
|
165
165
|
?disabled=${this.disabled||this.readonly}
|
166
|
-
@click=${this.#
|
167
|
-
${ref(this.#
|
166
|
+
@click=${this.#z}
|
167
|
+
${ref(this.#N)}
|
168
168
|
>
|
169
169
|
${pencilIcon}
|
170
170
|
</glide-core-icon-button>`))}
|
@@ -181,14 +181,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
181
181
|
id="primary-button"
|
182
182
|
tabindex=${this.filterable||this.isFilterable||this.disabled?"-1":"0"}
|
183
183
|
type="button"
|
184
|
-
@focusin=${this.#
|
185
|
-
@focusout=${this.#
|
186
|
-
${ref(this.#
|
184
|
+
@focusin=${this.#x}
|
185
|
+
@focusout=${this.#j}
|
186
|
+
${ref(this.#m)}
|
187
187
|
>
|
188
188
|
${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">
|
189
189
|
${magnifyingGlassIcon}
|
190
190
|
</div>`),(()=>html`<svg
|
191
|
-
aria-label=${this.#
|
191
|
+
aria-label=${this.#M.term("open")}
|
192
192
|
width="16"
|
193
193
|
height="16"
|
194
194
|
viewBox="0 0 24 24"
|
@@ -209,7 +209,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
209
209
|
<div
|
210
210
|
aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
|
211
211
|
class="options-and-footer"
|
212
|
-
${ref(this.#
|
212
|
+
${ref(this.#E)}
|
213
213
|
>
|
214
214
|
<div
|
215
215
|
aria-labelledby=${this.filterable||this.isFilterable?"input":"button"}
|
@@ -218,36 +218,36 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
218
218
|
id="options"
|
219
219
|
role="listbox"
|
220
220
|
tabindex="-1"
|
221
|
-
@click=${this.#
|
222
|
-
@input=${this.#
|
223
|
-
@focusin=${this.#
|
224
|
-
@mousedown=${this.#
|
225
|
-
@mouseover=${this.#
|
226
|
-
@private-editable-change=${this.#
|
227
|
-
@private-label-change=${this.#
|
228
|
-
@private-selected-change=${this.#
|
229
|
-
@private-value-change=${this.#
|
221
|
+
@click=${this.#H}
|
222
|
+
@input=${this.#q}
|
223
|
+
@focusin=${this.#U}
|
224
|
+
@mousedown=${this.#P}
|
225
|
+
@mouseover=${this.#W}
|
226
|
+
@private-editable-change=${this.#K}
|
227
|
+
@private-label-change=${this.#J}
|
228
|
+
@private-selected-change=${this.#Q}
|
229
|
+
@private-value-change=${this.#X}
|
230
230
|
>
|
231
231
|
<glide-core-dropdown-option
|
232
232
|
class="select-all"
|
233
233
|
data-test="select-all"
|
234
|
-
label=${this.#
|
234
|
+
label=${this.#M.term("selectAll")}
|
235
235
|
private-size=${this.size}
|
236
236
|
private-multiple
|
237
237
|
?hidden=${!this.selectAll||!this.multiple||this.isFiltering}
|
238
238
|
?private-indeterminate=${this.isSomeSelected&&!this.isAllSelected}
|
239
|
-
${ref(this.#
|
239
|
+
${ref(this.#Y)}
|
240
240
|
></glide-core-dropdown-option>
|
241
241
|
|
242
242
|
<slot
|
243
243
|
class="options-slot"
|
244
|
-
@slotchange=${this.#
|
245
|
-
${ref(this.#
|
244
|
+
@slotchange=${this.#Z}
|
245
|
+
${ref(this.#O)}
|
246
246
|
></slot>
|
247
247
|
</div>
|
248
248
|
|
249
249
|
${when(this.isNoResults,(()=>html`<div class="no-results">
|
250
|
-
${this.#
|
250
|
+
${this.#M.term("noResults")}
|
251
251
|
</div>`))}
|
252
252
|
|
253
253
|
<footer
|
@@ -257,10 +257,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
257
257
|
class=${classMap({"add-button":!0,[this.size]:!0})}
|
258
258
|
data-test="add-button"
|
259
259
|
type="button"
|
260
|
-
@click=${this.#
|
261
|
-
@focusin=${this.#
|
262
|
-
@mouseover=${this.#
|
263
|
-
${ref(this.#
|
260
|
+
@click=${this.#ee}
|
261
|
+
@focusin=${this.#te}
|
262
|
+
@mouseover=${this.#ie}
|
263
|
+
${ref(this.#se)}
|
264
264
|
>
|
265
265
|
<svg
|
266
266
|
aria-hidden="true"
|
@@ -285,12 +285,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
285
285
|
|
286
286
|
<div id="description" slot="description">
|
287
287
|
<slot
|
288
|
-
class=${classMap({description:!0,hidden:Boolean(this.#
|
288
|
+
class=${classMap({description:!0,hidden:Boolean(this.#A&&this.validityMessage)})}
|
289
289
|
name="description"
|
290
290
|
></slot>
|
291
|
-
${when(this.#
|
291
|
+
${when(this.#A&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
|
292
292
|
>${unsafeHTML(this.validityMessage)}</span
|
293
293
|
>`))}
|
294
294
|
</div>
|
295
295
|
</glide-core-private-label>
|
296
|
-
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#u.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#u.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#v.value):this.#u.setValidity({customError:!0,valueMissing:this.#u.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value)}setValidity(e,t){this.validityMessage=t,this.#u.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,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.#ie=createRef(),this.#E=createRef(),this.#b=createRef(),this.#D=createRef(),this.#z=createRef(),this.#o=createRef(),this.#w=createRef(),this.#se=!1,this.#e=!1,this.#oe=!1,this.#s=!1,this.#d=!1,this.#n=!1,this.#le=!1,this.#ne=!1,this.#ae=!1,this.#re=!1,this.#V=new LocalizeController(this),this.#O=createRef(),this.#v=createRef(),this.#X=createRef(),this.#r="large",this.#k=createRef(),this.#c=[],this.#m=()=>{this.#se?setTimeout((()=>{this.#se=!1})):this.open=!1},this.#g=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#u=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#ie;#pe;#E;#b;#D;#z;#o;#w;#u;#se;#e;#oe;#s;#d;#n;#le;#ne;#ae;#re;#V;#O;#de;#v;#X;#f;#r;#k;#c;#m;#g;#t(){this.#pe?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#de=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#R(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#Z(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#ee(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#de=this.activeOption,this.activeOption.privateActive=!1)}#te(){this.activeOption&&!this.#le&&(this.#de=this.activeOption,this.activeOption.privateActive=!1)}#y(){this.#se=!0}#Y(){owSlotType(this.#b.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#a.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#he?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#de=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#de=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#X.value&&(this.#X.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),this.updateComplete.then((()=>{!this.multiple&&this.#o.value&&this.lastSelectedOption?.value&&(this.#o.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}))}#A(e){this.open&&this.#de&&e.relatedTarget===this.#ie.value&&(this.#de.privateActive=!0,this.#de.privateIsTooltipOpen=!this.#de.editable)}#C(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#f?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#oe&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#S(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#z.value)return void(this.#se=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#f?.activeElement===this.#ie.value)return this.focus(),void(this.#de&&(this.#de.privateActive=!0,this.#de.privateIsEditActive=this.#de.editable,this.#de.privateIsTooltipOpen=!this.#de.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#f?.activeElement===this.#ie.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ce?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#de=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ie.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#f?.activeElement===this.#ie.value&&this.focus());const t=e.target===this.#v.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.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if("Enter"===e.key&&this.#ce&&this.#ce.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#re=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#X.value&&this.#ue(),this.#re=!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}))}const t=this.#he?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#he&&"number"==typeof t){e.preventDefault();const i=this.#he.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.#de=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#he&&"number"==typeof t){e.preventDefault();const i=this.#he.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.#de=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#he){e.preventDefault();const t=[...this.#he].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.#de=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#he){e.preventDefault();const t=[...this.#he].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.#de=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#$(e){if(this.disabled||this.readonly)return;if(this.#oe)return void(this.#oe=!1);if(e.target instanceof Node&&this.#z.value?.contains(e.target))return void this.selectedOptions[0].dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}));const t=this.filterable||this.isFilterable;if(this.#re||!this.open||t&&!(e.target instanceof Element&&this.#v.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#le=!0,void setTimeout((()=>{this.#le=!1}))):void 0;this.open=!1}#I(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()}#M(){this.open=!1}get#a(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#p(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#X.value)return[this.#X.value,...e]}get#ce(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#he(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#X.value&&!this.#X.value.hidden&&e?[this.#X.value,...e]:e}#L(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#_(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#B(e){let t;ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,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;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.#ce?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#de=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ce||0===this.#ce.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ce&&(this.itemCount=this.#ce.length)}}#G(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#oe=!0,t.selected=!1,void(this.#oe=!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.#oe=!0;for(const e of i)e.selected=!1;this.#oe=!1}else;}#j(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.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),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}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#W(){this.requestUpdate()}#q(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#de=e.target)}#H(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#X.value&&this.#ue(),this.#l(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}#K(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):(this.filterable||this.isFilterable)&&this.#o.value?(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())}#U(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#P(e){if(e.target instanceof GlideCoreDropdownOption&&this.#he){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#de=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#f?.activeElement===this.#ie.value&&this.focus()}}#J(e){e.target!==this.#X.value&&!this.#ae&&this.#X.value&&(this.#X.value.selected=this.isAllSelected),this.isFiltering=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple?(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.#oe&&(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&&(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.#h()}))}#Q(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]:[])}#N(){this.isInternalLabelTooltipOpen=!0}#x(){this.isInternalLabelTooltipOpen=!1}#F(){this.#oe=!0,this.open=!1}async#T(e){this.#oe=!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.#k.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.#oe=!1}))}else setTimeout((()=>{this.focus(),this.#oe=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}#ue(){ow(this.#X.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#ae=!0;for(const e of this.#a)e.selected=this.#X.value.selected&&!e.disabled;this.#ae=!1}async#h(){if(this.#E.value){const e=this.#E.value.scrollWidth>this.#E.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#h()):!e&&!this.#ne&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ne=!0,await this.updateComplete,this.#h()):this.#ne=!1}}#i(){this.#pe?.(),this.#de&&(this.#de.privateActive=!0,this.ariaActivedescendant=this.#de.id),this.#D.value&&this.#O.value&&(this.#pe=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-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#O.value.dataset.placement=i,Object.assign(this.#O.value.style,{left:`${e}px`,top:`${t}px`}),this.#O.value?.showPopover()}})()})))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],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,"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")],GlideCoreDropdown);export default GlideCoreDropdown;
|
296
|
+
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#v.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#v.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#l.value:this.#m.value):this.#v.setValidity({customError:!0,valueMissing:this.#v.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#l.value:this.#m.value)}setValidity(e,t){this.validityMessage=t,this.#v.setValidity(e," ",this.filterable||this.isFilterable?this.#l.value:this.#m.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.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.#se=createRef(),this.#w=createRef(),this.#O=createRef(),this.#k=createRef(),this.#N=createRef(),this.#l=createRef(),this.#y=createRef(),this.#le=!1,this.#e=!1,this.#oe=!1,this.#s=!1,this.#d=!1,this.#n=!1,this.#ne=!1,this.#ae=!1,this.#re=!1,this.#pe=!1,this.#u=!1,this.#M=new LocalizeController(this),this.#E=createRef(),this.#m=createRef(),this.#Y=createRef(),this.#r="large",this.#F=createRef(),this.#c=[],this.#f=()=>{this.#le?setTimeout((()=>{this.#le=!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()}))}#se;#de;#w;#O;#k;#N;#l;#y;#v;#le;#e;#oe;#s;#d;#n;#ne;#ae;#re;#pe;#u;#M;#E;#he;#m;#Y;#g;#r;#F;#c;#f;#b;#t(){this.#de?.(),this.#E.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#he=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#A(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#ee(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#te(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#he=this.activeOption,this.activeOption.privateActive=!1)}#ie(){this.activeOption&&!this.#ne&&(this.#he=this.activeOption,this.activeOption.privateActive=!1)}#R(){this.#le=!0}#Z(){owSlotType(this.#O.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#a.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#ce?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#he=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#he=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#Y.value&&(this.#Y.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),this.updateComplete.then((()=>{!this.multiple&&this.#l.value&&this.lastSelectedOption?.value&&(this.#l.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}))}#C(e){this.open&&this.#he&&e.relatedTarget===this.#se.value&&(this.#he.privateActive=!0,this.#he.privateIsTooltipOpen=!this.#he.editable)}#S(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#oe&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#$(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#N.value)return void(this.#le=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#se.value)return this.focus(),void(this.#he&&(this.#he.privateActive=!0,this.#he.privateIsEditActive=this.#he.editable,this.#he.privateIsTooltipOpen=!this.#he.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#se.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ue?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#he=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#se.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#se.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#l.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key))return e.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.activeOption.privateIsEditActive)return this.activeOption.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if("Enter"===e.key&&this.#ue&&this.#ue.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#pe=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#Y.value&&this.#ve(),this.#pe=!1,this.#o(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0}))}const t=this.#ce?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#ce&&"number"==typeof t){e.preventDefault();const i=this.#ce.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.#he=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#ce&&"number"==typeof t){e.preventDefault();const i=this.#ce.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.#he=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#ce){e.preventDefault();const t=[...this.#ce].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.#he=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#ce){e.preventDefault();const t=[...this.#ce].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.#he=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#I(e){if(this.disabled||this.readonly)return;if(this.#oe)return void(this.#oe=!1);if(e.target instanceof Node&&this.#N.value?.contains(e.target))return void this.selectedOptions[0].dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}));const t=this.filterable||this.isFilterable;if(this.#pe||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#ne=!0,void setTimeout((()=>{this.#ne=!1}))):void 0;this.open=!1}#D(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#l.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#z(){this.open=!1}get#a(){return this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#p(){const e=this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#Y.value)return[this.#Y.value,...e]}get#ue(){return this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#ce(){const e=this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#Y.value&&!this.#Y.value.hidden&&e?[this.#Y.value,...e]:e}#_(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#B(){this.#l.value?.select(),this.isInputTooltipOpen=!0}async#G(e){let t;ow(this.#l.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.inputValue=this.#l.value.value,this.multiple&&""!==this.#l.value.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#l.value.value&&this.#l.value.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1;try{t=await this.filter(this.#l.value.value)}catch{}if(t){for(const e of this.#a)e.hidden=!t.includes(e);const e=this.#ue?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#he=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ue||0===this.#ue.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ue&&(this.itemCount=this.#ue.length)}}#V(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#l.value&&0===this.#l.value.selectionStart)return this.#oe=!0,t.selected=!1,void(this.#oe=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#l.value&&0===this.#l.value.selectionStart){this.#oe=!0;for(const e of i)e.selected=!1;this.#oe=!1}else;}#H(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.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if(t&&!t.selected)return t.selected=!0,this.#o(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#K(){this.requestUpdate()}#U(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#he=e.target)}#q(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#Y.value&&this.#ve(),this.#o(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}#J(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):(this.filterable||this.isFilterable)&&this.#l.value?(this.#l.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth):this.requestUpdate())}#P(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#W(e){if(e.target instanceof GlideCoreDropdownOption&&this.#ce){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#he=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#se.value&&this.focus()}}#Q(e){e.target!==this.#Y.value&&!this.#re&&this.#Y.value&&(this.#Y.value.selected=this.isAllSelected),this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple&&!this.#u?(this.#c=e.target.selected&&e.target.value&&!e.target.disabled?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#l.value&&!this.#oe&&(this.isFiltering=!1,this.#l.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#l.value&&(this.isFiltering=!1,this.#l.value.value=e.target.label,this.inputValue=e.target.label))),this.#l.value&&(this.isInputOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))}#X(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}#j(){this.isInternalLabelTooltipOpen=!1}#T(){this.#oe=!0,this.open=!1}async#L(e){this.#oe=!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.#F.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.#oe=!1}))}else setTimeout((()=>{this.focus(),this.#oe=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}#ve(){ow(this.#Y.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#re=!0;for(const e of this.#a)e.selected=this.#Y.value.selected&&!e.disabled;this.#re=!1}async#h(){if(this.#w.value){const e=this.#w.value.scrollWidth>this.#w.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#h()):!e&&!this.#ae&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ae=!0,await this.updateComplete,this.#h()):this.#ae=!1}}#i(){this.#de?.(),this.#he&&(this.#he.privateActive=!0,this.ariaActivedescendant=this.#he.id),this.#k.value&&this.#E.value&&(this.#de=autoUpdate(this.#k.value,this.#E.value,(()=>{(async()=>{if(this.#k.value&&this.#E.value){const{x:e,y:t,placement:i}=await computePosition(this.#k.value,this.#E.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.#E.value.dataset.placement=i,Object.assign(this.#E.value.style,{left:`${e}px`,top:`${t}px`}),this.#E.value?.showPopover()}})()})))}#o(){if((this.filterable||this.isFilterable)&&this.#l.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],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,"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")],GlideCoreDropdown);export default GlideCoreDropdown;
|
package/dist/dropdown.styles.js
CHANGED
@@ -342,6 +342,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
|
|
342
342
|
font-family: var(--glide-core-font-sans);
|
343
343
|
font-size: inherit;
|
344
344
|
min-inline-size: var(--min-inline-size);
|
345
|
+
padding-block-end: 0;
|
345
346
|
padding-inline: 0;
|
346
347
|
|
347
348
|
&:not(.quiet) {
|
@@ -14,7 +14,7 @@ export default class GlideCoreFormControlsLayout extends LitElement {
|
|
14
14
|
#private;
|
15
15
|
static shadowRootOptions: ShadowRootInit;
|
16
16
|
static styles: import("lit").CSSResult[];
|
17
|
-
get split():
|
17
|
+
get split(): "left" | "middle";
|
18
18
|
set split(split: 'left' | 'middle');
|
19
19
|
firstUpdated(): void;
|
20
20
|
render(): import("lit").TemplateResult<1>;
|
@@ -33,14 +33,18 @@ import{css}from"lit";export default[css`
|
|
33
33
|
}
|
34
34
|
|
35
35
|
&.added {
|
36
|
-
|
36
|
+
@media (prefers-reduced-motion: no-preference) {
|
37
|
+
animation: fade-in var(--animation-duration) ease-in-out;
|
38
|
+
}
|
37
39
|
}
|
38
40
|
|
39
41
|
&.removed {
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
42
|
+
@media (prefers-reduced-motion: no-preference) {
|
43
|
+
animation-duration: var(--animation-duration);
|
44
|
+
animation-fill-mode: forwards;
|
45
|
+
animation-name: fade-out;
|
46
|
+
animation-timing-function: ease-in-out;
|
47
|
+
}
|
44
48
|
}
|
45
49
|
}
|
46
50
|
|
@@ -15,6 +15,7 @@ export interface Translation extends DefaultTranslation {
|
|
15
15
|
nextTab: string;
|
16
16
|
previousTab: string;
|
17
17
|
noResults: string;
|
18
|
+
tooltip: string;
|
18
19
|
announcedCharacterCount: (current: number, maximum: number) => string;
|
19
20
|
displayedCharacterCount: (current: number, maximum: number) => string;
|
20
21
|
clearEntry: (label: string) => string;
|
@@ -24,9 +24,7 @@ GlideCoreMockComponent = __decorate([
|
|
24
24
|
customElement('mock-component')
|
25
25
|
], GlideCoreMockComponent);
|
26
26
|
it('can call any term from en translation if locale is Japanese', async () => {
|
27
|
-
const component = await fixture(
|
28
|
-
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
|
29
|
-
html `<mock-component></mock-component>`);
|
27
|
+
const component = await fixture(html `<mock-component></mock-component>`);
|
30
28
|
component.lang = 'ja';
|
31
29
|
expect(component.localize.lang()).to.equal('ja');
|
32
30
|
const keys = Object.keys(en);
|
package/dist/library/ow.test.js
CHANGED
@@ -1,4 +1,3 @@
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-unsafe-call */
|
2
1
|
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
3
2
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
4
3
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
package/dist/menu.d.ts
CHANGED
@@ -18,7 +18,7 @@ export default class GlideCoreMenu extends LitElement {
|
|
18
18
|
get open(): boolean;
|
19
19
|
set open(isOpen: boolean);
|
20
20
|
placement: Placement;
|
21
|
-
get size():
|
21
|
+
get size(): "small" | "large";
|
22
22
|
set size(size: 'small' | 'large');
|
23
23
|
connectedCallback(): void;
|
24
24
|
createRenderRoot(): ShadowRoot;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import { LitElement } from 'lit';
|
2
|
+
declare global {
|
3
|
+
interface HTMLElementTagNameMap {
|
4
|
+
'glide-core-popover': GlideCorePopover;
|
5
|
+
}
|
6
|
+
}
|
7
|
+
/**
|
8
|
+
* @slot - The content of the popover.
|
9
|
+
* @slot target - The element to which the popover will anchor, which can be any focusable element.
|
10
|
+
*/
|
11
|
+
export default class GlideCorePopover extends LitElement {
|
12
|
+
#private;
|
13
|
+
static shadowRootOptions: ShadowRootInit;
|
14
|
+
static styles: import("lit").CSSResult[];
|
15
|
+
get disabled(): boolean;
|
16
|
+
set disabled(isDisabled: boolean);
|
17
|
+
get offset(): number;
|
18
|
+
set offset(offset: number);
|
19
|
+
get open(): boolean;
|
20
|
+
set open(isOpen: boolean);
|
21
|
+
placement?: 'bottom' | 'left' | 'right' | 'top';
|
22
|
+
connectedCallback(): void;
|
23
|
+
firstUpdated(): void;
|
24
|
+
render(): import("lit").TemplateResult<1>;
|
25
|
+
private effectivePlacement;
|
26
|
+
}
|