@eagami/ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +388 -0
- package/fesm2022/eagami-ui.mjs +536 -0
- package/fesm2022/eagami-ui.mjs.map +1 -0
- package/package.json +51 -0
- package/src/styles/_reset.scss +67 -0
- package/src/styles/eagami-ui.scss +16 -0
- package/src/styles/tokens/_colors.scss +160 -0
- package/src/styles/tokens/_elevation.scss +33 -0
- package/src/styles/tokens/_index.scss +11 -0
- package/src/styles/tokens/_motion.scss +49 -0
- package/src/styles/tokens/_shape.scss +26 -0
- package/src/styles/tokens/_spacing.scss +57 -0
- package/src/styles/tokens/_typography.scss +119 -0
- package/types/eagami-ui.d.ts +232 -0
|
@@ -0,0 +1,536 @@
|
|
|
1
|
+
import { NgClass } from '@angular/common';
|
|
2
|
+
import * as i0 from '@angular/core';
|
|
3
|
+
import { input, output, computed, ChangeDetectionStrategy, Component, ViewEncapsulation, model, signal, forwardRef, viewChild, effect, HostListener, inject } from '@angular/core';
|
|
4
|
+
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
5
|
+
|
|
6
|
+
class ButtonComponent {
|
|
7
|
+
// Inputs
|
|
8
|
+
variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
9
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
10
|
+
type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
11
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
12
|
+
loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
13
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
14
|
+
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
|
|
15
|
+
// Output
|
|
16
|
+
clicked = output();
|
|
17
|
+
// Derived
|
|
18
|
+
isDisabled = computed(() => this.disabled() || this.loading(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
19
|
+
hostClasses = computed(() => ({
|
|
20
|
+
[`ea-button--${this.variant()}`]: true,
|
|
21
|
+
[`ea-button--${this.size()}`]: true,
|
|
22
|
+
'ea-button--full-width': this.fullWidth(),
|
|
23
|
+
'ea-button--loading': this.loading(),
|
|
24
|
+
'ea-button--disabled': this.isDisabled(),
|
|
25
|
+
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
26
|
+
handleClick(event) {
|
|
27
|
+
if (this.isDisabled()) {
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
this.clicked.emit(event);
|
|
32
|
+
}
|
|
33
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ButtonComponent, isStandalone: true, selector: "ea-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-sm);min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--font-size-md);min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
35
|
+
}
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
37
|
+
type: Component,
|
|
38
|
+
args: [{ selector: 'ea-button', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n class=\"ea-button\"\n [ngClass]=\"hostClasses()\"\n [type]=\"type()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n (click)=\"handleClick($event)\">\n @if (loading()) {\n <span\n class=\"ea-button__spinner\"\n aria-hidden=\"true\">\n <svg\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <circle\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n stroke-width=\"3\"\n stroke-linecap=\"round\"\n stroke-dasharray=\"31.4\"\n stroke-dashoffset=\"10\" />\n </svg>\n </span>\n }\n\n <span\n class=\"ea-button__content\"\n [class.ea-button__content--hidden]=\"loading()\">\n <ng-content select=\"[slot=prefix]\" />\n <span class=\"ea-button__label\">\n <ng-content />\n </span>\n <ng-content select=\"[slot=suffix]\" />\n </span>\n</button>\n", styles: [".ea-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--inline-xs);position:relative;white-space:nowrap;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-wide);text-decoration:none;line-height:var(--line-height-none);border-width:var(--border-width-thin);border-style:solid;border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);cursor:pointer}.ea-button:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-button--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-sm);min-height:2rem}.ea-button--md{padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);min-height:2.5rem}.ea-button--lg{padding:var(--space-2-5) var(--space-6);font-size:var(--font-size-md);min-height:3rem}.ea-button--primary{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-button--primary:hover:not(.ea-button--disabled){background-color:var(--color-brand-hover);border-color:var(--color-brand-hover)}.ea-button--primary:active:not(.ea-button--disabled){background-color:var(--color-brand-active);border-color:var(--color-brand-active)}.ea-button--secondary{background-color:transparent;border-color:var(--color-border-strong);color:var(--color-text-primary)}.ea-button--secondary:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted);border-color:var(--color-neutral-500)}.ea-button--secondary:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--ghost{background-color:transparent;border-color:transparent;color:var(--color-text-primary)}.ea-button--ghost:hover:not(.ea-button--disabled){background-color:var(--color-bg-muted)}.ea-button--ghost:active:not(.ea-button--disabled){background-color:var(--color-neutral-200)}.ea-button--danger{background-color:var(--color-error-default);border-color:var(--color-error-default);color:var(--color-text-inverse)}.ea-button--danger:hover:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700)}.ea-button--danger:active:not(.ea-button--disabled){background-color:var(--color-error-700);border-color:var(--color-error-700);filter:brightness(.9)}.ea-button--full-width{width:100%}.ea-button--disabled,.ea-button:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.ea-button--loading{cursor:wait;pointer-events:none}.ea-button__content{display:inline-flex;align-items:center;gap:var(--inline-xs)}.ea-button__content--hidden{visibility:hidden}.ea-button__label{display:inline-flex;align-items:center}.ea-button__spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}.ea-button__spinner svg{width:1.1em;height:1.1em;animation:ea-spin .75s linear infinite}@keyframes ea-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
|
|
39
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }] } });
|
|
40
|
+
|
|
41
|
+
class CardComponent {
|
|
42
|
+
// Inputs
|
|
43
|
+
variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
44
|
+
padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : []));
|
|
45
|
+
fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : []));
|
|
46
|
+
// Computed
|
|
47
|
+
hostClasses = computed(() => ({
|
|
48
|
+
[`ea-card--${this.variant()}`]: true,
|
|
49
|
+
[`ea-card--padding-${this.padding()}`]: true,
|
|
50
|
+
'ea-card--full-width': this.fullWidth(),
|
|
51
|
+
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: CardComponent, isStandalone: true, selector: "ea-card", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-card__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</div>\n", styles: [".ea-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--shadow-md)}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header,.ea-card--padding-sm .ea-card__body,.ea-card--padding-sm .ea-card__footer{padding:var(--space-3)}.ea-card--padding-md .ea-card__header,.ea-card--padding-md .ea-card__body,.ea-card--padding-md .ea-card__footer{padding:var(--space-4)}.ea-card--padding-lg .ea-card__header,.ea-card--padding-lg .ea-card__body,.ea-card--padding-lg .ea-card__footer{padding:var(--space-6)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
54
|
+
}
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CardComponent, decorators: [{
|
|
56
|
+
type: Component,
|
|
57
|
+
args: [{ selector: 'ea-card', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div\n class=\"ea-card\"\n [ngClass]=\"hostClasses()\">\n <div class=\"ea-card__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-card__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-card__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n</div>\n", styles: [".ea-card{display:flex;flex-direction:column;border-radius:var(--radius-lg);font-family:var(--font-family-sans);color:var(--color-text-primary);overflow:hidden}.ea-card--elevated{background-color:var(--color-bg-base);box-shadow:var(--shadow-md)}.ea-card--outlined{background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default)}.ea-card--filled{background-color:var(--color-bg-subtle)}.ea-card--padding-none .ea-card__header,.ea-card--padding-none .ea-card__body,.ea-card--padding-none .ea-card__footer{padding:0}.ea-card--padding-sm .ea-card__header,.ea-card--padding-sm .ea-card__body,.ea-card--padding-sm .ea-card__footer{padding:var(--space-3)}.ea-card--padding-md .ea-card__header,.ea-card--padding-md .ea-card__body,.ea-card--padding-md .ea-card__footer{padding:var(--space-4)}.ea-card--padding-lg .ea-card__header,.ea-card--padding-lg .ea-card__body,.ea-card--padding-lg .ea-card__footer{padding:var(--space-6)}.ea-card--full-width{width:100%}.ea-card__header:empty,.ea-card__footer:empty{display:none}.ea-card__header{font-size:var(--text-label-lg-size);font-weight:var(--text-label-lg-weight);line-height:var(--text-label-lg-lh)}.ea-card__body{flex:1;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-card__footer{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.ea-card__footer>*{display:flex;align-items:center;justify-content:center;gap:var(--space-3)}\n"] }]
|
|
58
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }] } });
|
|
59
|
+
|
|
60
|
+
class CheckboxComponent {
|
|
61
|
+
// Inputs
|
|
62
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
63
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
64
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
65
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
66
|
+
indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : []));
|
|
67
|
+
id = input(`ea-checkbox-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
68
|
+
// Two-way checked binding
|
|
69
|
+
checked = model(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
70
|
+
// Outputs
|
|
71
|
+
changed = output();
|
|
72
|
+
// Internal state
|
|
73
|
+
_formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
|
|
74
|
+
// Computed
|
|
75
|
+
isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
76
|
+
hostClasses = computed(() => ({
|
|
77
|
+
[`ea-checkbox--${this.size()}`]: true,
|
|
78
|
+
'ea-checkbox--disabled': this.isDisabled(),
|
|
79
|
+
'ea-checkbox--checked': this.checked(),
|
|
80
|
+
'ea-checkbox--indeterminate': this.indeterminate(),
|
|
81
|
+
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
82
|
+
// ControlValueAccessor callbacks
|
|
83
|
+
onChange = () => { };
|
|
84
|
+
onTouched = () => { };
|
|
85
|
+
// ControlValueAccessor
|
|
86
|
+
writeValue(val) {
|
|
87
|
+
this.checked.set(!!val);
|
|
88
|
+
}
|
|
89
|
+
registerOnChange(fn) {
|
|
90
|
+
this.onChange = fn;
|
|
91
|
+
}
|
|
92
|
+
registerOnTouched(fn) {
|
|
93
|
+
this.onTouched = fn;
|
|
94
|
+
}
|
|
95
|
+
setDisabledState(isDisabled) {
|
|
96
|
+
this._formDisabled.set(isDisabled);
|
|
97
|
+
}
|
|
98
|
+
// Handlers
|
|
99
|
+
handleChange() {
|
|
100
|
+
if (this.isDisabled())
|
|
101
|
+
return;
|
|
102
|
+
const newValue = !this.checked();
|
|
103
|
+
this.checked.set(newValue);
|
|
104
|
+
this.onChange(newValue);
|
|
105
|
+
this.onTouched();
|
|
106
|
+
this.changed.emit(newValue);
|
|
107
|
+
}
|
|
108
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
109
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: CheckboxComponent, isStandalone: true, selector: "ea-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", changed: "changed" }, providers: [
|
|
110
|
+
{
|
|
111
|
+
provide: NG_VALUE_ACCESSOR,
|
|
112
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
113
|
+
multi: true,
|
|
114
|
+
},
|
|
115
|
+
], ngImport: i0, template: "<label\n class=\"ea-checkbox\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n #inputEl\n type=\"checkbox\"\n class=\"ea-checkbox__input\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-checkbox__box\"\n aria-hidden=\"true\">\n @if (indeterminate()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n } @else if (checked()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </span>\n\n @if (label()) {\n <span class=\"ea-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
116
|
+
}
|
|
117
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
118
|
+
type: Component,
|
|
119
|
+
args: [{ selector: 'ea-checkbox', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
120
|
+
{
|
|
121
|
+
provide: NG_VALUE_ACCESSOR,
|
|
122
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
123
|
+
multi: true,
|
|
124
|
+
},
|
|
125
|
+
], template: "<label\n class=\"ea-checkbox\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n #inputEl\n type=\"checkbox\"\n class=\"ea-checkbox__input\"\n [id]=\"id()\"\n [checked]=\"checked()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [indeterminate]=\"indeterminate()\"\n [attr.aria-checked]=\"indeterminate() ? 'mixed' : checked()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-checkbox__box\"\n aria-hidden=\"true\">\n @if (indeterminate()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4 8h8\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\" />\n </svg>\n } @else if (checked()) {\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M3.5 8.5L6.5 11.5L12.5 4.5\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </span>\n\n @if (label()) {\n <span class=\"ea-checkbox__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-checkbox{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-checkbox--sm .ea-checkbox__box{width:1rem;height:1rem;border-radius:var(--radius-sm)}.ea-checkbox--sm .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1rem}.ea-checkbox--md .ea-checkbox__box{width:1.25rem;height:1.25rem;border-radius:var(--radius-sm)}.ea-checkbox--md .ea-checkbox__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-checkbox--lg .ea-checkbox__box{width:1.5rem;height:1.5rem;border-radius:var(--radius-sm)}.ea-checkbox--lg .ea-checkbox__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-checkbox--disabled{opacity:.45;cursor:not-allowed}.ea-checkbox--checked .ea-checkbox__box,.ea-checkbox--indeterminate .ea-checkbox__box{background-color:var(--color-brand-default);border-color:var(--color-brand-default);color:var(--color-text-inverse)}.ea-checkbox:hover:not(.ea-checkbox--disabled) .ea-checkbox__box{border-color:var(--color-brand-default)}.ea-checkbox__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-checkbox__input:focus-visible+.ea-checkbox__box{box-shadow:var(--shadow-focus-ring)}.ea-checkbox__box{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-sizing:border-box;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-checkbox__box svg{position:absolute;width:65%;height:65%}.ea-checkbox__label{font-weight:var(--font-weight-regular)}\n"] }]
|
|
126
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
127
|
+
|
|
128
|
+
class DialogComponent {
|
|
129
|
+
dialogEl = viewChild('dialogEl', ...(ngDevMode ? [{ debugName: "dialogEl" }] : []));
|
|
130
|
+
// Inputs
|
|
131
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
132
|
+
closeOnBackdrop = input(true, ...(ngDevMode ? [{ debugName: "closeOnBackdrop" }] : []));
|
|
133
|
+
closeOnEscape = input(true, ...(ngDevMode ? [{ debugName: "closeOnEscape" }] : []));
|
|
134
|
+
showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : []));
|
|
135
|
+
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
|
|
136
|
+
// Two-way open binding
|
|
137
|
+
open = model(false, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
138
|
+
// Outputs
|
|
139
|
+
opened = output();
|
|
140
|
+
closed = output();
|
|
141
|
+
// Computed
|
|
142
|
+
panelClasses = computed(() => ({
|
|
143
|
+
[`ea-dialog__panel--${this.size()}`]: true,
|
|
144
|
+
}), ...(ngDevMode ? [{ debugName: "panelClasses" }] : []));
|
|
145
|
+
constructor() {
|
|
146
|
+
effect(() => {
|
|
147
|
+
const dialogRef = this.dialogEl()?.nativeElement;
|
|
148
|
+
if (!dialogRef)
|
|
149
|
+
return;
|
|
150
|
+
if (this.open()) {
|
|
151
|
+
if (!dialogRef.open) {
|
|
152
|
+
dialogRef.showModal();
|
|
153
|
+
this.opened.emit();
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
else {
|
|
157
|
+
if (dialogRef.open) {
|
|
158
|
+
dialogRef.close();
|
|
159
|
+
}
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
handleClose() {
|
|
164
|
+
this.open.set(false);
|
|
165
|
+
this.closed.emit();
|
|
166
|
+
}
|
|
167
|
+
handleBackdropClick(event) {
|
|
168
|
+
if (!this.closeOnBackdrop())
|
|
169
|
+
return;
|
|
170
|
+
const dialogRef = this.dialogEl()?.nativeElement;
|
|
171
|
+
if (event.target === dialogRef) {
|
|
172
|
+
this.handleClose();
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
handleCancel(event) {
|
|
176
|
+
if (!this.closeOnEscape()) {
|
|
177
|
+
event.preventDefault();
|
|
178
|
+
return;
|
|
179
|
+
}
|
|
180
|
+
this.handleClose();
|
|
181
|
+
}
|
|
182
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
183
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n aria-label=\"Close dialog\"\n (click)=\"handleClose()\">\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path\n d=\"M4 4l8 8M12 4l-8 8\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n }\n\n <div class=\"ea-dialog__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
184
|
+
}
|
|
185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DialogComponent, decorators: [{
|
|
186
|
+
type: Component,
|
|
187
|
+
args: [{ selector: 'ea-dialog', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n aria-label=\"Close dialog\"\n (click)=\"handleClose()\">\n <svg\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path\n d=\"M4 4l8 8M12 4l-8 8\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\" />\n </svg>\n </button>\n }\n\n <div class=\"ea-dialog__header\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;background-color:var(--color-bg-base);border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}.ea-dialog__panel--sm{width:24rem}.ea-dialog__panel--md{width:32rem}.ea-dialog__panel--lg{width:42rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:absolute;top:var(--space-3);right:var(--space-3);display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:0;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors);z-index:1}.ea-dialog__close:hover{background-color:var(--color-bg-muted);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dialog__close svg{width:1rem;height:1rem}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
|
|
188
|
+
}], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
189
|
+
|
|
190
|
+
class DropdownComponent {
|
|
191
|
+
elRef = viewChild('triggerEl', ...(ngDevMode ? [{ debugName: "elRef" }] : []));
|
|
192
|
+
// Inputs
|
|
193
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
194
|
+
placeholder = input('Select…', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
195
|
+
options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
|
|
196
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
197
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
198
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
199
|
+
hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
|
|
200
|
+
errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : {}), alias: 'error' });
|
|
201
|
+
id = input(`ea-dropdown-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
202
|
+
// Two-way value binding
|
|
203
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
204
|
+
// Outputs
|
|
205
|
+
changed = output();
|
|
206
|
+
// Internal state
|
|
207
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
208
|
+
focusedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : []));
|
|
209
|
+
_formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
|
|
210
|
+
// ControlValueAccessor callbacks
|
|
211
|
+
onChange = () => { };
|
|
212
|
+
onTouched = () => { };
|
|
213
|
+
// Computed
|
|
214
|
+
isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
215
|
+
resolvedStatus = computed(() => (this.errorMsg() ? 'error' : 'default'), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : []));
|
|
216
|
+
showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
|
|
217
|
+
showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
|
|
218
|
+
selectedLabel = computed(() => {
|
|
219
|
+
const opt = this.options().find(o => o.value === this.value());
|
|
220
|
+
return opt?.label ?? '';
|
|
221
|
+
}, ...(ngDevMode ? [{ debugName: "selectedLabel" }] : []));
|
|
222
|
+
triggerClasses = computed(() => ({
|
|
223
|
+
[`ea-dropdown__trigger--${this.size()}`]: true,
|
|
224
|
+
[`ea-dropdown__trigger--${this.resolvedStatus()}`]: true,
|
|
225
|
+
'ea-dropdown__trigger--open': this.isOpen(),
|
|
226
|
+
'ea-dropdown__trigger--disabled': this.isDisabled(),
|
|
227
|
+
}), ...(ngDevMode ? [{ debugName: "triggerClasses" }] : []));
|
|
228
|
+
// ControlValueAccessor
|
|
229
|
+
writeValue(val) {
|
|
230
|
+
this.value.set(val ?? '');
|
|
231
|
+
}
|
|
232
|
+
registerOnChange(fn) {
|
|
233
|
+
this.onChange = fn;
|
|
234
|
+
}
|
|
235
|
+
registerOnTouched(fn) {
|
|
236
|
+
this.onTouched = fn;
|
|
237
|
+
}
|
|
238
|
+
setDisabledState(isDisabled) {
|
|
239
|
+
this._formDisabled.set(isDisabled);
|
|
240
|
+
}
|
|
241
|
+
// Handlers
|
|
242
|
+
toggle() {
|
|
243
|
+
if (this.isDisabled())
|
|
244
|
+
return;
|
|
245
|
+
this.isOpen.set(!this.isOpen());
|
|
246
|
+
if (this.isOpen()) {
|
|
247
|
+
const idx = this.options().findIndex(o => o.value === this.value());
|
|
248
|
+
this.focusedIndex.set(idx >= 0 ? idx : 0);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
select(option) {
|
|
252
|
+
if (option.disabled || this.isDisabled())
|
|
253
|
+
return;
|
|
254
|
+
this.value.set(option.value);
|
|
255
|
+
this.onChange(option.value);
|
|
256
|
+
this.onTouched();
|
|
257
|
+
this.changed.emit(option.value);
|
|
258
|
+
this.close();
|
|
259
|
+
}
|
|
260
|
+
close() {
|
|
261
|
+
this.isOpen.set(false);
|
|
262
|
+
this.focusedIndex.set(-1);
|
|
263
|
+
}
|
|
264
|
+
handleKeydown(event) {
|
|
265
|
+
if (this.isDisabled())
|
|
266
|
+
return;
|
|
267
|
+
switch (event.key) {
|
|
268
|
+
case 'Enter':
|
|
269
|
+
case ' ':
|
|
270
|
+
event.preventDefault();
|
|
271
|
+
if (this.isOpen()) {
|
|
272
|
+
const opts = this.options();
|
|
273
|
+
const idx = this.focusedIndex();
|
|
274
|
+
if (idx >= 0 && idx < opts.length && !opts[idx].disabled) {
|
|
275
|
+
this.select(opts[idx]);
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
else {
|
|
279
|
+
this.toggle();
|
|
280
|
+
}
|
|
281
|
+
break;
|
|
282
|
+
case 'ArrowDown':
|
|
283
|
+
event.preventDefault();
|
|
284
|
+
if (!this.isOpen()) {
|
|
285
|
+
this.toggle();
|
|
286
|
+
}
|
|
287
|
+
else {
|
|
288
|
+
this.moveFocus(1);
|
|
289
|
+
}
|
|
290
|
+
break;
|
|
291
|
+
case 'ArrowUp':
|
|
292
|
+
event.preventDefault();
|
|
293
|
+
if (this.isOpen()) {
|
|
294
|
+
this.moveFocus(-1);
|
|
295
|
+
}
|
|
296
|
+
break;
|
|
297
|
+
case 'Escape':
|
|
298
|
+
if (this.isOpen()) {
|
|
299
|
+
event.preventDefault();
|
|
300
|
+
this.close();
|
|
301
|
+
this.elRef()?.nativeElement.focus();
|
|
302
|
+
}
|
|
303
|
+
break;
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
moveFocus(delta) {
|
|
307
|
+
const opts = this.options();
|
|
308
|
+
let idx = this.focusedIndex() + delta;
|
|
309
|
+
while (idx >= 0 && idx < opts.length && opts[idx].disabled) {
|
|
310
|
+
idx += delta;
|
|
311
|
+
}
|
|
312
|
+
if (idx >= 0 && idx < opts.length) {
|
|
313
|
+
this.focusedIndex.set(idx);
|
|
314
|
+
}
|
|
315
|
+
}
|
|
316
|
+
onDocumentClick(event) {
|
|
317
|
+
if (!this.isOpen())
|
|
318
|
+
return;
|
|
319
|
+
const el = event.target;
|
|
320
|
+
const host = this.elRef()?.nativeElement.closest('ea-dropdown');
|
|
321
|
+
if (host && !host.contains(el)) {
|
|
322
|
+
this.close();
|
|
323
|
+
this.onTouched();
|
|
324
|
+
}
|
|
325
|
+
}
|
|
326
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
327
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: DropdownComponent, isStandalone: true, selector: "ea-dropdown", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
328
|
+
{
|
|
329
|
+
provide: NG_VALUE_ACCESSOR,
|
|
330
|
+
useExisting: forwardRef(() => DropdownComponent),
|
|
331
|
+
multi: true,
|
|
332
|
+
},
|
|
333
|
+
], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field\">\n @if (label()) {\n <label\n class=\"ea-dropdown-field__label\"\n [for]=\"id()\"\n [class.ea-dropdown-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-labelledby]=\"label() ? id() : null\"\n (click)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n {{ selectedLabel() || placeholder() }}\n </span>\n <svg\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path\n d=\"M4 6l4 4 4-4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n @if (isOpen()) {\n <ul\n class=\"ea-dropdown__menu\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \">\n @for (option of options(); track option.value; let i = $index) {\n <li\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"option.value === value()\"\n [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"option.disabled\"\n [id]=\"id() + '-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (click)=\"select(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\n </li>\n }\n </ul>\n }\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:0 0 0 3px #ef444459}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:absolute;top:calc(100% + var(--space-1));left:0;right:0;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
334
|
+
}
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
336
|
+
type: Component,
|
|
337
|
+
args: [{ selector: 'ea-dropdown', imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
338
|
+
{
|
|
339
|
+
provide: NG_VALUE_ACCESSOR,
|
|
340
|
+
useExisting: forwardRef(() => DropdownComponent),
|
|
341
|
+
multi: true,
|
|
342
|
+
},
|
|
343
|
+
], template: "<div class=\"ea-dropdown-field\">\n @if (label()) {\n <label\n class=\"ea-dropdown-field__label\"\n [for]=\"id()\"\n [class.ea-dropdown-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-labelledby]=\"label() ? id() : null\"\n (click)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n {{ selectedLabel() || placeholder() }}\n </span>\n <svg\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n aria-hidden=\"true\">\n <path\n d=\"M4 6l4 4 4-4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </button>\n\n @if (isOpen()) {\n <ul\n class=\"ea-dropdown__menu\"\n role=\"listbox\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \">\n @for (option of options(); track option.value; let i = $index) {\n <li\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"option.value === value()\"\n [class.ea-dropdown__option--focused]=\"i === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"option.disabled\"\n [id]=\"id() + '-option-' + i\"\n role=\"option\"\n [attr.aria-selected]=\"option.value === value()\"\n [attr.aria-disabled]=\"option.disabled || null\"\n (click)=\"select(option)\"\n (mouseenter)=\"focusedIndex.set(i)\">\n {{ option.label }}\n </li>\n }\n </ul>\n }\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-dropdown-field__message ea-dropdown-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-dropdown-field__message ea-dropdown-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-dropdown-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-dropdown-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-dropdown-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-dropdown-field__message--hint{color:var(--color-text-secondary)}.ea-dropdown-field__message--error{color:var(--color-error-default)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);width:100%;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow);text-align:left}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-sm);min-height:2rem}.ea-dropdown__trigger--md{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);min-height:2.5rem}.ea-dropdown__trigger--lg{padding:var(--space-2-5) var(--space-4);font-size:var(--font-size-md);min-height:3rem}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:0 0 0 3px #ef444459}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{width:1em;height:1em;flex-shrink:0;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{position:absolute;top:calc(100% + var(--space-1));left:0;right:0;z-index:var(--z-index-dropdown);max-height:15rem;overflow-y:auto;background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:var(--space-1) 0;margin:0;list-style:none}.ea-dropdown__option{padding:var(--space-2) var(--space-3);font-size:var(--font-size-sm);font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-bg-muted)}.ea-dropdown__option--selected{color:var(--color-brand-default);font-weight:var(--font-weight-medium)}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}\n"] }]
|
|
344
|
+
}], propDecorators: { elRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }], onDocumentClick: [{
|
|
345
|
+
type: HostListener,
|
|
346
|
+
args: ['document:click', ['$event']]
|
|
347
|
+
}] } });
|
|
348
|
+
|
|
349
|
+
class InputComponent {
|
|
350
|
+
inputEl = viewChild('inputEl', ...(ngDevMode ? [{ debugName: "inputEl" }] : []));
|
|
351
|
+
// Inputs
|
|
352
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
353
|
+
type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
354
|
+
placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
355
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
356
|
+
status = input('default', ...(ngDevMode ? [{ debugName: "status" }] : []));
|
|
357
|
+
hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : []));
|
|
358
|
+
errorMsg = input(undefined, { ...(ngDevMode ? { debugName: "errorMsg" } : {}), alias: 'error' });
|
|
359
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
360
|
+
readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
361
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
362
|
+
id = input(`ea-input-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
363
|
+
// Two-way value binding
|
|
364
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
365
|
+
// Internal state
|
|
366
|
+
focused = signal(false, ...(ngDevMode ? [{ debugName: "focused" }] : []));
|
|
367
|
+
_formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
|
|
368
|
+
// Outputs
|
|
369
|
+
inputFocused = output();
|
|
370
|
+
inputBlurred = output();
|
|
371
|
+
// ControlValueAccessor callbacks
|
|
372
|
+
onChange = () => { };
|
|
373
|
+
onTouched = () => { };
|
|
374
|
+
// Computed
|
|
375
|
+
isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
376
|
+
resolvedStatus = computed(() => this.errorMsg() ? 'error' : this.status(), ...(ngDevMode ? [{ debugName: "resolvedStatus" }] : []));
|
|
377
|
+
showError = computed(() => !!this.errorMsg(), ...(ngDevMode ? [{ debugName: "showError" }] : []));
|
|
378
|
+
showHint = computed(() => !!this.hint() && !this.showError(), ...(ngDevMode ? [{ debugName: "showHint" }] : []));
|
|
379
|
+
wrapperClasses = computed(() => ({
|
|
380
|
+
[`ea-input-wrapper--${this.size()}`]: true,
|
|
381
|
+
[`ea-input-wrapper--${this.resolvedStatus()}`]: true,
|
|
382
|
+
'ea-input-wrapper--focused': this.focused(),
|
|
383
|
+
'ea-input-wrapper--disabled': this.isDisabled(),
|
|
384
|
+
'ea-input-wrapper--readonly': this.readonly(),
|
|
385
|
+
}), ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : []));
|
|
386
|
+
// ControlValueAccessor
|
|
387
|
+
writeValue(val) {
|
|
388
|
+
this.value.set(val ?? '');
|
|
389
|
+
}
|
|
390
|
+
registerOnChange(fn) {
|
|
391
|
+
this.onChange = fn;
|
|
392
|
+
}
|
|
393
|
+
registerOnTouched(fn) {
|
|
394
|
+
this.onTouched = fn;
|
|
395
|
+
}
|
|
396
|
+
setDisabledState(isDisabled) {
|
|
397
|
+
this._formDisabled.set(isDisabled);
|
|
398
|
+
}
|
|
399
|
+
// Handlers
|
|
400
|
+
handleInput(event) {
|
|
401
|
+
const val = event.target.value;
|
|
402
|
+
this.value.set(val);
|
|
403
|
+
this.onChange(val);
|
|
404
|
+
}
|
|
405
|
+
handleFocus(event) {
|
|
406
|
+
this.focused.set(true);
|
|
407
|
+
this.inputFocused.emit(event);
|
|
408
|
+
}
|
|
409
|
+
handleBlur(event) {
|
|
410
|
+
this.focused.set(false);
|
|
411
|
+
this.onTouched();
|
|
412
|
+
this.inputBlurred.emit(event);
|
|
413
|
+
}
|
|
414
|
+
focus() {
|
|
415
|
+
this.inputEl()?.nativeElement.focus();
|
|
416
|
+
}
|
|
417
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
418
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: InputComponent, isStandalone: true, selector: "ea-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMsg: { classPropertyName: "errorMsg", publicName: "error", 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 }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", inputFocused: "inputFocused", inputBlurred: "inputBlurred" }, providers: [
|
|
419
|
+
{
|
|
420
|
+
provide: NG_VALUE_ACCESSOR,
|
|
421
|
+
useExisting: forwardRef(() => InputComponent),
|
|
422
|
+
multi: true,
|
|
423
|
+
},
|
|
424
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-input-field\">\n @if (label()) {\n <label\n class=\"ea-input-field__label\"\n [for]=\"id()\"\n [class.ea-input-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <!-- Prefix slot (icon or text) -->\n <span class=\"ea-input-wrapper__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-input\"\n [id]=\"id()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n\n <!-- Suffix slot (icon, clear button, etc.) -->\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <svg\n class=\"ea-input-field__message-icon\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path\n d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 4a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0V5zm.75 6.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z\" />\n </svg>\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:var(--color-text-secondary)}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-sm);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-md);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-secondary)}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
425
|
+
}
|
|
426
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: InputComponent, decorators: [{
|
|
427
|
+
type: Component,
|
|
428
|
+
args: [{ selector: 'ea-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], providers: [
|
|
429
|
+
{
|
|
430
|
+
provide: NG_VALUE_ACCESSOR,
|
|
431
|
+
useExisting: forwardRef(() => InputComponent),
|
|
432
|
+
multi: true,
|
|
433
|
+
},
|
|
434
|
+
], template: "<div class=\"ea-input-field\">\n @if (label()) {\n <label\n class=\"ea-input-field__label\"\n [for]=\"id()\"\n [class.ea-input-field__label--required]=\"required()\">\n {{ label() }}\n </label>\n }\n\n <div\n class=\"ea-input-wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <!-- Prefix slot (icon or text) -->\n <span class=\"ea-input-wrapper__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-input\"\n [id]=\"id()\"\n [type]=\"type()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-invalid]=\"resolvedStatus() === 'error' || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\" />\n\n <!-- Suffix slot (icon, clear button, etc.) -->\n <span class=\"ea-input-wrapper__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n @if (showError()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <svg\n class=\"ea-input-field__message-icon\"\n viewBox=\"0 0 16 16\"\n fill=\"currentColor\"\n aria-hidden=\"true\">\n <path\n d=\"M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1zm-.75 4a.75.75 0 0 1 1.5 0v3.5a.75.75 0 0 1-1.5 0V5zm.75 6.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z\" />\n </svg>\n {{ errorMsg() }}\n </p>\n }\n\n @if (showHint()) {\n <p\n class=\"ea-input-field__message ea-input-field__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n }\n</div>\n", styles: [".ea-input-field{display:flex;flex-direction:column;gap:var(--space-1-5)}.ea-input-field__label{font-size:var(--text-label-md-size);font-weight:var(--text-label-md-weight);line-height:var(--text-label-md-lh);color:var(--color-text-primary)}.ea-input-field__label--required:after{content:\" *\";color:var(--color-error-default)}.ea-input-field__message{display:flex;align-items:center;gap:var(--space-1);font-size:var(--text-helper-size);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-input-field__message--hint{color:var(--color-text-secondary)}.ea-input-field__message--error{color:var(--color-error-default)}.ea-input-field__message-icon{flex-shrink:0;width:.875em;height:.875em}.ea-input-wrapper{display:flex;align-items:center;gap:var(--space-2);background-color:var(--color-bg-base);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);transition:var(--transition-colors),var(--transition-shadow);overflow:hidden}.ea-input-wrapper--sm{padding:0 var(--space-2);min-height:2rem}.ea-input-wrapper--sm .ea-input{font-size:var(--font-size-sm);padding:var(--space-1-5) 0}.ea-input-wrapper--md{padding:0 var(--space-3);min-height:2.5rem}.ea-input-wrapper--md .ea-input{font-size:var(--font-size-sm);padding:var(--space-2) 0}.ea-input-wrapper--lg{padding:0 var(--space-4);min-height:3rem}.ea-input-wrapper--lg .ea-input{font-size:var(--font-size-md);padding:var(--space-2-5) 0}.ea-input-wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}.ea-input-wrapper--error{border-color:var(--color-error-default)}.ea-input-wrapper--error.ea-input-wrapper--focused{box-shadow:0 0 0 3px #ef444459}.ea-input-wrapper--success{border-color:var(--color-success-default)}.ea-input-wrapper--success.ea-input-wrapper--focused{box-shadow:0 0 0 3px #22c55e59}.ea-input-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:not-allowed;opacity:.6}.ea-input-wrapper--disabled .ea-input{cursor:not-allowed}.ea-input-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-input-wrapper__prefix,.ea-input-wrapper__suffix{display:flex;align-items:center;flex-shrink:0;color:var(--color-text-secondary)}.ea-input-wrapper__prefix:empty,.ea-input-wrapper__suffix:empty{display:none}.ea-input{flex:1;width:100%;min-width:0;background:transparent;border:none;outline:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-input::placeholder{color:var(--color-text-tertiary)}.ea-input:disabled{cursor:not-allowed}.ea-input[type=number]::-webkit-inner-spin-button,.ea-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ea-input[type=number]{-moz-appearance:textfield;appearance:textfield}.ea-input[type=search]::-webkit-search-decoration,.ea-input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}\n"] }]
|
|
435
|
+
}], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], inputFocused: [{ type: i0.Output, args: ["inputFocused"] }], inputBlurred: [{ type: i0.Output, args: ["inputBlurred"] }] } });
|
|
436
|
+
|
|
437
|
+
class RadioGroupComponent {
|
|
438
|
+
// Inputs
|
|
439
|
+
name = input(`ea-radio-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
440
|
+
size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
441
|
+
orientation = input('vertical', ...(ngDevMode ? [{ debugName: "orientation" }] : []));
|
|
442
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
443
|
+
ariaLabel = input(undefined, { ...(ngDevMode ? { debugName: "ariaLabel" } : {}), alias: 'aria-label' });
|
|
444
|
+
// Two-way value binding
|
|
445
|
+
value = model('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
446
|
+
// Output
|
|
447
|
+
changed = output();
|
|
448
|
+
// Internal state
|
|
449
|
+
_formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_formDisabled" }] : []));
|
|
450
|
+
// Computed
|
|
451
|
+
isDisabled = computed(() => this.disabled() || this._formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
452
|
+
// ControlValueAccessor callbacks
|
|
453
|
+
onChange = () => { };
|
|
454
|
+
onTouched = () => { };
|
|
455
|
+
// ControlValueAccessor
|
|
456
|
+
writeValue(val) {
|
|
457
|
+
this.value.set(val ?? '');
|
|
458
|
+
}
|
|
459
|
+
registerOnChange(fn) {
|
|
460
|
+
this.onChange = fn;
|
|
461
|
+
}
|
|
462
|
+
registerOnTouched(fn) {
|
|
463
|
+
this.onTouched = fn;
|
|
464
|
+
}
|
|
465
|
+
setDisabledState(isDisabled) {
|
|
466
|
+
this._formDisabled.set(isDisabled);
|
|
467
|
+
}
|
|
468
|
+
select(val) {
|
|
469
|
+
if (this.isDisabled())
|
|
470
|
+
return;
|
|
471
|
+
this.value.set(val);
|
|
472
|
+
this.onChange(val);
|
|
473
|
+
this.onTouched();
|
|
474
|
+
this.changed.emit(val);
|
|
475
|
+
}
|
|
476
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
477
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.1", type: RadioGroupComponent, isStandalone: true, selector: "ea-radio-group", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", changed: "changed" }, providers: [
|
|
478
|
+
{
|
|
479
|
+
provide: NG_VALUE_ACCESSOR,
|
|
480
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
481
|
+
multi: true,
|
|
482
|
+
},
|
|
483
|
+
], ngImport: i0, template: "<div\n class=\"ea-radio-group\"\n [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel()\">\n <ng-content />\n</div>\n", styles: [".ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
484
|
+
}
|
|
485
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
486
|
+
type: Component,
|
|
487
|
+
args: [{ selector: 'ea-radio-group', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
488
|
+
{
|
|
489
|
+
provide: NG_VALUE_ACCESSOR,
|
|
490
|
+
useExisting: forwardRef(() => RadioGroupComponent),
|
|
491
|
+
multi: true,
|
|
492
|
+
},
|
|
493
|
+
], template: "<div\n class=\"ea-radio-group\"\n [class.ea-radio-group--horizontal]=\"orientation() === 'horizontal'\"\n [class.ea-radio-group--vertical]=\"orientation() === 'vertical'\"\n role=\"radiogroup\"\n [attr.aria-label]=\"ariaLabel()\">\n <ng-content />\n</div>\n", styles: [".ea-radio-group{display:flex}.ea-radio-group--vertical{flex-direction:column;gap:var(--space-2)}.ea-radio-group--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--space-4)}\n"] }]
|
|
494
|
+
}], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
495
|
+
|
|
496
|
+
class RadioComponent {
|
|
497
|
+
group = inject(RadioGroupComponent);
|
|
498
|
+
// Inputs
|
|
499
|
+
value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
500
|
+
label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
501
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
502
|
+
id = input(`ea-radio-opt-${Math.random().toString(36).slice(2, 9)}`, ...(ngDevMode ? [{ debugName: "id" }] : []));
|
|
503
|
+
// Computed
|
|
504
|
+
isChecked = computed(() => this.group.value() === this.value(), ...(ngDevMode ? [{ debugName: "isChecked" }] : []));
|
|
505
|
+
isDisabled = computed(() => this.disabled() || this.group.isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
506
|
+
name = computed(() => this.group.name(), ...(ngDevMode ? [{ debugName: "name" }] : []));
|
|
507
|
+
size = computed(() => this.group.size(), ...(ngDevMode ? [{ debugName: "size" }] : []));
|
|
508
|
+
hostClasses = computed(() => ({
|
|
509
|
+
[`ea-radio--${this.size()}`]: true,
|
|
510
|
+
'ea-radio--disabled': this.isDisabled(),
|
|
511
|
+
'ea-radio--checked': this.isChecked(),
|
|
512
|
+
}), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
513
|
+
handleChange() {
|
|
514
|
+
if (this.isDisabled())
|
|
515
|
+
return;
|
|
516
|
+
this.group.select(this.value());
|
|
517
|
+
}
|
|
518
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
519
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: RadioComponent, isStandalone: true, selector: "ea-radio", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<label\n class=\"ea-radio\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n type=\"radio\"\n class=\"ea-radio__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"isDisabled()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-radio__circle\"\n aria-hidden=\"true\"></span>\n\n @if (label()) {\n <span class=\"ea-radio__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
520
|
+
}
|
|
521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: RadioComponent, decorators: [{
|
|
522
|
+
type: Component,
|
|
523
|
+
args: [{ selector: 'ea-radio', changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgClass], template: "<label\n class=\"ea-radio\"\n [ngClass]=\"hostClasses()\"\n [for]=\"id()\">\n <input\n type=\"radio\"\n class=\"ea-radio__input\"\n [id]=\"id()\"\n [name]=\"name()\"\n [value]=\"value()\"\n [checked]=\"isChecked()\"\n [disabled]=\"isDisabled()\"\n (change)=\"handleChange()\" />\n\n <span\n class=\"ea-radio__circle\"\n aria-hidden=\"true\"></span>\n\n @if (label()) {\n <span class=\"ea-radio__label\">{{ label() }}</span>\n }\n</label>\n", styles: [".ea-radio{display:inline-flex;align-items:flex-start;gap:var(--space-2);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--font-family-sans);color:var(--color-text-primary)}.ea-radio--sm .ea-radio__circle{width:1rem;height:1rem}.ea-radio--sm .ea-radio__label{font-size:var(--font-size-sm);line-height:1rem}.ea-radio--md .ea-radio__circle{width:1.25rem;height:1.25rem}.ea-radio--md .ea-radio__label{font-size:var(--font-size-sm);line-height:1.25rem}.ea-radio--lg .ea-radio__circle{width:1.5rem;height:1.5rem}.ea-radio--lg .ea-radio__label{font-size:var(--font-size-md);line-height:1.5rem}.ea-radio--disabled{opacity:.45;cursor:not-allowed}.ea-radio--checked .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio--checked .ea-radio__circle:after{transform:scale(1)}.ea-radio:hover:not(.ea-radio--disabled) .ea-radio__circle{border-color:var(--color-brand-default)}.ea-radio__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.ea-radio__input:focus-visible+.ea-radio__circle{box-shadow:var(--shadow-focus-ring)}.ea-radio__circle{display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:var(--radius-full);background-color:var(--color-bg-base);border:var(--border-width-medium) solid var(--color-border-strong);transition:var(--transition-colors),var(--transition-shadow)}.ea-radio__circle:after{content:\"\";display:block;width:45%;height:45%;border-radius:var(--radius-full);background-color:var(--color-brand-default);transform:scale(0);transition:var(--transition-transform)}.ea-radio__label{font-weight:var(--font-weight-regular)}\n"] }]
|
|
524
|
+
}], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }] } });
|
|
525
|
+
|
|
526
|
+
// =============================================================================
|
|
527
|
+
// EAGAMI UI — Public API
|
|
528
|
+
// =============================================================================
|
|
529
|
+
// Components
|
|
530
|
+
|
|
531
|
+
/**
|
|
532
|
+
* Generated bundle index. Do not edit.
|
|
533
|
+
*/
|
|
534
|
+
|
|
535
|
+
export { ButtonComponent, CardComponent, CheckboxComponent, DialogComponent, DropdownComponent, InputComponent, RadioComponent, RadioGroupComponent };
|
|
536
|
+
//# sourceMappingURL=eagami-ui.mjs.map
|