@crowdstrike/glide-core 0.26.1 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/accordion.d.ts +2 -2
- package/dist/accordion.js +1 -1
- package/dist/button-group.button.d.ts +2 -2
- package/dist/button-group.button.js +1 -1
- package/dist/button-group.d.ts +3 -3
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +2 -2
- package/dist/button.js +1 -1
- package/dist/checkbox-group.d.ts +3 -3
- package/dist/checkbox-group.js +9 -9
- package/dist/checkbox.d.ts +2 -3
- package/dist/checkbox.js +3 -3
- package/dist/checkbox.styles.js +8 -16
- package/dist/drawer.d.ts +2 -2
- package/dist/drawer.js +1 -1
- package/dist/dropdown.d.ts +6 -12
- package/dist/dropdown.js +47 -49
- package/dist/dropdown.option.d.ts +2 -3
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.option.styles.js +16 -79
- package/dist/dropdown.styles.js +8 -26
- package/dist/form-controls-layout.d.ts +3 -3
- package/dist/form-controls-layout.js +1 -1
- package/dist/icon-button.d.ts +2 -2
- package/dist/icon-button.js +1 -1
- package/dist/inline-alert.d.ts +2 -2
- package/dist/inline-alert.js +1 -1
- package/dist/input.d.ts +2 -2
- package/dist/input.js +2 -2
- package/dist/label.d.ts +2 -2
- package/dist/label.js +1 -1
- package/dist/label.styles.js +5 -1
- package/dist/library/assert-slot.d.ts +1 -1
- package/dist/library/assert-slot.test.js +22 -22
- package/dist/library/expect-window-error.js +1 -1
- package/dist/library/final.test.js +9 -9
- package/dist/library/localize.test.js +6 -6
- package/dist/library/required.test.js +5 -5
- package/dist/library/unique-id.d.ts +2 -0
- package/dist/library/unique-id.js +1 -0
- package/dist/link.d.ts +2 -3
- package/dist/link.js +1 -1
- package/dist/link.styles.js +1 -1
- package/dist/menu.button.d.ts +2 -2
- package/dist/menu.button.js +1 -1
- package/dist/menu.d.ts +3 -9
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +2 -2
- package/dist/menu.link.js +1 -1
- package/dist/menu.options.d.ts +3 -4
- package/dist/menu.options.js +1 -1
- package/dist/menu.options.styles.js +6 -19
- package/dist/modal.d.ts +6 -6
- package/dist/modal.icon-button.d.ts +2 -2
- package/dist/modal.icon-button.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/popover.d.ts +2 -2
- package/dist/popover.js +1 -1
- package/dist/radio-group.d.ts +3 -3
- package/dist/radio-group.js +6 -6
- package/dist/radio-group.radio.d.ts +2 -2
- package/dist/radio-group.radio.js +1 -1
- package/dist/spinner.d.ts +2 -2
- package/dist/spinner.js +1 -1
- package/dist/split-button.d.ts +4 -10
- package/dist/split-button.js +1 -1
- package/dist/split-button.primary-button.d.ts +2 -2
- package/dist/split-button.primary-button.js +1 -1
- package/dist/split-button.primary-button.styles.js +4 -14
- package/dist/split-button.primary-link.d.ts +2 -2
- package/dist/split-button.primary-link.js +1 -1
- package/dist/split-button.secondary-button.d.ts +3 -4
- package/dist/split-button.secondary-button.js +1 -1
- package/dist/split-button.secondary-button.styles.js +4 -15
- package/dist/tab.d.ts +12 -4
- package/dist/tab.group.d.ts +4 -5
- package/dist/tab.group.js +1 -1
- package/dist/tab.group.styles.js +14 -16
- package/dist/tab.js +1 -1
- package/dist/tab.panel.d.ts +12 -5
- package/dist/tab.panel.js +1 -1
- package/dist/tag.d.ts +2 -4
- package/dist/tag.js +1 -1
- package/dist/tag.styles.js +7 -52
- package/dist/textarea.d.ts +2 -2
- package/dist/textarea.js +7 -7
- package/dist/textarea.styles.js +2 -1
- package/dist/toast.d.ts +3 -3
- package/dist/toast.js +1 -1
- package/dist/toast.toasts.d.ts +9 -9
- package/dist/toast.toasts.js +17 -17
- package/dist/toggle.d.ts +2 -2
- package/dist/toggle.js +1 -1
- package/dist/tooltip.container.d.ts +2 -2
- package/dist/tooltip.container.js +1 -1
- package/dist/tooltip.d.ts +3 -3
- package/dist/tooltip.js +1 -1
- package/package.json +4 -4
package/dist/accordion.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { LitElement } from 'lit';
|
2
2
|
declare global {
|
3
3
|
interface HTMLElementTagNameMap {
|
4
|
-
'glide-core-accordion':
|
4
|
+
'glide-core-accordion': Accordion;
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
@@ -17,7 +17,7 @@ declare global {
|
|
17
17
|
*
|
18
18
|
* @fires {Event} toggle
|
19
19
|
*/
|
20
|
-
export default class
|
20
|
+
export default class Accordion extends LitElement {
|
21
21
|
#private;
|
22
22
|
static shadowRootOptions: ShadowRootInit;
|
23
23
|
static styles: import("lit").CSSResult[];
|
package/dist/accordion.js
CHANGED
@@ -1 +1 @@
|
|
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 chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let
|
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 chevronIcon from"./icons/chevron.js";import styles from"./accordion.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Accordion=class Accordion 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:shadowRootMode}}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()}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" ${assertSlot()} ${ref(this.#e)}></slot></details>`}#e;#t;#o;#s;#i;#l;#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}),required],Accordion.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Accordion.prototype,"open",null),__decorate([property({reflect:!0})],Accordion.prototype,"version",void 0),__decorate([state()],Accordion.prototype,"hasPrefixIcon",void 0),__decorate([state()],Accordion.prototype,"hasSuffixIcons",void 0),__decorate([state()],Accordion.prototype,"isClosing",void 0),Accordion=__decorate([customElement("glide-core-accordion"),final],Accordion);export default Accordion;
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { LitElement } from 'lit';
|
2
2
|
declare global {
|
3
3
|
interface HTMLElementTagNameMap {
|
4
|
-
'glide-core-button-group-button':
|
4
|
+
'glide-core-button-group-button': ButtonGroupButton;
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
@@ -17,7 +17,7 @@ declare global {
|
|
17
17
|
*
|
18
18
|
* @fires {Event} selected
|
19
19
|
*/
|
20
|
-
export default class
|
20
|
+
export default class ButtonGroupButton extends LitElement {
|
21
21
|
#private;
|
22
22
|
static shadowRootOptions: ShadowRootInit;
|
23
23
|
static styles: import("lit").CSSResult[];
|
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,s=arguments.length,n=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(n=(s<3?i(n):s>3?i(e,o,n):i(e,o))||n);return s>3&&n&&Object.defineProperty(e,o,n),n};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 styles from"./button-group.button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let ButtonGroupButton=class ButtonGroupButton extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.value="",this.privateOrientation="horizontal",this.version=packageJson.version,this.hasIcon=!1,this.#t=createRef(),this.#e=createRef(),this.#o=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get selected(){return this.#o}set selected(t){this.#o=t,this.dispatchEvent(new Event("private-selected",{bubbles:!0}))}click(){this.#t.value?.click()}focus(t){this.#t.value?.focus(t)}privateSelect(){this.selected=!0,this.dispatchEvent(new Event("selected",{bubbles:!0,composed:!0}))}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})}" data-test="radio" role="radio" tabindex="${!this.selected||this.disabled?-1:0}" ${ref(this.#t)}><slot name="icon" @slotchange="${this.#r}" ${assertSlot(null,"icon-only"!==this.privateVariant)} ${ref(this.#e)}></slot><div class="${classMap({label:!0,"visually-hidden":"icon-only"===this.privateVariant})}">${this.label}</div></div>`}#t;#e;#o;#r(){const t=this.#e.value?.assignedNodes();this.hasIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],ButtonGroupButton.prototype,"label",void 0),__decorate([property({type:Boolean,reflect:!0})],ButtonGroupButton.prototype,"selected",null),__decorate([property({type:Boolean,reflect:!0})],ButtonGroupButton.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],ButtonGroupButton.prototype,"value",void 0),__decorate([property()],ButtonGroupButton.prototype,"privateOrientation",void 0),__decorate([property()],ButtonGroupButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],ButtonGroupButton.prototype,"version",void 0),__decorate([state()],ButtonGroupButton.prototype,"hasIcon",void 0),ButtonGroupButton=__decorate([customElement("glide-core-button-group-button"),final],ButtonGroupButton);export default ButtonGroupButton;
|
package/dist/button-group.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { LitElement } from 'lit';
|
2
2
|
declare global {
|
3
3
|
interface HTMLElementTagNameMap {
|
4
|
-
'glide-core-button-group':
|
4
|
+
'glide-core-button-group': ButtonGroup;
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
@@ -12,9 +12,9 @@ declare global {
|
|
12
12
|
* @readonly
|
13
13
|
* @attr {string} [version]
|
14
14
|
*
|
15
|
-
* @slot {
|
15
|
+
* @slot {ButtonGroupButton}
|
16
16
|
*/
|
17
|
-
export default class
|
17
|
+
export default class ButtonGroup extends LitElement {
|
18
18
|
#private;
|
19
19
|
static shadowRootOptions: ShadowRootInit;
|
20
20
|
static styles: import("lit").CSSResult[];
|
package/dist/button-group.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,o,r){var i
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,r){var n,i=arguments.length,l=i<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(n=t[s])&&(l=(i<3?n(l):i>3?n(e,o,l):n(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 ButtonGroupButton from"./button-group.button.js";import styles from"./button-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let ButtonGroup=class ButtonGroup extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#e="horizontal"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#r)e.privateVariant=t;this.#o=t}get orientation(){return this.#e}set orientation(t){for(const e of this.#r)e.privateOrientation=t;this.#e=t}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.#n}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${assertSlot([ButtonGroupButton])} ${ref(this.#t)}></slot></div></div>`}#t;#e;#o;get#r(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){if(this.#r.filter((({selected:t})=>t)).length>1)throw new Error("Only one selected Button Group Button is allowed.");if(!this.#r.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#r.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#r)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#n(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||e.privateSelect()}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#r.at(-1);for(;o instanceof ButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#r.at(-1);o instanceof ButtonGroupButton&&o.privateSelect();break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#r.at(0);for(;o instanceof ButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#r.at(0);o instanceof ButtonGroupButton&&o.privateSelect();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.privateSelect()}}}#l(t){if(t.target instanceof ButtonGroupButton&&t.target.selected){for(const e of this.#r)e!==t.target&&(e.selected=!1);t.target.focus()}}};__decorate([property({reflect:!0}),required],ButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],ButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0,useDefault:!0})],ButtonGroup.prototype,"orientation",null),__decorate([property({reflect:!0})],ButtonGroup.prototype,"version",void 0),ButtonGroup=__decorate([customElement("glide-core-button-group"),final],ButtonGroup);export default ButtonGroup;
|
package/dist/button.d.ts
CHANGED
@@ -2,7 +2,7 @@ import './tooltip.js';
|
|
2
2
|
import { LitElement } from 'lit';
|
3
3
|
declare global {
|
4
4
|
interface HTMLElementTagNameMap {
|
5
|
-
'glide-core-button':
|
5
|
+
'glide-core-button': Button;
|
6
6
|
}
|
7
7
|
}
|
8
8
|
/**
|
@@ -25,7 +25,7 @@ declare global {
|
|
25
25
|
* @readonly
|
26
26
|
* @prop {HTMLFormElement | null} form
|
27
27
|
*/
|
28
|
-
export default class
|
28
|
+
export default class Button extends LitElement {
|
29
29
|
#private;
|
30
30
|
static formAssociated: boolean;
|
31
31
|
static shadowRootOptions: ShadowRootInit;
|
package/dist/button.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,i){var r,s=arguments.length,a=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,i);else for(var n=t.length-1;n>=0;n--)(r=t[n])&&(a=(s<3?r(a):s>3?r(e,o,a):r(e,o))||a);return s>3&&a&&Object.defineProperty(e,o,a),a};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 packageJson from"../package.json"with{type:"json"};import styles from"./button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Button=class Button extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}get ariaDescription(){return this.#t}set ariaDescription(t){this.#t=t,this.#e.value&&(this.#e.value.ariaDescription=t)}get form(){return this.#o.form}click(){this.#e.value?.click()}firstUpdated(){this.#e.value&&this.ariaDescription&&(this.#e.value.ariaDescription=this.ariaDescription)}render(){return html`<glide-core-tooltip label="${this.tooltip??""}" ?disabled="${!this.disabled||!this.tooltip}"><button aria-disabled="${this.disabled?"true":"false"}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant,large:"large"===this.size,small:"small"===this.size,disabled:this.disabled,"prefix-icon":this.hasPrefixIcon,"suffix-icon":this.hasSuffixIcon})}" data-test="button" slot="target" @click="${this.#i}" ${ref(this.#e)}><slot name="prefix-icon" @slotchange="${this.#r}" ${ref(this.#s)}></slot>${this.label}<slot name="suffix-icon" @slotchange="${this.#a}" ${ref(this.#n)}></slot></button></glide-core-tooltip>`}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=null,this.#e=createRef(),this.#s=createRef(),this.#n=createRef(),this.#o=this.attachInternals()}#t;#e;#o;#s;#n;#i(t){this.disabled?t.stopPropagation():"submit"!==this.type?"reset"!==this.type||this.form?.reset():this.form?.requestSubmit()}#r(){const t=this.#s.value?.assignedNodes();this.hasPrefixIcon=Boolean(t&&t.length>0)}#a(){const t=this.#n.value?.assignedNodes();this.hasSuffixIcon=Boolean(t&&t.length>0)}};__decorate([property({reflect:!0}),required],Button.prototype,"label",void 0),__decorate([property({attribute:"aria-description",reflect:!0})],Button.prototype,"ariaDescription",null),__decorate([property({type:Boolean,reflect:!0})],Button.prototype,"disabled",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"size",void 0),__decorate([property({reflect:!0})],Button.prototype,"tooltip",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"type",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"value",void 0),__decorate([property({reflect:!0,useDefault:!0})],Button.prototype,"variant",void 0),__decorate([property({reflect:!0})],Button.prototype,"version",void 0),__decorate([state()],Button.prototype,"hasPrefixIcon",void 0),__decorate([state()],Button.prototype,"hasSuffixIcon",void 0),Button=__decorate([customElement("glide-core-button"),final],Button);export default Button;
|
package/dist/checkbox-group.d.ts
CHANGED
@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
|
|
3
3
|
import type FormControl from './library/form-control.js';
|
4
4
|
declare global {
|
5
5
|
interface HTMLElementTagNameMap {
|
6
|
-
'glide-core-checkbox-group':
|
6
|
+
'glide-core-checkbox-group': CheckboxGroup;
|
7
7
|
}
|
8
8
|
}
|
9
9
|
/**
|
@@ -20,7 +20,7 @@ declare global {
|
|
20
20
|
* @readonly
|
21
21
|
* @attr {string} [version]
|
22
22
|
*
|
23
|
-
* @slot {
|
23
|
+
* @slot {Checkbox}
|
24
24
|
* @slot {Element | string} [description] - Additional information or context
|
25
25
|
*
|
26
26
|
* @fires {Event} invalid
|
@@ -49,7 +49,7 @@ declare global {
|
|
49
49
|
* @param {ValidityStateFlags} [flags]
|
50
50
|
* @param {string} [message]
|
51
51
|
*/
|
52
|
-
export default class
|
52
|
+
export default class CheckboxGroup extends LitElement implements FormControl {
|
53
53
|
#private;
|
54
54
|
static formAssociated: boolean;
|
55
55
|
static shadowRootOptions: ShadowRootInit;
|
package/dist/checkbox-group.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,s){var o,a=arguments.length,r=a<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(o=e[l])&&(r=(a<3?o(r):a>3?o(t,i,r):o(t,i))||r);return a>3&&r&&Object.defineProperty(t,i,r),r};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 Checkbox from"./checkbox.js";import styles from"./checkbox-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let CheckboxGroup=class CheckboxGroup extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e;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.#s.validity," "):t.setValidity({}),t.requestUpdate()}get value(){return this.#o}set value(e){this.#o=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.#s.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#a)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;const e=this.#t.every((({checked:e})=>!e));for(const t of this.#t)t.addEventListener("blur",this.#r.bind(this)),e&&(t.checked=this.value.includes(t.value),t.checked&&!this.disabled&&(t.disabled=!1))}get form(){return this.#s.form}get validity(){const e=this.#t.some((({checked:e})=>e));this.required&&!e&&this.#s.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#l.value),this.required&&this.#s.validity.valueMissing&&e&&this.#s.setValidity({}),this.required||!this.#s.validity.valueMissing||e||this.#s.setValidity({});for(const e of this.#t)e.setValidity(this.#s.validity," "),e.requestUpdate();return this.#s.validity}focus(e){const t=this.#t.find((({disabled:e})=>!e));t?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}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.#l)}
|
@@ -10,7 +10,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
|
|
10
10
|
tooltip=${ifDefined(this.tooltip)}
|
11
11
|
?hide=${this.hideLabel}
|
12
12
|
?disabled=${this.disabled}
|
13
|
-
?error=${this.#
|
13
|
+
?error=${this.#n}
|
14
14
|
?required=${this.required}
|
15
15
|
>
|
16
16
|
<label id="label">${this.label}</label>
|
@@ -20,19 +20,19 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
|
|
20
20
|
aria-labelledby="label description"
|
21
21
|
role="group"
|
22
22
|
slot="control"
|
23
|
-
class=${classMap({"checkbox-container":!0,invalid:this.#
|
23
|
+
class=${classMap({"checkbox-container":!0,invalid:this.#n})}
|
24
24
|
>
|
25
25
|
<slot
|
26
26
|
class="default-slot"
|
27
|
-
@private-checked-change=${this.#
|
27
|
+
@private-checked-change=${this.#d}
|
28
28
|
@private-disabled-change=${this.#c}
|
29
29
|
@private-value-change=${this.#h}
|
30
30
|
@slotchange=${this.#p}
|
31
|
-
${assertSlot([
|
31
|
+
${assertSlot([Checkbox])}
|
32
32
|
${ref(this.#u)}
|
33
33
|
>
|
34
34
|
<!--
|
35
|
-
@type {
|
35
|
+
@type {Checkbox}
|
36
36
|
@required
|
37
37
|
-->
|
38
38
|
</slot>
|
@@ -40,7 +40,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
|
|
40
40
|
|
41
41
|
<div id="description" slot="description">
|
42
42
|
<slot
|
43
|
-
class=${classMap({description:!0,hidden:Boolean(this.#
|
43
|
+
class=${classMap({description:!0,hidden:Boolean(this.#n&&this.validityMessage)})}
|
44
44
|
name="description"
|
45
45
|
>
|
46
46
|
<!--
|
@@ -49,9 +49,9 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
|
|
49
49
|
-->
|
50
50
|
</slot>
|
51
51
|
|
52
|
-
${when(this.#
|
52
|
+
${when(this.#n&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
|
53
53
|
>${unsafeHTML(this.validityMessage)}</span
|
54
54
|
>`))}
|
55
55
|
</div>
|
56
56
|
</glide-core-private-label>
|
57
|
-
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#
|
57
|
+
</div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#s.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#s.setValidity({customError:!1},"",this.#l.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#l.value)}setValidity(e,t){this.validityMessage=t,this.#s.setValidity(e," ",this.#l.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#l=createRef(),this.#u=createRef(),this.#e=!1,this.#i=!1,this.#o=[],this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#s=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#l;#u;#s;#e;#i;#o;get#t(){return this.#u.value?this.#u.value.assignedElements().filter((e=>e instanceof Checkbox)):[]}#a;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#f(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#r(e){const t=e.relatedTarget;t&&t instanceof Checkbox&&this.#t.includes(t)||this.#f()}#d(e){e.target instanceof Checkbox&&e.target.checked&&e.target.value?this.#o=[...this.value,e.target.value]:e.target instanceof Checkbox&&!e.target.checked&&(this.#o=this.value.filter((t=>e.target instanceof Checkbox&&t!==e.target.value)))}#c(e){if(e.target instanceof Checkbox&&e.target.disabled&&e.target.checked){const t=this.#o.lastIndexOf(e.target.value);this.#o.splice(t,t+1)}else e.target instanceof Checkbox&&e.target.checked&&e.target.value&&this.#o.push(e.target.value)}#h(e){e.target instanceof Checkbox&&e.target.checked&&e.detail.new?this.value=this.#o.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof Checkbox&&e.target.checked&&(this.value=this.#o.filter((t=>t!==e.detail.old)))}#p(){for(const e of this.#t)e.privateVariant="minimal";this.#o=this.#t.filter((({checked:e,disabled:t,value:i})=>e&&!t&&""!==i)).map((({value:e})=>e))}};__decorate([property({reflect:!0}),required],CheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],CheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],CheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,useDefault:!0})],CheckboxGroup.prototype,"name",void 0),__decorate([property({reflect:!0,useDefault:!0})],CheckboxGroup.prototype,"orientation",void 0),__decorate([property()],CheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],CheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"tooltip",void 0),__decorate([property({type:Array})],CheckboxGroup.prototype,"value",null),__decorate([property({reflect:!0})],CheckboxGroup.prototype,"version",void 0),__decorate([state()],CheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],CheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],CheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],CheckboxGroup.prototype,"validityMessage",void 0),CheckboxGroup=__decorate([customElement("glide-core-checkbox-group"),final],CheckboxGroup);export default CheckboxGroup;
|
package/dist/checkbox.d.ts
CHANGED
@@ -4,7 +4,7 @@ import { LitElement } from 'lit';
|
|
4
4
|
import type FormControl from './library/form-control.js';
|
5
5
|
declare global {
|
6
6
|
interface HTMLElementTagNameMap {
|
7
|
-
'glide-core-checkbox':
|
7
|
+
'glide-core-checkbox': Checkbox;
|
8
8
|
}
|
9
9
|
}
|
10
10
|
/**
|
@@ -53,7 +53,7 @@ declare global {
|
|
53
53
|
* @param {ValidityStateFlags} [flags]
|
54
54
|
* @param {string} [message]
|
55
55
|
*/
|
56
|
-
export default class
|
56
|
+
export default class Checkbox extends LitElement implements FormControl {
|
57
57
|
#private;
|
58
58
|
static formAssociated: boolean;
|
59
59
|
static shadowRootOptions: ShadowRootInit;
|
@@ -81,7 +81,6 @@ export default class GlideCoreCheckbox extends LitElement implements FormControl
|
|
81
81
|
privateLabelTooltipOffset: number;
|
82
82
|
privateShowLabelTooltip: boolean;
|
83
83
|
privateDisableLabelTooltip: boolean;
|
84
|
-
privateSize: 'large' | 'small';
|
85
84
|
privateSplit?: 'left' | 'middle' | 'right';
|
86
85
|
privateVariant?: 'minimal';
|
87
86
|
required: boolean;
|
package/dist/checkbox.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};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";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length,o=r<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o};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";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Checkbox=class Checkbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get checked(){return this.#i}set checked(e){const t=e!==this.#i;this.#i=e,t&&this.dispatchEvent(new Event("private-checked-change",{bubbles:!0}))}get disabled(){return this.#s}set disabled(e){this.#s=e,this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get value(){return this.#a}set value(e){const t=this.#a;this.#a=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#r.form}checkValidity(){this.isCheckingValidity=!0;const e=this.#r.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?.click()}connectedCallback(){super.connectedCallback(),this.#l=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#l.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#n),this.#l?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#r.validity:this.required&&!this.checked?(this.#r.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#o.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.#o.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#n)}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
|
-
class
|
4
|
+
class="label-and-input-and-checkbox"
|
5
5
|
part="private-label-and-input-and-checkbox"
|
6
6
|
>
|
7
7
|
<div
|
@@ -127,7 +127,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,r=arguments.length
|
|
127
127
|
>`))}
|
128
128
|
</div>
|
129
129
|
</glide-core-private-label>`))}
|
130
|
-
</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.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.
|
130
|
+
</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.#o.value):this.#r.setValidity({customError:!0,valueMissing:this.#r.validity.valueMissing}," ",this.#o.value)}setValidity(e,t){this.validityMessage=t,this.#r.setValidity(e," ",this.#o.value)}updated(){this.#o.value&&(this.#o.value.indeterminate=this.indeterminate)}constructor(){super(),this.privateInternallyInert=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.version=packageJson.version,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#o=createRef(),this.#i=!1,this.#s=!1,this.#p=createRef(),this.#a="",this.#n=({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()}))}#o;#r;#l;#i;#s;#e;#p;#a;#n;get#d(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#b(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#h(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#c(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#p.value&&(this.isLabelOverflow=this.#p.value.scrollWidth>this.#p.value.clientWidth)}};__decorate([property({reflect:!0}),required],Checkbox.prototype,"label",null),__decorate([property({type:Boolean})],Checkbox.prototype,"checked",null),__decorate([property({attribute:"private-internally-inert",type:Boolean})],Checkbox.prototype,"privateInternallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],Checkbox.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],Checkbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],Checkbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0,useDefault:!0})],Checkbox.prototype,"orientation",void 0),__decorate([property({reflect:!0,useDefault:!0})],Checkbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,useDefault:!0,type:Number})],Checkbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],Checkbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],Checkbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property()],Checkbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],Checkbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],Checkbox.prototype,"required",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"tooltip",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"value",null),__decorate([property({type:Boolean})],Checkbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([property({reflect:!0})],Checkbox.prototype,"version",void 0),__decorate([state()],Checkbox.prototype,"isBlurring",void 0),__decorate([state()],Checkbox.prototype,"isCheckingValidity",void 0),__decorate([state()],Checkbox.prototype,"isLabelOverflow",void 0),__decorate([state()],Checkbox.prototype,"validityMessage",void 0),Checkbox=__decorate([customElement("glide-core-checkbox"),final],Checkbox);export default Checkbox;const icons={indeterminate:html`
|
131
131
|
<svg
|
132
132
|
aria-hidden="true"
|
133
133
|
style=${styleMap({height:"0.875rem",width:"0.875rem"})}
|
package/dist/checkbox.styles.js
CHANGED
@@ -4,22 +4,12 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
4
4
|
`,css`
|
5
5
|
.label-and-input-and-checkbox {
|
6
6
|
align-items: center;
|
7
|
+
column-gap: var(--glide-core-spacing-base-sm);
|
7
8
|
display: flex;
|
9
|
+
font-family: var(--glide-core-typography-family-primary);
|
10
|
+
font-size: var(--glide-core-typography-size-body-default);
|
11
|
+
font-weight: var(--glide-core-typography-weight-regular);
|
8
12
|
line-height: 100%;
|
9
|
-
|
10
|
-
&.large {
|
11
|
-
column-gap: var(--glide-core-spacing-base-sm);
|
12
|
-
font-family: var(--glide-core-typography-family-primary);
|
13
|
-
font-size: var(--glide-core-typography-size-body-default);
|
14
|
-
font-weight: var(--glide-core-typography-weight-regular);
|
15
|
-
}
|
16
|
-
|
17
|
-
&.small {
|
18
|
-
column-gap: var(--glide-core-spacing-base-xs);
|
19
|
-
font-family: var(--glide-core-typography-family-primary);
|
20
|
-
font-size: var(--glide-core-typography-size-body-small);
|
21
|
-
font-weight: var(--glide-core-typography-weight-regular);
|
22
|
-
}
|
23
13
|
}
|
24
14
|
|
25
15
|
.input-and-checkbox-and-summary {
|
@@ -209,8 +199,10 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
209
199
|
}
|
210
200
|
}
|
211
201
|
|
212
|
-
.summary
|
213
|
-
|
202
|
+
.summary {
|
203
|
+
&.disabled {
|
204
|
+
color: var(--glide-core-color-interactive-text-default--disabled);
|
205
|
+
}
|
214
206
|
}
|
215
207
|
|
216
208
|
.validity-message {
|
package/dist/drawer.d.ts
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { LitElement } from 'lit';
|
2
2
|
declare global {
|
3
3
|
interface HTMLElementTagNameMap {
|
4
|
-
'glide-core-drawer':
|
4
|
+
'glide-core-drawer': Drawer;
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
@@ -18,7 +18,7 @@ declare global {
|
|
18
18
|
*
|
19
19
|
* @fires {Event} toggle
|
20
20
|
*/
|
21
|
-
export default class
|
21
|
+
export default class Drawer extends LitElement {
|
22
22
|
#private;
|
23
23
|
static shadowRootOptions: ShadowRootInit;
|
24
24
|
static styles: import("lit").CSSResult[];
|
package/dist/drawer.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,i){var r
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var n,r=arguments.length,s=r<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(s=(r<3?n(s):r>3?n(t,o,s):n(t,o))||s);return r>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./drawer.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Drawer=class Drawer 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:shadowRootMode}}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.#i?.cancel(),this.#e?.value?.classList?.add("open"),this.#n=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.#n?.finished.then((()=>{this.#e?.value?.focus(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}))):t&&(this.#n?.cancel(),this.#i=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.#i?.finished.then((()=>{this.#e.value?.classList?.remove("open"),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))})))}firstUpdated(){this.#o&&(this.#e?.value?.classList?.add("open"),this.#n=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" ${ref(this.#e)}><slot ${assertSlot()} ${ref(this.#t)}></slot></aside>`}#i;#e;#t;#o;#n};__decorate([property({reflect:!0}),required],Drawer.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],Drawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],Drawer.prototype,"open",null),__decorate([property({reflect:!0})],Drawer.prototype,"version",void 0),Drawer=__decorate([customElement("glide-core-drawer"),final],Drawer);export default Drawer;
|
package/dist/dropdown.d.ts
CHANGED
@@ -3,11 +3,11 @@ import './icon-button.js';
|
|
3
3
|
import './label.js';
|
4
4
|
import './tooltip.js';
|
5
5
|
import { LitElement } from 'lit';
|
6
|
-
import
|
6
|
+
import DropdownOption from './dropdown.option.js';
|
7
7
|
import type FormControl from './library/form-control.js';
|
8
8
|
declare global {
|
9
9
|
interface HTMLElementTagNameMap {
|
10
|
-
'glide-core-dropdown':
|
10
|
+
'glide-core-dropdown': Dropdown;
|
11
11
|
}
|
12
12
|
}
|
13
13
|
/**
|
@@ -25,7 +25,6 @@ declare global {
|
|
25
25
|
* @attr {boolean} [readonly=false]
|
26
26
|
* @attr {boolean} [required=false]
|
27
27
|
* @attr {boolean} [select-all=false]
|
28
|
-
* @attr {'large'|'small'} [size='large']
|
29
28
|
* @attr {string} [tooltip]
|
30
29
|
* @attr {string[]} [value=[]]
|
31
30
|
* @attr {'quiet'} [variant]
|
@@ -33,7 +32,7 @@ declare global {
|
|
33
32
|
* @readonly
|
34
33
|
* @attr {string} [version]
|
35
34
|
*
|
36
|
-
* @slot {
|
35
|
+
* @slot {DropdownOption}
|
37
36
|
* @slot {Element | string} [description] - Additional information or context
|
38
37
|
* @slot {Element} [icon:value] - Icons for the selected option or options. Slot one icon per Dropdown Option. `<value>` should be equal to the `value` of each Dropdown Option.
|
39
38
|
*
|
@@ -54,7 +53,7 @@ declare global {
|
|
54
53
|
*
|
55
54
|
* @method filter
|
56
55
|
* @param {string} query
|
57
|
-
* @returns Promise<
|
56
|
+
* @returns Promise<DropdownOption[] | undefined | void>
|
58
57
|
*
|
59
58
|
* @method formAssociatedCallback
|
60
59
|
* @method formResetCallback
|
@@ -71,7 +70,7 @@ declare global {
|
|
71
70
|
* @param {ValidityStateFlags} [flags]
|
72
71
|
* @param {string} [message]
|
73
72
|
*/
|
74
|
-
export default class
|
73
|
+
export default class Dropdown extends LitElement implements FormControl {
|
75
74
|
#private;
|
76
75
|
static formAssociated: boolean;
|
77
76
|
static shadowRootOptions: ShadowRootInit;
|
@@ -107,11 +106,6 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
107
106
|
*/
|
108
107
|
get multiple(): boolean;
|
109
108
|
set multiple(isMultiple: boolean);
|
110
|
-
/**
|
111
|
-
* @default 'large'
|
112
|
-
*/
|
113
|
-
get size(): 'large' | 'small';
|
114
|
-
set size(size: 'large' | 'small');
|
115
109
|
tooltip?: string;
|
116
110
|
/**
|
117
111
|
* @default []
|
@@ -131,7 +125,7 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
131
125
|
connectedCallback(): void;
|
132
126
|
createRenderRoot(): ShadowRoot;
|
133
127
|
disconnectedCallback(): void;
|
134
|
-
filter(query: string): Promise<
|
128
|
+
filter(query: string): Promise<DropdownOption[] | undefined | void>;
|
135
129
|
firstUpdated(): void;
|
136
130
|
focus(options?: FocusOptions): void;
|
137
131
|
get form(): HTMLFormElement | null;
|