@crowdstrike/glide-core 0.17.1 → 0.18.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/LICENSE +1 -1
- package/dist/accordion.d.ts +1 -0
- package/dist/accordion.js +1 -1
- package/dist/button-group.button.d.ts +2 -1
- package/dist/button-group.button.js +1 -1
- package/dist/button-group.d.ts +1 -0
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +1 -0
- package/dist/button.js +1 -1
- package/dist/checkbox-group.d.ts +3 -1
- package/dist/checkbox-group.js +4 -4
- package/dist/checkbox.d.ts +3 -1
- package/dist/checkbox.js +9 -8
- package/dist/drawer.d.ts +1 -0
- package/dist/drawer.js +1 -1
- package/dist/drawer.styles.js +2 -2
- package/dist/dropdown.d.ts +3 -2
- package/dist/dropdown.js +41 -37
- package/dist/dropdown.option.d.ts +3 -2
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.styles.js +2 -2
- package/dist/form-controls-layout.d.ts +1 -1
- package/dist/form-controls-layout.js +1 -1
- package/dist/icon-button.d.ts +1 -0
- package/dist/icon-button.js +1 -1
- package/dist/inline-alert.d.ts +1 -0
- package/dist/inline-alert.js +1 -1
- package/dist/input.d.ts +3 -1
- package/dist/input.js +5 -5
- package/dist/label.d.ts +1 -2
- package/dist/label.js +1 -1
- package/dist/library/localize.test.js +1 -1
- package/dist/library/ow.test.js +1 -2
- package/dist/menu.button.d.ts +2 -1
- package/dist/menu.button.js +1 -1
- package/dist/menu.d.ts +1 -0
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +2 -1
- package/dist/menu.link.js +1 -1
- package/dist/menu.options.d.ts +1 -0
- package/dist/menu.options.js +1 -1
- package/dist/modal.d.ts +1 -1
- package/dist/modal.icon-button.d.ts +1 -0
- package/dist/modal.icon-button.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/modal.styles.js +23 -19
- package/dist/modal.tertiary-icon.d.ts +1 -1
- package/dist/modal.tertiary-icon.js +1 -1
- package/dist/popover.d.ts +1 -0
- package/dist/popover.js +1 -1
- package/dist/radio-group.d.ts +3 -1
- package/dist/radio-group.js +4 -5
- package/dist/radio-group.radio.d.ts +3 -2
- package/dist/radio-group.radio.js +1 -1
- package/dist/split-button.d.ts +1 -0
- package/dist/split-button.js +1 -1
- package/dist/split-button.primary-button.d.ts +1 -0
- package/dist/split-button.primary-button.js +1 -1
- package/dist/split-button.primary-link.d.ts +1 -0
- package/dist/split-button.primary-link.js +1 -1
- package/dist/split-button.secondary-button.d.ts +1 -0
- package/dist/split-button.secondary-button.js +1 -1
- package/dist/tab.d.ts +1 -0
- package/dist/tab.group.d.ts +4 -4
- package/dist/tab.group.js +1 -1
- package/dist/tab.js +1 -1
- package/dist/tab.panel.d.ts +1 -0
- package/dist/tab.panel.js +1 -1
- package/dist/tag.d.ts +1 -0
- package/dist/tag.js +1 -1
- package/dist/textarea.d.ts +3 -1
- package/dist/textarea.js +9 -9
- package/dist/toasts.d.ts +1 -0
- package/dist/toasts.js +1 -1
- package/dist/toasts.toast.js +1 -1
- package/dist/toggle.d.ts +2 -1
- package/dist/toggle.js +1 -1
- package/dist/tooltip.container.d.ts +20 -0
- package/dist/tooltip.container.js +1 -0
- package/dist/tooltip.container.styles.d.ts +2 -0
- package/dist/tooltip.container.styles.js +51 -0
- package/dist/tooltip.d.ts +8 -2
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.styles.js +0 -50
- package/dist/tree.d.ts +4 -3
- package/dist/tree.item.d.ts +1 -1
- package/dist/tree.item.icon-button.d.ts +1 -0
- package/dist/tree.item.icon-button.js +1 -1
- package/dist/tree.item.js +1 -1
- package/dist/tree.item.menu.d.ts +3 -4
- package/dist/tree.item.menu.js +1 -1
- package/dist/tree.js +1 -1
- package/package.json +14 -14
package/LICENSE
CHANGED
@@ -186,7 +186,7 @@
|
|
186
186
|
same "printed page" as the copyright notice for easier
|
187
187
|
identification within third-party archives.
|
188
188
|
|
189
|
-
Copyright
|
189
|
+
Copyright 2024 CrowdStrike, Inc.
|
190
190
|
|
191
191
|
Licensed under the Apache License, Version 2.0 (the "License");
|
192
192
|
you may not use this file except in compliance with the License.
|
package/dist/accordion.d.ts
CHANGED
package/dist/accordion.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,s){var l
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,s){var i,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,s);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(n=(l<3?i(n):l>3?i(t,o,n):i(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import{owSlot}from"./library/ow.js";import chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";let GlideCoreAccordion=class GlideCoreAccordion extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcons=!1,this.isClosing=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#s=createRef(),this.#i=createRef(),this.#l=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches&&t&&this.#t.value)return this.#t.value.open=e,void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(e&&t)this.updateComplete.then((()=>{if(this.#t.value&&this.#e.value){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#t.value.open=!0,this.#e.value.animate({height:["0px",this.#e.value.offsetHeight-e+"px"],opacity:[0,1]},{duration:150,easing:"ease-in"}).addEventListener("finish",(()=>{this.#t.value&&this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))}}));else if(t&&(this.isClosing=!0,this.#e.value)){const e=Number.parseFloat(getComputedStyle(this.#e.value)?.paddingBottom);this.#e.value.animate({height:[this.#e.value.offsetHeight-e+"px","0px"],opacity:[1,0]},{duration:100,easing:"ease-out"}).addEventListener("finish",(()=>{this.#t.value&&(this.#t.value.open=!1,this.isClosing=!1,this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}))}}click(){this.#l.value?.click()}firstUpdated(){owSlot(this.#e.value)}render(){return html`<details class="component" ${ref(this.#t)}><summary class="${classMap({summary:!0,active:this.open||this.isClosing,open:this.open})}" data-test="summary" @click="${this.#n}" ${ref(this.#l)}>${chevronIcon}<div class="label-container"><slot class="prefix-icon-slot" name="prefix-icon" @slotchange="${this.#a}" ${ref(this.#s)}></slot><span class="label">${this.label}</span></div><slot class="${classMap({"suffix-icons-slot":!0,icons:this.hasSuffixIcons})}" name="suffix-icons" @slotchange="${this.#r}" ${ref(this.#i)}></slot></summary><slot class="${classMap({"default-slot":!0,indented:this.hasPrefixIcon})}" data-test="default-slot" @slotchange="${this.#c}" ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#i;#l;#c(){owSlot(this.#e.value)}#a(){const e=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(e&&e.length>0)}#r(){const e=this.#i.value?.assignedNodes();this.hasSuffixIcons=Boolean(e&&e.length>0)}#n(e){e.preventDefault(),this.open=!this.open}};__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreAccordion.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreAccordion.prototype,"version",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreAccordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],GlideCoreAccordion.prototype,"isClosing",void 0),GlideCoreAccordion=__decorate([customElement("glide-core-accordion")],GlideCoreAccordion);export default GlideCoreAccordion;
|
@@ -16,9 +16,10 @@ export default class GlideCoreButtonGroupButton extends LitElement {
|
|
16
16
|
get selected(): boolean;
|
17
17
|
set selected(isSelected: boolean);
|
18
18
|
disabled: boolean;
|
19
|
-
value
|
19
|
+
value: string;
|
20
20
|
privateOrientation: 'horizontal' | 'vertical';
|
21
21
|
privateVariant?: 'icon-only';
|
22
|
+
readonly version: string;
|
22
23
|
click(): void;
|
23
24
|
firstUpdated(): void;
|
24
25
|
focus(options?: FocusOptions): void;
|
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,l=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(l=(n<3?r(l):n>3?r(t,o,l):r(t,o))||l);return n>3&&l&&Object.defineProperty(t,o,l),l};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{classMap}from"lit/directives/class-map.js";import packageJson from"../package.json"with{type:"json"};import ow,{owSlot}from"./library/ow.js";import styles from"./button-group.button.styles.js";let GlideCoreButtonGroupButton=class GlideCoreButtonGroupButton extends LitElement{constructor(){super(...arguments),this.label="",this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get selected(){return this.#o}set selected(e){this.#o=e,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#e.value?.click()}firstUpdated(){"icon-only"===this.privateVariant&&owSlot(this.#t.value)}focus(e){this.#e.value?.focus(e)}render(){return html`<div aria-checked="${this.selected}" aria-disabled="${this.disabled}" class="${classMap({component:!0,selected:this.selected,disabled:this.disabled,[this.privateOrientation]:!0,icon:this.hasIcon,"icon-only":"icon-only"===this.privateVariant})}" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#e)}><slot name="icon" @slotchange="${this.#i}" ${ref(this.#t)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#e;#t;#o;#i(){ow(this.#t.value,ow.object.instanceOf(HTMLElement)),this.hasIcon=this.#t.value?.assignedNodes().length>0}};__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"value",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],GlideCoreButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroupButton.prototype,"version",void 0),__decorate([state()],GlideCoreButtonGroupButton.prototype,"hasIcon",void 0),GlideCoreButtonGroupButton=__decorate([customElement("glide-core-button-group-button")],GlideCoreButtonGroupButton);export default GlideCoreButtonGroupButton;
|
package/dist/button-group.d.ts
CHANGED
@@ -18,6 +18,7 @@ export default class GlideCoreButtonGroup extends LitElement {
|
|
18
18
|
set variant(variant: 'icon-only' | undefined);
|
19
19
|
get orientation(): "horizontal" | "vertical";
|
20
20
|
set orientation(orientation: 'horizontal' | 'vertical');
|
21
|
+
readonly version: string;
|
21
22
|
firstUpdated(): void;
|
22
23
|
render(): import("lit").TemplateResult<1>;
|
23
24
|
}
|
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
|
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{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreButtonGroupButton from"./button-group.button.js";import 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.version=packageJson.version,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),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"version",void 0),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
|
package/dist/button.d.ts
CHANGED
@@ -21,6 +21,7 @@ export default class GlideCoreButton extends LitElement {
|
|
21
21
|
type: 'button' | 'submit' | 'reset';
|
22
22
|
value: string;
|
23
23
|
variant: 'primary' | 'secondary' | 'tertiary';
|
24
|
+
readonly version: string;
|
24
25
|
get form(): HTMLFormElement | null;
|
25
26
|
click(): void;
|
26
27
|
render(): import("lit").TemplateResult<1>;
|
package/dist/button.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";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.#r}" ${ref(this.#i)}></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.version=packageJson.version,this.hasPrefixIcon=!1,this.hasSuffixIcon=!1,this.#t=createRef(),this.#i=createRef(),this.#n=createRef(),this.#e=this.attachInternals()}#t;#e;#i;#n;#o(){"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const e=this.#i.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([property({reflect:!0})],GlideCoreButton.prototype,"version",void 0),__decorate([state()],GlideCoreButton.prototype,"hasPrefixIcon",void 0),__decorate([state()],GlideCoreButton.prototype,"hasSuffixIcon",void 0),GlideCoreButton=__decorate([customElement("glide-core-button")],GlideCoreButton);export default GlideCoreButton;
|
package/dist/checkbox-group.d.ts
CHANGED
@@ -12,7 +12,6 @@ declare global {
|
|
12
12
|
*
|
13
13
|
* @slot - One or more of `<glide-core-checkbox>`.
|
14
14
|
* @slot description - Additional information or context.
|
15
|
-
* @slot tooltip - Content for the tooltip.
|
16
15
|
*/
|
17
16
|
export default class GlideCoreCheckboxGroup extends LitElement {
|
18
17
|
#private;
|
@@ -28,8 +27,10 @@ export default class GlideCoreCheckboxGroup extends LitElement {
|
|
28
27
|
get required(): boolean;
|
29
28
|
set required(isRequired: boolean);
|
30
29
|
summary?: string;
|
30
|
+
tooltip?: string;
|
31
31
|
get value(): string[];
|
32
32
|
set value(value: string[]);
|
33
|
+
readonly version: string;
|
33
34
|
checkValidity(): boolean;
|
34
35
|
disconnectedCallback(): void;
|
35
36
|
firstUpdated(): void;
|
@@ -41,6 +42,7 @@ export default class GlideCoreCheckboxGroup extends LitElement {
|
|
41
42
|
formResetCallback(): void;
|
42
43
|
render(): import("lit").TemplateResult<1>;
|
43
44
|
reportValidity(): boolean;
|
45
|
+
resetValidityFeedback(): void;
|
44
46
|
setCustomValidity(message: string): void;
|
45
47
|
setValidity(flags?: ValidityStateFlags, message?: string): void;
|
46
48
|
constructor();
|
package/dist/checkbox-group.js
CHANGED
@@ -1,16 +1,16 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,o){var s,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import"./label.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{owSlot,owSlotType}from"./library/ow.js";import GlideCoreCheckbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";let GlideCoreCheckboxGroup=class GlideCoreCheckboxGroup 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;for(const t of this.#t)t.disabled=e}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)e?t.setValidity(this.#o.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#s}set value(e){this.#s=e;for(const t of this.#t){e.some((e=>e&&e===t.value))?t.checked=!0:t.value&&(t.checked=!1),t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#o.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r)}firstUpdated(){if(owSlot(this.#a.value),owSlotType(this.#a.value,[GlideCoreCheckbox]),this.disabled)for(const e of this.#t)e.disabled=!0;this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)));for(const e of this.#t)e.privateVariant="minimal",e.addEventListener("blur",this.#l.bind(this))}get form(){return this.#o.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#o.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#d.value),this.required&&this.#o.validity.valueMissing&&e&&this.#o.setValidity({}),this.required||!this.#o.validity.valueMissing||e||this.#o.setValidity({});for(const e of this.#t)e.setValidity(this.#o.validity," "),e.requestUpdate();return this.#o.validity}get willValidate(){return this.#o.willValidate}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){for(const e of this.#t)e.formResetCallback()}render(){return html`<div
|
2
2
|
class="component"
|
3
3
|
data-test="component"
|
4
4
|
${ref(this.#d)}
|
5
5
|
>
|
6
6
|
<glide-core-private-label
|
7
7
|
split=${ifDefined(this.privateSplit??void 0)}
|
8
|
+
tooltip=${ifDefined(this.tooltip)}
|
8
9
|
?hide=${this.hideLabel}
|
9
10
|
?disabled=${this.disabled}
|
10
11
|
?error=${this.#n}
|
11
12
|
?required=${this.required}
|
12
13
|
>
|
13
|
-
<slot name="tooltip" slot="tooltip"></slot>
|
14
14
|
<label id="label">${this.label}</label>
|
15
15
|
|
16
16
|
<!-- "aria-describedby" is more appropriate for a description but isn't read by VoiceOver. -->
|
@@ -25,7 +25,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,l=arguments.length
|
|
25
25
|
@change=${this.#c}
|
26
26
|
@private-value-change=${this.#h}
|
27
27
|
@slotchange=${this.#p}
|
28
|
-
${ref(this.#
|
28
|
+
${ref(this.#a)}
|
29
29
|
></slot>
|
30
30
|
</div>
|
31
31
|
|
@@ -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.#
|
43
|
+
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#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.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#a=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#r=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#a;#o;#e;#i;#s;get#t(){return this.#a.value?this.#a.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#r;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#l(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#c(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.target.value?this.value=[...this.value,e.target.value]:e.target instanceof GlideCoreCheckbox&&!e.target.checked&&(this.value=this.value.filter((t=>e.target instanceof GlideCoreCheckbox&&t!==e.target.value)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){owSlot(this.#a.value),owSlotType(this.#a.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})],GlideCoreCheckboxGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"version",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
|
package/dist/checkbox.d.ts
CHANGED
@@ -12,7 +12,6 @@ declare global {
|
|
12
12
|
* @event invalid
|
13
13
|
*
|
14
14
|
* @slot description - Additional information or context.
|
15
|
-
* @slot tooltip - Content for the tooltip.
|
16
15
|
* @slot private-icon
|
17
16
|
*/
|
18
17
|
export default class GlideCoreCheckbox extends LitElement {
|
@@ -37,9 +36,11 @@ export default class GlideCoreCheckbox extends LitElement {
|
|
37
36
|
privateVariant?: 'minimal';
|
38
37
|
required: boolean;
|
39
38
|
summary?: string;
|
39
|
+
tooltip?: string;
|
40
40
|
get value(): string;
|
41
41
|
set value(value: string);
|
42
42
|
privateIsReportValidityOrSubmit: boolean;
|
43
|
+
readonly version: string;
|
43
44
|
get form(): HTMLFormElement | null;
|
44
45
|
blur(): void;
|
45
46
|
checkValidity(): boolean;
|
@@ -52,6 +53,7 @@ export default class GlideCoreCheckbox extends LitElement {
|
|
52
53
|
formResetCallback(): void;
|
53
54
|
render(): import("lit").TemplateResult<1>;
|
54
55
|
reportValidity(): boolean;
|
56
|
+
resetValidityFeedback(): void;
|
55
57
|
setCustomValidity(message: string): void;
|
56
58
|
setValidity(flags?: ValidityStateFlags, message?: string): void;
|
57
59
|
get willValidate(): 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,r){var a,o=arguments.length,s=o<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,i,r);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(s=(o<3?a(s):o>3?a(t,i,s):a(t,i))||s);return o>3&&s&&Object.defineProperty(t,i,s),s};import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";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.#r.form}blur(){this.#a.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#a.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.#s),this.#o?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#a.value),this.#r.validity):this.required&&this.#r.validity.valueMissing&&this.checked?(this.#r.setValidity({}),this.#r.validity):(this.required||!this.#r.validity.valueMissing||this.checked||this.#r.setValidity({}),this.#r.validity)}focus(e){this.#a.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
|
2
2
|
${when("minimal"===this.privateVariant,(()=>html`
|
3
3
|
<label
|
4
4
|
class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
|
@@ -17,7 +17,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,r=arguments.length
|
|
17
17
|
@change=${this.#n}
|
18
18
|
@input=${this.#n}
|
19
19
|
@keydown=${this.#d}
|
20
|
-
${ref(this.#
|
20
|
+
${ref(this.#a)}
|
21
21
|
/>
|
22
22
|
|
23
23
|
<div
|
@@ -33,12 +33,13 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,r=arguments.length
|
|
33
33
|
|
34
34
|
<glide-core-tooltip
|
35
35
|
class="label-tooltip"
|
36
|
+
data-test="label-tooltip"
|
37
|
+
label=${ifDefined(this.tooltip)}
|
36
38
|
offset=${this.privateLabelTooltipOffset}
|
37
39
|
?disabled=${!this.isLabelOverflow||this.privateDisableLabelTooltip}
|
38
40
|
?open=${this.privateShowLabelTooltip}
|
41
|
+
screenreader-hidden
|
39
42
|
>
|
40
|
-
<div aria-hidden="true" data-test="tooltip">${this.label}</div>
|
41
|
-
|
42
43
|
<div
|
43
44
|
class=${classMap({label:!0,disabled:this.disabled})}
|
44
45
|
slot="target"
|
@@ -52,12 +53,12 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,r=arguments.length
|
|
52
53
|
`),(()=>html`<glide-core-private-label
|
53
54
|
orientation=${this.orientation}
|
54
55
|
split=${ifDefined(this.privateSplit??void 0)}
|
56
|
+
tooltip=${ifDefined(this.tooltip)}
|
55
57
|
?disabled=${this.disabled}
|
56
58
|
?error=${this.#l}
|
57
59
|
?hide=${this.hideLabel}
|
58
60
|
?required=${this.required}
|
59
61
|
>
|
60
|
-
<slot name="tooltip" slot="tooltip"></slot>
|
61
62
|
<label for="input"> ${this.label} </label>
|
62
63
|
|
63
64
|
<!--
|
@@ -80,7 +81,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,r=arguments.length
|
|
80
81
|
@change=${this.#n}
|
81
82
|
@input=${this.#n}
|
82
83
|
@keydown=${this.#d}
|
83
|
-
${ref(this.#
|
84
|
+
${ref(this.#a)}
|
84
85
|
/>
|
85
86
|
|
86
87
|
<div
|
@@ -105,14 +106,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,a){var s,r=arguments.length
|
|
105
106
|
>`))}
|
106
107
|
</div>
|
107
108
|
</glide-core-private-label>`))}
|
108
|
-
</div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#
|
109
|
+
</div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#r.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.privateIsReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#r.setValidity({customError:!1},"",this.#a.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#a.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#a.value)}get willValidate(){return this.#r.willValidate}updated(){this.#a.value&&(this.#a.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.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#a=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#s=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#r=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#a;#r;#o;#e;#h;#i;#s;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,{bubbles:!0,composed:!0}))}#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,"tooltip",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"version",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;const icons={indeterminate:html`
|
109
110
|
<svg
|
110
111
|
style=${styleMap({height:"0.875rem",width:"0.875rem"})}
|
111
112
|
viewBox="0 0 14 14"
|
112
113
|
fill="none"
|
113
114
|
class="indeterminate-icon"
|
114
115
|
>
|
115
|
-
<rect x="0.5" y="0.5" width="
|
116
|
+
<rect x="0.5" y="0.5" width="13" height="13" rx="3.5" />
|
116
117
|
<path
|
117
118
|
d="M3 5C3 3.89543 3.89543 3 5 3H9.79289C10.2383 3 10.4614 3.53857 10.1464 3.85355L3.85355 10.1464C3.53857 10.4614 3 10.2383 3 9.79289V5Z"
|
118
119
|
fill="currentColor"
|
package/dist/drawer.d.ts
CHANGED
package/dist/drawer.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length,r=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.pinned=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#o}set open(e){const t=e!==this.#o;this.#o=e;const o=window.matchMedia("(prefers-reduced-motion: reduce)").matches?0:300;this.#o&&t?(this.#n?.cancel(),this.#e?.value?.classList?.add("open"),this.#i=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:o,fill:"forwards",easing:"ease-in",composite:"add"}),this.#i?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#i?.cancel(),this.#n=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:o,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:o,fill:"forwards",composite:"add"}),this.#n?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){owSlot(this.#t.value),this.#o&&(this.#e?.value?.classList?.add("open"),this.#i=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 aria-label="${ifDefined(this.label)}" class="${classMap({component:!0,pinned:this.pinned})}" data-test="component" tabindex="-1" @keydown="${this.#s}" ${ref(this.#e)}><slot @slotchange="${this.#r}" ${ref(this.#t)}></slot></aside>`}#n;#e;#t;#o;#i;#s(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}#r(){owSlot(this.#t.value)}};__decorate([property({reflect:!0})],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDrawer.prototype,"version",void 0),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;
|
package/dist/drawer.styles.js
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
import{css}from"lit";export default[css`
|
2
2
|
.component {
|
3
|
-
background-color: var(--glide-core-surface-base-
|
3
|
+
background-color: var(--glide-core-surface-base-xlightest);
|
4
4
|
block-size: 0;
|
5
5
|
border-end-start-radius: 0.625rem;
|
6
6
|
border-start-start-radius: 0.625rem;
|
@@ -25,7 +25,7 @@ import{css}from"lit";export default[css`
|
|
25
25
|
}
|
26
26
|
|
27
27
|
.open {
|
28
|
-
backdrop-filter: blur(
|
28
|
+
backdrop-filter: blur(50px);
|
29
29
|
block-size: auto;
|
30
30
|
inline-size: var(--width, 27.375rem);
|
31
31
|
inset: 0 0 0 auto;
|
package/dist/dropdown.d.ts
CHANGED
@@ -1,5 +1,4 @@
|
|
1
1
|
import './checkbox.js';
|
2
|
-
import './dropdown.option.js';
|
3
2
|
import './icon-button.js';
|
4
3
|
import './label.js';
|
5
4
|
import './tooltip.js';
|
@@ -19,7 +18,6 @@ declare global {
|
|
19
18
|
* @slot - One or more of `<glide-core-dropdown-option>`.
|
20
19
|
* @slot description - Additional information or context.
|
21
20
|
* @slot icon:<value> - Icons for the selected option or options. Slot one icon per option. `<value>` should be equal to the `value` of each option.
|
22
|
-
* @slot tooltip - Content for the tooltip.
|
23
21
|
*/
|
24
22
|
export default class GlideCoreDropdown extends LitElement {
|
25
23
|
#private;
|
@@ -46,9 +44,11 @@ export default class GlideCoreDropdown extends LitElement {
|
|
46
44
|
get multiple(): boolean;
|
47
45
|
set multiple(isMultiple: boolean);
|
48
46
|
required: boolean;
|
47
|
+
tooltip?: string;
|
49
48
|
get value(): string[];
|
50
49
|
set value(value: string[]);
|
51
50
|
variant?: 'quiet';
|
51
|
+
readonly version: string;
|
52
52
|
private get activeOption();
|
53
53
|
checkValidity(): boolean;
|
54
54
|
click(): void;
|
@@ -70,6 +70,7 @@ export default class GlideCoreDropdown extends LitElement {
|
|
70
70
|
formResetCallback(): void;
|
71
71
|
render(): import("lit").TemplateResult<1>;
|
72
72
|
reportValidity(): boolean;
|
73
|
+
resetValidityFeedback(): void;
|
73
74
|
setCustomValidity(message: string): void;
|
74
75
|
setValidity(flags?: ValidityStateFlags, message?: string): void;
|
75
76
|
constructor();
|