@crowdstrike/glide-core 0.14.1 → 0.15.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/button-group.d.ts +2 -2
- package/dist/button-group.js +1 -1
- package/dist/checkbox-group.js +1 -1
- package/dist/checkbox.d.ts +2 -1
- package/dist/checkbox.js +13 -7
- package/dist/checkbox.styles.js +7 -2
- package/dist/drawer.styles.js +1 -0
- package/dist/dropdown.d.ts +4 -1
- package/dist/dropdown.js +69 -50
- package/dist/dropdown.option.d.ts +2 -0
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.option.styles.js +15 -2
- package/dist/dropdown.styles.js +32 -5
- package/dist/form-controls-layout.d.ts +1 -1
- package/dist/icons/informational.d.ts +2 -0
- package/dist/icons/informational.js +1 -0
- package/dist/icons/magnifying-glass.js +1 -1
- package/dist/inline-alert.d.ts +29 -0
- package/dist/inline-alert.js +1 -0
- package/dist/inline-alert.styles.d.ts +2 -0
- package/dist/inline-alert.styles.js +100 -0
- package/dist/input.d.ts +0 -2
- package/dist/input.js +11 -11
- package/dist/library/localize.d.ts +1 -0
- package/dist/menu.button.d.ts +3 -0
- package/dist/menu.button.js +1 -1
- package/dist/menu.button.styles.js +9 -1
- package/dist/menu.d.ts +1 -1
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +2 -0
- package/dist/menu.link.js +1 -1
- package/dist/menu.link.styles.js +10 -1
- package/dist/radio-group.js +1 -1
- package/dist/split-button.d.ts +2 -2
- package/dist/styles/variables.css +1 -1
- package/dist/tab.d.ts +4 -1
- package/dist/tab.group.d.ts +2 -2
- package/dist/tab.group.js +1 -1
- package/dist/tab.group.styles.js +3 -2
- package/dist/tab.js +1 -1
- package/dist/tab.panel.d.ts +1 -1
- package/dist/tab.panel.js +1 -1
- package/dist/tab.panel.styles.js +14 -0
- package/dist/tag.styles.js +1 -0
- 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.js +1 -1
- package/package.json +48 -48
package/dist/button-group.d.ts
CHANGED
@@ -15,9 +15,9 @@ export default class GlideCoreButtonGroup extends LitElement {
|
|
15
15
|
static shadowRootOptions: ShadowRootInit;
|
16
16
|
static styles: import("lit").CSSResult[];
|
17
17
|
label?: string | undefined;
|
18
|
-
get variant():
|
18
|
+
get variant(): "icon-only" | undefined;
|
19
19
|
set variant(variant: 'icon-only' | undefined);
|
20
|
-
get orientation():
|
20
|
+
get orientation(): "horizontal" | "vertical";
|
21
21
|
set orientation(orientation: 'horizontal' | 'vertical');
|
22
22
|
firstUpdated(): void;
|
23
23
|
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");e&&!e.disabled&&(e.selected=!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(),t.target.dispatchEvent(new Event("change",{bubbles:!0})),t.target.dispatchEvent(new Event("input",{bubbles:!0}))}}};__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;
|
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");e&&!e.disabled&&(e.selected=!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(),t.target.dispatchEvent(new Event("change",{bubbles:!0})),t.target.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}};__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/checkbox-group.js
CHANGED
@@ -40,4 +40,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,l=arguments.length
|
|
40
40
|
>`))}
|
41
41
|
</div>
|
42
42
|
</glide-core-private-label>
|
43
|
-
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#l=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#r;#o;#e;#i;#s;get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#l;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.
|
43
|
+
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#l=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#r;#o;#e;#i;#s;get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#l;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#c(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
|
package/dist/checkbox.d.ts
CHANGED
@@ -31,6 +31,7 @@ export default class GlideCoreCheckbox extends LitElement {
|
|
31
31
|
name: string;
|
32
32
|
privateLabelTooltipOffset: number;
|
33
33
|
privateShowLabelTooltip: boolean;
|
34
|
+
privateDisableLabelTooltip: boolean;
|
34
35
|
privateSize: 'large' | 'small';
|
35
36
|
privateSplit?: 'left' | 'middle';
|
36
37
|
privateVariant?: 'minimal';
|
@@ -38,7 +39,7 @@ export default class GlideCoreCheckbox extends LitElement {
|
|
38
39
|
summary?: string;
|
39
40
|
get value(): string;
|
40
41
|
set value(value: string);
|
41
|
-
|
42
|
+
privateIsReportValidityOrSubmit: boolean;
|
42
43
|
get form(): HTMLFormElement | null;
|
43
44
|
blur(): void;
|
44
45
|
checkValidity(): boolean;
|
package/dist/checkbox.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length,r=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(r=(o<3?s(r):o>3?s(t,i,r):s(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};import"./label.js";import"./tooltip.js";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{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`
|
2
2
|
<svg
|
3
3
|
width="14"
|
4
4
|
height="14"
|
@@ -12,7 +12,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
|
|
12
12
|
fill="currentColor"
|
13
13
|
/>
|
14
14
|
</svg>
|
15
|
-
`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#
|
15
|
+
`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#a.form}blur(){this.#s.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#a.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#s.value?.click()}connectedCallback(){super.connectedCallback(),this.#o=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#o.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r),this.#o?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#a.validity:this.required&&!this.checked?(this.#a.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#s.value),this.#a.validity):this.required&&this.#a.validity.valueMissing&&this.checked?(this.#a.setValidity({}),this.#a.validity):(this.required||!this.#a.validity.valueMissing||this.checked||this.#a.setValidity({}),this.#a.validity)}focus(e){this.#s.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
|
16
16
|
${when("minimal"===this.privateVariant,(()=>html`
|
17
17
|
<label
|
18
18
|
class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
|
@@ -21,6 +21,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
|
|
21
21
|
<div class="input-and-checkbox">
|
22
22
|
<input
|
23
23
|
aria-invalid=${this.#l}
|
24
|
+
class="input"
|
24
25
|
data-test="input"
|
25
26
|
type="checkbox"
|
26
27
|
.checked=${this.checked}
|
@@ -30,7 +31,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
|
|
30
31
|
@change=${this.#n}
|
31
32
|
@input=${this.#n}
|
32
33
|
@keydown=${this.#d}
|
33
|
-
${ref(this.#
|
34
|
+
${ref(this.#s)}
|
34
35
|
/>
|
35
36
|
|
36
37
|
<div
|
@@ -47,12 +48,16 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
|
|
47
48
|
<glide-core-tooltip
|
48
49
|
class="label-tooltip"
|
49
50
|
offset=${this.privateLabelTooltipOffset}
|
50
|
-
?disabled=${!this.isLabelOverflow}
|
51
|
+
?disabled=${!this.isLabelOverflow||this.privateDisableLabelTooltip}
|
51
52
|
?open=${this.privateShowLabelTooltip}
|
52
53
|
>
|
53
54
|
<div aria-hidden="true" data-test="tooltip">${this.label}</div>
|
54
55
|
|
55
|
-
<div
|
56
|
+
<div
|
57
|
+
class=${classMap({label:!0,disabled:this.disabled})}
|
58
|
+
slot="target"
|
59
|
+
${ref(this.#h)}
|
60
|
+
>
|
56
61
|
${this.label}
|
57
62
|
</div>
|
58
63
|
</glide-core-tooltip>
|
@@ -97,6 +102,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
|
|
97
102
|
<input
|
98
103
|
aria-describedby="summary description"
|
99
104
|
aria-invalid=${this.#l}
|
105
|
+
class="input"
|
100
106
|
data-test="input"
|
101
107
|
id="input"
|
102
108
|
type="checkbox"
|
@@ -107,7 +113,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
|
|
107
113
|
@change=${this.#n}
|
108
114
|
@input=${this.#n}
|
109
115
|
@keydown=${this.#d}
|
110
|
-
${ref(this.#
|
116
|
+
${ref(this.#s)}
|
111
117
|
/>
|
112
118
|
|
113
119
|
<div
|
@@ -132,4 +138,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
|
|
132
138
|
>`))}
|
133
139
|
</div>
|
134
140
|
</glide-core-private-label>`))}
|
135
|
-
</div>`}reportValidity(){this.
|
141
|
+
</div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#a.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#a.setValidity({customError:!1},"",this.#s.value):this.#a.setValidity({customError:!0,valueMissing:this.#a.validity.valueMissing}," ",this.#s.value)}setValidity(e,t){this.validityMessage=t,this.#a.setValidity(e," ",this.#s.value)}get willValidate(){return this.#a.willValidate}updated(){this.#s.value&&(this.#s.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#s=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#r=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#a=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#s;#a;#o;#e;#h;#i;#r;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([state()],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;
|
package/dist/checkbox.styles.js
CHANGED
@@ -1,5 +1,6 @@
|
|
1
1
|
import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
|
2
|
-
${focusOutline("input:focus-visible ~ .checkbox
|
2
|
+
${focusOutline(".input:focus-visible ~ .checkbox")}
|
3
|
+
${focusOutline(".input:focus ~ .checkbox.error")}
|
3
4
|
`,css`
|
4
5
|
/*
|
5
6
|
Most states are handled on the host. But ":checked" and ":indeterminate" are
|
@@ -77,7 +78,7 @@ when browsers support them.
|
|
77
78
|
}
|
78
79
|
}
|
79
80
|
|
80
|
-
input {
|
81
|
+
.input {
|
81
82
|
block-size: 100%;
|
82
83
|
cursor: inherit;
|
83
84
|
inline-size: 100%;
|
@@ -187,6 +188,10 @@ when browsers support them.
|
|
187
188
|
overflow: hidden;
|
188
189
|
text-overflow: ellipsis;
|
189
190
|
white-space: nowrap;
|
191
|
+
|
192
|
+
&.disabled {
|
193
|
+
color: var(--glide-core-icon-tertiary-disabled);
|
194
|
+
}
|
190
195
|
}
|
191
196
|
|
192
197
|
.description {
|
package/dist/drawer.styles.js
CHANGED
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);
|
@@ -73,11 +73,14 @@ export default class GlideCoreDropdown extends LitElement {
|
|
73
73
|
setValidity(flags?: ValidityStateFlags, message?: string): void;
|
74
74
|
constructor();
|
75
75
|
private ariaActivedescendant;
|
76
|
+
private inputValue;
|
76
77
|
private isBlurring;
|
77
78
|
private isCheckingValidity;
|
78
79
|
private isCommunicateItemCountToScreenreaders;
|
79
80
|
private isFilterable;
|
80
81
|
private isFiltering;
|
82
|
+
private isInputOverflow;
|
83
|
+
private isInputTooltipOpen;
|
81
84
|
private isInternalLabelOverflow;
|
82
85
|
private isInternalLabelTooltipOpen;
|
83
86
|
private isNoResults;
|
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
|
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
27
|
@mousedown=${this.#D}
|
28
|
-
${ref(this.#
|
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
|
@@ -69,7 +69,17 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
69
69
|
data-test="single-select-icon-slot"
|
70
70
|
name="icon:${this.selectedOptions.at(0)?.value}"
|
71
71
|
></slot>`))}
|
72
|
-
|
72
|
+
|
73
|
+
<glide-core-tooltip
|
74
|
+
class=${classMap({"input-tooltip":!0,visible:this.filterable||this.isFilterable})}
|
75
|
+
offset=${8}
|
76
|
+
?disabled=${this.open||!this.isInputOverflow}
|
77
|
+
?open=${!this.open&&this.isInputTooltipOpen}
|
78
|
+
>
|
79
|
+
<div aria-hidden="true">${this.inputValue}</div>
|
80
|
+
|
81
|
+
<div class="input-container" slot="target">
|
82
|
+
<input
|
73
83
|
aria-activedescendant=${this.ariaActivedescendant}
|
74
84
|
aria-controls="options"
|
75
85
|
aria-describedby="description"
|
@@ -86,26 +96,35 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
86
96
|
tabindex=${this.disabled?"-1":"0"}
|
87
97
|
?disabled=${this.disabled}
|
88
98
|
?readonly=${this.readonly}
|
89
|
-
@
|
90
|
-
@
|
91
|
-
@input=${this.#
|
92
|
-
@keydown=${this.#
|
93
|
-
${ref(this.#
|
99
|
+
@blur=${this.#_}
|
100
|
+
@focus=${this.#B}
|
101
|
+
@input=${this.#G}
|
102
|
+
@keydown=${this.#V}
|
103
|
+
${ref(this.#l)}
|
94
104
|
/>
|
95
105
|
|
106
|
+
${when(!this.multiple&&this.isInputOverflow&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span
|
107
|
+
aria-hidden="true"
|
108
|
+
class="ellipsis"
|
109
|
+
data-test="ellipsis"
|
110
|
+
>
|
111
|
+
…
|
112
|
+
</span>`))}
|
113
|
+
|
96
114
|
<span
|
97
115
|
aria-label=${this.#M.term("itemCount",this.itemCount.toString())}
|
98
116
|
aria-live="assertive"
|
99
117
|
class="item-count"
|
100
118
|
data-test="item-count"
|
101
119
|
id="item-count"
|
102
|
-
></span
|
120
|
+
></span>
|
121
|
+
</div>
|
122
|
+
</glide-core-tooltip>
|
103
123
|
|
104
124
|
<glide-core-tooltip
|
105
125
|
class=${classMap({"internal-label-tooltip":!0,visible:Boolean(this.internalLabel)})}
|
106
|
-
data-test="internal-label-tooltip"
|
107
126
|
offset=${8}
|
108
|
-
?disabled=${this.open||!this.isInternalLabelOverflow}
|
127
|
+
?disabled=${this.open||this.multiple||this.filterable||this.isFilterable||!this.isInternalLabelOverflow}
|
109
128
|
?open=${!this.open&&this.isInternalLabelTooltipOpen}
|
110
129
|
>
|
111
130
|
<div aria-hidden="true">${this.internalLabel}</div>
|
@@ -114,7 +133,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
114
133
|
class="internal-label"
|
115
134
|
data-test="internal-label"
|
116
135
|
slot="target"
|
117
|
-
${ref(this.#
|
136
|
+
${ref(this.#y)}
|
118
137
|
>
|
119
138
|
${when(this.internalLabel===this.placeholder,(()=>html`<span
|
120
139
|
class=${classMap({placeholder:!0,quiet:"quiet"===this.variant})}
|
@@ -144,8 +163,8 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
144
163
|
tabindex=${this.disabled||this.readonly?"-1":"0"}
|
145
164
|
variant="tertiary"
|
146
165
|
?disabled=${this.disabled||this.readonly}
|
147
|
-
@click=${this.#
|
148
|
-
${ref(this.#
|
166
|
+
@click=${this.#z}
|
167
|
+
${ref(this.#N)}
|
149
168
|
>
|
150
169
|
${pencilIcon}
|
151
170
|
</glide-core-icon-button>`))}
|
@@ -162,9 +181,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
162
181
|
id="primary-button"
|
163
182
|
tabindex=${this.filterable||this.isFilterable||this.disabled?"-1":"0"}
|
164
183
|
type="button"
|
165
|
-
@focusin=${this.#
|
166
|
-
@focusout=${this.#
|
167
|
-
${ref(this.#
|
184
|
+
@focusin=${this.#x}
|
185
|
+
@focusout=${this.#j}
|
186
|
+
${ref(this.#m)}
|
168
187
|
>
|
169
188
|
${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">
|
170
189
|
${magnifyingGlassIcon}
|
@@ -190,7 +209,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
190
209
|
<div
|
191
210
|
aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
|
192
211
|
class="options-and-footer"
|
193
|
-
${ref(this.#
|
212
|
+
${ref(this.#E)}
|
194
213
|
>
|
195
214
|
<div
|
196
215
|
aria-labelledby=${this.filterable||this.isFilterable?"input":"button"}
|
@@ -199,15 +218,15 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
199
218
|
id="options"
|
200
219
|
role="listbox"
|
201
220
|
tabindex="-1"
|
202
|
-
@click=${this.#
|
203
|
-
@input=${this.#
|
204
|
-
@focusin=${this.#
|
205
|
-
@mousedown=${this.#
|
206
|
-
@mouseover=${this.#
|
221
|
+
@click=${this.#H}
|
222
|
+
@input=${this.#q}
|
223
|
+
@focusin=${this.#U}
|
224
|
+
@mousedown=${this.#P}
|
225
|
+
@mouseover=${this.#W}
|
207
226
|
@private-editable-change=${this.#K}
|
208
|
-
@private-label-change=${this.#
|
209
|
-
@private-selected-change=${this.#
|
210
|
-
@private-value-change=${this.#
|
227
|
+
@private-label-change=${this.#J}
|
228
|
+
@private-selected-change=${this.#Q}
|
229
|
+
@private-value-change=${this.#X}
|
211
230
|
>
|
212
231
|
<glide-core-dropdown-option
|
213
232
|
class="select-all"
|
@@ -217,13 +236,13 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
217
236
|
private-multiple
|
218
237
|
?hidden=${!this.selectAll||!this.multiple||this.isFiltering}
|
219
238
|
?private-indeterminate=${this.isSomeSelected&&!this.isAllSelected}
|
220
|
-
${ref(this.#
|
239
|
+
${ref(this.#Y)}
|
221
240
|
></glide-core-dropdown-option>
|
222
241
|
|
223
242
|
<slot
|
224
243
|
class="options-slot"
|
225
|
-
@slotchange=${this.#
|
226
|
-
${ref(this.#
|
244
|
+
@slotchange=${this.#Z}
|
245
|
+
${ref(this.#O)}
|
227
246
|
></slot>
|
228
247
|
</div>
|
229
248
|
|
@@ -238,10 +257,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
238
257
|
class=${classMap({"add-button":!0,[this.size]:!0})}
|
239
258
|
data-test="add-button"
|
240
259
|
type="button"
|
241
|
-
@click=${this.#
|
242
|
-
@focusin=${this.#
|
243
|
-
@mouseover=${this.#
|
244
|
-
${ref(this.#
|
260
|
+
@click=${this.#ee}
|
261
|
+
@focusin=${this.#te}
|
262
|
+
@mouseover=${this.#ie}
|
263
|
+
${ref(this.#se)}
|
245
264
|
>
|
246
265
|
<svg
|
247
266
|
aria-hidden="true"
|
@@ -266,12 +285,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
|
|
266
285
|
|
267
286
|
<div id="description" slot="description">
|
268
287
|
<slot
|
269
|
-
class=${classMap({description:!0,hidden:Boolean(this.#
|
288
|
+
class=${classMap({description:!0,hidden:Boolean(this.#A&&this.validityMessage)})}
|
270
289
|
name="description"
|
271
290
|
></slot>
|
272
|
-
${when(this.#
|
291
|
+
${when(this.#A&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
|
273
292
|
>${unsafeHTML(this.validityMessage)}</span
|
274
293
|
>`))}
|
275
294
|
</div>
|
276
295
|
</glide-core-private-label>
|
277
|
-
</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.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!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.#I=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.#M=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;#I;#z;#o;#w;#u;#se;#e;#oe;#s;#d;#n;#le;#ne;#ae;#re;#M;#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?.at(0);!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)}))}#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("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{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.at(t-1);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.at(t+1);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.at(0);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.at(-1);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)if(this.#oe)this.#oe=!1;else if(e.target instanceof Node&&this.#z.value?.contains(e.target))this.selectedOptions[0].dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}));else{if(this.#re||!this.open)return 0!==e.detail?(this.open=!0,this.focus(),this.#le=!0,void setTimeout((()=>{this.#le=!1}))):void 0;this.open=!1}}#D(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()}#V(){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.#o.value?.select()}#_(){this.isCommunicateItemCountToScreenreaders=!1}async#B(e){let t;ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,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.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("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#K(){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("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#W(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):this.#o.value?this.#o.value.value=this.selectedOptions[0].label:this.requestUpdate())}#U(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#P(e){e.target instanceof GlideCoreDropdownOption&&this.#he&&(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?[...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.multiple&&e.target.selected&&(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&(this.#o.value.value=e.target.label))),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("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{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;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.#I.value&&this.#O.value&&(this.#pe=autoUpdate(this.#I.value,this.#O.value,(()=>{(async()=>{if(this.#I.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#I.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#O.value.dataset.placement=i,Object.assign(this.#O.value.style,{left:`${e}px`,top:`${t}px`}),this.#O.value?.showPopover()}})()})))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",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.filter(((e,t)=>t<=this.tagOverflowLimit-1)).at(-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;
|
@@ -13,6 +13,8 @@ export default class GlideCoreDropdownOption extends LitElement {
|
|
13
13
|
#private;
|
14
14
|
static shadowRootOptions: ShadowRootInit;
|
15
15
|
static styles: import("lit").CSSResult[];
|
16
|
+
get disabled(): boolean;
|
17
|
+
set disabled(isDisabled: boolean);
|
16
18
|
get editable(): boolean;
|
17
19
|
set editable(isEditable: boolean);
|
18
20
|
get label(): string;
|