@eagami/ui 5.72.1 → 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 +34 -34
- 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
|
@@ -24010,14 +24010,14 @@ var TagComponent = class TagComponent {
|
|
|
24010
24010
|
maxWidth = input(void 0, ...ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []);
|
|
24011
24011
|
color = input(void 0, ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
|
|
24012
24012
|
ink = input(void 0, ...ngDevMode ? [{ debugName: "ink" }] : /* istanbul ignore next */ []);
|
|
24013
|
-
tooltip = input("
|
|
24013
|
+
tooltip = input("top", ...ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []);
|
|
24014
24014
|
removeTabbable = input(true, ...ngDevMode ? [{ debugName: "removeTabbable" }] : /* istanbul ignore next */ []);
|
|
24015
24015
|
uppercase = input(false, ...ngDevMode ? [{ debugName: "uppercase" }] : /* istanbul ignore next */ []);
|
|
24016
24016
|
removed = output();
|
|
24017
24017
|
clippedText = signal("", ...ngDevMode ? [{ debugName: "clippedText" }] : /* istanbul ignore next */ []);
|
|
24018
24018
|
resolvedRemoveLabel = computed(() => this.removeLabel() ?? this.i18n.messages().tag.remove, ...ngDevMode ? [{ debugName: "resolvedRemoveLabel" }] : /* istanbul ignore next */ []);
|
|
24019
24019
|
labelTooltip = computed(() => this.tooltip() === "none" ? "" : this.clippedText(), ...ngDevMode ? [{ debugName: "labelTooltip" }] : /* istanbul ignore next */ []);
|
|
24020
|
-
tooltipPosition = computed(() => this.tooltip() === "
|
|
24020
|
+
tooltipPosition = computed(() => this.tooltip() === "bottom" ? "bottom" : "top", ...ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []);
|
|
24021
24021
|
hostClasses = computed(() => ({
|
|
24022
24022
|
[`ea-tag--${this.variant()}`]: true,
|
|
24023
24023
|
[`ea-tag--${this.size()}`]: true,
|
|
@@ -28340,8 +28340,8 @@ var RatingComponent = class RatingComponent {
|
|
|
28340
28340
|
disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
|
|
28341
28341
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
28342
28342
|
clearable = input(true, ...ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []);
|
|
28343
|
-
|
|
28344
|
-
|
|
28343
|
+
icon = input(StarIconComponent, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
|
|
28344
|
+
halfIcon = input(LeftHalfStarIconComponent, ...ngDevMode ? [{ debugName: "halfIcon" }] : /* istanbul ignore next */ []);
|
|
28345
28345
|
id = input(uniqueId("ea-rating"), ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
|
|
28346
28346
|
value = model(0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
|
|
28347
28347
|
hoverChanged = output();
|
|
@@ -28387,7 +28387,7 @@ var RatingComponent = class RatingComponent {
|
|
|
28387
28387
|
return "empty";
|
|
28388
28388
|
}
|
|
28389
28389
|
iconForState(state) {
|
|
28390
|
-
return state === "half" ? this.
|
|
28390
|
+
return state === "half" ? this.halfIcon() : this.icon();
|
|
28391
28391
|
}
|
|
28392
28392
|
starAriaLabel(pos) {
|
|
28393
28393
|
return this.i18n.messages().rating.valueLabel(pos, this.max());
|
|
@@ -28622,16 +28622,16 @@ var RatingComponent = class RatingComponent {
|
|
|
28622
28622
|
isRequired: false,
|
|
28623
28623
|
transformFunction: null
|
|
28624
28624
|
},
|
|
28625
|
-
|
|
28626
|
-
classPropertyName: "
|
|
28627
|
-
publicName: "
|
|
28625
|
+
icon: {
|
|
28626
|
+
classPropertyName: "icon",
|
|
28627
|
+
publicName: "icon",
|
|
28628
28628
|
isSignal: true,
|
|
28629
28629
|
isRequired: false,
|
|
28630
28630
|
transformFunction: null
|
|
28631
28631
|
},
|
|
28632
|
-
|
|
28633
|
-
classPropertyName: "
|
|
28634
|
-
publicName: "
|
|
28632
|
+
halfIcon: {
|
|
28633
|
+
classPropertyName: "halfIcon",
|
|
28634
|
+
publicName: "halfIcon",
|
|
28635
28635
|
isSignal: true,
|
|
28636
28636
|
isRequired: false,
|
|
28637
28637
|
transformFunction: null
|
|
@@ -28669,7 +28669,7 @@ var RatingComponent = class RatingComponent {
|
|
|
28669
28669
|
isSignal: true
|
|
28670
28670
|
}],
|
|
28671
28671
|
ngImport: i0,
|
|
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=\"
|
|
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",
|
|
28673
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"],
|
|
28674
28674
|
dependencies: [
|
|
28675
28675
|
{
|
|
@@ -28742,7 +28742,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28742
28742
|
useExisting: forwardRef(() => RatingComponent),
|
|
28743
28743
|
multi: true
|
|
28744
28744
|
}],
|
|
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=\"
|
|
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",
|
|
28746
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"]
|
|
28747
28747
|
}]
|
|
28748
28748
|
}],
|
|
@@ -28888,19 +28888,19 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
28888
28888
|
required: false
|
|
28889
28889
|
}]
|
|
28890
28890
|
}],
|
|
28891
|
-
|
|
28891
|
+
icon: [{
|
|
28892
28892
|
type: i0.Input,
|
|
28893
28893
|
args: [{
|
|
28894
28894
|
isSignal: true,
|
|
28895
|
-
alias: "
|
|
28895
|
+
alias: "icon",
|
|
28896
28896
|
required: false
|
|
28897
28897
|
}]
|
|
28898
28898
|
}],
|
|
28899
|
-
|
|
28899
|
+
halfIcon: [{
|
|
28900
28900
|
type: i0.Input,
|
|
28901
28901
|
args: [{
|
|
28902
28902
|
isSignal: true,
|
|
28903
|
-
alias: "
|
|
28903
|
+
alias: "halfIcon",
|
|
28904
28904
|
required: false
|
|
28905
28905
|
}]
|
|
28906
28906
|
}],
|
|
@@ -31695,7 +31695,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31695
31695
|
readonly = input(false, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
|
|
31696
31696
|
required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
|
|
31697
31697
|
resize = input("vertical", ...ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []);
|
|
31698
|
-
|
|
31698
|
+
maxLength = input(void 0, ...ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []);
|
|
31699
31699
|
showCount = input(false, ...ngDevMode ? [{ debugName: "showCount" }] : /* istanbul ignore next */ []);
|
|
31700
31700
|
maxHeight = input(void 0, ...ngDevMode ? [{ debugName: "maxHeight" }] : /* istanbul ignore next */ []);
|
|
31701
31701
|
minHeight = input(void 0, ...ngDevMode ? [{ debugName: "minHeight" }] : /* istanbul ignore next */ []);
|
|
@@ -31722,7 +31722,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31722
31722
|
showHint = computed(() => !!this.hint() && !this.hasError(), ...ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []);
|
|
31723
31723
|
countText = computed(() => {
|
|
31724
31724
|
const length = this.value().length;
|
|
31725
|
-
const max = this.
|
|
31725
|
+
const max = this.maxLength();
|
|
31726
31726
|
return max ? `${length} / ${max}` : `${length}`;
|
|
31727
31727
|
}, ...ngDevMode ? [{ debugName: "countText" }] : /* istanbul ignore next */ []);
|
|
31728
31728
|
describedBy = computed(() => {
|
|
@@ -31914,9 +31914,9 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31914
31914
|
isRequired: false,
|
|
31915
31915
|
transformFunction: null
|
|
31916
31916
|
},
|
|
31917
|
-
|
|
31918
|
-
classPropertyName: "
|
|
31919
|
-
publicName: "
|
|
31917
|
+
maxLength: {
|
|
31918
|
+
classPropertyName: "maxLength",
|
|
31919
|
+
publicName: "maxLength",
|
|
31920
31920
|
isSignal: true,
|
|
31921
31921
|
isRequired: false,
|
|
31922
31922
|
transformFunction: null
|
|
@@ -31975,7 +31975,7 @@ var TextareaComponent = class TextareaComponent {
|
|
|
31975
31975
|
isSignal: true
|
|
31976
31976
|
}],
|
|
31977
31977
|
ngImport: i0,
|
|
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]=\"
|
|
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",
|
|
31979
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"],
|
|
31980
31980
|
dependencies: [
|
|
31981
31981
|
{
|
|
@@ -32050,7 +32050,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32050
32050
|
useExisting: forwardRef(() => TextareaComponent),
|
|
32051
32051
|
multi: true
|
|
32052
32052
|
}],
|
|
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]=\"
|
|
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",
|
|
32054
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"]
|
|
32055
32055
|
}]
|
|
32056
32056
|
}],
|
|
@@ -32187,11 +32187,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
32187
32187
|
required: false
|
|
32188
32188
|
}]
|
|
32189
32189
|
}],
|
|
32190
|
-
|
|
32190
|
+
maxLength: [{
|
|
32191
32191
|
type: i0.Input,
|
|
32192
32192
|
args: [{
|
|
32193
32193
|
isSignal: true,
|
|
32194
|
-
alias: "
|
|
32194
|
+
alias: "maxLength",
|
|
32195
32195
|
required: false
|
|
32196
32196
|
}]
|
|
32197
32197
|
}],
|
|
@@ -33777,7 +33777,7 @@ var ToastComponent = class ToastComponent {
|
|
|
33777
33777
|
focused = false;
|
|
33778
33778
|
position = input("bottom-right", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
|
|
33779
33779
|
size = input("sm", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
|
|
33780
|
-
|
|
33780
|
+
dismissible = input(true, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
|
|
33781
33781
|
containerClass = computed(() => `ea-toast-container ea-toast-container--${this.position()}`, ...ngDevMode ? [{ debugName: "containerClass" }] : /* istanbul ignore next */ []);
|
|
33782
33782
|
toastRole(variant) {
|
|
33783
33783
|
return variant === "error" || variant === "warning" ? "alert" : "status";
|
|
@@ -33838,9 +33838,9 @@ var ToastComponent = class ToastComponent {
|
|
|
33838
33838
|
isRequired: false,
|
|
33839
33839
|
transformFunction: null
|
|
33840
33840
|
},
|
|
33841
|
-
|
|
33842
|
-
classPropertyName: "
|
|
33843
|
-
publicName: "
|
|
33841
|
+
dismissible: {
|
|
33842
|
+
classPropertyName: "dismissible",
|
|
33843
|
+
publicName: "dismissible",
|
|
33844
33844
|
isSignal: true,
|
|
33845
33845
|
isRequired: false,
|
|
33846
33846
|
transformFunction: null
|
|
@@ -33854,7 +33854,7 @@ var ToastComponent = class ToastComponent {
|
|
|
33854
33854
|
isSignal: true
|
|
33855
33855
|
}],
|
|
33856
33856
|
ngImport: i0,
|
|
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 (
|
|
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",
|
|
33858
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"],
|
|
33859
33859
|
dependencies: [
|
|
33860
33860
|
{
|
|
@@ -33920,7 +33920,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
33920
33920
|
],
|
|
33921
33921
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
33922
33922
|
encapsulation: ViewEncapsulation.None,
|
|
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 (
|
|
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",
|
|
33924
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"]
|
|
33925
33925
|
}]
|
|
33926
33926
|
}],
|
|
@@ -33945,11 +33945,11 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
33945
33945
|
required: false
|
|
33946
33946
|
}]
|
|
33947
33947
|
}],
|
|
33948
|
-
|
|
33948
|
+
dismissible: [{
|
|
33949
33949
|
type: i0.Input,
|
|
33950
33950
|
args: [{
|
|
33951
33951
|
isSignal: true,
|
|
33952
|
-
alias: "
|
|
33952
|
+
alias: "dismissible",
|
|
33953
33953
|
required: false
|
|
33954
33954
|
}]
|
|
33955
33955
|
}]
|