@eagami/ui 5.72.0 → 5.73.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/fesm2022/eagami-ui.mjs +41 -39
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +19 -19
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -5612,15 +5612,17 @@ function controlErrorStateFrom(control, config) {
|
|
|
5612
5612
|
});
|
|
5613
5613
|
if (host) afterNextRender(() => {
|
|
5614
5614
|
const element = host.nativeElement;
|
|
5615
|
-
const onFocusIn = () => {
|
|
5615
|
+
const onFocusIn = () => untracked(() => {
|
|
5616
5616
|
editing.set(true);
|
|
5617
5617
|
revealedBySubmit.set(false);
|
|
5618
|
-
};
|
|
5618
|
+
});
|
|
5619
5619
|
const onFocusOut = (event) => {
|
|
5620
5620
|
if (event.relatedTarget instanceof Node && element.contains(event.relatedTarget)) return;
|
|
5621
|
-
|
|
5622
|
-
|
|
5623
|
-
|
|
5621
|
+
untracked(() => {
|
|
5622
|
+
editing.set(false);
|
|
5623
|
+
revealedBySubmit.set(false);
|
|
5624
|
+
holdRevealForPress();
|
|
5625
|
+
});
|
|
5624
5626
|
};
|
|
5625
5627
|
editing.set(element.contains(document.activeElement));
|
|
5626
5628
|
element.addEventListener("focusin", onFocusIn);
|
|
@@ -24008,14 +24010,14 @@ var TagComponent = class TagComponent {
|
|
|
24008
24010
|
maxWidth = input(void 0, ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
|
|
24009
24011
|
color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
|
|
24010
24012
|
ink = input(void 0, ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
|
|
24011
|
-
tooltip = input("
|
|
24013
|
+
tooltip = input("top", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
|
|
24012
24014
|
removeTabbable = input(true, ...ngDevMode ? [{ debugName: "removeTabbable" }] : /* istanbul ignore next */ []);
|
|
24013
24015
|
uppercase = input(false, ...ngDevMode ? [{ debugName: "uppercase" }] : /* istanbul ignore next */ []);
|
|
24014
24016
|
removed = output();
|
|
24015
24017
|
clippedText = signal("", ...ngDevMode ? [{ debugName: "clippedText" }] : /* istanbul ignore next */ []);
|
|
24016
24018
|
resolvedRemoveLabel = computed(() => this.removeLabel() ?? this.i18n.messages().tag.remove, ...ngDevMode ? [{ debugName: "resolvedRemoveLabel" }] : /* istanbul ignore next */ []);
|
|
24017
24019
|
labelTooltip = computed(() => this.tooltip() === "none" ? "" : this.clippedText(), ...ngDevMode ? [{ debugName: "labelTooltip" }] : /* istanbul ignore next */ []);
|
|
24018
|
-
tooltipPosition = computed(() => this.tooltip() === "
|
|
24020
|
+
tooltipPosition = computed(() => this.tooltip() === "bottom" ? "bottom" : "top", ...ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []);
|
|
24019
24021
|
hostClasses = computed(() => ({
|
|
24020
24022
|
[`ea-tag--${this.variant()}`]: true,
|
|
24021
24023
|
[`ea-tag--${this.size()}`]: true,
|
|
@@ -28338,8 +28340,8 @@ var RatingComponent = class RatingComponent {
|
|
|
28338
28340
|
disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
|
|
28339
28341
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
28340
28342
|
clearable = input(true, ...ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []);
|
|
28341
|
-
|
|
28342
|
-
|
|
28343
|
+
icon = input(StarIconComponent, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
|
|
28344
|
+
halfIcon = input(LeftHalfStarIconComponent, ...ngDevMode ? [{ debugName: "halfIcon" }] : /* istanbul ignore next */ []);
|
|
28343
28345
|
id = input(uniqueId("ea-rating"), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
28344
28346
|
value = model(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
28345
28347
|
hoverChanged = output();
|
|
@@ -28385,7 +28387,7 @@ var RatingComponent = class RatingComponent {
|
|
|
28385
28387
|
return "empty";
|
|
28386
28388
|
}
|
|
28387
28389
|
iconForState(state) {
|
|
28388
|
-
return state === "half" ? this.
|
|
28390
|
+
return state === "half" ? this.halfIcon() : this.icon();
|
|
28389
28391
|
}
|
|
28390
28392
|
starAriaLabel(pos) {
|
|
28391
28393
|
return this.i18n.messages().rating.valueLabel(pos, this.max());
|
|
@@ -28620,16 +28622,16 @@ var RatingComponent = class RatingComponent {
|
|
|
28620
28622
|
isRequired: false,
|
|
28621
28623
|
transformFunction: null
|
|
28622
28624
|
},
|
|
28623
|
-
|
|
28624
|
-
classPropertyName: "
|
|
28625
|
-
publicName: "
|
|
28625
|
+
icon: {
|
|
28626
|
+
classPropertyName: "icon",
|
|
28627
|
+
publicName: "icon",
|
|
28626
28628
|
isSignal: true,
|
|
28627
28629
|
isRequired: false,
|
|
28628
28630
|
transformFunction: null
|
|
28629
28631
|
},
|
|
28630
|
-
|
|
28631
|
-
classPropertyName: "
|
|
28632
|
-
publicName: "
|
|
28632
|
+
halfIcon: {
|
|
28633
|
+
classPropertyName: "halfIcon",
|
|
28634
|
+
publicName: "halfIcon",
|
|
28633
28635
|
isSignal: true,
|
|
28634
28636
|
isRequired: false,
|
|
28635
28637
|
transformFunction: null
|
|
@@ -28667,7 +28669,7 @@ var RatingComponent = class RatingComponent {
|
|
|
28667
28669
|
isSignal: true
|
|
28668
28670
|
}],
|
|
28669
28671
|
ngImport: i0,
|
|
28670
|
-
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"
|
|
28672
|
+
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"icon(); inputs: { strokeWidth: 1.5 }\" />\n </span>\n @if (stateFor(pos) !== 'empty') {\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n aria-hidden=\"true\">\n <ng-container\n *ngComponentOutlet=\"stateFor(pos) === 'half' ? halfIcon() : icon()\" />\n </span>\n }\n </span>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28671
28673
|
styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;inset-inline-start:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default));forced-color-adjust:none}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--2xs{font-size:var(--font-size-2xs)}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"],
|
|
28672
28674
|
dependencies: [
|
|
28673
28675
|
{
|
|
@@ -28740,7 +28742,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28740
28742
|
useExisting: forwardRef(() => RatingComponent),
|
|
28741
28743
|
multi: true
|
|
28742
28744
|
}],
|
|
28743
|
-
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"
|
|
28745
|
+
template: "<div\n class=\"ea-rating-field\"\n [ngClass]=\"hostClasses()\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n #starsEl\n class=\"ea-rating-field__stars\"\n role=\"slider\"\n tabindex=\"0\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabelledby() ? null : resolvedAriaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-valuemin]=\"min()\"\n [attr.aria-valuemax]=\"max()\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuetext]=\"starAriaLabel(value())\"\n [attr.aria-readonly]=\"readonly() ? true : null\"\n [attr.aria-disabled]=\"isDisabled() ? true : null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (keydown)=\"onKeydown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (pointerleave)=\"onPointerLeave()\">\n @for (pos of positions(); track pos) {\n <!--\n Stars are presentational click targets. The parent\n `<div role=\"slider\">` is the canonical interactive element (keyboard\n and AT navigation flows through it); using `<button>` here would\n nest two interactive controls and trip axe's `nested-interactive`.\n -->\n <span\n role=\"presentation\"\n class=\"ea-rating-field__star\"\n [class.ea-rating-field__star--full]=\"stateFor(pos) === 'full'\"\n [class.ea-rating-field__star--half]=\"stateFor(pos) === 'half'\"\n [class.ea-rating-field__star--empty]=\"stateFor(pos) === 'empty'\"\n [class.ea-rating-field__star--inert]=\"!isInteractive()\"\n (pointermove)=\"onPointerMove($event, pos)\"\n (click)=\"onClick($event, pos)\">\n <!--\n Background layer is always rendered as the dim full-star outline so\n empty positions show a visible silhouette and half positions reveal\n the unfilled side behind the foreground. Thinner stroke keeps the\n outline visually quiet against the filled foreground.\n -->\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--background\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"icon(); inputs: { strokeWidth: 1.5 }\" />\n </span>\n @if (stateFor(pos) !== 'empty') {\n <span\n class=\"ea-rating-field__star-icon ea-rating-field__star-icon--foreground\"\n aria-hidden=\"true\">\n <ng-container\n *ngComponentOutlet=\"stateFor(pos) === 'half' ? halfIcon() : icon()\" />\n </span>\n }\n </span>\n }\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n",
|
|
28744
28746
|
styles: [":host{display:inline-block}.ea-rating-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-rating-field__stars{display:inline-flex;align-items:center;gap:.25em;border-radius:var(--radius-md)}.ea-rating-field__stars:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-rating-field__star{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1em;height:1em;padding:0;font-size:1.5em;background:transparent;cursor:pointer;transition:var(--transition-colors)}.ea-rating-field__star--inert{pointer-events:none;cursor:default}.ea-rating-field__star-icon{display:inline-flex;position:absolute;top:0;inset-inline-start:0}.ea-rating-field__star-icon--background{color:var(--ea-rating-color-background, var(--color-text-tertiary));opacity:.3}.ea-rating-field__star-icon--foreground{color:var(--ea-rating-color, var(--color-warning-default));forced-color-adjust:none}.ea-rating-field--readonly .ea-rating-field__star,.ea-rating-field--disabled .ea-rating-field__star{cursor:default}.ea-rating-field--disabled{opacity:.6}.ea-rating-field--2xs{font-size:var(--font-size-2xs)}.ea-rating-field--xs{font-size:var(--font-size-xs)}.ea-rating-field--sm{font-size:var(--font-size-sm)}.ea-rating-field--md{font-size:var(--font-size-md)}.ea-rating-field--lg{font-size:var(--font-size-lg)}.ea-rating-field--xl{font-size:var(--font-size-xl)}.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-rating-field--error .ea-rating-field__stars:focus-visible{outline:2px solid Highlight;outline-offset:2px}}\n"]
|
|
28745
28747
|
}]
|
|
28746
28748
|
}],
|
|
@@ -28886,19 +28888,19 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28886
28888
|
required: false
|
|
28887
28889
|
}]
|
|
28888
28890
|
}],
|
|
28889
|
-
|
|
28891
|
+
icon: [{
|
|
28890
28892
|
type: i0.Input,
|
|
28891
28893
|
args: [{
|
|
28892
28894
|
isSignal: true,
|
|
28893
|
-
alias: "
|
|
28895
|
+
alias: "icon",
|
|
28894
28896
|
required: false
|
|
28895
28897
|
}]
|
|
28896
28898
|
}],
|
|
28897
|
-
|
|
28899
|
+
halfIcon: [{
|
|
28898
28900
|
type: i0.Input,
|
|
28899
28901
|
args: [{
|
|
28900
28902
|
isSignal: true,
|
|
28901
|
-
alias: "
|
|
28903
|
+
alias: "halfIcon",
|
|
28902
28904
|
required: false
|
|
28903
28905
|
}]
|
|
28904
28906
|
}],
|
|
@@ -31693,7 +31695,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31693
31695
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
31694
31696
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
31695
31697
|
resize = input("vertical", ...ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []);
|
|
31696
|
-
|
|
31698
|
+
maxLength = input(void 0, ...ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []);
|
|
31697
31699
|
showCount = input(false, ...ngDevMode ? [{ debugName: "showCount" }] : /* istanbul ignore next */ []);
|
|
31698
31700
|
maxHeight = input(void 0, ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
|
|
31699
31701
|
minHeight = input(void 0, ...ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []);
|
|
@@ -31720,7 +31722,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31720
31722
|
showHint = computed(() => !!this.hint() && !this.hasError(), ...ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []);
|
|
31721
31723
|
countText = computed(() => {
|
|
31722
31724
|
const length = this.value().length;
|
|
31723
|
-
const max = this.
|
|
31725
|
+
const max = this.maxLength();
|
|
31724
31726
|
return max ? `${length} / ${max}` : `${length}`;
|
|
31725
31727
|
}, ...ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []);
|
|
31726
31728
|
describedBy = computed(() => {
|
|
@@ -31912,9 +31914,9 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31912
31914
|
isRequired: false,
|
|
31913
31915
|
transformFunction: null
|
|
31914
31916
|
},
|
|
31915
|
-
|
|
31916
|
-
classPropertyName: "
|
|
31917
|
-
publicName: "
|
|
31917
|
+
maxLength: {
|
|
31918
|
+
classPropertyName: "maxLength",
|
|
31919
|
+
publicName: "maxLength",
|
|
31918
31920
|
isSignal: true,
|
|
31919
31921
|
isRequired: false,
|
|
31920
31922
|
transformFunction: null
|
|
@@ -31973,7 +31975,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31973
31975
|
isSignal: true
|
|
31974
31976
|
}],
|
|
31975
31977
|
ngImport: i0,
|
|
31976
|
-
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [class.ea-textarea--typed-placeholder]=\"typedPlaceholderShown()\"\n [id]=\"id()\"\n [placeholder]=\"nativePlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"
|
|
31978
|
+
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [class.ea-textarea--typed-placeholder]=\"typedPlaceholderShown()\"\n [id]=\"id()\"\n [placeholder]=\"nativePlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n\n @if (typedPlaceholderShown()) {\n <ea-typed-placeholder\n class=\"ea-textarea-wrapper__typed-placeholder\"\n [text]=\"typed.text()\"\n [typing]=\"typed.typing()\" />\n }\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
|
|
31977
31979
|
styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{position:relative;display:flex;min-width:12em;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-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea-wrapper__typed-placeholder{position:absolute;inset:0;padding:.75em;white-space:pre-wrap;overflow-wrap:break-word}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea--typed-placeholder::placeholder{color:transparent}.ea-textarea:disabled{cursor:default}\n"],
|
|
31978
31980
|
dependencies: [
|
|
31979
31981
|
{
|
|
@@ -32048,7 +32050,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32048
32050
|
useExisting: forwardRef(() => TextareaComponent),
|
|
32049
32051
|
multi: true
|
|
32050
32052
|
}],
|
|
32051
|
-
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [class.ea-textarea--typed-placeholder]=\"typedPlaceholderShown()\"\n [id]=\"id()\"\n [placeholder]=\"nativePlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"
|
|
32053
|
+
template: "<div class=\"ea-textarea-field ea-textarea-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [icon]=\"labelIcon()\"\n [help]=\"labelHelp()\"\n [forId]=\"id()\"\n [required]=\"required()\"\n [optional]=\"optional()\" />\n }\n\n <div\n class=\"ea-textarea-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n [style.resize]=\"resize()\"\n [style.min-height]=\"minHeightStyle()\"\n [style.max-height.px]=\"maxHeight() ?? null\">\n <textarea\n #textareaEl\n class=\"ea-textarea\"\n dir=\"auto\"\n [class.ea-textarea--typed-placeholder]=\"typedPlaceholderShown()\"\n [id]=\"id()\"\n [placeholder]=\"nativePlaceholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.maxlength]=\"maxLength() ?? null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"describedBy()\"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"></textarea>\n\n @if (typedPlaceholderShown()) {\n <ea-typed-placeholder\n class=\"ea-textarea-wrapper__typed-placeholder\"\n [text]=\"typed.text()\"\n [typing]=\"typed.typing()\" />\n }\n </div>\n\n <ng-template #messages>\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n </ng-template>\n\n @if (showCount()) {\n <div class=\"ea-textarea-field__footer\">\n <ng-container [ngTemplateOutlet]=\"messages\" />\n <span\n class=\"ea-textarea-field__count\"\n [id]=\"id() + '-count'\">\n {{ countText() }}\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"messages\" />\n }\n</div>\n",
|
|
32052
32054
|
styles: [".ea-textarea-field{display:flex;flex-direction:column;gap:.375em;color:var(--color-text-secondary);--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-textarea-field--2xs{font-size:var(--font-size-2xs)}.ea-textarea-field--xs{font-size:var(--font-size-xs)}.ea-textarea-field--sm{font-size:var(--font-size-sm)}.ea-textarea-field--md{font-size:var(--font-size-md)}.ea-textarea-field--lg{font-size:var(--font-size-lg)}.ea-textarea-field--xl{font-size:var(--font-size-xl)}.ea-textarea-field__footer{display:flex;align-items:flex-start;gap:.75em}.ea-textarea-field__count{flex-shrink:0;margin-inline-start:auto;font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh);font-variant-numeric:tabular-nums}.ea-textarea-wrapper{position:relative;display:flex;min-width:12em;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-textarea-wrapper--focused{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--error{border-color:var(--color-error-default)}.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:none;box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-textarea-wrapper--error.ea-textarea-wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--disabled{background-color:var(--color-bg-muted);border-color:var(--color-border-default);cursor:default;opacity:.6}.ea-textarea-wrapper--disabled .ea-textarea{cursor:default}.ea-textarea-wrapper--readonly{background-color:var(--color-bg-subtle)}.ea-textarea-wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);outline:none;box-shadow:none}@media(forced-colors:active){.ea-textarea-wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-textarea-wrapper--readonly button{cursor:default}.ea-textarea-wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-textarea-wrapper__typed-placeholder{position:absolute;inset:0;padding:.75em;white-space:pre-wrap;overflow-wrap:break-word}.ea-textarea{flex:1;width:100%;min-width:0;padding:.75em;background:transparent;border:none;outline:none;resize:none;color:var(--color-text-primary);font-family:var(--font-family-sans);line-height:var(--line-height-normal)}.ea-textarea::placeholder{opacity:1;font-style:italic;color:var(--color-text-tertiary)}.ea-textarea--typed-placeholder::placeholder{color:transparent}.ea-textarea:disabled{cursor:default}\n"]
|
|
32053
32055
|
}]
|
|
32054
32056
|
}],
|
|
@@ -32185,11 +32187,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32185
32187
|
required: false
|
|
32186
32188
|
}]
|
|
32187
32189
|
}],
|
|
32188
|
-
|
|
32190
|
+
maxLength: [{
|
|
32189
32191
|
type: i0.Input,
|
|
32190
32192
|
args: [{
|
|
32191
32193
|
isSignal: true,
|
|
32192
|
-
alias: "
|
|
32194
|
+
alias: "maxLength",
|
|
32193
32195
|
required: false
|
|
32194
32196
|
}]
|
|
32195
32197
|
}],
|
|
@@ -33775,7 +33777,7 @@ var ToastComponent = class ToastComponent {
|
|
|
33775
33777
|
focused = false;
|
|
33776
33778
|
position = input("bottom-right", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
|
|
33777
33779
|
size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
33778
|
-
|
|
33780
|
+
dismissible = input(true, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
|
|
33779
33781
|
containerClass = computed(() => `ea-toast-container ea-toast-container--${this.position()}`, ...ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []);
|
|
33780
33782
|
toastRole(variant) {
|
|
33781
33783
|
return variant === "error" || variant === "warning" ? "alert" : "status";
|
|
@@ -33836,9 +33838,9 @@ var ToastComponent = class ToastComponent {
|
|
|
33836
33838
|
isRequired: false,
|
|
33837
33839
|
transformFunction: null
|
|
33838
33840
|
},
|
|
33839
|
-
|
|
33840
|
-
classPropertyName: "
|
|
33841
|
-
publicName: "
|
|
33841
|
+
dismissible: {
|
|
33842
|
+
classPropertyName: "dismissible",
|
|
33843
|
+
publicName: "dismissible",
|
|
33842
33844
|
isSignal: true,
|
|
33843
33845
|
isRequired: false,
|
|
33844
33846
|
transformFunction: null
|
|
@@ -33852,7 +33854,7 @@ var ToastComponent = class ToastComponent {
|
|
|
33852
33854
|
isSignal: true
|
|
33853
33855
|
}],
|
|
33854
33856
|
ngImport: i0,
|
|
33855
|
-
template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @if (toast.icon !== undefined) {\n @if (toast.icon) {\n <span\n class=\"ea-toast__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"toast.icon\" />\n </span>\n }\n } @else {\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n }\n <div class=\"ea-toast__content\">\n @if (toast.title) {\n @if (segmentsOf(toast.title); as segments) {\n <span class=\"ea-toast__title\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__title\">{{ toast.title }}</span>\n }\n }\n @if (segmentsOf(toast.message); as segments) {\n <span class=\"ea-toast__message\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n }\n </div>\n @if (
|
|
33857
|
+
template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @if (toast.icon !== undefined) {\n @if (toast.icon) {\n <span\n class=\"ea-toast__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"toast.icon\" />\n </span>\n }\n } @else {\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n }\n <div class=\"ea-toast__content\">\n @if (toast.title) {\n @if (segmentsOf(toast.title); as segments) {\n <span class=\"ea-toast__title\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__title\">{{ toast.title }}</span>\n }\n }\n @if (segmentsOf(toast.message); as segments) {\n <span class=\"ea-toast__message\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n }\n </div>\n @if (dismissible()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n",
|
|
33856
33858
|
styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--2xs{font-size:var(--font-size-2xs)}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;margin-inline-end:.25em;font-size:1.25em}.ea-toast__content{display:flex;flex:1;flex-direction:column;gap:.125em;min-width:0;overflow-wrap:anywhere}.ea-toast__title{font-weight:var(--font-weight-semibold)}.ea-toast__segment--strong{font-weight:var(--ea-toast-strong-weight, var(--font-weight-semibold))}.ea-toast__title+.ea-toast__message{opacity:.85}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong){opacity:1}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong) .ea-toast__segment:not(.ea-toast__segment--strong){opacity:.85}.ea-toast__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-toast__close>*{font-size:1.25em}.ea-toast__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:default;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"],
|
|
33857
33859
|
dependencies: [
|
|
33858
33860
|
{
|
|
@@ -33918,7 +33920,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
33918
33920
|
],
|
|
33919
33921
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
33920
33922
|
encapsulation: ViewEncapsulation.None,
|
|
33921
|
-
template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @if (toast.icon !== undefined) {\n @if (toast.icon) {\n <span\n class=\"ea-toast__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"toast.icon\" />\n </span>\n }\n } @else {\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n }\n <div class=\"ea-toast__content\">\n @if (toast.title) {\n @if (segmentsOf(toast.title); as segments) {\n <span class=\"ea-toast__title\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__title\">{{ toast.title }}</span>\n }\n }\n @if (segmentsOf(toast.message); as segments) {\n <span class=\"ea-toast__message\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n }\n </div>\n @if (
|
|
33923
|
+
template: "<div\n #containerEl\n [class]=\"containerClass()\"\n (mouseenter)=\"onMouseEnter()\"\n (mouseleave)=\"onMouseLeave()\"\n (focusin)=\"onFocusIn()\"\n (focusout)=\"onFocusOut($event)\">\n @for (toast of toastService.toasts(); track toast.id) {\n <div\n class=\"ea-toast ea-toast--{{ toast.variant }} ea-toast--{{ size() }}\"\n [attr.role]=\"toastRole(toast.variant)\">\n @if (toast.icon !== undefined) {\n @if (toast.icon) {\n <span\n class=\"ea-toast__icon\"\n aria-hidden=\"true\">\n <ng-container *ngComponentOutlet=\"toast.icon\" />\n </span>\n }\n } @else {\n @switch (toast.variant) {\n @case ('success') {\n <ea-icon-check-circle class=\"ea-toast__icon\" />\n }\n @case ('info') {\n <ea-icon-info class=\"ea-toast__icon\" />\n }\n @case ('warning') {\n <ea-icon-alert-triangle class=\"ea-toast__icon\" />\n }\n @case ('error') {\n <ea-icon-alert-circle class=\"ea-toast__icon\" />\n }\n }\n }\n <div class=\"ea-toast__content\">\n @if (toast.title) {\n @if (segmentsOf(toast.title); as segments) {\n <span class=\"ea-toast__title\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__title\">{{ toast.title }}</span>\n }\n }\n @if (segmentsOf(toast.message); as segments) {\n <span class=\"ea-toast__message\">\n @for (segment of segments; track $index) {\n <span [class]=\"segmentClass(segment)\">{{ segment.text }}</span>\n }\n </span>\n } @else {\n <span class=\"ea-toast__message\">{{ toast.message }}</span>\n }\n </div>\n @if (dismissible()) {\n <button\n class=\"ea-toast__close\"\n type=\"button\"\n [attr.aria-label]=\"i18n.messages().toast.dismiss\"\n (click)=\"toastService.dismiss(toast.id)\">\n <ea-icon-x />\n </button>\n }\n </div>\n }\n</div>\n",
|
|
33922
33924
|
styles: [".ea-toast-container{position:fixed;z-index:var(--z-index-toast);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);max-width:calc(100vw - var(--space-6) * 2);pointer-events:none}.ea-toast-container--top-left,.ea-toast-container--top,.ea-toast-container--top-right{top:var(--space-6)}.ea-toast-container--bottom-left,.ea-toast-container--bottom,.ea-toast-container--bottom-right{bottom:var(--space-6)}.ea-toast-container--top-left,.ea-toast-container--bottom-left{left:var(--space-6)}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{margin-right:auto}.ea-toast-container--top-right,.ea-toast-container--bottom-right{right:var(--space-6)}.ea-toast-container--top-right .ea-toast,.ea-toast-container--bottom-right .ea-toast{margin-left:auto}.ea-toast-container--top,.ea-toast-container--bottom{left:50%;transform:translate(-50%)}.ea-toast-container--top .ea-toast,.ea-toast-container--bottom .ea-toast{margin-right:auto;margin-left:auto}.ea-toast-container--top-left .ea-toast,.ea-toast-container--bottom-left .ea-toast{--ea-toast-enter-x: -100%}.ea-toast-container--top .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: -100%}.ea-toast-container--bottom .ea-toast{--ea-toast-enter-x: 0;--ea-toast-enter-y: 100%}.ea-toast{--ea-toast-enter-x: 100%;--ea-toast-enter-y: 0;display:flex;align-items:center;gap:.5em;width:100%;max-width:24em;padding:.75em 1em;font-family:var(--font-family-sans);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);pointer-events:auto;animation:ea-toast-slide-in var(--duration-slow) var(--ease-out)}@media(forced-colors:active){.ea-toast{border:1px solid CanvasText}}@media(min-width:640px){.ea-toast{width:auto}}.ea-toast--2xs{font-size:var(--font-size-2xs)}.ea-toast--xs{font-size:var(--font-size-xs)}.ea-toast--sm{font-size:var(--font-size-sm)}.ea-toast--md{font-size:var(--font-size-md)}.ea-toast--lg{font-size:var(--font-size-lg)}.ea-toast--xl{font-size:var(--font-size-xl)}.ea-toast--default{background-color:var(--color-neutral-800);color:var(--color-neutral-0)}.ea-toast--success{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));color:var(--color-success-text)}.ea-toast--warning{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-warning-subtle),var(--color-warning-subtle));color:var(--color-warning-text)}.ea-toast--error{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-error-subtle),var(--color-error-subtle));color:var(--color-error-text)}.ea-toast--info{background-color:var(--ea-toast-background-color, var(--color-bg-elevated));background-image:linear-gradient(var(--color-info-subtle),var(--color-info-subtle));color:var(--color-info-text)}.ea-toast__icon{display:inline-flex;flex-shrink:0;margin-inline-end:.25em;font-size:1.25em}.ea-toast__content{display:flex;flex:1;flex-direction:column;gap:.125em;min-width:0;overflow-wrap:anywhere}.ea-toast__title{font-weight:var(--font-weight-semibold)}.ea-toast__segment--strong{font-weight:var(--ea-toast-strong-weight, var(--font-weight-semibold))}.ea-toast__title+.ea-toast__message{opacity:.85}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong){opacity:1}.ea-toast__title+.ea-toast__message:has(.ea-toast__segment--strong) .ea-toast__segment:not(.ea-toast__segment--strong){opacity:.85}.ea-toast__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-toast__close>*{font-size:1.25em}.ea-toast__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-toast__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:default;opacity:.5}@keyframes ea-toast-slide-in{0%{opacity:0;transform:translate(var(--ea-toast-enter-x),var(--ea-toast-enter-y))}to{opacity:1;transform:translate(0)}}@media(prefers-reduced-motion:reduce){.ea-toast{animation-name:ea-toast-fade-in}}@keyframes ea-toast-fade-in{0%{opacity:0}to{opacity:1}}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .ea-toast--success{color:var(--color-success-200)}:root:not([data-theme=light]) .ea-toast--warning{color:var(--color-warning-200)}:root:not([data-theme=light]) .ea-toast--error{color:var(--color-error-200)}:root:not([data-theme=light]) .ea-toast--info{color:var(--color-info-200)}}:root[data-theme=dark] .ea-toast--success{color:var(--color-success-200)}:root[data-theme=dark] .ea-toast--warning{color:var(--color-warning-200)}:root[data-theme=dark] .ea-toast--error{color:var(--color-error-200)}:root[data-theme=dark] .ea-toast--info{color:var(--color-info-200)}\n"]
|
|
33923
33925
|
}]
|
|
33924
33926
|
}],
|
|
@@ -33943,11 +33945,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
33943
33945
|
required: false
|
|
33944
33946
|
}]
|
|
33945
33947
|
}],
|
|
33946
|
-
|
|
33948
|
+
dismissible: [{
|
|
33947
33949
|
type: i0.Input,
|
|
33948
33950
|
args: [{
|
|
33949
33951
|
isSignal: true,
|
|
33950
|
-
alias: "
|
|
33952
|
+
alias: "dismissible",
|
|
33951
33953
|
required: false
|
|
33952
33954
|
}]
|
|
33953
33955
|
}]
|