@crowdstrike/glide-core 0.26.1 → 0.28.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 +17 -22
- package/dist/dropdown.js +102 -107
- package/dist/dropdown.option.d.ts +9 -9
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.option.styles.js +16 -79
- package/dist/dropdown.styles.js +57 -74
- 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/icons/checked.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/input.styles.js +9 -7
- 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/form-control.d.ts +1 -1
- package/dist/library/localize.d.ts +5 -0
- 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.button.styles.js +3 -3
- 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.link.styles.js +3 -3
- package/dist/menu.options.d.ts +3 -4
- package/dist/menu.options.js +1 -1
- package/dist/menu.options.styles.js +3 -20
- 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/slider.d.ts +116 -0
- package/dist/slider.js +168 -0
- package/dist/slider.styles.d.ts +2 -0
- package/dist/slider.styles.js +168 -0
- 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/styles/variables.css +1 -1
- 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 +17 -2
- 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/dist/translations/en.js +1 -1
- package/dist/translations/fr.d.ts +1 -1
- package/dist/translations/fr.js +1 -1
- package/dist/translations/ja.d.ts +1 -1
- package/dist/translations/ja.js +1 -1
- package/package.json +19 -18
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
@@ -1,18 +1,17 @@
|
|
1
|
-
import './checkbox.js';
|
2
1
|
import './icon-button.js';
|
3
2
|
import './label.js';
|
4
3
|
import './tooltip.js';
|
5
4
|
import { LitElement } from 'lit';
|
6
|
-
import
|
5
|
+
import DropdownOption from './dropdown.option.js';
|
7
6
|
import type FormControl from './library/form-control.js';
|
8
7
|
declare global {
|
9
8
|
interface HTMLElementTagNameMap {
|
10
|
-
'glide-core-dropdown':
|
9
|
+
'glide-core-dropdown': Dropdown;
|
11
10
|
}
|
12
11
|
}
|
13
12
|
/**
|
14
13
|
* @attr {string} label
|
15
|
-
* @attr {
|
14
|
+
* @attr {boolean} [add-button=false]
|
16
15
|
* @attr {boolean} [disabled=false]
|
17
16
|
* @attr {boolean} [filterable=false]
|
18
17
|
* @attr {boolean} [hide-label=false]
|
@@ -25,7 +24,6 @@ declare global {
|
|
25
24
|
* @attr {boolean} [readonly=false]
|
26
25
|
* @attr {boolean} [required=false]
|
27
26
|
* @attr {boolean} [select-all=false]
|
28
|
-
* @attr {'large'|'small'} [size='large']
|
29
27
|
* @attr {string} [tooltip]
|
30
28
|
* @attr {string[]} [value=[]]
|
31
29
|
* @attr {'quiet'} [variant]
|
@@ -33,11 +31,11 @@ declare global {
|
|
33
31
|
* @readonly
|
34
32
|
* @attr {string} [version]
|
35
33
|
*
|
36
|
-
* @slot {
|
34
|
+
* @slot {DropdownOption}
|
37
35
|
* @slot {Element | string} [description] - Additional information or context
|
38
|
-
* @slot {Element} [icon:value] - Icons for the selected
|
36
|
+
* @slot {Element} [icon:value] - Icons for the selected Dropdown Option(s). Slot one icon per Dropdown Option. `<value>` should be equal to the `value` of each Dropdown Option.
|
39
37
|
*
|
40
|
-
* @fires {
|
38
|
+
* @fires {CustomEvent} add
|
41
39
|
* @fires {Event} change
|
42
40
|
* @fires {Event} input
|
43
41
|
* @fires {Event} invalid
|
@@ -54,7 +52,7 @@ declare global {
|
|
54
52
|
*
|
55
53
|
* @method filter
|
56
54
|
* @param {string} query
|
57
|
-
* @returns Promise<
|
55
|
+
* @returns Promise<DropdownOption[] | undefined | void>
|
58
56
|
*
|
59
57
|
* @method formAssociatedCallback
|
60
58
|
* @method formResetCallback
|
@@ -71,13 +69,13 @@ declare global {
|
|
71
69
|
* @param {ValidityStateFlags} [flags]
|
72
70
|
* @param {string} [message]
|
73
71
|
*/
|
74
|
-
export default class
|
72
|
+
export default class Dropdown extends LitElement implements FormControl {
|
75
73
|
#private;
|
76
74
|
static formAssociated: boolean;
|
77
75
|
static shadowRootOptions: ShadowRootInit;
|
78
76
|
static styles: import("lit").CSSResult[];
|
79
77
|
label?: string;
|
80
|
-
|
78
|
+
addButton: boolean;
|
81
79
|
/**
|
82
80
|
* @default false
|
83
81
|
*/
|
@@ -107,11 +105,6 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
107
105
|
*/
|
108
106
|
get multiple(): boolean;
|
109
107
|
set multiple(isMultiple: boolean);
|
110
|
-
/**
|
111
|
-
* @default 'large'
|
112
|
-
*/
|
113
|
-
get size(): 'large' | 'small';
|
114
|
-
set size(size: 'large' | 'small');
|
115
108
|
tooltip?: string;
|
116
109
|
/**
|
117
110
|
* @default []
|
@@ -121,17 +114,17 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
121
114
|
variant?: 'quiet';
|
122
115
|
readonly version: string;
|
123
116
|
private get activeOption();
|
117
|
+
private get areAllOptionsSelected();
|
118
|
+
private get areSomeOptionsSelected();
|
124
119
|
checkValidity(): boolean;
|
125
120
|
click(): void;
|
126
121
|
private get selectedOptions();
|
127
|
-
private get
|
128
|
-
private get isAllSelected();
|
129
|
-
private get isSomeSelected();
|
122
|
+
private get lastSelectedAndEnabledOption();
|
130
123
|
private get internalLabel();
|
131
124
|
connectedCallback(): void;
|
132
125
|
createRenderRoot(): ShadowRoot;
|
133
126
|
disconnectedCallback(): void;
|
134
|
-
filter(query: string): Promise<
|
127
|
+
filter(query: string): Promise<DropdownOption[] | undefined | void>;
|
135
128
|
firstUpdated(): void;
|
136
129
|
focus(options?: FocusOptions): void;
|
137
130
|
get form(): HTMLFormElement | null;
|
@@ -148,14 +141,16 @@ export default class GlideCoreDropdown extends LitElement implements FormControl
|
|
148
141
|
private hasNoAvailableOptions;
|
149
142
|
private hasNoMatchingOptions;
|
150
143
|
private inputValue;
|
144
|
+
private isAddButtonActive;
|
145
|
+
private isAddButtonVisible;
|
151
146
|
private isBlurring;
|
152
147
|
private isCheckingValidity;
|
153
148
|
private isCommunicateItemCountToScreenreaders;
|
154
149
|
private isFilterable;
|
155
150
|
private isFiltering;
|
156
|
-
private
|
151
|
+
private isInputOverflowing;
|
157
152
|
private isInputTooltipOpen;
|
158
|
-
private
|
153
|
+
private isInternalLabelOverflowing;
|
159
154
|
private isInternalLabelTooltipOpen;
|
160
155
|
private isReportValidityOrSubmit;
|
161
156
|
private isShowSingleSelectIcon;
|