@eui/eds 22.0.0-alpha.51 → 22.0.0-alpha.53
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/docs/changelog.html +29 -0
- package/docs/components/EdsCheckbox.html +2 -2
- package/docs/components/EdsRadio.html +15 -2
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/documentation.json +139 -98
- package/docs/llms.txt +3 -3
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-button.mjs +2 -2
- package/fesm2022/eui-eds-eds-button.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-checkbox.mjs +21 -7
- package/fesm2022/eui-eds-eds-checkbox.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-datepicker.mjs +2 -2
- package/fesm2022/eui-eds-eds-datepicker.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-feedback-message.mjs +2 -2
- package/fesm2022/eui-eds-eds-feedback-message.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-input-button.mjs +2 -2
- package/fesm2022/eui-eds-eds-input-button.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-input-number.mjs +2 -2
- package/fesm2022/eui-eds-eds-input-number.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-input-text.mjs +2 -2
- package/fesm2022/eui-eds-eds-input-text.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-radio.mjs +27 -9
- package/fesm2022/eui-eds-eds-radio.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-select.mjs +2 -2
- package/fesm2022/eui-eds-eds-select.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-textarea.mjs +2 -2
- package/fesm2022/eui-eds-eds-textarea.mjs.map +1 -1
- package/package.json +3 -3
- package/types/eui-eds-eds-checkbox.d.ts +7 -1
- package/types/eui-eds-eds-checkbox.d.ts.map +1 -1
- package/types/eui-eds-eds-radio.d.ts +8 -1
- package/types/eui-eds-eds-radio.d.ts.map +1 -1
package/docs/llms.txt
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# eui documentation
|
|
2
2
|
|
|
3
|
-
> Generated by compodoc 2.0.0 at 2026-10-
|
|
3
|
+
> Generated by compodoc 2.0.0 at 2026-10-29T12:26:55.683Z, llm-md export.
|
|
4
4
|
|
|
5
5
|
## Components
|
|
6
6
|
|
|
@@ -915,7 +915,7 @@ Outputs:
|
|
|
915
915
|
Methods:
|
|
916
916
|
- `registerOnChange(fn: function): void`
|
|
917
917
|
- `registerOnTouched(fn: function): void`
|
|
918
|
-
- `setDisabledState(
|
|
918
|
+
- `setDisabledState(isDisabled: boolean): void`
|
|
919
919
|
- `writeValue(value: boolean): void`
|
|
920
920
|
|
|
921
921
|
### EdsChip
|
|
@@ -3022,7 +3022,7 @@ Inputs:
|
|
|
3022
3022
|
Methods:
|
|
3023
3023
|
- `registerOnChange(fn: function): void`
|
|
3024
3024
|
- `registerOnTouched(fn: function): void`
|
|
3025
|
-
- `setDisabledState(
|
|
3025
|
+
- `setDisabledState(isDisabled: boolean): void`
|
|
3026
3026
|
- `writeValue(value: string): void`
|
|
3027
3027
|
|
|
3028
3028
|
### EdsRating
|
package/docs/properties.html
CHANGED
|
@@ -129,7 +129,7 @@ class EdsButton {
|
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsButton, isStandalone: true, selector: "button[edsButton]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isBlock: { classPropertyName: "isBlock", publicName: "isBlock", isSignal: true, isRequired: false, transformFunction: null }, hasLineWrap: { classPropertyName: "hasLineWrap", publicName: "hasLineWrap", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isAvatarButton: { classPropertyName: "isAvatarButton", publicName: "isAvatarButton", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type-variant": "variant()", "attr.color": "color()", "attr.size": "size()", "attr.rounded": "isRounded() || null", "attr.avatar-button": "isAvatarButton() || null", "attr.block": "isBlock() || null", "attr.line-wrap": "hasLineWrap() || null", "attr.data-e2e": "e2eAttr()", "attr.id": "id()", "attr.aria-disabled": "disabled() || null", "attr.disabled": "null" }, classAttribute: "eds-button" }, ngImport: i0, template: "<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button[type-variant=primary]{--_border-width: var(--eds-bw-none);--_border-color: transparent;--_border-color-hover: transparent;--_border-color-active: transparent}.eui-21 :host.eds-button[type-variant=primary][color=primary]{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary)}.eui-21 :host.eds-button[type-variant=primary][color=highlight]{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight)}.eui-21 :host.eds-button[type-variant=primary][color=critical]{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical)}.eui-21 :host.eds-button[type-variant=primary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=primary][disabled]{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=secondary]{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button[type-variant=secondary][color=primary]{--_border-color: var(--eds-c-border-primary);--_border-color-hover: var(--eds-c-border-primary--hover);--_border-color-active: var(--eds-c-border-primary--pressed);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=neutral]{--_border-color: var(--eds-c-border-neutral);--_border-color-hover: var(--eds-c-border-neutral-strong);--_border-color-active: var(--eds-c-border-neutral-strong);--_on-surface: var(--eds-c-foreground-subtle);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=highlight]{--_border-color: var(--eds-c-border-highlight);--_border-color-hover: var(--eds-c-border-highlight--hover);--_border-color-active: var(--eds-c-border-highlight--pressed);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=critical]{--_border-color: var(--eds-c-border-critical);--_border-color-hover: var(--eds-c-border-critical);--_border-color-active: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=secondary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=secondary][disabled]{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_border-color-hover: var(--eds-c-border-disabled);--_border-color-active: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=tertiary]{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button[type-variant=tertiary][color=primary]{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=neutral]{--_on-surface: var(--eds-c-foreground);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][color=highlight]{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=tertiary][disabled]{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[size=m]{--_font-size: var(--eds-f-s-m);--_padding: var(--eds-sp-xs);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_gap: var(--eds-is-3xs)}.eui-21 :host.eds-button[size=s]{--_font-size: var(--eds-f-s-s);--_padding: var(--eds-sp-2xs);--_size: calc(var(--eds-si-3xl) + var(--eds-si-2xs));--_icon-size: var(--eds-is-s);--_gap: var(--eds-is-xs)}.eui-21 :host.eds-button[size=l]{--_font-size: var(--eds-f-s-l);--_padding: var(--eds-sp-s);--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-m);--_gap: calc(var(--eds-is-xs) + var(--eds-is-3xs))}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);font-weight:var(--eds-f-w-medium);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);gap:var(--_gap);--_eds-icon-color-inherit: var(--_on-surface);--_eds-icon-size-inherit: var(--_icon-size)}.eui-21 :host.eds-button:hover,.eui-21 :host.eds-button:focus{background-color:var(--_surface-hover);color:var(--_on-surface-hover);border-color:var(--_border-color-hover);--_eds-icon-color-inherit: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);border-color:var(--_border-color-active);--_eds-icon-color-inherit: var(--_on-surface-active)}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[color=critical]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-critical)!important;outline-offset:2px!important}.eui-21 :host.eds-button[aria-disabled=true],.eui-21 :host.eds-button[disabled]{cursor:not-allowed}.eui-21 :host.eds-button[rounded]{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button[rounded]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[avatar-button]{border-radius:var(--eds-br-full);border:var(--eds-bw-s) solid transparent;padding:0}.eui-21 :host.eds-button[avatar-button]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[avatar-button]:hover{border-color:var(--eds-c-border-primary--hover)}.eui-21 :host.eds-button[avatar-button]:active{border-color:var(--eds-c-border-primary--pressed)}.eui-21 :host.eds-button[block]{align-items:center;display:flex;width:100%}.eui-21 :host.eds-button[block] .eds-button__container{display:block;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eds-button[block] .eds-button__container .eds-icon{vertical-align:middle}.eui-21 :host.eds-button[line-wrap]{white-space:normal}.eui-21 :host.eds-button[line-wrap] .eds-button__container{line-height:var(--eds-f-lh-m, 1.5rem);white-space:normal}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsButton, isStandalone: true, selector: "button[edsButton]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isBlock: { classPropertyName: "isBlock", publicName: "isBlock", isSignal: true, isRequired: false, transformFunction: null }, hasLineWrap: { classPropertyName: "hasLineWrap", publicName: "hasLineWrap", isSignal: true, isRequired: false, transformFunction: null }, isRounded: { classPropertyName: "isRounded", publicName: "isRounded", isSignal: true, isRequired: false, transformFunction: null }, isAvatarButton: { classPropertyName: "isAvatarButton", publicName: "isAvatarButton", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.type-variant": "variant()", "attr.color": "color()", "attr.size": "size()", "attr.rounded": "isRounded() || null", "attr.avatar-button": "isAvatarButton() || null", "attr.block": "isBlock() || null", "attr.line-wrap": "hasLineWrap() || null", "attr.data-e2e": "e2eAttr()", "attr.id": "id()", "attr.aria-disabled": "disabled() || null", "attr.disabled": "null" }, classAttribute: "eds-button" }, ngImport: i0, template: "<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button[type-variant=primary]{--_border-width: var(--eds-bw-none);--_border-color: transparent;--_border-color-hover: transparent;--_border-color-active: transparent}.eui-21 :host.eds-button[type-variant=primary][color=primary]{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary)}.eui-21 :host.eds-button[type-variant=primary][color=highlight]{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight)}.eui-21 :host.eds-button[type-variant=primary][color=critical]{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical)}.eui-21 :host.eds-button[type-variant=primary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=primary][disabled]{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=secondary]{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button[type-variant=secondary][color=primary]{--_border-color: var(--eds-c-border-primary);--_border-color-hover: var(--eds-c-border-primary--hover);--_border-color-active: var(--eds-c-border-primary--pressed);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=neutral]{--_border-color: var(--eds-c-border-neutral);--_border-color-hover: var(--eds-c-border-neutral-strong);--_border-color-active: var(--eds-c-border-neutral-strong);--_on-surface: var(--eds-c-foreground-subtle);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=highlight]{--_border-color: var(--eds-c-border-highlight);--_border-color-hover: var(--eds-c-border-highlight--hover);--_border-color-active: var(--eds-c-border-highlight--pressed);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=critical]{--_border-color: var(--eds-c-border-critical);--_border-color-hover: var(--eds-c-border-critical);--_border-color-active: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=secondary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=secondary][disabled]{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_border-color-hover: var(--eds-c-border-disabled);--_border-color-active: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=tertiary]{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button[type-variant=tertiary][color=primary]{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=neutral]{--_on-surface: var(--eds-c-foreground);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][color=highlight]{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=tertiary][disabled]{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[size=m]{--_font-size: var(--eds-f-s-m);--_padding: var(--eds-sp-xs);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_gap: var(--eds-is-3xs)}.eui-21 :host.eds-button[size=s]{--_font-size: var(--eds-f-s-s);--_padding: var(--eds-sp-2xs);--_size: calc(var(--eds-si-3xl) + var(--eds-si-2xs));--_icon-size: var(--eds-is-s);--_gap: var(--eds-is-xs)}.eui-21 :host.eds-button[size=l]{--_font-size: var(--eds-f-s-l);--_padding: var(--eds-sp-s);--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-m);--_gap: calc(var(--eds-is-xs) + var(--eds-is-3xs))}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);font-weight:var(--eds-f-w-medium);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);gap:var(--_gap);--_eds-icon-color-inherit: var(--_on-surface);--_eds-icon-size-inherit: var(--_icon-size)}.eui-21 :host.eds-button:hover,.eui-21 :host.eds-button:focus{background-color:var(--_surface-hover);color:var(--_on-surface-hover);border-color:var(--_border-color-hover);--_eds-icon-color-inherit: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);border-color:var(--_border-color-active);--_eds-icon-color-inherit: var(--_on-surface-active)}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[color=critical]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-focus-critical)!important;outline-offset:2px!important}.eui-21 :host.eds-button[aria-disabled=true],.eui-21 :host.eds-button[disabled]{cursor:not-allowed}.eui-21 :host.eds-button[rounded]{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button[rounded]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[avatar-button]{border-radius:var(--eds-br-full);border:var(--eds-bw-s) solid transparent;padding:0}.eui-21 :host.eds-button[avatar-button]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[avatar-button]:hover{border-color:var(--eds-c-border-primary--hover)}.eui-21 :host.eds-button[avatar-button]:active{border-color:var(--eds-c-border-primary--pressed)}.eui-21 :host.eds-button[block]{align-items:center;display:flex;width:100%}.eui-21 :host.eds-button[block] .eds-button__container{display:block;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eds-button[block] .eds-button__container .eds-icon{vertical-align:middle}.eui-21 :host.eds-button[line-wrap]{white-space:normal}.eui-21 :host.eds-button[line-wrap] .eds-button__container{line-height:var(--eds-f-lh-m, 1.5rem);white-space:normal}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
133
133
|
}
|
|
134
134
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsButton, decorators: [{
|
|
135
135
|
type: Component,
|
|
@@ -155,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
155
155
|
// element — which would remove it from the tab order and defeat the focusable-disabled
|
|
156
156
|
// behavior. Force the native attribute off so ONLY `aria-disabled` conveys the state.
|
|
157
157
|
'[attr.disabled]': 'null',
|
|
158
|
-
}, template: "<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button[type-variant=primary]{--_border-width: var(--eds-bw-none);--_border-color: transparent;--_border-color-hover: transparent;--_border-color-active: transparent}.eui-21 :host.eds-button[type-variant=primary][color=primary]{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary)}.eui-21 :host.eds-button[type-variant=primary][color=highlight]{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight)}.eui-21 :host.eds-button[type-variant=primary][color=critical]{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical)}.eui-21 :host.eds-button[type-variant=primary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=primary][disabled]{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=secondary]{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button[type-variant=secondary][color=primary]{--_border-color: var(--eds-c-border-primary);--_border-color-hover: var(--eds-c-border-primary--hover);--_border-color-active: var(--eds-c-border-primary--pressed);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=neutral]{--_border-color: var(--eds-c-border-neutral);--_border-color-hover: var(--eds-c-border-neutral-strong);--_border-color-active: var(--eds-c-border-neutral-strong);--_on-surface: var(--eds-c-foreground-subtle);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=highlight]{--_border-color: var(--eds-c-border-highlight);--_border-color-hover: var(--eds-c-border-highlight--hover);--_border-color-active: var(--eds-c-border-highlight--pressed);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=critical]{--_border-color: var(--eds-c-border-critical);--_border-color-hover: var(--eds-c-border-critical);--_border-color-active: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=secondary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=secondary][disabled]{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_border-color-hover: var(--eds-c-border-disabled);--_border-color-active: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=tertiary]{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button[type-variant=tertiary][color=primary]{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=neutral]{--_on-surface: var(--eds-c-foreground);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][color=highlight]{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=tertiary][disabled]{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[size=m]{--_font-size: var(--eds-f-s-m);--_padding: var(--eds-sp-xs);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_gap: var(--eds-is-3xs)}.eui-21 :host.eds-button[size=s]{--_font-size: var(--eds-f-s-s);--_padding: var(--eds-sp-2xs);--_size: calc(var(--eds-si-3xl) + var(--eds-si-2xs));--_icon-size: var(--eds-is-s);--_gap: var(--eds-is-xs)}.eui-21 :host.eds-button[size=l]{--_font-size: var(--eds-f-s-l);--_padding: var(--eds-sp-s);--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-m);--_gap: calc(var(--eds-is-xs) + var(--eds-is-3xs))}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);font-weight:var(--eds-f-w-medium);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);gap:var(--_gap);--_eds-icon-color-inherit: var(--_on-surface);--_eds-icon-size-inherit: var(--_icon-size)}.eui-21 :host.eds-button:hover,.eui-21 :host.eds-button:focus{background-color:var(--_surface-hover);color:var(--_on-surface-hover);border-color:var(--_border-color-hover);--_eds-icon-color-inherit: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);border-color:var(--_border-color-active);--_eds-icon-color-inherit: var(--_on-surface-active)}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[color=critical]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-
|
|
158
|
+
}, template: "<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n", styles: [".eui-21 :host.eds-button[type-variant=primary]{--_border-width: var(--eds-bw-none);--_border-color: transparent;--_border-color-hover: transparent;--_border-color-active: transparent}.eui-21 :host.eds-button[type-variant=primary][color=primary]{--_surface: var(--eds-c-surface-primary);--_on-surface: var(--eds-c-on-surface-primary);--_surface-hover: var(--eds-c-surface-primary--hover);--_on-surface-hover: var(--eds-c-on-surface-primary);--_surface-active: var(--eds-c-surface-primary--pressed);--_on-surface-active: var(--eds-c-on-surface-primary)}.eui-21 :host.eds-button[type-variant=primary][color=highlight]{--_surface: var(--eds-c-surface-highlight);--_on-surface: var(--eds-c-on-surface-highlight);--_surface-hover: var(--eds-c-surface-highlight--hover);--_on-surface-hover: var(--eds-c-on-surface-highlight);--_surface-active: var(--eds-c-surface-highlight--pressed);--_on-surface-active: var(--eds-c-on-surface-highlight)}.eui-21 :host.eds-button[type-variant=primary][color=critical]{--_surface: var(--eds-c-surface-critical);--_on-surface: var(--eds-c-on-surface-critical);--_surface-hover: var(--eds-c-surface-critical--hover);--_on-surface-hover: var(--eds-c-on-surface-critical);--_surface-active: var(--eds-c-surface-critical--pressed);--_on-surface-active: var(--eds-c-on-surface-critical)}.eui-21 :host.eds-button[type-variant=primary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=primary][disabled]{--_surface: var(--eds-c-surface-disabled);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-disabled);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-disabled);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=secondary]{--_border-width: var(--eds-bw-xs);--_surface: transparent}.eui-21 :host.eds-button[type-variant=secondary][color=primary]{--_border-color: var(--eds-c-border-primary);--_border-color-hover: var(--eds-c-border-primary--hover);--_border-color-active: var(--eds-c-border-primary--pressed);--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=secondary][color=neutral]{--_border-color: var(--eds-c-border-neutral);--_border-color-hover: var(--eds-c-border-neutral-strong);--_border-color-active: var(--eds-c-border-neutral-strong);--_on-surface: var(--eds-c-foreground-subtle);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=highlight]{--_border-color: var(--eds-c-border-highlight);--_border-color-hover: var(--eds-c-border-highlight--hover);--_border-color-active: var(--eds-c-border-highlight--pressed);--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=secondary][color=critical]{--_border-color: var(--eds-c-border-critical);--_border-color-hover: var(--eds-c-border-critical);--_border-color-active: var(--eds-c-border-critical);--_on-surface: var(--eds-c-foreground-critical);--_surface-hover: var(--eds-c-surface-critical-subtler);--_on-surface-hover: var(--eds-c-on-surface-critical-subtler);--_surface-active: var(--eds-c-surface-critical-subtler);--_on-surface-active: var(--eds-c-on-surface-critical-subtler)}.eui-21 :host.eds-button[type-variant=secondary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=secondary][disabled]{--_border-width: var(--eds-bw-xs);--_border-color: var(--eds-c-border-disabled);--_border-color-hover: var(--eds-c-border-disabled);--_border-color-active: var(--eds-c-border-disabled);--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[type-variant=tertiary]{--_border-width: var(--eds-bw-none);--_surface: transparent}.eui-21 :host.eds-button[type-variant=tertiary][color=primary]{--_on-surface: var(--eds-c-foreground-primary);--_surface-hover: var(--eds-c-surface-primary-subtle);--_on-surface-hover: var(--eds-c-on-surface-primary-subtle);--_surface-active: var(--eds-c-surface-primary-subtle);--_on-surface-active: var(--eds-c-on-surface-primary-subtle)}.eui-21 :host.eds-button[type-variant=tertiary][color=neutral]{--_on-surface: var(--eds-c-foreground);--_surface-hover: var(--eds-c-surface-neutral-subtler);--_on-surface-hover: var(--eds-c-on-surface-neutral-subtler);--_surface-active: var(--eds-c-surface-neutral-subtler);--_on-surface-active: var(--eds-c-on-surface-neutral-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][color=highlight]{--_on-surface: var(--eds-c-foreground-highlight);--_surface-hover: var(--eds-c-surface-highlight-subtler);--_on-surface-hover: var(--eds-c-on-surface-highlight-subtler);--_surface-active: var(--eds-c-surface-highlight-subtler);--_on-surface-active: var(--eds-c-on-surface-highlight-subtler)}.eui-21 :host.eds-button[type-variant=tertiary][aria-disabled=true],.eui-21 :host.eds-button[type-variant=tertiary][disabled]{--_surface: var(--eds-c-surface-elevation);--_on-surface: var(--eds-c-foreground-disabled);--_surface-hover: var(--eds-c-surface-elevation);--_on-surface-hover: var(--eds-c-foreground-disabled);--_surface-active: var(--eds-c-surface-elevation);--_on-surface-active: var(--eds-c-foreground-disabled)}.eui-21 :host.eds-button[size=m]{--_font-size: var(--eds-f-s-m);--_padding: var(--eds-sp-xs);--_size: var(--eds-si-4xl);--_icon-size: var(--eds-is-m);--_gap: var(--eds-is-3xs)}.eui-21 :host.eds-button[size=s]{--_font-size: var(--eds-f-s-s);--_padding: var(--eds-sp-2xs);--_size: calc(var(--eds-si-3xl) + var(--eds-si-2xs));--_icon-size: var(--eds-is-s);--_gap: var(--eds-is-xs)}.eui-21 :host.eds-button[size=l]{--_font-size: var(--eds-f-s-l);--_padding: var(--eds-sp-s);--_size: var(--eds-si-6xl);--_icon-size: var(--eds-is-m);--_gap: calc(var(--eds-is-xs) + var(--eds-is-3xs))}.eui-21 :host.eds-button{align-items:center;background-image:none;border-radius:var(--eds-br-s);box-sizing:border-box;cursor:pointer;display:inline-flex;flex-shrink:0;justify-content:center;outline:none;text-transform:none;transition:none;vertical-align:middle;white-space:nowrap;border-style:solid}.eui-21 :host.eds-button .eds-button__container{align-items:center;display:inline-flex;position:relative;gap:var(--eds-sp-2xs);justify-content:center;width:100%}.eui-21 :host.eds-button{background-color:var(--_surface);color:var(--_on-surface);border-width:var(--_border-width);border-color:var(--_border-color);font-size:var(--_font-size);font-weight:var(--eds-f-w-medium);min-height:var(--_size);min-width:var(--_size);padding:var(--_padding);gap:var(--_gap);--_eds-icon-color-inherit: var(--_on-surface);--_eds-icon-size-inherit: var(--_icon-size)}.eui-21 :host.eds-button:hover,.eui-21 :host.eds-button:focus{background-color:var(--_surface-hover);color:var(--_on-surface-hover);border-color:var(--_border-color-hover);--_eds-icon-color-inherit: var(--_on-surface-hover)}.eui-21 :host.eds-button:active{background-color:var(--_surface-active);color:var(--_on-surface-active);border-color:var(--_border-color-active);--_eds-icon-color-inherit: var(--_on-surface-active)}.eui-21 :host.eds-button:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[color=critical]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-focus-critical)!important;outline-offset:2px!important}.eui-21 :host.eds-button[aria-disabled=true],.eui-21 :host.eds-button[disabled]{cursor:not-allowed}.eui-21 :host.eds-button[rounded]{border-radius:var(--eds-br-full)}.eui-21 :host.eds-button[rounded]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[avatar-button]{border-radius:var(--eds-br-full);border:var(--eds-bw-s) solid transparent;padding:0}.eui-21 :host.eds-button[avatar-button]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-button[avatar-button]:hover{border-color:var(--eds-c-border-primary--hover)}.eui-21 :host.eds-button[avatar-button]:active{border-color:var(--eds-c-border-primary--pressed)}.eui-21 :host.eds-button[block]{align-items:center;display:flex;width:100%}.eui-21 :host.eds-button[block] .eds-button__container{display:block;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-21 :host.eds-button[block] .eds-button__container .eds-icon{vertical-align:middle}.eui-21 :host.eds-button[line-wrap]{white-space:normal}.eui-21 :host.eds-button[line-wrap] .eds-button__container{line-height:var(--eds-f-lh-m, 1.5rem);white-space:normal}\n"] }]
|
|
159
159
|
}], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], isBlock: [{ type: i0.Input, args: [{ isSignal: true, alias: "isBlock", required: false }] }], hasLineWrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasLineWrap", required: false }] }], isRounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRounded", required: false }] }], isAvatarButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAvatarButton", required: false }] }], isChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isChecked", required: false }] }] } });
|
|
160
160
|
|
|
161
161
|
/** Convenience array for importing all eds-button components. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-button.mjs","sources":["../../eds-button/eds-button.ts","../../eds-button/eds-button.html","../../eds-button/index.ts","../../eds-button/eui-eds-eds-button.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n booleanAttribute,\n input,\n inject,\n ElementRef,\n} from '@angular/core';\n\n/**\n * Local narrowed unions — the button's variant contract. No shared-token import.\n */\nexport type EdsButtonType = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * Colors the button accepts. `primary` / `neutral` / `highlight` / `critical` have dedicated\n * SCSS branches; `warning` is accepted for parity but has no styled branch.\n */\nexport type EdsButtonColor = 'primary' | 'neutral' | 'highlight' | 'critical' | 'warning';\n\n/** Sizes the button styles (SCSS `:host([size=\"…\"])` branches). */\nexport type EdsButtonSize = 's' | 'm' | 'l';\n\n/**\n * EDS Button — a directive-style button component applied on native `<button>` elements.\n *\n * Supports multiple visual types (primary, secondary, tertiary), semantic color variants\n * (primary, neutral, highlight, critical), and sizes (s, m, l) via string inputs reflected\n * as host attributes.\n *\n * Usage:\n * ```html\n * <button edsButton size=\"m\" color=\"primary\">Label</button>\n * <button edsButton type=\"secondary\" color=\"neutral\" size=\"s\">Cancel</button>\n * <button edsButton type=\"tertiary\" color=\"critical\" [disabled]=\"isLoading\">Delete</button>\n * ```\n */\n@Component({\n templateUrl: './eds-button.html',\n // eslint-disable-next-line\n selector: 'button[edsButton]',\n styleUrl: './eds-button.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-button',\n '[attr.type-variant]': 'variant()',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.rounded]': 'isRounded() || null',\n '[attr.avatar-button]': 'isAvatarButton() || null',\n '[attr.block]': 'isBlock() || null',\n '[attr.line-wrap]': 'hasLineWrap() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[attr.id]': 'id()',\n // A disabled button stays focusable and discoverable (WAI-ARIA \"focusable\n // disabled control\"): reflect state via `aria-disabled` instead of the native\n // `disabled` attribute, which would remove the element from the tab order and\n // suppress its focus style. Activation is cancelled by the capture-phase guards\n // registered in the constructor.\n '[attr.aria-disabled]': 'disabled() || null',\n // Consumers write the state as a bare `disabled` attribute (`<button edsButton disabled>`).\n // Since `disabled` is a native boolean attribute, Angular stamps it straight onto the\n // element — which would remove it from the tab order and defeat the focusable-disabled\n // behavior. Force the native attribute off so ONLY `aria-disabled` conveys the state.\n '[attr.disabled]': 'null',\n },\n})\nexport class EdsButton {\n /**\n * @description Data attribute for e2e testing\n * @default eds-button\n */\n e2eAttr = input('eds-button');\n\n /** @description ID attribute for the button element */\n id = input<string | undefined>(undefined);\n\n /**\n * Visual type of the button. `primary` = solid surface; `secondary` = bordered;\n * `tertiary` = text/ghost. Named `variant` (not `type`) on the Angular side to avoid\n * clashing with the native `<button type>` attribute; reflected as `[attr.type-variant]`\n * (the React projection exposes this axis as its `type` prop).\n * @default 'primary'\n */\n variant = input<EdsButtonType>('primary');\n\n /**\n * Semantic color of the button.\n * @default 'primary'\n */\n color = input<EdsButtonColor>('primary');\n\n /**\n * Size of the button.\n * @default 'm'\n */\n size = input<EdsButtonSize>('m');\n\n /**\n * @description Controls the disabled state of the button.\n * When true, adds the disabled attribute and prevents interaction.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, makes the button full-width (block-level).\n * @default false\n */\n isBlock = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, allows text content to wrap.\n * @default false\n */\n hasLineWrap = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, applies a fully rounded border-radius.\n * @default false\n */\n isRounded = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, applies to avatar acting like a button trigger for the eds-dropdown\n * @default false\n */\n isAvatarButton = input(false, { transform: booleanAttribute });\n\n /**\n * @description\n * When true, marks the button as initially checked/selected within an eds-segmented-control.\n * The segmented-control reads this value during initialization to determine the initial selection state.\n * @default false\n */\n isChecked = input(false, { transform: booleanAttribute });\n\n private readonly host = inject<ElementRef<HTMLButtonElement>>(ElementRef);\n\n constructor() {\n const el = this.host.nativeElement;\n // Register in the CAPTURE phase so these guards run before any consumer-attached\n // `(click)` / `(keydown)` handler on the same element, regardless of registration\n // order. When disabled, cancel activation entirely (pointer + keyboard) while the\n // button remains in the tab order (aria-disabled, not native disabled).\n el.addEventListener('pointerdown', (event) => this.onPointerDown(event), true);\n el.addEventListener('click', (event) => this.onActivate(event), true);\n el.addEventListener('keydown', (event) => this.onKeydown(event), true);\n }\n\n /**\n * Keeps focus on the button when it is pressed while disabled. A disabled-styled button\n * (aria-disabled, not native `disabled`) does not reliably retain focus on mouse press\n * across engines, so focus lands on `document.body` and the next Tab restarts from the top\n * of the page. Explicitly focus the host on pointer-down to guarantee it stays the active\n * element. We do NOT `preventDefault()` (that would suppress the focus we want); activation\n * itself is still blocked in `onActivate` / `onKeydown`.\n */\n private onPointerDown(event: PointerEvent): void {\n if (this.disabled()) {\n event.stopImmediatePropagation();\n event.stopPropagation();\n this.host.nativeElement.focus();\n }\n }\n\n /**\n * Cancels activation while `aria-disabled` is set. Because the button keeps a native\n * `disabled`-less DOM (so it stays focusable/discoverable), clicks would otherwise fire\n * normally — including synthetic clicks from Enter/Space. Runs in the capture phase and\n * stops propagation so no consumer `(click)` handler runs. `preventDefault()` is not called\n * (it would drop focus); blocking propagation is enough to stop consumer handlers.\n */\n private onActivate(event: Event): void {\n if (this.disabled()) {\n event.stopImmediatePropagation();\n event.stopPropagation();\n }\n }\n\n /**\n * Blocks keyboard activation (Enter / Space) while disabled, before it turns into a click.\n */\n private onKeydown(event: KeyboardEvent): void {\n if (this.disabled() && (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar')) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n }\n }\n}\n","<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n","import { EdsButton } from './eds-button';\n\nexport { EdsButton };\n\n/** Convenience array for importing all eds-button components. */\nexport const EDS_BUTTON = [\n EdsButton,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-button.mjs","sources":["../../eds-button/eds-button.ts","../../eds-button/eds-button.html","../../eds-button/index.ts","../../eds-button/eui-eds-eds-button.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n booleanAttribute,\n input,\n inject,\n ElementRef,\n} from '@angular/core';\n\n/**\n * Local narrowed unions — the button's variant contract. No shared-token import.\n */\nexport type EdsButtonType = 'primary' | 'secondary' | 'tertiary';\n\n/**\n * Colors the button accepts. `primary` / `neutral` / `highlight` / `critical` have dedicated\n * SCSS branches; `warning` is accepted for parity but has no styled branch.\n */\nexport type EdsButtonColor = 'primary' | 'neutral' | 'highlight' | 'critical' | 'warning';\n\n/** Sizes the button styles (SCSS `:host([size=\"…\"])` branches). */\nexport type EdsButtonSize = 's' | 'm' | 'l';\n\n/**\n * EDS Button — a directive-style button component applied on native `<button>` elements.\n *\n * Supports multiple visual types (primary, secondary, tertiary), semantic color variants\n * (primary, neutral, highlight, critical), and sizes (s, m, l) via string inputs reflected\n * as host attributes.\n *\n * Usage:\n * ```html\n * <button edsButton size=\"m\" color=\"primary\">Label</button>\n * <button edsButton type=\"secondary\" color=\"neutral\" size=\"s\">Cancel</button>\n * <button edsButton type=\"tertiary\" color=\"critical\" [disabled]=\"isLoading\">Delete</button>\n * ```\n */\n@Component({\n templateUrl: './eds-button.html',\n // eslint-disable-next-line\n selector: 'button[edsButton]',\n styleUrl: './eds-button.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-button',\n '[attr.type-variant]': 'variant()',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.rounded]': 'isRounded() || null',\n '[attr.avatar-button]': 'isAvatarButton() || null',\n '[attr.block]': 'isBlock() || null',\n '[attr.line-wrap]': 'hasLineWrap() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[attr.id]': 'id()',\n // A disabled button stays focusable and discoverable (WAI-ARIA \"focusable\n // disabled control\"): reflect state via `aria-disabled` instead of the native\n // `disabled` attribute, which would remove the element from the tab order and\n // suppress its focus style. Activation is cancelled by the capture-phase guards\n // registered in the constructor.\n '[attr.aria-disabled]': 'disabled() || null',\n // Consumers write the state as a bare `disabled` attribute (`<button edsButton disabled>`).\n // Since `disabled` is a native boolean attribute, Angular stamps it straight onto the\n // element — which would remove it from the tab order and defeat the focusable-disabled\n // behavior. Force the native attribute off so ONLY `aria-disabled` conveys the state.\n '[attr.disabled]': 'null',\n },\n})\nexport class EdsButton {\n /**\n * @description Data attribute for e2e testing\n * @default eds-button\n */\n e2eAttr = input('eds-button');\n\n /** @description ID attribute for the button element */\n id = input<string | undefined>(undefined);\n\n /**\n * Visual type of the button. `primary` = solid surface; `secondary` = bordered;\n * `tertiary` = text/ghost. Named `variant` (not `type`) on the Angular side to avoid\n * clashing with the native `<button type>` attribute; reflected as `[attr.type-variant]`\n * (the React projection exposes this axis as its `type` prop).\n * @default 'primary'\n */\n variant = input<EdsButtonType>('primary');\n\n /**\n * Semantic color of the button.\n * @default 'primary'\n */\n color = input<EdsButtonColor>('primary');\n\n /**\n * Size of the button.\n * @default 'm'\n */\n size = input<EdsButtonSize>('m');\n\n /**\n * @description Controls the disabled state of the button.\n * When true, adds the disabled attribute and prevents interaction.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, makes the button full-width (block-level).\n * @default false\n */\n isBlock = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, allows text content to wrap.\n * @default false\n */\n hasLineWrap = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, applies a fully rounded border-radius.\n * @default false\n */\n isRounded = input(false, { transform: booleanAttribute });\n\n /**\n * @description When true, applies to avatar acting like a button trigger for the eds-dropdown\n * @default false\n */\n isAvatarButton = input(false, { transform: booleanAttribute });\n\n /**\n * @description\n * When true, marks the button as initially checked/selected within an eds-segmented-control.\n * The segmented-control reads this value during initialization to determine the initial selection state.\n * @default false\n */\n isChecked = input(false, { transform: booleanAttribute });\n\n private readonly host = inject<ElementRef<HTMLButtonElement>>(ElementRef);\n\n constructor() {\n const el = this.host.nativeElement;\n // Register in the CAPTURE phase so these guards run before any consumer-attached\n // `(click)` / `(keydown)` handler on the same element, regardless of registration\n // order. When disabled, cancel activation entirely (pointer + keyboard) while the\n // button remains in the tab order (aria-disabled, not native disabled).\n el.addEventListener('pointerdown', (event) => this.onPointerDown(event), true);\n el.addEventListener('click', (event) => this.onActivate(event), true);\n el.addEventListener('keydown', (event) => this.onKeydown(event), true);\n }\n\n /**\n * Keeps focus on the button when it is pressed while disabled. A disabled-styled button\n * (aria-disabled, not native `disabled`) does not reliably retain focus on mouse press\n * across engines, so focus lands on `document.body` and the next Tab restarts from the top\n * of the page. Explicitly focus the host on pointer-down to guarantee it stays the active\n * element. We do NOT `preventDefault()` (that would suppress the focus we want); activation\n * itself is still blocked in `onActivate` / `onKeydown`.\n */\n private onPointerDown(event: PointerEvent): void {\n if (this.disabled()) {\n event.stopImmediatePropagation();\n event.stopPropagation();\n this.host.nativeElement.focus();\n }\n }\n\n /**\n * Cancels activation while `aria-disabled` is set. Because the button keeps a native\n * `disabled`-less DOM (so it stays focusable/discoverable), clicks would otherwise fire\n * normally — including synthetic clicks from Enter/Space. Runs in the capture phase and\n * stops propagation so no consumer `(click)` handler runs. `preventDefault()` is not called\n * (it would drop focus); blocking propagation is enough to stop consumer handlers.\n */\n private onActivate(event: Event): void {\n if (this.disabled()) {\n event.stopImmediatePropagation();\n event.stopPropagation();\n }\n }\n\n /**\n * Blocks keyboard activation (Enter / Space) while disabled, before it turns into a click.\n */\n private onKeydown(event: KeyboardEvent): void {\n if (this.disabled() && (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar')) {\n event.preventDefault();\n event.stopImmediatePropagation();\n event.stopPropagation();\n }\n }\n}\n","<span class=\"eds-button__container\">\n <ng-content></ng-content>\n</span>\n","import { EdsButton } from './eds-button';\n\nexport { EdsButton };\n\n/** Convenience array for importing all eds-button components. */\nexport const EDS_BUTTON = [\n EdsButton,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, model, booleanAttribute, inject, ElementRef, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
2
|
+
import { input, model, booleanAttribute, inject, ElementRef, signal, effect, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
4
|
|
|
5
5
|
class EdsCheckbox {
|
|
@@ -46,6 +46,13 @@ class EdsCheckbox {
|
|
|
46
46
|
*/
|
|
47
47
|
this.isInvalid = input(false, { ...(ngDevMode ? { debugName: "isInvalid" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
48
48
|
this._elementRef = inject(ElementRef);
|
|
49
|
+
/**
|
|
50
|
+
* Internal disabled state, written by both the `disabled` input (via effect)
|
|
51
|
+
* and the reactive-forms `setDisabledState` callback. The host `[disabled]`
|
|
52
|
+
* binding reads this so `form.disable()` visually disables the checkbox.
|
|
53
|
+
*/
|
|
54
|
+
this.internalDisabled = signal(false, /* @ts-ignore */
|
|
55
|
+
...(ngDevMode ? [{ debugName: "internalDisabled" }] : /* istanbul ignore next */ []));
|
|
49
56
|
// --- Event handlers ---
|
|
50
57
|
// ControlValueAccessor callbacks
|
|
51
58
|
this.onTouched = () => { };
|
|
@@ -55,6 +62,10 @@ class EdsCheckbox {
|
|
|
55
62
|
const indet = this.indeterminate();
|
|
56
63
|
this._elementRef.nativeElement.indeterminate = indet;
|
|
57
64
|
});
|
|
65
|
+
// Sync the public `disabled` input → internal state.
|
|
66
|
+
effect(() => {
|
|
67
|
+
this.internalDisabled.set(this.disabled());
|
|
68
|
+
});
|
|
58
69
|
}
|
|
59
70
|
// --- ControlValueAccessor ---
|
|
60
71
|
writeValue(value) {
|
|
@@ -66,8 +77,9 @@ class EdsCheckbox {
|
|
|
66
77
|
registerOnTouched(fn) {
|
|
67
78
|
this.onTouched = fn;
|
|
68
79
|
}
|
|
69
|
-
setDisabledState(
|
|
70
|
-
//
|
|
80
|
+
setDisabledState(isDisabled) {
|
|
81
|
+
// Reactive forms (e.g. form.disable()) disable the control through here.
|
|
82
|
+
this.internalDisabled.set(isDisabled);
|
|
71
83
|
}
|
|
72
84
|
onHostClick(event) {
|
|
73
85
|
if (this.readonly()) {
|
|
@@ -91,13 +103,13 @@ class EdsCheckbox {
|
|
|
91
103
|
}
|
|
92
104
|
}
|
|
93
105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
94
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsCheckbox, isStandalone: true, selector: "input[edsCheckbox]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange" }, host: { attributes: { "type": "checkbox" }, listeners: { "click": "onHostClick($event)", "change": "onHostChange($event)", "blur": "onTouched()", "keydown.space": "onSpacePressed($any($event))" }, properties: { "attr.size": "size()", "attr.invalid": "isInvalid() || null", "attr.data-e2e": "e2eAttr()", "checked": "checked()", "attr.checked": "checked() || null", "disabled": "
|
|
106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsCheckbox, isStandalone: true, selector: "input[edsCheckbox]", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", indeterminate: "indeterminateChange" }, host: { attributes: { "type": "checkbox" }, listeners: { "click": "onHostClick($event)", "change": "onHostChange($event)", "blur": "onTouched()", "keydown.space": "onSpacePressed($any($event))" }, properties: { "attr.size": "size()", "attr.invalid": "isInvalid() || null", "attr.data-e2e": "e2eAttr()", "checked": "checked()", "attr.checked": "checked() || null", "disabled": "internalDisabled()", "attr.readonly": "readonly() || null", "attr.indeterminate": "indeterminate() || null" }, classAttribute: "eds-checkbox" }, providers: [
|
|
95
107
|
{
|
|
96
108
|
provide: NG_VALUE_ACCESSOR,
|
|
97
109
|
useExisting: forwardRef(() => EdsCheckbox),
|
|
98
110
|
multi: true,
|
|
99
111
|
},
|
|
100
|
-
], ngImport: i0, template: '', isInline: true, styles: [".eui-21 :host.eds-checkbox{--_eds-checkbox-size: var(--eds-si-xl)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([invalid=true]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host.eds-checkbox{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;vertical-align:middle;cursor:pointer;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);border-radius:var(--eds-br-xs)}.eui-21 :host.eds-checkbox[size=l]{--_eds-checkbox-size: var(--eds-si-2xl)}.eui-21 :host.eds-checkbox{background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border)}.eui-21 :host.eds-checkbox:before{content:\"\";display:block;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);background-size:
|
|
112
|
+
], ngImport: i0, template: '', isInline: true, styles: [".eui-21 :host.eds-checkbox{--_eds-checkbox-size: var(--eds-si-xl)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]):before{background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host.eds-checkbox{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;vertical-align:middle;cursor:pointer;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);border-radius:var(--eds-br-xs)}.eui-21 :host.eds-checkbox[size=l]{--_eds-checkbox-size: var(--eds-si-2xl)}.eui-21 :host.eds-checkbox{background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border)}.eui-21 :host.eds-checkbox:before{content:\"\";display:block;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);background-size:75%;background-repeat:no-repeat;background-position:center}.eui-21 :host.eds-checkbox:checked{background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary)}.eui-21 :host.eds-checkbox:checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox:indeterminate:not(:checked){background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary)}.eui-21 :host.eds-checkbox:indeterminate:not(:checked):before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox:disabled{background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-disabled);pointer-events:none;cursor:default}.eui-21 :host.eds-checkbox:disabled:checked{background-color:var(--eds-c-surface-disabled)}.eui-21 :host.eds-checkbox:disabled:checked:before{background-image:none;background-color:var(--eds-c-foreground-disabled);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2384849b' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\");mask-size:75%;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2384849b' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\");-webkit-mask-size:75%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.eui-21 :host.eds-checkbox[readonly]{pointer-events:none;cursor:default}.eui-21 :host.eds-checkbox[readonly]:checked{background-color:var(--eds-c-surface-neutral-subtler);border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox[readonly]:checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23333' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox[readonly]:indeterminate:not(:checked){background-color:var(--eds-c-surface-neutral-subtler);border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox[readonly]:indeterminate:not(:checked):before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23333' d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox[invalid]:not(:disabled):not([readonly]){border-color:var(--eds-c-border-critical)}.eui-21 :host.eds-checkbox[invalid]:not(:disabled):not([readonly]):checked{background-color:var(--eds-c-surface-critical);border-color:var(--eds-c-border-critical)}.eui-21 :host.eds-checkbox[invalid]:not(:disabled):not([readonly]):checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-checkbox[invalid]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-focus-critical)!important;outline-offset:2px!important}.eui-21 :host.eds-checkbox+::ng-deep label{font-weight:var(--eds-f-w-regular);cursor:pointer}.eui-21 :host.eds-checkbox:disabled+::ng-deep label{color:var(--eds-c-foreground-disabled)}.eui-21 :host.eds-checkbox:disabled+::ng-deep label,.eui-21 :host.eds-checkbox[readonly]+::ng-deep label{cursor:default}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
101
113
|
}
|
|
102
114
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsCheckbox, decorators: [{
|
|
103
115
|
type: Component,
|
|
@@ -115,14 +127,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
115
127
|
'[attr.data-e2e]': 'e2eAttr()',
|
|
116
128
|
'[checked]': 'checked()',
|
|
117
129
|
'[attr.checked]': 'checked() || null',
|
|
118
|
-
|
|
130
|
+
// Reflect the *internal* disabled state so it reacts to both the `[disabled]`
|
|
131
|
+
// input and a reactive form disabling the control via `setDisabledState`.
|
|
132
|
+
'[disabled]': 'internalDisabled()',
|
|
119
133
|
'[attr.readonly]': 'readonly() || null',
|
|
120
134
|
'[attr.indeterminate]': 'indeterminate() || null',
|
|
121
135
|
'(click)': 'onHostClick($event)',
|
|
122
136
|
'(change)': 'onHostChange($event)',
|
|
123
137
|
'(blur)': 'onTouched()',
|
|
124
138
|
'(keydown.space)': 'onSpacePressed($any($event))',
|
|
125
|
-
}, styles: [".eui-21 :host.eds-checkbox{--_eds-checkbox-size: var(--eds-si-xl)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([invalid=true]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host.eds-checkbox{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;vertical-align:middle;cursor:pointer;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);border-radius:var(--eds-br-xs)}.eui-21 :host.eds-checkbox[size=l]{--_eds-checkbox-size: var(--eds-si-2xl)}.eui-21 :host.eds-checkbox{background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border)}.eui-21 :host.eds-checkbox:before{content:\"\";display:block;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);background-size:
|
|
139
|
+
}, styles: [".eui-21 :host.eds-checkbox{--_eds-checkbox-size: var(--eds-si-xl)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host.eds-checkbox:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]):before{background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host.eds-checkbox{appearance:none;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;vertical-align:middle;cursor:pointer;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);border-radius:var(--eds-br-xs)}.eui-21 :host.eds-checkbox[size=l]{--_eds-checkbox-size: var(--eds-si-2xl)}.eui-21 :host.eds-checkbox{background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border)}.eui-21 :host.eds-checkbox:before{content:\"\";display:block;width:var(--_eds-checkbox-size);height:var(--_eds-checkbox-size);background-size:75%;background-repeat:no-repeat;background-position:center}.eui-21 :host.eds-checkbox:checked{background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary)}.eui-21 :host.eds-checkbox:checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox:indeterminate:not(:checked){background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary)}.eui-21 :host.eds-checkbox:indeterminate:not(:checked):before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox:disabled{background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-disabled);pointer-events:none;cursor:default}.eui-21 :host.eds-checkbox:disabled:checked{background-color:var(--eds-c-surface-disabled)}.eui-21 :host.eds-checkbox:disabled:checked:before{background-image:none;background-color:var(--eds-c-foreground-disabled);mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2384849b' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\");mask-size:75%;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2384849b' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\");-webkit-mask-size:75%;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.eui-21 :host.eds-checkbox[readonly]{pointer-events:none;cursor:default}.eui-21 :host.eds-checkbox[readonly]:checked{background-color:var(--eds-c-surface-neutral-subtler);border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox[readonly]:checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23333' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox[readonly]:indeterminate:not(:checked){background-color:var(--eds-c-surface-neutral-subtler);border-color:var(--eds-c-border)}.eui-21 :host.eds-checkbox[readonly]:indeterminate:not(:checked):before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23333' d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox[invalid]:not(:disabled):not([readonly]){border-color:var(--eds-c-border-critical)}.eui-21 :host.eds-checkbox[invalid]:not(:disabled):not([readonly]):checked{background-color:var(--eds-c-surface-critical);border-color:var(--eds-c-border-critical)}.eui-21 :host.eds-checkbox[invalid]:not(:disabled):not([readonly]):checked:before{background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\")}.eui-21 :host.eds-checkbox:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:2px!important}.eui-21 :host.eds-checkbox[invalid]:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-focus-critical)!important;outline-offset:2px!important}.eui-21 :host.eds-checkbox+::ng-deep label{font-weight:var(--eds-f-w-regular);cursor:pointer}.eui-21 :host.eds-checkbox:disabled+::ng-deep label{color:var(--eds-c-foreground-disabled)}.eui-21 :host.eds-checkbox:disabled+::ng-deep label,.eui-21 :host.eds-checkbox[readonly]+::ng-deep label{cursor:default}\n"] }]
|
|
126
140
|
}], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }, { type: i0.Output, args: ["indeterminateChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }] } });
|
|
127
141
|
|
|
128
142
|
/** Convenience array for importing eds-checkbox. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-checkbox.mjs","sources":["../../eds-checkbox/eds-checkbox.ts","../../eds-checkbox/index.ts","../../eds-checkbox/eui-eds-eds-checkbox.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n inject,\n input,\n model,\n booleanAttribute,\n effect,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/** Local narrowed size union — the checkbox's size contract (String-Props model). */\nexport type EdsCheckboxSize = 'm' | 'l';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input[edsCheckbox]',\n template: '',\n styleUrl: './eds-checkbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EdsCheckbox),\n multi: true,\n },\n ],\n host: {\n type: 'checkbox',\n class: 'eds-checkbox',\n '[attr.size]': 'size()',\n '[attr.invalid]': 'isInvalid() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[checked]': 'checked()',\n '[attr.checked]': 'checked() || null',\n '[disabled]': 'disabled()',\n '[attr.readonly]': 'readonly() || null',\n '[attr.indeterminate]': 'indeterminate() || null',\n '(click)': 'onHostClick($event)',\n '(change)': 'onHostChange($event)',\n '(blur)': 'onTouched()',\n '(keydown.space)': 'onSpacePressed($any($event))',\n },\n})\nexport class EdsCheckbox implements ControlValueAccessor {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-checkbox'\n */\n e2eAttr = input('eds-checkbox');\n\n /**\n * Size variant, reflected as the `size` host attribute.\n * `m` (24px, default) or `l` (28px).\n * @default 'm'\n */\n size = input<EdsCheckboxSize>('m');\n\n /**\n * Controls the checked state of the checkbox.\n * Two-way bindable model.\n * @default false\n */\n checked = model(false);\n\n /**\n * Controls the indeterminate (mixed) state of the checkbox.\n * @default false\n */\n indeterminate = model(false);\n\n /**\n * Controls whether the checkbox is disabled.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the checkbox is readonly.\n * @default false\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the checkbox shows an invalid/error state.\n * @default false\n */\n isInvalid = input(false, { transform: booleanAttribute });\n\n private _elementRef: ElementRef<HTMLInputElement> = inject(ElementRef);\n\n constructor() {\n // Sync indeterminate property to the native element\n effect(() => {\n const indet = this.indeterminate();\n this._elementRef.nativeElement.indeterminate = indet;\n });\n }\n\n // --- ControlValueAccessor ---\n\n writeValue(value: boolean): void {\n this.checked.set(!!value);\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(_isDisabled: boolean): void {\n // Disabled is handled via the input signal binding on the host element.\n }\n\n // --- Event handlers ---\n\n // ControlValueAccessor callbacks\n\n protected onTouched: () => void = () => { /* noop */ };\n\n protected onHostClick(event: MouseEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n }\n }\n\n protected onHostChange(event: Event): void {\n const target = event.target as HTMLInputElement;\n const isChecked = target.checked;\n this.checked.set(isChecked);\n\n // Clear indeterminate on user interaction\n if (this.indeterminate()) {\n this.indeterminate.set(false);\n }\n\n this._onChange(isChecked);\n }\n\n protected onSpacePressed(event: KeyboardEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n private _onChange: (value: boolean) => void = () => { /* noop */ };\n}\n","import { EdsCheckbox } from './eds-checkbox';\n\nexport { EdsCheckbox };\nexport type { EdsCheckboxSize } from './eds-checkbox';\n\n/** Convenience array for importing eds-checkbox. */\nexport const EDS_CHECKBOX = [\n EdsCheckbox,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-checkbox.mjs","sources":["../../eds-checkbox/eds-checkbox.ts","../../eds-checkbox/index.ts","../../eds-checkbox/eui-eds-eds-checkbox.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n inject,\n input,\n model,\n signal,\n booleanAttribute,\n effect,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/** Local narrowed size union — the checkbox's size contract (String-Props model). */\nexport type EdsCheckboxSize = 'm' | 'l';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input[edsCheckbox]',\n template: '',\n styleUrl: './eds-checkbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EdsCheckbox),\n multi: true,\n },\n ],\n host: {\n type: 'checkbox',\n class: 'eds-checkbox',\n '[attr.size]': 'size()',\n '[attr.invalid]': 'isInvalid() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[checked]': 'checked()',\n '[attr.checked]': 'checked() || null',\n // Reflect the *internal* disabled state so it reacts to both the `[disabled]`\n // input and a reactive form disabling the control via `setDisabledState`.\n '[disabled]': 'internalDisabled()',\n '[attr.readonly]': 'readonly() || null',\n '[attr.indeterminate]': 'indeterminate() || null',\n '(click)': 'onHostClick($event)',\n '(change)': 'onHostChange($event)',\n '(blur)': 'onTouched()',\n '(keydown.space)': 'onSpacePressed($any($event))',\n },\n})\nexport class EdsCheckbox implements ControlValueAccessor {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-checkbox'\n */\n e2eAttr = input('eds-checkbox');\n\n /**\n * Size variant, reflected as the `size` host attribute.\n * `m` (24px, default) or `l` (28px).\n * @default 'm'\n */\n size = input<EdsCheckboxSize>('m');\n\n /**\n * Controls the checked state of the checkbox.\n * Two-way bindable model.\n * @default false\n */\n checked = model(false);\n\n /**\n * Controls the indeterminate (mixed) state of the checkbox.\n * @default false\n */\n indeterminate = model(false);\n\n /**\n * Controls whether the checkbox is disabled.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the checkbox is readonly.\n * @default false\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the checkbox shows an invalid/error state.\n * @default false\n */\n isInvalid = input(false, { transform: booleanAttribute });\n\n private _elementRef: ElementRef<HTMLInputElement> = inject(ElementRef);\n\n /**\n * Internal disabled state, written by both the `disabled` input (via effect)\n * and the reactive-forms `setDisabledState` callback. The host `[disabled]`\n * binding reads this so `form.disable()` visually disables the checkbox.\n */\n protected internalDisabled = signal(false);\n\n constructor() {\n // Sync indeterminate property to the native element\n effect(() => {\n const indet = this.indeterminate();\n this._elementRef.nativeElement.indeterminate = indet;\n });\n\n // Sync the public `disabled` input → internal state.\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n }\n\n // --- ControlValueAccessor ---\n\n writeValue(value: boolean): void {\n this.checked.set(!!value);\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n // Reactive forms (e.g. form.disable()) disable the control through here.\n this.internalDisabled.set(isDisabled);\n }\n\n // --- Event handlers ---\n\n // ControlValueAccessor callbacks\n\n protected onTouched: () => void = () => { /* noop */ };\n\n protected onHostClick(event: MouseEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n }\n }\n\n protected onHostChange(event: Event): void {\n const target = event.target as HTMLInputElement;\n const isChecked = target.checked;\n this.checked.set(isChecked);\n\n // Clear indeterminate on user interaction\n if (this.indeterminate()) {\n this.indeterminate.set(false);\n }\n\n this._onChange(isChecked);\n }\n\n protected onSpacePressed(event: KeyboardEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n private _onChange: (value: boolean) => void = () => { /* noop */ };\n}\n","import { EdsCheckbox } from './eds-checkbox';\n\nexport { EdsCheckbox };\nexport type { EdsCheckboxSize } from './eds-checkbox';\n\n/** Convenience array for importing eds-checkbox. */\nexport const EDS_CHECKBOX = [\n EdsCheckbox,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -328,13 +328,13 @@ class EdsDatepicker {
|
|
|
328
328
|
}
|
|
329
329
|
}
|
|
330
330
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
331
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsDatepicker, isStandalone: true, selector: "eds-datepicker", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, isDatetimepicker: { classPropertyName: "isDatetimepicker", publicName: "isDatetimepicker", isSignal: true, isRequired: false, transformFunction: null }, hasSeconds: { classPropertyName: "hasSeconds", publicName: "hasSeconds", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", value: "valueChange" }, host: { properties: { "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<eds-input-button class=\"eds-datepicker__group\">\n <input edsInputText\n [edsClearable]=\"clearable()\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-label]=\"ariaLabel()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onTouched()\"\n (click)=\"onInputClick()\"/>\n @if (!readonly() && !disabled()) {\n <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n <eds-icon icon=\"calendar-blank:core\"/>\n </button>\n }\n</eds-input-button>\n\n@if (isOpen()) {\n <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n <div class=\"eds-datepicker__header\">\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n </div>\n <div class=\"eds-datepicker__weekdays\">\n @for (day of weekDays; track day) {\n <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n }\n </div>\n <div class=\"eds-datepicker__days\">\n @for (day of calendarDays(); track $index) {\n @if (day === null) {\n <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n } @else {\n <button class=\"eds-datepicker__day\"\n type=\"button\"\n [class.eds-datepicker__day--today]=\"isToday(day)\"\n [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n [disabled]=\"isOutsideRange(day)\"\n (click)=\"selectDay(day)\">\n {{ adapter.getDate(day) }}\n </button>\n }\n }\n </div>\n\n @if (isDatetimepicker()) {\n <div class=\"eds-datepicker__time\">\n <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n </div>\n }\n </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([invalid=true]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m);font-weight:var(--eds-f-w-semibold);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i2.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid", "size"] }, { kind: "component", type: i3.EdsInputButton, selector: "eds-input-button", inputs: ["e2eAttr", "size", "edsButtonPositionStart", "edsButtonPositionEnd"] }, { kind: "component", type: i4.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "variant", "color", "size", "disabled", "isBlock", "hasLineWrap", "isRounded", "isAvatarButton", "isChecked"] }, { kind: "component", type: i5.EdsTimepicker, selector: "eds-timepicker", inputs: ["e2eAttr", "stepHours", "stepMinutes", "stepSeconds", "hasSeconds", "disabled", "readonly"], outputs: ["timeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
331
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsDatepicker, isStandalone: true, selector: "eds-datepicker", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, dateFormat: { classPropertyName: "dateFormat", publicName: "dateFormat", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, isDatetimepicker: { classPropertyName: "isDatetimepicker", publicName: "isDatetimepicker", isSignal: true, isRequired: false, transformFunction: null }, hasSeconds: { classPropertyName: "hasSeconds", publicName: "hasSeconds", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", value: "valueChange" }, host: { properties: { "attr.data-e2e": "e2eAttr()" } }, ngImport: i0, template: "<eds-input-button class=\"eds-datepicker__group\">\n <input edsInputText\n [edsClearable]=\"clearable()\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-label]=\"ariaLabel()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onTouched()\"\n (click)=\"onInputClick()\"/>\n @if (!readonly() && !disabled()) {\n <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n <eds-icon icon=\"calendar-blank:core\"/>\n </button>\n }\n</eds-input-button>\n\n@if (isOpen()) {\n <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n <div class=\"eds-datepicker__header\">\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n </div>\n <div class=\"eds-datepicker__weekdays\">\n @for (day of weekDays; track day) {\n <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n }\n </div>\n <div class=\"eds-datepicker__days\">\n @for (day of calendarDays(); track $index) {\n @if (day === null) {\n <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n } @else {\n <button class=\"eds-datepicker__day\"\n type=\"button\"\n [class.eds-datepicker__day--today]=\"isToday(day)\"\n [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n [disabled]=\"isOutsideRange(day)\"\n (click)=\"selectDay(day)\">\n {{ adapter.getDate(day) }}\n </button>\n }\n }\n </div>\n\n @if (isDatetimepicker()) {\n <div class=\"eds-datepicker__time\">\n <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n </div>\n }\n </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]):before{background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m);font-weight:var(--eds-f-w-semibold);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"], dependencies: [{ kind: "component", type: i1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i2.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid", "size"] }, { kind: "component", type: i3.EdsInputButton, selector: "eds-input-button", inputs: ["e2eAttr", "size", "edsButtonPositionStart", "edsButtonPositionEnd"] }, { kind: "component", type: i4.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "variant", "color", "size", "disabled", "isBlock", "hasLineWrap", "isRounded", "isAvatarButton", "isChecked"] }, { kind: "component", type: i5.EdsTimepicker, selector: "eds-timepicker", inputs: ["e2eAttr", "stepHours", "stepMinutes", "stepSeconds", "hasSeconds", "disabled", "readonly"], outputs: ["timeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
332
332
|
}
|
|
333
333
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsDatepicker, decorators: [{
|
|
334
334
|
type: Component,
|
|
335
335
|
args: [{ selector: 'eds-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON, ...EDS_INPUT_TEXT, ...EDS_INPUT_BUTTON, ...EDS_BUTTON, ...EDS_TIMEPICKER], host: {
|
|
336
336
|
'[attr.data-e2e]': 'e2eAttr()',
|
|
337
|
-
}, template: "<eds-input-button class=\"eds-datepicker__group\">\n <input edsInputText\n [edsClearable]=\"clearable()\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-label]=\"ariaLabel()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onTouched()\"\n (click)=\"onInputClick()\"/>\n @if (!readonly() && !disabled()) {\n <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n <eds-icon icon=\"calendar-blank:core\"/>\n </button>\n }\n</eds-input-button>\n\n@if (isOpen()) {\n <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n <div class=\"eds-datepicker__header\">\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n </div>\n <div class=\"eds-datepicker__weekdays\">\n @for (day of weekDays; track day) {\n <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n }\n </div>\n <div class=\"eds-datepicker__days\">\n @for (day of calendarDays(); track $index) {\n @if (day === null) {\n <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n } @else {\n <button class=\"eds-datepicker__day\"\n type=\"button\"\n [class.eds-datepicker__day--today]=\"isToday(day)\"\n [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n [disabled]=\"isOutsideRange(day)\"\n (click)=\"selectDay(day)\">\n {{ adapter.getDate(day) }}\n </button>\n }\n }\n </div>\n\n @if (isDatetimepicker()) {\n <div class=\"eds-datepicker__time\">\n <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n </div>\n }\n </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([invalid=true]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m);font-weight:var(--eds-f-w-semibold);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"] }]
|
|
337
|
+
}, template: "<eds-input-button class=\"eds-datepicker__group\">\n <input edsInputText\n [edsClearable]=\"clearable()\"\n [id]=\"inputId()\"\n [placeholder]=\"placeholder()\"\n [value]=\"displayValue()\"\n [disabled]=\"disabled()\"\n [readonly]=\"readonly()\"\n [attr.aria-label]=\"ariaLabel()\"\n (input)=\"onInputChange($event)\"\n (blur)=\"onTouched()\"\n (click)=\"onInputClick()\"/>\n @if (!readonly() && !disabled()) {\n <button edsButton variant=\"secondary\" color=\"neutral\" size=\"s\" type=\"button\" [attr.aria-label]=\"'Open calendar'\" (click)=\"toggle()\">\n <eds-icon icon=\"calendar-blank:core\"/>\n </button>\n }\n</eds-input-button>\n\n@if (isOpen()) {\n <div class=\"eds-datepicker__dropdown\" [class.eds-datepicker__dropdown--up]=\"dropUp()\" (click)=\"$event.stopPropagation()\">\n <div class=\"eds-datepicker__header\">\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"prevMonth()\" aria-label=\"Previous month\">\u2039</button>\n <span class=\"eds-datepicker__month-label\">{{ monthLabel() }}</span>\n <button class=\"eds-datepicker__nav-btn\" type=\"button\" (click)=\"nextMonth()\" aria-label=\"Next month\">\u203A</button>\n </div>\n <div class=\"eds-datepicker__weekdays\">\n @for (day of weekDays; track day) {\n <span class=\"eds-datepicker__weekday\">{{ day }}</span>\n }\n </div>\n <div class=\"eds-datepicker__days\">\n @for (day of calendarDays(); track $index) {\n @if (day === null) {\n <span class=\"eds-datepicker__day eds-datepicker__day--empty\"></span>\n } @else {\n <button class=\"eds-datepicker__day\"\n type=\"button\"\n [class.eds-datepicker__day--today]=\"isToday(day)\"\n [class.eds-datepicker__day--selected]=\"isSelected(day)\"\n [class.eds-datepicker__day--outside]=\"isOutsideRange(day)\"\n [disabled]=\"isOutsideRange(day)\"\n (click)=\"selectDay(day)\">\n {{ adapter.getDate(day) }}\n </button>\n }\n }\n </div>\n\n @if (isDatetimepicker()) {\n <div class=\"eds-datepicker__time\">\n <eds-timepicker [hasSeconds]=\"hasSeconds()\" [disabled]=\"disabled()\" (timeChange)=\"onTimeChange($event)\"/>\n </div>\n }\n </div>\n}\n", styles: [".eui-21 :host{display:inline-block;position:relative;width:100%}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled):not([aria-disabled=true]):not(:checked):not(:disabled):not([readonly]):not([indeterminate=true]):not([invalid=true]){border-color:var(--eds-c-border)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox:checked:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[checked=true]:not([readonly]):not([invalid=true]),.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-checkbox[indeterminate=true]:not([readonly]){background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]){background-color:var(--eds-c-surface-elevation);border-color:var(--eds-c-border-primary--hover)}.eui-21 :host:hover:not([aria-disabled=true]):not(:disabled).eds-radio:checked:not([readonly]):not([data-readonly]):not([invalid=true]):not([invalid]):before{background-color:var(--eds-c-surface-primary--hover)}.eui-21 :host .eds-datepicker__group{margin-bottom:0}.eui-21 :host .eds-datepicker__dropdown{position:absolute;top:100%;left:0;z-index:1000;margin-top:var(--eds-sp-3xs);background-color:var(--eds-c-surface-elevation);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-s);width:280px}.eui-21 :host .eds-datepicker__dropdown--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--eds-sp-xs)}.eui-21 :host .eds-datepicker__month-label{font:var(--eds-f-label-m);font-weight:var(--eds-f-w-semibold);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn{background:none;border:none;cursor:pointer;font-size:18px;padding:var(--eds-sp-3xs) var(--eds-sp-xs);border-radius:var(--eds-br-xs);color:var(--eds-c-foreground-subtle)}.eui-21 :host .eds-datepicker__nav-btn:hover{background-color:var(--eds-c-surface-neutral-subtler);color:var(--eds-c-foreground)}.eui-21 :host .eds-datepicker__nav-btn:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-datepicker__weekday{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-datepicker__days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}.eui-21 :host .eds-datepicker__day{background:none;border:none;cursor:pointer;font:var(--eds-f-paragraph-s);padding:var(--eds-sp-3xs);border-radius:var(--eds-br-xs);text-align:center;min-height:32px;display:flex;align-items:center;justify-content:center}.eui-21 :host .eds-datepicker__day:hover:not(:disabled){background-color:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-datepicker__day--today{font-weight:700;border:var(--eds-bw-xs) solid var(--eds-c-border-primary)}.eui-21 :host .eds-datepicker__day--selected{background-color:var(--eds-c-surface-primary)!important;color:var(--eds-c-on-surface-primary);font-weight:600}.eui-21 :host .eds-datepicker__day--outside{color:var(--eds-c-foreground-subtler);opacity:.4;cursor:default}.eui-21 :host .eds-datepicker__day--empty{cursor:default}.eui-21 :host .eds-datepicker__day:focus-visible{outline:2px solid var(--eds-c-focus, #0e47cb);outline-offset:1px}.eui-21 :host .eds-datepicker__time{margin-top:var(--eds-sp-s);padding-top:var(--eds-sp-s);border-top:var(--eds-bw-xs) solid var(--eds-c-border-divider);display:flex;justify-content:center}\n"] }]
|
|
338
338
|
}], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], dateFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateFormat", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], isDatetimepicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDatetimepicker", required: false }] }], hasSeconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasSeconds", required: false }] }], dateChange: [{ type: i0.Output, args: ["dateChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
|
|
339
339
|
|
|
340
340
|
// Luxon is expected to be available as a peer dependency
|