@crowdstrike/glide-core 0.19.5 → 0.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -29
- package/dist/accordion.d.ts +13 -4
- package/dist/accordion.js +1 -1
- package/dist/button-group.button.d.ts +16 -3
- package/dist/button-group.button.js +1 -1
- package/dist/button-group.d.ts +16 -5
- package/dist/button-group.js +1 -1
- package/dist/button.d.ts +16 -3
- package/dist/button.js +1 -1
- package/dist/checkbox-group.d.ts +49 -6
- package/dist/checkbox-group.js +16 -5
- package/dist/checkbox-group.styles.js +1 -1
- package/dist/checkbox.d.ts +50 -8
- package/dist/checkbox.js +22 -9
- package/dist/checkbox.styles.js +1 -1
- package/dist/drawer.d.ts +13 -3
- package/dist/drawer.js +1 -1
- package/dist/drawer.styles.js +6 -1
- package/dist/dropdown.d.ts +78 -11
- package/dist/dropdown.js +83 -55
- package/dist/dropdown.option.d.ts +31 -4
- package/dist/dropdown.option.js +1 -1
- package/dist/dropdown.option.styles.js +1 -1
- package/dist/dropdown.styles.js +14 -12
- package/dist/form-controls-layout.d.ts +10 -2
- package/dist/form-controls-layout.js +1 -1
- package/dist/icon-button.d.ts +12 -2
- package/dist/icon-button.js +1 -1
- package/dist/icon-button.styles.js +8 -8
- package/dist/icons/checked.js +1 -1
- package/dist/icons/chevron.js +1 -1
- package/dist/icons/magnifying-glass.js +1 -1
- package/dist/icons/pencil.js +1 -1
- package/dist/icons/severity-critical.d.ts +2 -0
- package/dist/icons/severity-critical.js +1 -0
- package/dist/icons/severity-informational.d.ts +2 -0
- package/dist/icons/severity-informational.js +1 -0
- package/dist/icons/severity-medium.d.ts +2 -0
- package/dist/icons/severity-medium.js +1 -0
- package/dist/icons/x.js +1 -1
- package/dist/inline-alert.d.ts +9 -10
- package/dist/inline-alert.js +1 -1
- package/dist/inline-alert.styles.js +3 -3
- package/dist/input.d.ts +53 -12
- package/dist/input.js +32 -13
- package/dist/input.styles.js +6 -3
- package/dist/label.d.ts +13 -7
- package/dist/label.js +1 -1
- package/dist/label.styles.js +10 -14
- package/dist/library/assert-slot.d.ts +2 -3
- package/dist/library/assert-slot.js +1 -1
- package/dist/library/assert-slot.test.js +10 -21
- package/dist/library/expect-unhandled-rejection.d.ts +1 -1
- package/dist/library/final.d.ts +3 -0
- package/dist/library/final.js +1 -0
- package/dist/library/final.test.d.ts +1 -0
- package/dist/library/final.test.js +44 -0
- package/dist/library/form-control.d.ts +7 -8
- package/dist/library/get-parent-class-name.d.ts +3 -0
- package/dist/library/get-parent-class-name.js +1 -0
- package/dist/library/localize.test.js +9 -12
- package/dist/library/on-resize.d.ts +12 -0
- package/dist/library/on-resize.js +1 -0
- package/dist/library/required.d.ts +2 -0
- package/dist/library/required.js +1 -0
- package/dist/library/required.test.d.ts +1 -0
- package/dist/library/required.test.js +47 -0
- package/dist/menu.button.d.ts +10 -1
- package/dist/menu.button.js +1 -1
- package/dist/menu.button.styles.js +3 -3
- package/dist/menu.d.ts +23 -7
- package/dist/menu.js +1 -1
- package/dist/menu.link.d.ts +11 -1
- package/dist/menu.link.js +1 -1
- package/dist/menu.link.styles.js +3 -3
- package/dist/menu.options.d.ts +8 -2
- package/dist/menu.options.js +1 -1
- package/dist/menu.options.styles.js +7 -7
- package/dist/modal.d.ts +19 -6
- package/dist/modal.icon-button.d.ts +7 -3
- package/dist/modal.icon-button.js +1 -1
- package/dist/modal.icon-button.styles.js +1 -1
- package/dist/modal.js +1 -1
- package/dist/modal.styles.js +26 -8
- package/dist/popover.d.ts +20 -3
- package/dist/popover.js +1 -1
- package/dist/popover.styles.js +6 -6
- package/dist/radio-group.d.ts +48 -6
- package/dist/radio-group.js +15 -6
- package/dist/radio-group.radio.d.ts +26 -2
- package/dist/radio-group.radio.js +1 -1
- package/dist/split-button.d.ts +15 -5
- package/dist/split-button.js +1 -1
- package/dist/split-button.primary-button.d.ts +10 -1
- package/dist/split-button.primary-button.js +1 -1
- package/dist/split-button.primary-link.d.ts +8 -1
- package/dist/split-button.primary-link.js +1 -1
- package/dist/split-button.secondary-button.d.ts +9 -1
- package/dist/split-button.secondary-button.js +1 -1
- package/dist/split-button.secondary-button.styles.js +2 -2
- package/dist/styles/variables.css +1 -1
- package/dist/tab.d.ts +16 -5
- package/dist/tab.group.d.ts +13 -15
- package/dist/tab.group.js +1 -1
- package/dist/tab.group.styles.js +8 -3
- package/dist/tab.js +1 -1
- package/dist/tab.panel.d.ts +11 -5
- package/dist/tab.panel.js +1 -1
- package/dist/tab.panel.styles.js +9 -2
- package/dist/tag.d.ts +11 -2
- package/dist/tag.js +1 -1
- package/dist/tag.styles.js +4 -4
- package/dist/textarea.d.ts +46 -6
- package/dist/textarea.js +12 -4
- package/dist/toasts.d.ts +18 -16
- package/dist/toasts.js +1 -1
- package/dist/toasts.toast.d.ts +11 -5
- package/dist/toasts.toast.js +1 -1
- package/dist/toasts.toast.styles.js +1 -1
- package/dist/toggle.d.ts +13 -4
- package/dist/toggle.js +1 -1
- package/dist/toggle.styles.js +3 -3
- package/dist/tooltip.container.d.ts +11 -2
- package/dist/tooltip.container.js +1 -1
- package/dist/tooltip.d.ts +40 -3
- package/dist/tooltip.js +1 -1
- package/dist/tooltip.styles.js +7 -7
- package/dist/tree.d.ts +7 -1
- package/dist/tree.item.d.ts +30 -12
- package/dist/tree.item.icon-button.d.ts +7 -2
- package/dist/tree.item.icon-button.js +1 -1
- package/dist/tree.item.icon-button.styles.js +3 -3
- package/dist/tree.item.js +1 -1
- package/dist/tree.item.menu.d.ts +9 -3
- package/dist/tree.item.menu.js +1 -1
- package/dist/tree.item.menu.styles.js +3 -3
- package/dist/tree.item.styles.js +10 -5
- package/dist/tree.js +1 -1
- package/package.json +91 -55
package/dist/menu.link.d.ts
CHANGED
@@ -5,12 +5,22 @@ declare global {
|
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
8
|
-
* @
|
8
|
+
* @attr {string} label
|
9
|
+
* @attr {boolean} [disabled=false]
|
10
|
+
* @attr {string} [url]
|
11
|
+
*
|
12
|
+
* @readonly
|
13
|
+
* @attr {string} [version]
|
14
|
+
*
|
15
|
+
* @slot {Element} [icon]
|
9
16
|
*/
|
10
17
|
export default class GlideCoreMenuLink extends LitElement {
|
11
18
|
#private;
|
12
19
|
static shadowRootOptions: ShadowRootInit;
|
13
20
|
static styles: import("lit").CSSResult[];
|
21
|
+
/**
|
22
|
+
* @default false
|
23
|
+
*/
|
14
24
|
get disabled(): boolean;
|
15
25
|
set disabled(isDisabled: boolean);
|
16
26
|
label?: string;
|
package/dist/menu.link.js
CHANGED
@@ -1 +1 @@
|
|
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;
|
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";import final from"./library/final.js";import required from"./library/required.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}),required],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"),final],GlideCoreMenuLink);export default GlideCoreMenuLink;
|
package/dist/menu.link.styles.js
CHANGED
@@ -7,10 +7,10 @@ import{css}from"lit";export default[css`
|
|
7
7
|
box-sizing: border-box;
|
8
8
|
display: flex;
|
9
9
|
font: inherit;
|
10
|
-
gap: var(--gap);
|
10
|
+
gap: var(--private-gap);
|
11
11
|
inline-size: 100%;
|
12
|
-
padding-block: var(--padding-block);
|
13
|
-
padding-inline: var(--padding-inline);
|
12
|
+
padding-block: var(--private-padding-block);
|
13
|
+
padding-inline: var(--private-padding-inline);
|
14
14
|
text-decoration: none;
|
15
15
|
transition: background-color 100ms ease-in-out;
|
16
16
|
user-select: none;
|
package/dist/menu.options.d.ts
CHANGED
@@ -5,7 +5,13 @@ declare global {
|
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
8
|
-
* @
|
8
|
+
* @attr {string} [aria-activedescendant='']
|
9
|
+
* @attr {string} [aria-labelledby='']
|
10
|
+
*
|
11
|
+
* @readonly
|
12
|
+
* @attr {string} [version]
|
13
|
+
*
|
14
|
+
* @slot {GlideCoreMenuButton | GlideCoreMenuLink}
|
9
15
|
*/
|
10
16
|
export default class GlideCoreMenuOptions extends LitElement {
|
11
17
|
#private;
|
@@ -13,7 +19,7 @@ export default class GlideCoreMenuOptions extends LitElement {
|
|
13
19
|
static styles: import("lit").CSSResult[];
|
14
20
|
ariaActivedescendant: string;
|
15
21
|
ariaLabelledby: string;
|
16
|
-
privateSize: '
|
22
|
+
privateSize: 'large' | 'small';
|
17
23
|
readonly version: string;
|
18
24
|
connectedCallback(): void;
|
19
25
|
render(): import("lit").TemplateResult<1>;
|
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,i){var r,n=arguments.length,s=n<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--)(r=e[a])&&(s=(n<3?r(s):n>3?r(t,o,s):r(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};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";import final from"./library/final.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"),final],GlideCoreMenuOptions);export default GlideCoreMenuOptions;
|
@@ -6,9 +6,9 @@ import{css}from"lit";export default[css`
|
|
6
6
|
|
7
7
|
.component {
|
8
8
|
&.large {
|
9
|
-
--gap: var(--glide-core-spacing-sm);
|
10
|
-
--padding-inline: var(--glide-core-spacing-sm);
|
11
|
-
--padding-block: var(--glide-core-spacing-xxs);
|
9
|
+
--private-gap: var(--glide-core-spacing-sm);
|
10
|
+
--private-padding-inline: var(--glide-core-spacing-sm);
|
11
|
+
--private-padding-block: var(--glide-core-spacing-xxs);
|
12
12
|
|
13
13
|
font-family: var(--glide-core-body-sm-font-family);
|
14
14
|
font-size: var(--glide-core-body-sm-font-size);
|
@@ -18,10 +18,10 @@ import{css}from"lit";export default[css`
|
|
18
18
|
}
|
19
19
|
|
20
20
|
&.small {
|
21
|
-
--gap: var(--glide-core-spacing-xs);
|
22
|
-
--padding-inline: var(--glide-core-spacing-xs);
|
23
|
-
--padding-block: var(--glide-core-spacing-xxxs);
|
24
|
-
--size: 0.75rem;
|
21
|
+
--private-gap: var(--glide-core-spacing-xs);
|
22
|
+
--private-padding-inline: var(--glide-core-spacing-xs);
|
23
|
+
--private-padding-block: var(--glide-core-spacing-xxxs);
|
24
|
+
--private-size: 0.75rem;
|
25
25
|
|
26
26
|
font-family: var(--glide-core-body-xs-font-family);
|
27
27
|
font-size: var(--glide-core-body-xs-font-size);
|
package/dist/modal.d.ts
CHANGED
@@ -5,13 +5,22 @@ declare global {
|
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
8
|
-
* @
|
8
|
+
* @attr {string} label
|
9
|
+
* @attr {boolean} [back-button=false]
|
10
|
+
* @attr {boolean} [open=false]
|
11
|
+
* @attr {'critical'|'informational'|'medium'} [severity]
|
12
|
+
* @attr {'small'|'medium'|'large'|'xlarge'} [size='medium']
|
9
13
|
*
|
10
|
-
* @
|
11
|
-
* @
|
12
|
-
*
|
13
|
-
* @slot
|
14
|
-
* @slot
|
14
|
+
* @readonly
|
15
|
+
* @attr {string} [version]
|
16
|
+
*
|
17
|
+
* @slot {Element | string}
|
18
|
+
* @slot {GlideCoreModalIconButton} [header-actions]
|
19
|
+
* @slot {GlideCoreButton} [primary]
|
20
|
+
* @slot {GlideCoreButton} [secondary]
|
21
|
+
* @slot {GlideCoreButton | GlideCoreTooltip} [tertiary]
|
22
|
+
*
|
23
|
+
* @fires {Event} toggle
|
15
24
|
*/
|
16
25
|
export default class GlideCoreModal extends LitElement {
|
17
26
|
#private;
|
@@ -19,8 +28,12 @@ export default class GlideCoreModal extends LitElement {
|
|
19
28
|
static styles: import("lit").CSSResult[];
|
20
29
|
backButton: boolean;
|
21
30
|
label?: string;
|
31
|
+
/**
|
32
|
+
* @default false
|
33
|
+
*/
|
22
34
|
get open(): boolean;
|
23
35
|
set open(isOpen: boolean);
|
36
|
+
severity?: 'critical' | 'informational' | 'medium';
|
24
37
|
size?: 'small' | 'medium' | 'large' | 'xlarge';
|
25
38
|
readonly version: string;
|
26
39
|
connectedCallback(): void;
|
@@ -6,13 +6,17 @@ declare global {
|
|
6
6
|
}
|
7
7
|
}
|
8
8
|
/**
|
9
|
-
* @
|
10
|
-
*
|
9
|
+
* @attr {string} label
|
10
|
+
*
|
11
|
+
* @readonly
|
12
|
+
* @attr {string} [version]
|
13
|
+
*
|
14
|
+
* @slot {Element} - An icon
|
11
15
|
*/
|
12
16
|
export default class GlideCoreModalIconButton extends LitElement {
|
13
17
|
static shadowRootOptions: ShadowRootInit;
|
14
18
|
static styles: import("lit").CSSResult[];
|
15
|
-
label?: string
|
19
|
+
label?: string;
|
16
20
|
readonly version: string;
|
17
21
|
render(): import("lit").TemplateResult<1>;
|
18
22
|
}
|
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(o,t,e,r){var i,l=arguments.length,
|
1
|
+
var __decorate=this&&this.__decorate||function(o,t,e,r){var i,l=arguments.length,n=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,e):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(o,t,e,r);else for(var s=o.length-1;s>=0;s--)(i=o[s])&&(n=(l<3?i(n):l>3?i(t,e,n):i(t,e))||n);return l>3&&n&&Object.defineProperty(t,e,n),n};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";import final from"./library/final.js";import required from"./library/required.js";let GlideCoreModalIconButton=class GlideCoreModalIconButton extends LitElement{constructor(){super(...arguments),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(),required],GlideCoreModalIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreModalIconButton.prototype,"version",void 0),GlideCoreModalIconButton=__decorate([customElement("glide-core-modal-icon-button"),final],GlideCoreModalIconButton);export default GlideCoreModalIconButton;
|
package/dist/modal.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,i){var l,s=arguments.length,n=s<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(n=(s<3?l(n):s>3?l(t,o,n):l(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";import severityInformationalIcon from"./icons/severity-informational.js";import severityMediumIcon from"./icons/severity-medium.js";import severityCriticalIcon from"./icons/severity-critical.js";import final from"./library/final.js";import required from"./library/required.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.#i=createRef(),this.#l=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?setTimeout((()=>{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.#p(),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.#i.value?.addEventListener("click",this.#a,{capture:!0}),this.#i.value?.addEventListener("mouseup",this.#c)}render(){return html`<dialog class="component" data-test="component" @keydown="${this.#h}" ${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.#i)}><header class="header"><h2 class="label" data-test="heading" id="heading">${when(this.severity,(()=>html`<span class="${classMap({severity:!0,critical:"critical"===this.severity,informational:"informational"===this.severity,medium:"medium"===this.severity})}" data-test="severity">${this.severity&&icons[this.severity]}</span>`))} ${when(this.backButton&&!this.severity,(()=>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.#l)}></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;#i;#l;#s;#n;#r;#a;#c;#d;#p(){document.documentElement.classList.remove("private-glide-core-modal-lock-scroll"),this.#o.value?.close()}#u(){this.open=!1}#h(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}),required],GlideCoreModal.prototype,"label",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreModal.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"severity",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"size",void 0),__decorate([property({reflect:!0})],GlideCoreModal.prototype,"version",void 0),GlideCoreModal=__decorate([customElement("glide-core-modal"),final],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>`,critical:severityCriticalIcon,informational:severityInformationalIcon,medium:severityMediumIcon};
|
package/dist/modal.styles.js
CHANGED
@@ -56,7 +56,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
56
56
|
}
|
57
57
|
|
58
58
|
::slotted([slot='tertiary']) {
|
59
|
-
--size: 1rem;
|
59
|
+
--private-size: 1rem;
|
60
60
|
|
61
61
|
display: contents;
|
62
62
|
size: 1rem;
|
@@ -113,27 +113,45 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export
|
|
113
113
|
gap: 0.625rem;
|
114
114
|
|
115
115
|
::slotted(*) {
|
116
|
-
/*
|
117
|
-
Flex so the actions don't sit on the baseline of ".header" and can be
|
116
|
+
/*
|
117
|
+
Flex so the actions don't sit on the baseline of ".header" and can be
|
118
118
|
vertically centered.
|
119
119
|
*/
|
120
120
|
display: flex;
|
121
121
|
}
|
122
122
|
}
|
123
123
|
|
124
|
+
.severity {
|
125
|
+
--private-size: 1.5rem;
|
126
|
+
|
127
|
+
display: flex;
|
128
|
+
|
129
|
+
&.informational {
|
130
|
+
color: var(--glide-core-status-warning-informational);
|
131
|
+
}
|
132
|
+
|
133
|
+
&.medium {
|
134
|
+
color: var(--glide-core-status-warning-medium);
|
135
|
+
}
|
136
|
+
|
137
|
+
&.critical {
|
138
|
+
color: var(--glide-core-status-warning-critical);
|
139
|
+
}
|
140
|
+
}
|
141
|
+
|
124
142
|
.back-button {
|
125
|
-
/*
|
126
|
-
Flex so the icon doesn't sit on the baseline and extend the height of
|
143
|
+
/*
|
144
|
+
Flex so the icon doesn't sit on the baseline and extend the height of
|
127
145
|
".back-button", making the icon not vertically centered relative to ".label".
|
128
146
|
*/
|
129
147
|
display: flex;
|
130
148
|
}
|
131
149
|
|
132
150
|
.close-button {
|
133
|
-
--size: 1.25rem;
|
151
|
+
--private-size: 1.25rem;
|
134
152
|
|
135
|
-
/*
|
136
|
-
Flex so the icon doesn't sit on the baseline and extend the height of
|
153
|
+
/*
|
154
|
+
Flex so the icon doesn't sit on the baseline and extend the height of
|
137
155
|
".close-button", making the icon not vertically centered relative to ".label".
|
138
156
|
*/
|
139
157
|
display: flex;
|
package/dist/popover.d.ts
CHANGED
@@ -5,19 +5,36 @@ declare global {
|
|
5
5
|
}
|
6
6
|
}
|
7
7
|
/**
|
8
|
-
* @
|
8
|
+
* @attr {boolean} [disabled=false]
|
9
|
+
* @attr {number} [offset=4]
|
10
|
+
* @attr {boolean} [open=false]
|
11
|
+
* @attr {'bottom'|'left'|'right'|'top'} [placement]
|
9
12
|
*
|
10
|
-
* @
|
11
|
-
* @
|
13
|
+
* @readonly
|
14
|
+
* @attr [version]
|
15
|
+
*
|
16
|
+
* @slot {Element | string} - The content of the popover
|
17
|
+
* @slot {Element} [target] - The element to which the popover will anchor. Can be any focusable element.
|
18
|
+
*
|
19
|
+
* @fires {Event} toggle
|
12
20
|
*/
|
13
21
|
export default class GlideCorePopover extends LitElement {
|
14
22
|
#private;
|
15
23
|
static shadowRootOptions: ShadowRootInit;
|
16
24
|
static styles: import("lit").CSSResult[];
|
25
|
+
/**
|
26
|
+
* @default false
|
27
|
+
*/
|
17
28
|
get disabled(): boolean;
|
18
29
|
set disabled(isDisabled: boolean);
|
30
|
+
/**
|
31
|
+
* @default 4
|
32
|
+
*/
|
19
33
|
get offset(): number;
|
20
34
|
set offset(offset: number);
|
35
|
+
/**
|
36
|
+
* @default false
|
37
|
+
*/
|
21
38
|
get open(): boolean;
|
22
39
|
set open(isOpen: boolean);
|
23
40
|
placement?: 'bottom' | 'left' | 'right' | 'top';
|
package/dist/popover.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,l=arguments.length,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,o,r){var i,l=arguments.length,a=l<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var s=e.length-1;s>=0;s--)(i=e[s])&&(a=(l<3?i(a):l>3?i(t,o,a):i(t,o))||a);return l>3&&a&&Object.defineProperty(t,o,a),a};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";import final from"./library/final.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.#a=!1,this.#s=createRef(),this.#n=createRef(),this.#p=()=>{this.#r||this.#a||this.#o?setTimeout((()=>{this.#r=!1,this.#a=!1,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.#s.value&&(this.#s.value.popover="manual"),this.open&&!this.disabled&&this.#f(),this.#t.value?.addEventListener("mouseup",(()=>{this.#r=!0})),this.#n.value?.addEventListener("mouseup",(()=>{this.#a=!0})),this.#e.value?.addEventListener("mouseup",(()=>{this.#o=!0})),this.#n.value?.addEventListener("keydown",(e=>{"Enter"!==e.key&&" "!==e.key||(this.#a=!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.#s)}><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;#a;#m;#s;#n;#p;#d(){this.#s.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.#s.value&&(this.#u=autoUpdate(this.#n.value,this.#s.value,(()=>{(async()=>{if(this.#n.value&&this.#s.value&&this.#e.value){const e=Number.parseFloat(window.getComputedStyle(this.#s.value).padding),{x:t,y:o,placement:r,middlewareData:i}=await computePosition(this.#n.value,this.#s.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.#s.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.#s.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"),final],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/popover.styles.js
CHANGED
@@ -69,8 +69,8 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
|
|
69
69
|
}
|
70
70
|
|
71
71
|
.arrow {
|
72
|
-
--arrow-height: 0.5625rem;
|
73
|
-
--arrow-width: 1rem;
|
72
|
+
--private-arrow-height: 0.5625rem;
|
73
|
+
--private-arrow-width: 1rem;
|
74
74
|
|
75
75
|
color: var(--glide-core-surface-modal);
|
76
76
|
display: flex;
|
@@ -78,14 +78,14 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
|
|
78
78
|
|
79
79
|
&.top,
|
80
80
|
&.bottom {
|
81
|
-
block-size: var(--arrow-height);
|
82
|
-
inline-size: var(--arrow-width);
|
81
|
+
block-size: var(--private-arrow-height);
|
82
|
+
inline-size: var(--private-arrow-width);
|
83
83
|
}
|
84
84
|
|
85
85
|
&.right,
|
86
86
|
&.left {
|
87
|
-
block-size: var(--arrow-width);
|
88
|
-
inline-size: var(--arrow-height);
|
87
|
+
block-size: var(--private-arrow-width);
|
88
|
+
inline-size: var(--private-arrow-height);
|
89
89
|
order: 2;
|
90
90
|
}
|
91
91
|
}
|
package/dist/radio-group.d.ts
CHANGED
@@ -8,18 +8,55 @@ declare global {
|
|
8
8
|
}
|
9
9
|
}
|
10
10
|
/**
|
11
|
-
* @
|
12
|
-
* @
|
13
|
-
* @
|
11
|
+
* @attr {string} label
|
12
|
+
* @attr {boolean} [disabled=false]
|
13
|
+
* @attr {boolean} [hide-label=false]
|
14
|
+
* @attr {string} [name='']
|
15
|
+
* @attr {'horizontal'} [orientation='horizontal']
|
16
|
+
* @attr {boolean} [required=false]
|
17
|
+
* @attr {string} [tooltip]
|
18
|
+
* @attr {string} [value='']
|
14
19
|
*
|
15
|
-
* @
|
16
|
-
* @
|
20
|
+
* @readonly
|
21
|
+
* @attr {string} [version]
|
22
|
+
*
|
23
|
+
* @slot {GlideCoreRadio}
|
24
|
+
* @slot {Element | string} [description] - Additional information or context
|
25
|
+
*
|
26
|
+
* @fires {Event} invalid
|
27
|
+
*
|
28
|
+
* @readonly
|
29
|
+
* @prop {HTMLFormElement | null} form
|
30
|
+
*
|
31
|
+
* @readonly
|
32
|
+
* @prop {ValidityState} validity
|
33
|
+
*
|
34
|
+
* @method checkValidity
|
35
|
+
* @returns boolean
|
36
|
+
*
|
37
|
+
* @method formAssociatedCallback
|
38
|
+
* @method formResetCallback
|
39
|
+
*
|
40
|
+
* @method reportValidity
|
41
|
+
* @returns boolean
|
42
|
+
*
|
43
|
+
* @method resetValidityFeedback
|
44
|
+
*
|
45
|
+
* @method setCustomValidity
|
46
|
+
* @param {string} message
|
47
|
+
*
|
48
|
+
* @method setValidity
|
49
|
+
* @param {ValidityStateFlags} [flags]
|
50
|
+
* @param {string} [message]
|
17
51
|
*/
|
18
52
|
export default class GlideCoreRadioGroup extends LitElement implements FormControl {
|
19
53
|
#private;
|
20
54
|
static formAssociated: boolean;
|
21
55
|
static shadowRootOptions: ShadowRootInit;
|
22
56
|
static styles: import("lit").CSSResult[];
|
57
|
+
/**
|
58
|
+
* @default false
|
59
|
+
*/
|
23
60
|
get disabled(): boolean;
|
24
61
|
set disabled(isDisabled: boolean);
|
25
62
|
hideLabel: boolean;
|
@@ -28,8 +65,14 @@ export default class GlideCoreRadioGroup extends LitElement implements FormContr
|
|
28
65
|
orientation: "horizontal";
|
29
66
|
privateSplit?: 'left' | 'middle';
|
30
67
|
tooltip?: string;
|
68
|
+
/**
|
69
|
+
* @default false
|
70
|
+
*/
|
31
71
|
get required(): boolean;
|
32
72
|
set required(isRequired: boolean);
|
73
|
+
/**
|
74
|
+
* @default ''
|
75
|
+
*/
|
33
76
|
get value(): string;
|
34
77
|
set value(value: string);
|
35
78
|
readonly version: string;
|
@@ -39,7 +82,6 @@ export default class GlideCoreRadioGroup extends LitElement implements FormContr
|
|
39
82
|
focus(options?: FocusOptions): void;
|
40
83
|
get form(): HTMLFormElement | null;
|
41
84
|
get validity(): ValidityState;
|
42
|
-
get willValidate(): boolean;
|
43
85
|
formAssociatedCallback(): void;
|
44
86
|
formResetCallback(): void;
|
45
87
|
render(): import("lit").TemplateResult<1>;
|
package/dist/radio-group.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,i,
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,i,o){var a,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var d=e.length-1;d>=0;d--)(a=e[d])&&(r=(s<3?a(r):s>3?a(t,i,r):a(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,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";import final from"./library/final.js";import required from"./library/required.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 t of this.#t)t.disabled=e,t.tabIndex=e?-1:0}get required(){return this.#i}set required(e){this.#i=e;for(const t of this.#t)t.privateRequired=e}get value(){return this.#o}set value(e){this.#o=e;for(const t of this.#t){const i=Boolean(e&&t.value===e);t.checked=!!i,t.tabIndex=i?0:-1,t.checked&&t.disabled&&(t.disabled=!1)}}checkValidity(){this.isCheckingValidity=!0;const e=this.#a.checkValidity();return this.isCheckingValidity=!1,e}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#s)}firstUpdated(){if(this.disabled)for(const e of this.#t)e.disabled=!0;if(this.required)for(const e of this.#t)e.privateRequired=!0;const e=this.value?this.#t.find((({value:e})=>e===this.value)):this.#t.find((({checked:e,disabled:t})=>e&&!t));if(!this.value&&e?.value&&this.setAttribute("value",e.value),e){this.#o=e.value;for(const t of this.#t)t.tabIndex=t!==e||t.disabled?-1:0;return}const t=this.#t.find((({disabled:e})=>!e));for(const e of this.#t)e.tabIndex=e===t?0:-1}focus(e){const t=this.#t.find((({checked:e,disabled:t})=>e&&!t))??this.#t.find((({tabIndex:e})=>0===e));t?.focus(e)}get form(){return this.#a.form}get validity(){const e=this.#t.some((({checked:e})=>e));return!this.required||e||this.disabled?this.required&&this.#a.validity.valueMissing&&e?(this.#a.setValidity({}),this.#a.validity):this.required&&this.disabled&&!e?(this.#a.setValidity({valueMissing:!0}," ",this.#r.value),this.#a.validity):(this.required||!this.#a.validity.valueMissing||e||this.#a.setValidity({}),this.#a.validity):(this.#a.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#r.value),this.#a.validity)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#s)}formResetCallback(){this.value=this.getAttribute("value")??""}render(){return html`
|
2
2
|
<div
|
3
3
|
class="component"
|
4
4
|
@click=${this.#d}
|
@@ -6,6 +6,7 @@ var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length
|
|
6
6
|
${ref(this.#r)}
|
7
7
|
>
|
8
8
|
<glide-core-private-label
|
9
|
+
label=${ifDefined(this.label)}
|
9
10
|
orientation=${this.orientation}
|
10
11
|
split=${ifDefined(this.privateSplit??void 0)}
|
11
12
|
tooltip=${ifDefined(this.tooltip)}
|
@@ -25,17 +26,25 @@ var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length
|
|
25
26
|
<slot
|
26
27
|
@focusout=${this.#h}
|
27
28
|
@private-checked-change=${this.#c}
|
28
|
-
@private-
|
29
|
+
@private-disabled-change=${this.#u}
|
30
|
+
@private-value-change=${this.#p}
|
29
31
|
${assertSlot([GlideCoreRadioGroupRadio])}
|
30
|
-
${ref(this.#
|
31
|
-
|
32
|
+
${ref(this.#f)}
|
33
|
+
>
|
34
|
+
<!-- @type {GlideCoreRadio} -->
|
35
|
+
</slot>
|
32
36
|
</div>
|
33
37
|
|
34
38
|
<div id="description" slot="description">
|
35
39
|
<slot
|
36
40
|
class=${classMap({"description-slot":!0,hidden:Boolean(this.#n&&this.validityMessage)})}
|
37
41
|
name="description"
|
38
|
-
|
42
|
+
>
|
43
|
+
<!--
|
44
|
+
Additional information or context
|
45
|
+
@type {Element | string}
|
46
|
+
-->
|
47
|
+
</slot>
|
39
48
|
|
40
49
|
${when(this.#n&&this.validityMessage,(()=>html`<div data-test="validity-message">
|
41
50
|
${unsafeHTML(this.validityMessage)}
|
@@ -43,4 +52,4 @@ var __decorate=this&&this.__decorate||function(e,i,t,o){var s,a=arguments.length
|
|
43
52
|
</div>
|
44
53
|
</glide-core-private-label>
|
45
54
|
</div>
|
46
|
-
`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#
|
55
|
+
`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#a.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#a.setValidity({customError:!1},"",this.#r.value):this.#a.setValidity({customError:!0,valueMissing:this.#a.validity.valueMissing}," ",this.#r.value)}setValidity(e,t){this.validityMessage=t,this.#a.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.#f=createRef(),this.#e=!1,this.#i=!1,this.#o="",this.#s=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,this.value)},this.#a=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;#f;#a;#e;#i;#o;#s;get#n(){const e=!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit;for(const t of this.#t)t.privateInvalid=e;return e}#m(e){this.#t.find((({tabIndex:e})=>0===e))?.setAttribute("tabindex","-1"),this.#o=e.value,e.checked=!0,e.tabIndex=0,e.focus()}#d(e){if(!this.disabled)if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const e=this.#t.find((({checked:e})=>e));e?.focus()}else if(e.target instanceof GlideCoreRadioGroupRadio&&!e.target.disabled){const t=this.#t.filter((t=>t!==e.target));for(const e of t)e.checked=!1,e.tabIndex=-1;this.#m(e.target)}}#l(e){if(!(this.disabled||e.target instanceof GlideCoreRadioGroupRadio&&e.target?.disabled)&&e.target instanceof GlideCoreRadioGroupRadio)switch(e.key){case"Enter":this.form?.requestSubmit();break;case"ArrowUp":case"ArrowLeft":{e.preventDefault();const t=this.#t.slice(0,this.#t.indexOf(e.target)).findLast((e=>!e.disabled)),i=this.#t.findLast((e=>!e.disabled));t&&t!==e.target?(this.#v(e.target),this.#m(t)):i&&i!==e.target&&(this.#v(e.target),this.#m(i));break}case"ArrowDown":case"ArrowRight":{e.preventDefault();const t=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof GlideCoreRadioGroupRadio&&i>this.#t.indexOf(e.target))),i=this.#t.find((e=>!e.disabled));t&&t!==e.target?(this.#v(e.target),this.#m(t)):i&&i!==e.target&&(this.#v(e.target),this.#m(i));break}case" ":if(e.preventDefault(),!e.target.disabled&&!e.target.checked){this.#m(e.target);for(const t of this.#t)t!==e.target&&this.#v(t)}}}#h(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.contains(e.relatedTarget))&&(this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}get#t(){return this.#f.value?this.#f.value.assignedElements().filter((e=>e instanceof GlideCoreRadioGroupRadio)):[]}#c(e){if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&!e.detail.old&&e.detail.new){const t=this.#t.find((({tabIndex:e})=>0===e));t&&t!==e.target&&this.#v(t),this.#o=e.target.value,e.target.tabIndex=e.target.disabled?-1:0}}#u(e){if(e.target instanceof GlideCoreRadioGroupRadio&&e.target.disabled){const t=this.#t.find(((t,i)=>!t.disabled&&e.target instanceof GlideCoreRadioGroupRadio&&i>this.#t.indexOf(e.target)));if(t&&0===e.target.tabIndex)return t.tabIndex=0,void(e.target.tabIndex=-1);const i=this.#t.find((e=>!e.disabled));if(i&&0===e.target.tabIndex)return i.tabIndex=0,void(e.target.tabIndex=-1)}const t=this.#t.some((({tabIndex:e})=>0===e));e.target instanceof GlideCoreRadioGroupRadio&&!t&&(e.target.tabIndex=0)}#p(e){e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&e.detail.new?this.#o=e.target.value:e.target instanceof GlideCoreRadioGroupRadio&&e.target.checked&&(this.#o="")}#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}),required],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"),final],GlideCoreRadioGroup);export default GlideCoreRadioGroup;
|