@crowdstrike/glide-core 0.17.1 → 0.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/README.md +1 -1
- package/dist/accordion.d.ts +1 -1
- 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 +1 -1
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +1 -0
- package/dist/button.js +1 -1
- package/dist/checkbox-group.d.ts +6 -2
- package/dist/checkbox-group.js +13 -12
- package/dist/checkbox.d.ts +7 -4
- package/dist/checkbox.js +9 -8
- package/dist/drawer.d.ts +1 -0
- package/dist/drawer.js +1 -1
- package/dist/drawer.styles.js +2 -2
- package/dist/dropdown.d.ts +5 -3
- package/dist/dropdown.js +37 -36
- package/dist/dropdown.option.d.ts +3 -2
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.styles.js +3 -15
- package/dist/form-controls-layout.d.ts +2 -5
- package/dist/form-controls-layout.js +1 -1
- package/dist/icon-button.d.ts +1 -1
- package/dist/icon-button.js +1 -1
- package/dist/inline-alert.d.ts +1 -0
- package/dist/inline-alert.js +1 -1
- package/dist/input.d.ts +5 -2
- package/dist/input.js +5 -5
- package/dist/label.d.ts +1 -2
- package/dist/label.js +1 -1
- package/dist/library/assert-slot.d.ts +19 -0
- package/dist/library/assert-slot.js +1 -0
- package/dist/library/assert-slot.test.d.ts +1 -0
- package/dist/library/assert-slot.test.js +296 -0
- package/dist/library/expect-unhandled-rejection.js +1 -0
- package/dist/library/expect-window-error.d.ts +1 -0
- package/dist/library/expect-window-error.js +1 -0
- package/dist/library/form-control.d.ts +22 -0
- package/dist/library/form-control.js +1 -0
- package/dist/library/localize.test.js +1 -3
- package/dist/library/shadow-root-mode.d.ts +2 -0
- package/dist/library/shadow-root-mode.js +1 -0
- package/dist/menu.button.d.ts +2 -1
- package/dist/menu.button.js +1 -1
- package/dist/menu.d.ts +1 -0
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +2 -1
- package/dist/menu.link.js +1 -1
- package/dist/menu.options.d.ts +1 -1
- package/dist/menu.options.js +1 -1
- package/dist/modal.d.ts +2 -2
- package/dist/modal.icon-button.d.ts +1 -2
- package/dist/modal.icon-button.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/modal.styles.js +23 -19
- package/dist/popover.d.ts +1 -0
- package/dist/popover.js +1 -1
- package/dist/radio-group.d.ts +6 -2
- package/dist/radio-group.js +16 -17
- package/dist/radio-group.radio.d.ts +3 -2
- package/dist/radio-group.radio.js +1 -1
- package/dist/radio-group.radio.styles.js +4 -1
- package/dist/radio-group.styles.js +0 -2
- package/dist/split-button.d.ts +1 -1
- package/dist/split-button.js +1 -1
- package/dist/split-button.primary-button.d.ts +1 -0
- package/dist/split-button.primary-button.js +1 -1
- package/dist/split-button.primary-link.d.ts +1 -0
- package/dist/split-button.primary-link.js +1 -1
- package/dist/split-button.secondary-button.d.ts +1 -0
- package/dist/split-button.secondary-button.js +1 -1
- package/dist/tab.d.ts +1 -0
- package/dist/tab.group.d.ts +4 -4
- package/dist/tab.group.js +1 -1
- package/dist/tab.js +1 -1
- package/dist/tab.panel.d.ts +1 -0
- package/dist/tab.panel.js +1 -1
- package/dist/tag.d.ts +1 -0
- package/dist/tag.js +1 -1
- package/dist/textarea.d.ts +6 -3
- package/dist/textarea.js +9 -9
- package/dist/toasts.d.ts +1 -0
- package/dist/toasts.js +1 -1
- package/dist/toasts.toast.js +1 -1
- package/dist/toggle.d.ts +2 -1
- package/dist/toggle.js +1 -1
- package/dist/tooltip.container.d.ts +20 -0
- package/dist/tooltip.container.js +1 -0
- package/dist/tooltip.container.styles.d.ts +2 -0
- package/dist/tooltip.container.styles.js +51 -0
- package/dist/tooltip.d.ts +8 -2
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.styles.js +0 -50
- package/dist/tree.d.ts +4 -4
- package/dist/tree.item.d.ts +1 -1
- package/dist/tree.item.icon-button.d.ts +1 -2
- package/dist/tree.item.icon-button.js +1 -1
- package/dist/tree.item.js +1 -1
- package/dist/tree.item.menu.d.ts +3 -5
- package/dist/tree.item.menu.js +1 -1
- package/dist/tree.js +1 -1
- package/package.json +17 -16
- package/dist/library/expect-argument-error.js +0 -1
- package/dist/library/ow.d.ts +0 -16
- package/dist/library/ow.js +0 -1
- package/dist/library/ow.test.d.ts +0 -5
- package/dist/library/ow.test.js +0 -59
- package/dist/modal.tertiary-icon.d.ts +0 -18
- package/dist/modal.tertiary-icon.js +0 -1
- /package/dist/library/{expect-argument-error.d.ts → expect-unhandled-rejection.d.ts} +0 -0
package/dist/menu.link.d.ts
CHANGED
@@ -5,7 +5,7 @@ declare global {
|
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
8
|
-
* @slot icon - An icon.
|
8
|
+
* @slot icon - An optional icon.
|
9
9
|
*/
|
10
10
|
export default class GlideCoreMenuLink extends LitElement {
|
11
11
|
#private;
|
@@ -16,6 +16,7 @@ export default class GlideCoreMenuLink extends LitElement {
|
|
16
16
|
label?: string;
|
17
17
|
url?: string;
|
18
18
|
privateActive: boolean;
|
19
|
+
readonly version: string;
|
19
20
|
click(): void;
|
20
21
|
connectedCallback(): void;
|
21
22
|
render(): import("lit").TemplateResult<1>;
|
package/dist/menu.link.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,o){var r,s=arguments.length,n=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var l=e.length-1;l>=0;l--)(r=e[l])&&(n=(s<3?r(n):s>3?r(t,i,n):r(t,i))||n);return s>3&&n&&Object.defineProperty(t,i,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}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import styles from"./menu.link.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenuLink=class GlideCoreMenuLink extends LitElement{constructor(){super(...arguments),this.privateActive=!1,this.version=packageJson.version,this.#e=createRef(),this.#t=nanoid(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,e&&this.privateActive&&this.dispatchEvent(new Event("private-disabled",{bubbles:!0}))}click(){this.disabled||this.#e.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#t,this.role="menuitem",this.tabIndex=-1}render(){return html`<a class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled})}" data-test="component" href="${ifDefined(this.url)}" @click="${this.#o}" ${ref(this.#e)}><slot name="icon"></slot>${this.label}</a>`}#e;#t;#i;#o(e){this.disabled&&(e.preventDefault(),e.stopPropagation())}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreMenuLink.prototype,"disabled",null),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"url",void 0),__decorate([property({type:Boolean})],GlideCoreMenuLink.prototype,"privateActive",void 0),__decorate([property({reflect:!0})],GlideCoreMenuLink.prototype,"version",void 0),GlideCoreMenuLink=__decorate([customElement("glide-core-menu-link")],GlideCoreMenuLink);export default GlideCoreMenuLink;
|
package/dist/menu.options.d.ts
CHANGED
@@ -14,7 +14,7 @@ export default class GlideCoreMenuOptions extends LitElement {
|
|
14
14
|
ariaActivedescendant: string;
|
15
15
|
ariaLabelledby: string;
|
16
16
|
privateSize: 'small' | 'large';
|
17
|
+
readonly version: string;
|
17
18
|
connectedCallback(): void;
|
18
|
-
firstUpdated(): void;
|
19
19
|
render(): import("lit").TemplateResult<1>;
|
20
20
|
}
|
package/dist/menu.options.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,n=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import{nanoid}from"nanoid";import packageJson from"../package.json"with{type:"json"};import GlideCoreMenuButton from"./menu.button.js";import GlideCoreMenuLink from"./menu.link.js";import styles from"./menu.options.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreMenuOptions=class GlideCoreMenuOptions extends LitElement{constructor(){super(...arguments),this.ariaActivedescendant="",this.ariaLabelledby="",this.privateSize="large",this.version=packageJson.version,this.#e=nanoid()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}connectedCallback(){super.connectedCallback(),this.id=this.#e,this.role="menu",this.tabIndex=-1}render(){return html`<div class="${classMap({component:!0,large:"large"===this.privateSize,small:"small"===this.privateSize})}" role="none"><slot ${assertSlot([GlideCoreMenuButton,GlideCoreMenuLink,Text])} @slotchange="${this.#t}"></slot></div>`}#e;#t(){this.dispatchEvent(new Event("private-slot-change",{bubbles:!0}))}};__decorate([property({attribute:"aria-activedescendant",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaActivedescendant",void 0),__decorate([property({attribute:"aria-labelledby",reflect:!0})],GlideCoreMenuOptions.prototype,"ariaLabelledby",void 0),__decorate([property()],GlideCoreMenuOptions.prototype,"privateSize",void 0),__decorate([property({reflect:!0})],GlideCoreMenuOptions.prototype,"version",void 0),GlideCoreMenuOptions=__decorate([customElement("glide-core-menu-options")],GlideCoreMenuOptions);export default GlideCoreMenuOptions;
|
package/dist/modal.d.ts
CHANGED
@@ -1,4 +1,3 @@
|
|
1
|
-
import './modal.icon-button.js';
|
2
1
|
import { LitElement } from 'lit';
|
3
2
|
declare global {
|
4
3
|
interface HTMLElementTagNameMap {
|
@@ -12,7 +11,7 @@ declare global {
|
|
12
11
|
* @slot header-actions - One or more of `<glide-core-modal-icon-button>`.
|
13
12
|
* @slot primary - One of `<glide-core-button>`.
|
14
13
|
* @slot secondary - One of `<glide-core-button>`.
|
15
|
-
* @slot tertiary - One or more of `<glide-core-button>` or `<glide-core-
|
14
|
+
* @slot tertiary - One or more of `<glide-core-button>` or `<glide-core-tooltip>`.
|
16
15
|
*/
|
17
16
|
export default class GlideCoreModal extends LitElement {
|
18
17
|
#private;
|
@@ -23,6 +22,7 @@ export default class GlideCoreModal extends LitElement {
|
|
23
22
|
get open(): boolean;
|
24
23
|
set open(isOpen: boolean);
|
25
24
|
size?: 'small' | 'medium' | 'large' | 'xlarge';
|
25
|
+
readonly version: string;
|
26
26
|
connectedCallback(): void;
|
27
27
|
disconnectedCallback(): void;
|
28
28
|
firstUpdated(): void;
|
@@ -10,10 +10,9 @@ declare global {
|
|
10
10
|
* "label" attribute for accessibility.
|
11
11
|
*/
|
12
12
|
export default class GlideCoreModalIconButton extends LitElement {
|
13
|
-
#private;
|
14
13
|
static shadowRootOptions: ShadowRootInit;
|
15
14
|
static styles: import("lit").CSSResult[];
|
16
15
|
label?: string | undefined;
|
17
|
-
|
16
|
+
readonly version: string;
|
18
17
|
render(): import("lit").TemplateResult<1>;
|
19
18
|
}
|
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,
|
1
|
+
var __decorate=this&&this.__decorate||function(o,t,e,r){var i,l=arguments.length,s=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(o,t,e,r);else for(var n=o.length-1;n>=0;n--)(i=o[n])&&(s=(l<3?i(s):l>3?i(t,e,s):i(t,e))||s);return l>3&&s&&Object.defineProperty(t,e,s),s};import"./icon-button.js";import{html,LitElement}from"lit";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"./modal.icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),this.label="",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<glide-core-icon-button label="${ifDefined(this.label)}" variant="tertiary"><slot ${assertSlot()}></slot></glide-core-icon-button>`}};__decorate([property()],GlideCoreModalIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreModalIconButton.prototype,"version",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button")],GlideCoreModalIconButton);export default GlideCoreModalIconButton;
|
package/dist/modal.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,l){var
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,l){var i,s=arguments.length,n=s<3?t:null===l?l=Object.getOwnPropertyDescriptor(t,o):l;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,l);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(n=(s<3?i(n):s>3?i(t,o,n):i(t,o))||n);return s>3&&n&&Object.defineProperty(t,o,n),n};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import GlideCoreModalIconButton from"./modal.icon-button.js";import GlideCoreButton from"./button.js";import GlideCoreTooltip from"./tooltip.js";import styles from"./modal.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";const globalStylesheet=new CSSStyleSheet;globalStylesheet.insertRule("\n .private-glide-core-modal-lock-scroll {\n scrollbar-gutter: stable !important;\n overflow: hidden !important;\n }\n");let GlideCoreModal=class GlideCoreModal extends LitElement{constructor(){super(...arguments),this.backButton=!1,this.size="medium",this.version=packageJson.version,this.#e=createRef(),this.#t=createRef(),this.#o=createRef(),this.#l=createRef(),this.#i=createRef(),this.#s=!1,this.#n=!1,this.#r=new LocalizeController(this),this.#a=()=>{this.#s=!0},this.#c=()=>{this.#s=!0},this.#d=()=>{const e=this.open;setTimeout((()=>{this.#s?this.#s=!1:e===this.open&&(this.open=!1)}))}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get open(){return this.#n}set open(e){const t=e!==this.#n;this.#n=e,e&&t?(this.#m(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#h(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback();document.adoptedStyleSheets.includes(globalStylesheet)||document.adoptedStyleSheets.push(globalStylesheet),document.addEventListener("click",this.#d,{capture:!0})}disconnectedCallback(){super.disconnectedCallback(),document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),document.adoptedStyleSheets=document.adoptedStyleSheets.filter((e=>e!==globalStylesheet)),document.removeEventListener("click",this.#d,{capture:!0})}firstUpdated(){this.open&&this.#m(),this.#l.value?.addEventListener("click",this.#a,{capture:!0}),this.#l.value?.addEventListener("mouseup",this.#c)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#p}" ${ref(this.#o)}><div class="${classMap({container:!0,small:"small"===this.size,medium:"medium"===this.size,large:"large"===this.size,xlarge:"xlarge"===this.size})}" ${ref(this.#l)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.backButton,(()=>html`<glide-core-modal-icon-button class="back-button" data-test="back-button" label="${this.#r.term("dismiss")}" @click="${this.#u}" ${ref(this.#e)}>${icons.back}</glide-core-modal-icon-button>`))} ${this.label}</h2><div class="header-actions" role="toolbar"><slot name="header-actions" ${assertSlot([GlideCoreModalIconButton],!0)} ${ref(this.#i)}></slot><glide-core-modal-icon-button class="close-button" data-test="close-button" label="${this.#r.term("close")}" @click="${this.#u}" ${ref(this.#t)}>${xIcon}</glide-core-modal-icon-button></div></header><article aria-labelledby="heading" class="body" role="region"><slot ${assertSlot()}></slot></article><footer><menu class="actions"><li class="action"><slot class="tertiary-slot" name="tertiary" ${assertSlot([GlideCoreButton,GlideCoreTooltip],!0)}></slot></li><li class="action"><slot name="secondary" ${assertSlot([GlideCoreButton],!0)}></slot></li><li class="action"><slot name="primary" ${assertSlot([GlideCoreButton],!0)}></slot></li></menu></footer></div></dialog>`}#e;#t;#o;#l;#i;#s;#n;#r;#a;#c;#d;#h(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#p(e){"Escape"===e.key&&(this.open=!1,e.preventDefault())}#m(){document.documentElement.classList.add("private-glide-core-modal-lock-scroll"),this.#o.value?.showModal()}};__decorate([property({attribute:"back-button",type:Boolean,reflect:!0})],GlideCoreModal.prototype,"backButton",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal")],GlideCoreModal);export default GlideCoreModal;const icons={back:html`<svg style="${styleMap({height:"1.25rem",width:"1.25rem"})}" viewBox="0 0 24 24" fill="none"><path d="M12 18C11.4477 18 11 18.4477 11 19C11 19.5523 11.4477 20 12 20V18ZM20 14.5C20 16.433 18.433 18 16.5 18V20C19.5376 20 22 17.5376 22 14.5H20ZM16.5 11C18.433 11 20 12.567 20 14.5H22C22 11.4624 19.5376 9 16.5 9V11ZM16.5 18H12V20H16.5V18ZM16.5 9H3V11H16.5V9Z" fill="currentColor"/><path d="M7 6L3 10L7 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`};
|
package/dist/modal.styles.js
CHANGED
@@ -31,26 +31,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
31
31
|
border-radius: 0.5rem;
|
32
32
|
box-shadow: var(--glide-core-shadow-lg);
|
33
33
|
font-family: var(--glide-core-body-xs-font-family);
|
34
|
-
max-block-size: 75vh;
|
35
|
-
max-inline-size: 80vw;
|
36
34
|
opacity: 0;
|
37
|
-
padding:
|
38
|
-
|
39
|
-
&.small {
|
40
|
-
inline-size: 22.5rem;
|
41
|
-
}
|
42
|
-
|
43
|
-
&.medium {
|
44
|
-
inline-size: 35rem;
|
45
|
-
}
|
46
|
-
|
47
|
-
&.large {
|
48
|
-
inline-size: 53.75rem;
|
49
|
-
}
|
50
|
-
|
51
|
-
&.xlarge {
|
52
|
-
inline-size: 69.375rem;
|
53
|
-
}
|
35
|
+
padding: 0;
|
54
36
|
|
55
37
|
&[open] {
|
56
38
|
opacity: 1;
|
@@ -81,6 +63,28 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
81
63
|
}
|
82
64
|
}
|
83
65
|
|
66
|
+
.container {
|
67
|
+
max-block-size: 75vh;
|
68
|
+
max-inline-size: 80vw;
|
69
|
+
padding: 1.25rem;
|
70
|
+
|
71
|
+
&.small {
|
72
|
+
inline-size: 22.5rem;
|
73
|
+
}
|
74
|
+
|
75
|
+
&.medium {
|
76
|
+
inline-size: 35rem;
|
77
|
+
}
|
78
|
+
|
79
|
+
&.large {
|
80
|
+
inline-size: 53.75rem;
|
81
|
+
}
|
82
|
+
|
83
|
+
&.xlarge {
|
84
|
+
inline-size: 69.375rem;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
|
84
88
|
.header {
|
85
89
|
align-items: center;
|
86
90
|
display: flex;
|
package/dist/popover.d.ts
CHANGED
@@ -21,6 +21,7 @@ export default class GlideCorePopover extends LitElement {
|
|
21
21
|
get open(): boolean;
|
22
22
|
set open(isOpen: boolean);
|
23
23
|
placement?: 'bottom' | 'left' | 'right' | 'top';
|
24
|
+
readonly version: string;
|
24
25
|
connectedCallback(): void;
|
25
26
|
firstUpdated(): void;
|
26
27
|
render(): import("lit").TemplateResult<1>;
|
package/dist/popover.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,l=arguments.length,s=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,r);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(l<3?i(s):l>3?i(t,o,s):i(t,o))||s);return l>3&&s&&Object.defineProperty(t,o,s),s};import{html,LitElement}from"lit";import{arrow,autoUpdate,computePosition,flip,limitShift,offset,shift}from"@floating-ui/dom";import{choose}from"lit/directives/choose.js";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"./popover.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCorePopover=class GlideCorePopover extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.effectivePlacement=this.placement??"bottom",this.#e=createRef(),this.#t=createRef(),this.#o=!1,this.#r=!1,this.#i=!1,this.#l=!1,this.#s=!1,this.#a=createRef(),this.#n=createRef(),this.#p=()=>{if(this.#r||this.#s||this.#o)return this.#r=!1,this.#s=!1,void(this.#o=!1);this.open=!1}}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#i}set disabled(e){this.#i=e,this.open&&!e?this.#f():this.#d()}get offset(){return this.#m??Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}set offset(e){this.#m=e}get open(){return this.#l}set open(e){const t=e!==this.#l;this.#l=e,e&&t&&!this.disabled?(this.#f(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))):t&&(this.#d(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#p,{capture:!0})}firstUpdated(){this.#a.value&&(this.#a.value.popover="manual"),this.open&&!this.disabled&&this.#f(),this.#t.value?.addEventListener("mouseup",(()=>{this.#r=!0})),this.#n.value?.addEventListener("mouseup",(()=>{this.#s=!0})),this.#e.value?.addEventListener("mouseup",(()=>{this.#o=!0})),this.#n.value?.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(this.#s=!0)}))}render(){return html`<div class="component"><slot class="target-slot" data-test="target-slot" name="target" @click="${this.#h}" @keydown="${this.#c}" ${assertSlot([Element])} ${ref(this.#n)}></slot><div class="${classMap({popover:!0,[this.effectivePlacement]:!0})}" id="popover" data-test="popover" ${ref(this.#a)}><div class="${classMap({arrow:!0,[this.effectivePlacement]:!0})}" data-test="arrow" ${ref(this.#e)}>${choose(this.effectivePlacement,[["top",()=>icons.topArrow],["right",()=>icons.rightArrow],["bottom",()=>icons.bottomArrow],["left",()=>icons.leftArrow]])}</div><slot class="default-slot" ${assertSlot()} ${ref(this.#t)}></slot></div></div>`}#e;#u;#t;#o;#r;#i;#l;#s;#m;#a;#n;#p;#d(){this.#a.value?.hidePopover(),this.#v&&(this.#v.ariaExpanded="false"),this.#u?.()}#h(){this.open=!this.open}#c(e){"Escape"===e.key&&(e.preventDefault(),this.open=!1)}get#v(){return this.#n.value?.assignedElements().at(0)}#f(){this.disabled||(this.#u?.(),this.#n.value&&this.#a.value&&(this.#u=autoUpdate(this.#n.value,this.#a.value,(()=>{(async()=>{if(this.#n.value&&this.#a.value&&this.#e.value){const e=Number.parseFloat(window.getComputedStyle(this.#a.value).padding),{x:t,y:o,placement:r,middlewareData:i}=await computePosition(this.#n.value,this.#a.value,{placement:this.placement,middleware:[offset(this.offset-e-2),flip({fallbackStrategy:"initialPlacement"}),shift({limiter:limitShift({offset:30})}),arrow({element:this.#e.value})]});Object.assign(this.#a.value.style,{left:`${t}px`,top:`${o}px`}),Object.assign(this.#e.value.style,{left:i.arrow?.x?i.arrow.x-e+"px":null,top:i.arrow?.y?i.arrow.y-e+"px":null}),this.effectivePlacement=r,this.#a.value.showPopover(),this.#v&&(this.#v.ariaExpanded="true")}})()}))))}};__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"disabled",null),__decorate([property({reflect:!0,type:Number})],GlideCorePopover.prototype,"offset",null),__decorate([property({reflect:!0,type:Boolean})],GlideCorePopover.prototype,"open",null),__decorate([property()],GlideCorePopover.prototype,"placement",void 0),__decorate([property({reflect:!0})],GlideCorePopover.prototype,"version",void 0),__decorate([state()],GlideCorePopover.prototype,"effectivePlacement",void 0),GlideCorePopover=__decorate([customElement("glide-core-popover")],GlideCorePopover);export default GlideCorePopover;const icons={topArrow:html`<svg aria-hidden="true" viewBox="0 0 16 9" fill="none"><mask id="mask0_13064_691" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M16 6.99382e-07V9L0 9L3.93402e-07 0L16 6.99382e-07Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_691)"><g filter="url(#filter0_d_13064_691)"><path d="M8.76822 5.603C8.36842 6.13234 7.63157 6.13233 7.23178 5.60299L3 0L13 9.19407e-07L8.76822 5.603Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_13064_691" x="2" y="0" width="0.75rem" height="0.625rem" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_691"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13064_691" result="shape"/></filter></defs></svg>`,rightArrow:html`<svg aria-hidden="true" viewBox="0 0 9 16" fill="none"><mask id="mask0_13064_688" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M9 16H1.39876e-06L0 7.86805e-07L9 0L9 16Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_688)"><g filter="url(#filter0_d_13064_688)"><path d="M3.397 8.76822C2.86766 8.36843 2.86767 7.63157 3.39701 7.23178L9 3V13L3.397 8.76822Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_13064_688" x="2" y="3" width="0.5rem" height="0.875rem" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_688"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13064_688" result="shape"/></filter></defs></svg>`,bottomArrow:html`<svg aria-hidden="true" viewBox="0 0 16 9" fill="none"><mask id="mask0_13064_685" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M0 9L1.07324e-07 0L16 1.90798e-07V9H0Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_13064_685)"><g filter="url(#filter0_dd_13064_685)"><path d="M7.23178 3.397C7.63157 2.86766 8.36843 2.86767 8.76822 3.39701L13 9L3 9L7.23178 3.397Z" fill="currentColor"/></g></g><defs><filter id="filter0_dd_13064_685" x="-5" y="-2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="4"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13064_685"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="-1"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="effect1_dropShadow_13064_685" result="effect2_dropShadow_13064_685"/><feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_13064_685" result="shape"/></filter></defs></svg>`,leftArrow:html`<svg aria-hidden="true" viewBox="0 0 9 16" fill="none"><mask id="mask0_12969_88361" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"><path d="M0 0H9V16H0V0Z" fill="#D9D9D9"/></mask><g mask="url(#mask0_12969_88361)"><g filter="url(#filter0_d_12969_88361)"><path d="M5.603 7.23178C6.13234 7.63157 6.13233 8.36843 5.60299 8.76822L0 13L4.82293e-07 3L5.603 7.23178Z" fill="currentColor"/></g></g><defs><filter id="filter0_d_12969_88361" x="-1" y="3" width="0.5rem" height="0.875rem" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="3"/><feGaussianBlur stdDeviation="0.5"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12969_88361"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12969_88361" result="shape"/></filter></defs></svg>`};
|
package/dist/radio-group.d.ts
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import './label.js';
|
2
2
|
import './tooltip.js';
|
3
3
|
import { LitElement } from 'lit';
|
4
|
+
import type FormControl from './library/form-control.js';
|
4
5
|
declare global {
|
5
6
|
interface HTMLElementTagNameMap {
|
6
7
|
'glide-core-radio-group': GlideCoreRadioGroup;
|
@@ -13,9 +14,8 @@ declare global {
|
|
13
14
|
*
|
14
15
|
* @slot - One or more of `<glide-core-radio>`.
|
15
16
|
* @slot description - Additional information or context.
|
16
|
-
* @slot tooltip - Content for the tooltip.
|
17
17
|
*/
|
18
|
-
export default class GlideCoreRadioGroup extends LitElement {
|
18
|
+
export default class GlideCoreRadioGroup extends LitElement implements FormControl {
|
19
19
|
#private;
|
20
20
|
static formAssociated: boolean;
|
21
21
|
static shadowRootOptions: ShadowRootInit;
|
@@ -25,11 +25,14 @@ export default class GlideCoreRadioGroup extends LitElement {
|
|
25
25
|
hideLabel: boolean;
|
26
26
|
label?: string;
|
27
27
|
name: string;
|
28
|
+
orientation: "horizontal";
|
28
29
|
privateSplit?: 'left' | 'middle';
|
30
|
+
tooltip?: string;
|
29
31
|
get required(): boolean;
|
30
32
|
set required(isRequired: boolean);
|
31
33
|
get value(): string;
|
32
34
|
set value(value: string);
|
35
|
+
readonly version: string;
|
33
36
|
checkValidity(): boolean;
|
34
37
|
disconnectedCallback(): void;
|
35
38
|
firstUpdated(): void;
|
@@ -41,6 +44,7 @@ export default class GlideCoreRadioGroup extends LitElement {
|
|
41
44
|
formResetCallback(): void;
|
42
45
|
render(): import("lit").TemplateResult<1>;
|
43
46
|
reportValidity(): boolean;
|
47
|
+
resetValidityFeedback(): void;
|
44
48
|
setCustomValidity(message: string): void;
|
45
49
|
setValidity(flags?: ValidityStateFlags, message?: string): void;
|
46
50
|
constructor();
|
package/dist/radio-group.js
CHANGED
@@ -1,47 +1,46 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length,r=a<3?i:null===o?o=Object.getOwnPropertyDescriptor(i,t):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,i,t,o);else for(var d=e.length-1;d>=0;d--)(s=e[d])&&(r=(a<3?s(r):a>3?s(i,t,r):s(i,t))||r);return a>3&&r&&Object.defineProperty(i,t,r),r};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{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreRadioGroupRadio from"./radio-group.radio.js";import styles from"./radio-group.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreRadioGroup=class GlideCoreRadioGroup 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 i of this.#i)i.disabled=e}get required(){return this.#t}set required(e){this.#t=e;for(const i of this.#i)i.privateRequired=e}get value(){return this.#o}set value(e){this.#o=e;for(const i of this.#i){const t=Boolean(e&&i.value===e);i.checked=!!t,i.tabIndex=t?0:-1,i.checked&&i.disabled&&(i.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.#i)e.disabled=!0;if(this.required)for(const e of this.#i)e.privateRequired=!0;const e=this.value?this.#i.find((({value:e})=>e===this.value)):this.#i.find((({checked:e,disabled:i})=>e&&!i));if(!this.value&&e?.value&&this.setAttribute("value",e.value),e){this.value=e.value;for(const i of this.#i)i.tabIndex=i===e?0:-1;return}const i=this.#i.find((({disabled:e})=>!e));for(const e of this.#i)e.tabIndex=e===i?0:-1}focus(e){const i=this.#i.find((({checked:e,disabled:i})=>e&&!i))??this.#i.find((({tabIndex:e})=>0===e));i?.focus(e)}get form(){return this.#s.form}get validity(){const e=this.#i.some((({checked:e})=>e));return!this.required||e||this.disabled?this.required&&this.#s.validity.valueMissing&&e?(this.#s.setValidity({}),this.#s.validity):this.required&&this.disabled&&!e?(this.#s.setValidity({valueMissing:!0}," ",this.#r.value),this.#s.validity):(this.required||!this.#s.validity.valueMissing||e||this.#s.setValidity({}),this.#s.validity):(this.#s.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#r.value),this.#s.validity)}get willValidate(){return this.#s.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#a)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
|
2
2
|
<div
|
3
3
|
class="component"
|
4
|
-
@click=${this.#
|
5
|
-
@keydown=${this.#
|
6
|
-
${ref(this.#
|
4
|
+
@click=${this.#d}
|
5
|
+
@keydown=${this.#l}
|
6
|
+
${ref(this.#r)}
|
7
7
|
>
|
8
8
|
<glide-core-private-label
|
9
|
-
orientation
|
9
|
+
orientation=${this.orientation}
|
10
10
|
split=${ifDefined(this.privateSplit??void 0)}
|
11
|
+
tooltip=${ifDefined(this.tooltip)}
|
11
12
|
?disabled=${this.disabled}
|
12
|
-
?error=${this.#
|
13
|
+
?error=${this.#n}
|
13
14
|
?hide=${this.hideLabel}
|
14
15
|
?required=${this.required}
|
15
16
|
>
|
16
17
|
<label id="label" data-test="label"> ${this.label} </label>
|
17
18
|
|
18
19
|
<div
|
19
|
-
class=${classMap({"radio-container":!0,vertical:!0,invalid:this.#
|
20
|
+
class=${classMap({"radio-container":!0,vertical:!0,invalid:this.#n})}
|
20
21
|
role="radiogroup"
|
21
22
|
slot="control"
|
22
23
|
aria-labelledby="label description"
|
23
24
|
>
|
24
25
|
<slot
|
25
|
-
|
26
|
-
@
|
27
|
-
@
|
28
|
-
|
29
|
-
|
26
|
+
@focusout=${this.#h}
|
27
|
+
@private-checked-change=${this.#c}
|
28
|
+
@private-value-change=${this.#u}
|
29
|
+
${assertSlot([GlideCoreRadioGroupRadio])}
|
30
|
+
${ref(this.#p)}
|
30
31
|
></slot>
|
31
32
|
</div>
|
32
33
|
|
33
|
-
<slot name="tooltip" slot="tooltip"></slot>
|
34
|
-
|
35
34
|
<div id="description" slot="description">
|
36
35
|
<slot
|
37
|
-
class=${classMap({"description-slot":!0,hidden:Boolean(this.#
|
36
|
+
class=${classMap({"description-slot":!0,hidden:Boolean(this.#n&&this.validityMessage)})}
|
38
37
|
name="description"
|
39
38
|
></slot>
|
40
39
|
|
41
|
-
${when(this.#
|
40
|
+
${when(this.#n&&this.validityMessage,(()=>html`<div data-test="validity-message">
|
42
41
|
${unsafeHTML(this.validityMessage)}
|
43
42
|
</div>`))}
|
44
43
|
</div>
|
45
44
|
</glide-core-private-label>
|
46
45
|
</div>
|
47
|
-
`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#
|
46
|
+
`}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.#r.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#r.value)}setValidity(e,i){this.validityMessage=i,this.#s.setValidity(e," ",this.#r.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.#r=createRef(),this.#p=createRef(),this.#e=!1,this.#t=!1,this.#o="",this.#a=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#s=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e.preventDefault(),!this.isCheckingValidity){if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}}))}#r;#p;#s;#e;#t;#o;#a;get#n(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const i of this.#i)i.privateInvalid=e;return e}#f(e){e.checked=!0,e.tabIndex=0,this.value=e.value,e.focus(),e.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),e.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#d(e){if(this.disabled)return;if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const e=this.#i.find((({checked:e})=>e));return void e?.focus()}const i=e.target;if(i instanceof GlideCoreRadioGroupRadio&&i&&!i.disabled){const e=this.#i.filter((e=>e!==i));for(const i of e)i.checked=!1,i.tabIndex=-1;this.#f(i)}}#l(e){if(!(this.disabled||e.target instanceof GlideCoreRadioGroupRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadioGroupRadio){const i=e.target;switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const t=[...this.#i],o=[...this.#i].slice(0,t.indexOf(i)).findLast((e=>!e.disabled)),s=t.findLast((e=>!e.disabled));o&&o!==i?(this.#v(i),this.#f(o)):s&&s!==i&&(this.#v(i),this.#f(s));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const t=[...this.#i],o=t.find(((e,o)=>!e.disabled&&o>t.indexOf(i))),s=t.find((e=>!e.disabled));o&&o!==i?(this.#v(i),this.#f(o)):s&&s!==i&&(this.#v(i),this.#f(s));break}case" ":if(e.preventDefault(),!i.disabled&&!i.checked){this.#f(i);for(const e of this.#i)e!==i&&this.#v(e)}}}}#h(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#i(){return this.#p.value?this.#p.value.assignedElements().filter((e=>e instanceof GlideCoreRadioGroupRadio)):[]}#c(e){e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&!e.detail.old&&e.detail.new&&(this.value=e.target.value)}#u(e){e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&e.detail.new?this.value=e.target.value:e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&(this.value="")}#v(e){e.checked=!1,e.tabIndex=-1}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreRadioGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"name",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"orientation",void 0),__decorate([property()],GlideCoreRadioGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"tooltip",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreRadioGroup.prototype,"required",null),__decorate([property()],GlideCoreRadioGroup.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreRadioGroup.prototype,"version",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreRadioGroup.prototype,"validityMessage",void 0),GlideCoreRadioGroup=__decorate([customElement("glide-core-radio-group")],GlideCoreRadioGroup);export default GlideCoreRadioGroup;
|
@@ -1,10 +1,10 @@
|
|
1
1
|
import { LitElement } from 'lit';
|
2
2
|
declare global {
|
3
3
|
interface HTMLElementTagNameMap {
|
4
|
-
'glide-core-radio':
|
4
|
+
'glide-core-radio-group-radio': GlideCoreRadioGroupRadio;
|
5
5
|
}
|
6
6
|
}
|
7
|
-
export default class
|
7
|
+
export default class GlideCoreRadioGroupRadio extends LitElement {
|
8
8
|
#private;
|
9
9
|
static shadowRootOptions: ShadowRootInit;
|
10
10
|
static styles: import("lit").CSSResult[];
|
@@ -20,6 +20,7 @@ export default class GlideCoreRadio extends LitElement {
|
|
20
20
|
set privateRequired(required: boolean);
|
21
21
|
get value(): string;
|
22
22
|
set value(value: string);
|
23
|
+
readonly version: string;
|
23
24
|
firstUpdated(): void;
|
24
25
|
render(): import("lit").TemplateResult<1>;
|
25
26
|
}
|
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,i,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,o){var r,a=arguments.length,d=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(d=(a<3?r(d):a>3?r(t,i,d):r(t,i))||d);return a>3&&d&&Object.defineProperty(t,i,d),d};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import styles from"./radio-group.radio.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreRadioGroupRadio=class GlideCoreRadioGroupRadio extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#e=!1,this.#t=!1,this.#i="",this.#o=!1,this.#r=!1,this.#a=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get checked(){return this.#e}set checked(e){const t=this.#e;this.#e=e,this.ariaChecked=e.toString(),this.dispatchEvent(new CustomEvent("private-checked-change",{bubbles:!0,detail:{old:t,new:e}}))}get disabled(){return this.#t}set disabled(e){this.#t=e,this.ariaDisabled=e.toString()}get privateInvalid(){return this.#o}set privateInvalid(e){this.#o=e,this.ariaInvalid=e.toString()}get label(){return this.#i}set label(e){this.#i=e,this.ariaLabel=e.toString()}get privateRequired(){return this.#r}set privateRequired(e){this.#r=e,this.ariaRequired=e.toString()}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}}))}firstUpdated(){this.ariaChecked=this.checked.toString(),this.ariaDisabled=this.disabled.toString(),this.ariaInvalid=this.privateInvalid.toString(),this.ariaLabel=this.label,this.ariaRequired=this.privateRequired.toString(),this.role="radio"}render(){return html`<div class="component" data-test="component"><div class="${classMap({circle:!0,checked:this.checked,disabled:this.disabled,animate:this.hasUpdated})}" data-test="radio"></div>${this.#i}</div>`}#e;#t;#i;#o;#r;#a};__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"checked",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"disabled",null),__decorate([property({type:Boolean})],GlideCoreRadioGroupRadio.prototype,"privateInvalid",null),__decorate([property({reflect:!0})],GlideCoreRadioGroupRadio.prototype,"label",null),__decorate([property({type:Boolean,reflect:!0})],GlideCoreRadioGroupRadio.prototype,"privateRequired",null),__decorate([property()],GlideCoreRadioGroupRadio.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreRadioGroupRadio.prototype,"version",void 0),GlideCoreRadioGroupRadio=__decorate([customElement("glide-core-radio-group-radio")],GlideCoreRadioGroupRadio);export default GlideCoreRadioGroupRadio;
|
@@ -2,7 +2,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
2
2
|
${focusOutline(":host(:focus-visible) .component .circle")}
|
3
3
|
`,css`
|
4
4
|
:host {
|
5
|
-
display: flex;
|
6
5
|
outline: none;
|
7
6
|
}
|
8
7
|
|
@@ -81,4 +80,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
81
80
|
}
|
82
81
|
}
|
83
82
|
}
|
83
|
+
|
84
|
+
.label {
|
85
|
+
line-height: 1;
|
86
|
+
}
|
84
87
|
`];
|
@@ -1,13 +1,11 @@
|
|
1
1
|
import{css}from"lit";export default[css`
|
2
2
|
.component {
|
3
3
|
color: var(--glide-core-text-body-1);
|
4
|
-
display: inline-flex;
|
5
4
|
font-family: var(--glide-core-heading-xxxs-font-family);
|
6
5
|
font-size: var(--glide-core-heading-xxxs-font-size);
|
7
6
|
font-style: var(--glide-core-heading-xxxs-font-style);
|
8
7
|
font-variant: var(--glide-core-heading-xxxs-font-variant);
|
9
8
|
font-weight: var(--glide-core-heading-xxxs-font-weight);
|
10
|
-
line-height: 1;
|
11
9
|
}
|
12
10
|
|
13
11
|
.radio-container {
|
package/dist/split-button.d.ts
CHANGED
@@ -18,7 +18,7 @@ export default class GlideCoreSplitButton extends LitElement {
|
|
18
18
|
set size(size: 'large' | 'small');
|
19
19
|
get variant(): "primary" | "secondary";
|
20
20
|
set variant(variant: 'primary' | 'secondary');
|
21
|
-
|
21
|
+
readonly version: string;
|
22
22
|
private get secondaryButtonElement();
|
23
23
|
private get primaryButtonElement();
|
24
24
|
render(): import("lit").TemplateResult<1>;
|
package/dist/split-button.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,o,
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,s=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(s=(n<3?i(s):n>3?i(e,o,s):i(e,o))||s);return n>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreSplitButtonPrimaryButton from"./split-button.primary-button.js";import GlideCoreSplitButtonPrimaryLink from"./split-button.primary-link.js";import GlideCoreSplitButtonSecondaryButton from"./split-button.secondary-button.js";import styles from"./split-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreSplitButton=class GlideCoreSplitButton extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#t=createRef(),this.#e=createRef(),this.#o="large",this.#r="primary"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get size(){return this.#o}set size(t){this.#o=t,this.primaryButtonElement&&(this.primaryButtonElement.privateSize=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=t)}get variant(){return this.#r}set variant(t){this.#r=t,this.primaryButtonElement&&(this.primaryButtonElement.privateVariant=t),this.secondaryButtonElement&&(this.secondaryButtonElement.privateVariant=t)}get secondaryButtonElement(){const t=this.#e.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonSecondaryButton)return t}get primaryButtonElement(){const t=this.#t.value?.assignedElements().at(0);if(t instanceof GlideCoreSplitButtonPrimaryButton||t instanceof GlideCoreSplitButtonPrimaryLink)return t}render(){return html`<div class="component"><slot @slotchange="${this.#i}" ${assertSlot([GlideCoreSplitButtonPrimaryButton,GlideCoreSplitButtonPrimaryLink])} ${ref(this.#t)}></slot><slot name="secondary-button" @slotchange="${this.#n}" ${assertSlot([GlideCoreSplitButtonSecondaryButton])} ${ref(this.#e)}></slot></div>`}#t;#e;#o;#r;#i(){this.primaryButtonElement&&(this.primaryButtonElement.privateSize=this.size,this.primaryButtonElement.privateVariant=this.variant)}#n(){this.secondaryButtonElement&&(this.secondaryButtonElement.privateSize=this.size,this.secondaryButtonElement.privateVariant=this.variant)}};__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"size",null),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreSplitButton.prototype,"version",void 0),GlideCoreSplitButton=__decorate([customElement("glide-core-split-button")],GlideCoreSplitButton);export default GlideCoreSplitButton;
|
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,p=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)p=Reflect.decorate(t,e,o,r);else for(var l=t.length-1;l>=0;l--)(i=t[l])&&(p=(a<3?i(p):a>3?i(e,o,p):i(e,o))||p);return a>3&&p&&Object.defineProperty(e,o,p),p};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.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"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreSplitButtonPrimaryButton=class GlideCoreSplitButtonPrimaryButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" class="${classMap({component:!0,disabled:this.disabled,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" type="button" ?disabled="${this.disabled}"><slot name="icon"></slot>${this.label}</button>`}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"ariaHasPopup",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonPrimaryButton.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"label",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryButton.prototype,"privateSize",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryButton.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryButton.prototype,"version",void 0),GlideCoreSplitButtonPrimaryButton=__decorate([customElement("glide-core-split-button-primary-button")],GlideCoreSplitButtonPrimaryButton);export default GlideCoreSplitButtonPrimaryButton;
|
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,i
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,r,i){var o,a=arguments.length,l=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,r,i);else for(var s=t.length-1;s>=0;s--)(o=t[s])&&(l=(a<3?o(l):a>3?o(e,r,l):o(e,r))||l);return a>3&&l&&Object.defineProperty(e,r,l),l};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.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"./split-button.primary-button.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreSplitButtonPrimaryLink=class GlideCoreSplitButtonPrimaryLink extends LitElement{constructor(){super(...arguments),this.disabled=!1,this.privateSize="large",this.privateVariant="primary",this.version=packageJson.version}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}render(){return this.disabled?html`<span aria-disabled="true" class="${classMap({component:!0,disabled:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" role="link"><slot name="icon"></slot>${this.label}</span>`:html`<a class="${classMap({component:!0,[this.privateVariant]:!0,[this.privateSize]:!0})}" data-test="component" href="${ifDefined(this.url)}"><slot name="icon"></slot>${this.label}</a>`}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreSplitButtonPrimaryLink.prototype,"disabled",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryLink.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryLink.prototype,"url",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryLink.prototype,"privateSize",void 0),__decorate([property()],GlideCoreSplitButtonPrimaryLink.prototype,"privateVariant",void 0),__decorate([property({reflect:!0})],GlideCoreSplitButtonPrimaryLink.prototype,"version",void 0),GlideCoreSplitButtonPrimaryLink=__decorate([customElement("glide-core-split-button-primary-link")],GlideCoreSplitButtonPrimaryLink);export default GlideCoreSplitButtonPrimaryLink;
|
@@ -19,6 +19,7 @@ export default class GlideCoreSplitButtonSecondaryButton extends LitElement {
|
|
19
19
|
privateActive: boolean;
|
20
20
|
privateSize: 'large' | 'small';
|
21
21
|
privateVariant: 'primary' | 'secondary';
|
22
|
+
readonly version: string;
|
22
23
|
click(): void;
|
23
24
|
firstUpdated(): void;
|
24
25
|
render(): import("lit").TemplateResult<1>;
|