@eagami/ui 5.17.0 → 5.17.2
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 +110 -12
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_mixins.scss +13 -0
- package/src/styles/_tooltip.scss +10 -1
- package/types/eagami-ui.d.ts +2 -2
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -4328,6 +4328,73 @@ function isRtl(element) {
|
|
|
4328
4328
|
return getComputedStyle(element).direction === 'rtl';
|
|
4329
4329
|
}
|
|
4330
4330
|
|
|
4331
|
+
/*
|
|
4332
|
+
* A modal `<dialog>` (`showModal()`) renders in the browser's top layer, which
|
|
4333
|
+
* paints above every z-index in the normal layer. An overlay portaled to
|
|
4334
|
+
* `<body>` therefore disappears behind the modal it was opened from, no matter
|
|
4335
|
+
* how high `--z-index-popover` climbs. The popover API is the only way to join
|
|
4336
|
+
* that layer; `manual` opts out of the UA's light-dismiss and Escape handling
|
|
4337
|
+
* so the owning component keeps full control of dismissal. Top-layer elements
|
|
4338
|
+
* stack in promotion order, so an overlay shown while a modal is open always
|
|
4339
|
+
* lands above it.
|
|
4340
|
+
*
|
|
4341
|
+
* Promotion is deliberately conditional: outside a top-layer container the
|
|
4342
|
+
* existing z-index scale already orders overlays against each other (toasts
|
|
4343
|
+
* above popovers, tooltips above both), and promoting unconditionally would
|
|
4344
|
+
* flatten that scale into "whatever opened last wins".
|
|
4345
|
+
*/
|
|
4346
|
+
const TOP_LAYER_CONTAINER = 'dialog:modal, :popover-open';
|
|
4347
|
+
// `selector()` takes one complex selector, so probing a comma-separated list
|
|
4348
|
+
// parses as invalid and answers false everywhere; test each selector alone
|
|
4349
|
+
let selectorSupport = null;
|
|
4350
|
+
function popoverSupported() {
|
|
4351
|
+
if (typeof HTMLElement === 'undefined' ||
|
|
4352
|
+
typeof HTMLElement.prototype.showPopover !== 'function' ||
|
|
4353
|
+
typeof CSS === 'undefined') {
|
|
4354
|
+
return false;
|
|
4355
|
+
}
|
|
4356
|
+
selectorSupport ??=
|
|
4357
|
+
CSS.supports?.('selector(dialog:modal)') === true &&
|
|
4358
|
+
CSS.supports?.('selector(:popover-open)') === true;
|
|
4359
|
+
return selectorSupport;
|
|
4360
|
+
}
|
|
4361
|
+
function isPromoted(el) {
|
|
4362
|
+
return el.hasAttribute('popover') && el.matches(':popover-open');
|
|
4363
|
+
}
|
|
4364
|
+
/**
|
|
4365
|
+
* Raises `surface` into the top layer when `anchor` sits inside something
|
|
4366
|
+
* that is already there. Callers must do this before measuring the surface: a
|
|
4367
|
+
* `popover` element is `display: none` until shown, so any rect read while it
|
|
4368
|
+
* is still hidden comes back zeroed.
|
|
4369
|
+
*/
|
|
4370
|
+
function enterTopLayer(surface, anchor) {
|
|
4371
|
+
if (!popoverSupported() || !surface.isConnected || isPromoted(surface)) {
|
|
4372
|
+
return;
|
|
4373
|
+
}
|
|
4374
|
+
if (!anchor.closest(TOP_LAYER_CONTAINER)) {
|
|
4375
|
+
return;
|
|
4376
|
+
}
|
|
4377
|
+
surface.setAttribute('popover', 'manual');
|
|
4378
|
+
try {
|
|
4379
|
+
surface.showPopover();
|
|
4380
|
+
}
|
|
4381
|
+
catch {
|
|
4382
|
+
// Refused promotion would leave the surface stuck at the UA's
|
|
4383
|
+
// `display: none`, so drop back to plain z-index stacking
|
|
4384
|
+
surface.removeAttribute('popover');
|
|
4385
|
+
}
|
|
4386
|
+
}
|
|
4387
|
+
/** Returns `surface` to the normal layer, undoing {@link enterTopLayer}. */
|
|
4388
|
+
function leaveTopLayer(surface) {
|
|
4389
|
+
if (!surface.hasAttribute('popover')) {
|
|
4390
|
+
return;
|
|
4391
|
+
}
|
|
4392
|
+
if (surface.isConnected && isPromoted(surface)) {
|
|
4393
|
+
surface.hidePopover();
|
|
4394
|
+
}
|
|
4395
|
+
surface.removeAttribute('popover');
|
|
4396
|
+
}
|
|
4397
|
+
|
|
4331
4398
|
/** True for cardinal placements that centre the popover on the perpendicular axis. */
|
|
4332
4399
|
function isCardinal(placement) {
|
|
4333
4400
|
return (placement === 'top' ||
|
|
@@ -4620,10 +4687,18 @@ class PopoverComponent {
|
|
|
4620
4687
|
const anchor = this.resolveAnchor();
|
|
4621
4688
|
const isOpen = this.open();
|
|
4622
4689
|
if (!surface || !anchor || !isOpen) {
|
|
4690
|
+
if (surface) {
|
|
4691
|
+
leaveTopLayer(surface);
|
|
4692
|
+
}
|
|
4623
4693
|
this.position.set(null);
|
|
4624
4694
|
this.stable.set(false);
|
|
4625
4695
|
return;
|
|
4626
4696
|
}
|
|
4697
|
+
// Join the top layer before the first measurement below, so a popover
|
|
4698
|
+
// opened from inside a modal is not painted behind it. Promoting first
|
|
4699
|
+
// also gives the surface layout: a `popover` element is `display: none`
|
|
4700
|
+
// until shown, and would measure as a zero-sized box.
|
|
4701
|
+
enterTopLayer(surface, anchor);
|
|
4627
4702
|
// Re-read inputs so signal subscriptions stay current after a re-open
|
|
4628
4703
|
this.placement();
|
|
4629
4704
|
this.offset();
|
|
@@ -4820,14 +4895,17 @@ class PopoverComponent {
|
|
|
4820
4895
|
first.focus();
|
|
4821
4896
|
}
|
|
4822
4897
|
}
|
|
4823
|
-
onEscape() {
|
|
4898
|
+
onEscape(event) {
|
|
4824
4899
|
if (!this.open() || !this.closeOnEscape()) {
|
|
4825
4900
|
return;
|
|
4826
4901
|
}
|
|
4902
|
+
// Consume the key, or a native modal hosting this popover reads the same
|
|
4903
|
+
// Escape as its own close request and both shut at once
|
|
4904
|
+
event.preventDefault();
|
|
4827
4905
|
this.closeRequested.emit();
|
|
4828
4906
|
}
|
|
4829
4907
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4830
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: PopoverComponent, isStandalone: true, selector: "ea-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, matchAnchorWidth: { classPropertyName: "matchAnchorWidth", publicName: "matchAnchorWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape()" }, properties: { "attr.role": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, viewQueries: [{ propertyName: "surfaceEl", first: true, predicate: ["surfaceEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The surface is rendered unconditionally so the `<ng-content/>` slot always\n exists. If we gated it on `@if (open())`, Angular would re-project the\n consumer's content at the popover host's position whenever the surface was\n absent, leaking menu items / picker controls into the document flow (made\n worse by `display: contents` on the host). Hiding via `display: none` keeps\n the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n #surfaceEl\n [class]=\"surfaceClass()\"\n [id]=\"surfaceId()\"\n [attr.role]=\"open() ? role() : null\"\n [attr.aria-label]=\"open() ? ariaLabel() : null\"\n [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n [attr.aria-hidden]=\"open() ? null : true\"\n [style]=\"surfaceStyle()\"\n (keydown)=\"onSurfaceKeydown($event)\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4908
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: PopoverComponent, isStandalone: true, selector: "ea-popover", inputs: { anchor: { classPropertyName: "anchor", publicName: "anchor", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "aria-labelledby", isSignal: true, isRequired: false, transformFunction: null }, trapFocus: { classPropertyName: "trapFocus", publicName: "trapFocus", isSignal: true, isRequired: false, transformFunction: null }, surfaceId: { classPropertyName: "surfaceId", publicName: "surfaceId", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null }, flip: { classPropertyName: "flip", publicName: "flip", isSignal: true, isRequired: false, transformFunction: null }, clamp: { classPropertyName: "clamp", publicName: "clamp", isSignal: true, isRequired: false, transformFunction: null }, matchAnchorWidth: { classPropertyName: "matchAnchorWidth", publicName: "matchAnchorWidth", isSignal: true, isRequired: false, transformFunction: null }, closeOnOutsideClick: { classPropertyName: "closeOnOutsideClick", publicName: "closeOnOutsideClick", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, scrollBehavior: { classPropertyName: "scrollBehavior", publicName: "scrollBehavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closeRequested: "closeRequested" }, host: { listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "onEscape($event)" }, properties: { "attr.role": "null", "attr.aria-label": "null", "attr.aria-labelledby": "null" } }, viewQueries: [{ propertyName: "surfaceEl", first: true, predicate: ["surfaceEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n The surface is rendered unconditionally so the `<ng-content/>` slot always\n exists. If we gated it on `@if (open())`, Angular would re-project the\n consumer's content at the popover host's position whenever the surface was\n absent, leaking menu items / picker controls into the document flow (made\n worse by `display: contents` on the host). Hiding via `display: none` keeps\n the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n #surfaceEl\n [class]=\"surfaceClass()\"\n [id]=\"surfaceId()\"\n [attr.role]=\"open() ? role() : null\"\n [attr.aria-label]=\"open() ? ariaLabel() : null\"\n [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n [attr.aria-hidden]=\"open() ? null : true\"\n [style]=\"surfaceStyle()\"\n (keydown)=\"onSurfaceKeydown($event)\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}.ea-popover__surface[popover]{inset:auto;overflow:visible;width:auto;height:auto;padding:0;margin:0;border:0;background:none;color:inherit}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4831
4909
|
}
|
|
4832
4910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
4833
4911
|
type: Component,
|
|
@@ -4835,13 +4913,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4835
4913
|
'[attr.role]': 'null',
|
|
4836
4914
|
'[attr.aria-label]': 'null',
|
|
4837
4915
|
'[attr.aria-labelledby]': 'null',
|
|
4838
|
-
}, template: "<!--\n The surface is rendered unconditionally so the `<ng-content/>` slot always\n exists. If we gated it on `@if (open())`, Angular would re-project the\n consumer's content at the popover host's position whenever the surface was\n absent, leaking menu items / picker controls into the document flow (made\n worse by `display: contents` on the host). Hiding via `display: none` keeps\n the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n #surfaceEl\n [class]=\"surfaceClass()\"\n [id]=\"surfaceId()\"\n [attr.role]=\"open() ? role() : null\"\n [attr.aria-label]=\"open() ? ariaLabel() : null\"\n [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n [attr.aria-hidden]=\"open() ? null : true\"\n [style]=\"surfaceStyle()\"\n (keydown)=\"onSurfaceKeydown($event)\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}\n"] }]
|
|
4916
|
+
}, template: "<!--\n The surface is rendered unconditionally so the `<ng-content/>` slot always\n exists. If we gated it on `@if (open())`, Angular would re-project the\n consumer's content at the popover host's position whenever the surface was\n absent, leaking menu items / picker controls into the document flow (made\n worse by `display: contents` on the host). Hiding via `display: none` keeps\n the projected DOM owned by the surface and out of the flow when closed.\n-->\n<div\n #surfaceEl\n [class]=\"surfaceClass()\"\n [id]=\"surfaceId()\"\n [attr.role]=\"open() ? role() : null\"\n [attr.aria-label]=\"open() ? ariaLabel() : null\"\n [attr.aria-labelledby]=\"open() ? ariaLabelledby() : null\"\n [attr.aria-hidden]=\"open() ? null : true\"\n [style]=\"surfaceStyle()\"\n (keydown)=\"onSurfaceKeydown($event)\">\n <ng-content />\n</div>\n", styles: [":host{display:contents}.ea-popover__surface{z-index:var(--z-index-popover);position:fixed;visibility:hidden;font-family:var(--font-family-sans)}.ea-popover__surface--positioned{visibility:visible}.ea-popover__surface[popover]{inset:auto;overflow:visible;width:auto;height:auto;padding:0;margin:0;border:0;background:none;color:inherit}\n"] }]
|
|
4839
4917
|
}], ctorParameters: () => [], propDecorators: { surfaceEl: [{ type: i0.ViewChild, args: ['surfaceEl', { isSignal: true }] }], anchor: [{ type: i0.Input, args: [{ isSignal: true, alias: "anchor", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-labelledby", required: false }] }], trapFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocus", required: false }] }], surfaceId: [{ type: i0.Input, args: [{ isSignal: true, alias: "surfaceId", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], flip: [{ type: i0.Input, args: [{ isSignal: true, alias: "flip", required: false }] }], clamp: [{ type: i0.Input, args: [{ isSignal: true, alias: "clamp", required: false }] }], matchAnchorWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "matchAnchorWidth", required: false }] }], closeOnOutsideClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnOutsideClick", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], scrollBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollBehavior", required: false }] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }], onDocumentClick: [{
|
|
4840
4918
|
type: HostListener,
|
|
4841
4919
|
args: ['document:click', ['$event']]
|
|
4842
4920
|
}], onEscape: [{
|
|
4843
4921
|
type: HostListener,
|
|
4844
|
-
args: ['document:keydown.escape']
|
|
4922
|
+
args: ['document:keydown.escape', ['$event']]
|
|
4845
4923
|
}] } });
|
|
4846
4924
|
|
|
4847
4925
|
/**
|
|
@@ -5662,6 +5740,10 @@ class TooltipDirective {
|
|
|
5662
5740
|
this.renderer.setStyle(this.tooltipEl, 'white-space', 'normal');
|
|
5663
5741
|
}
|
|
5664
5742
|
this.renderer.appendChild(document.body, this.tooltipEl);
|
|
5743
|
+
// Before any measuring below: a trigger inside a modal needs its bubble in
|
|
5744
|
+
// the top layer to be visible at all, and a promoted bubble only has layout
|
|
5745
|
+
// once shown.
|
|
5746
|
+
enterTopLayer(this.tooltipEl, this.el.nativeElement);
|
|
5665
5747
|
document.addEventListener('keydown', this.keydownHandler);
|
|
5666
5748
|
this.appendDescribedBy();
|
|
5667
5749
|
this.shrinkToContent();
|
|
@@ -5700,6 +5782,7 @@ class TooltipDirective {
|
|
|
5700
5782
|
}
|
|
5701
5783
|
if (this.tooltipEl) {
|
|
5702
5784
|
document.removeEventListener('keydown', this.keydownHandler);
|
|
5785
|
+
leaveTopLayer(this.tooltipEl);
|
|
5703
5786
|
this.tooltipEl.remove();
|
|
5704
5787
|
this.tooltipEl = null;
|
|
5705
5788
|
this.templateView?.destroy();
|
|
@@ -5805,6 +5888,12 @@ class TooltipDirective {
|
|
|
5805
5888
|
if (underBubble && !this.el.nativeElement.contains(underBubble)) {
|
|
5806
5889
|
let cursor = underBubble;
|
|
5807
5890
|
while (cursor && cursor !== document.body) {
|
|
5891
|
+
/* A fixed / sticky container that also holds the trigger (a modal
|
|
5892
|
+
dialog, a popover surface) is the surface the bubble sits on, not
|
|
5893
|
+
chrome covering it, so stop before mistaking it for an overlay. */
|
|
5894
|
+
if (cursor.contains(this.el.nativeElement)) {
|
|
5895
|
+
break;
|
|
5896
|
+
}
|
|
5808
5897
|
const pos = getComputedStyle(cursor).position;
|
|
5809
5898
|
if (pos === 'fixed' || pos === 'sticky') {
|
|
5810
5899
|
this.hide();
|
|
@@ -5814,8 +5903,8 @@ class TooltipDirective {
|
|
|
5814
5903
|
}
|
|
5815
5904
|
}
|
|
5816
5905
|
}
|
|
5817
|
-
this.renderer.setStyle(this.tooltipEl, 'top', `${top
|
|
5818
|
-
this.renderer.setStyle(this.tooltipEl, 'left', `${left
|
|
5906
|
+
this.renderer.setStyle(this.tooltipEl, 'top', `${top}px`);
|
|
5907
|
+
this.renderer.setStyle(this.tooltipEl, 'left', `${left}px`);
|
|
5819
5908
|
}
|
|
5820
5909
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: TooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
5821
5910
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: TooltipDirective, isStandalone: true, selector: "[eaTooltip]", inputs: { eaTooltip: { classPropertyName: "eaTooltip", publicName: "eaTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
@@ -9922,8 +10011,14 @@ class DrawerComponent {
|
|
|
9922
10011
|
this.open.set(false);
|
|
9923
10012
|
this.closed.emit();
|
|
9924
10013
|
}
|
|
9925
|
-
// Non-modal push drawers do not emit `cancel`, so Escape is handled here
|
|
10014
|
+
// Non-modal push drawers do not emit `cancel`, so Escape is handled here.
|
|
10015
|
+
// An overlay inside the drawer (menu, dropdown, picker) consumes the key it
|
|
10016
|
+
// acts on, which a modal drawer honours through `cancel`; respect it here too
|
|
10017
|
+
// so one press never dismisses both the overlay and the drawer.
|
|
9926
10018
|
handleKeydown(event) {
|
|
10019
|
+
if (event.defaultPrevented) {
|
|
10020
|
+
return;
|
|
10021
|
+
}
|
|
9927
10022
|
if (this.mode() === 'push' && this.closeOnEscape() && event.key === 'Escape') {
|
|
9928
10023
|
this.handleClose();
|
|
9929
10024
|
}
|
|
@@ -12501,14 +12596,17 @@ class MenuComponent {
|
|
|
12501
12596
|
this.focusItem(items[next]);
|
|
12502
12597
|
}
|
|
12503
12598
|
}
|
|
12504
|
-
onEscape() {
|
|
12599
|
+
onEscape(event) {
|
|
12505
12600
|
if (!this.open()) {
|
|
12506
12601
|
return;
|
|
12507
12602
|
}
|
|
12603
|
+
// Consume the key, or a native modal hosting this menu reads the same
|
|
12604
|
+
// Escape as its own close request and both shut at once
|
|
12605
|
+
event.preventDefault();
|
|
12508
12606
|
this.close(true);
|
|
12509
12607
|
}
|
|
12510
12608
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12511
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape()" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n [anchor]=\"triggerEl()\"\n [open]=\"open()\"\n [placement]=\"placement()\"\n role=\"menu\"\n [surfaceId]=\"id()\"\n [aria-label]=\"resolvedAriaLabel()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n #listEl\n class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n [style.max-height]=\"maxHeight()\">\n <ng-content />\n </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12609
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: MenuComponent, isStandalone: true, selector: "ea-menu", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, host: { listeners: { "document:keydown": "onKeydown($event)", "document:keydown.escape": "onEscape($event)" } }, viewQueries: [{ propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<ea-popover\n [anchor]=\"triggerEl()\"\n [open]=\"open()\"\n [placement]=\"placement()\"\n role=\"menu\"\n [surfaceId]=\"id()\"\n [aria-label]=\"resolvedAriaLabel()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n #listEl\n class=\"ea-menu__list ea-menu__list--{{ size() }}\"\n [style.max-height]=\"maxHeight()\">\n <ng-content />\n </div>\n</ea-popover>\n", styles: [":host{display:contents}.ea-menu__list{min-width:10em;padding:.25em 0;overflow-y:auto;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-menu-list-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-menu__list{border:1px solid CanvasText}}.ea-menu__list--xs{font-size:var(--font-size-xs)}.ea-menu__list--sm{font-size:var(--font-size-sm)}.ea-menu__list--md{font-size:var(--font-size-md)}.ea-menu__list--lg{font-size:var(--font-size-lg)}.ea-menu__list--xl{font-size:var(--font-size-xl)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12512
12610
|
}
|
|
12513
12611
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MenuComponent, decorators: [{
|
|
12514
12612
|
type: Component,
|
|
@@ -12518,7 +12616,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
12518
12616
|
args: ['document:keydown', ['$event']]
|
|
12519
12617
|
}], onEscape: [{
|
|
12520
12618
|
type: HostListener,
|
|
12521
|
-
args: ['document:keydown.escape']
|
|
12619
|
+
args: ['document:keydown.escape', ['$event']]
|
|
12522
12620
|
}] } });
|
|
12523
12621
|
|
|
12524
12622
|
/**
|
|
@@ -16492,7 +16590,7 @@ class ToastComponent {
|
|
|
16492
16590
|
}
|
|
16493
16591
|
}
|
|
16494
16592
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16495
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }], ngImport: i0, 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
|
|
16593
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ToastComponent, isStandalone: true, selector: "ea-toast", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "containerEl", first: true, predicate: ["containerEl"], descendants: true, isSignal: true }], ngImport: i0, 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 <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\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", 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--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;font-size:1em}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;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"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }, { kind: "component", type: CheckCircleIconComponent, selector: "ea-icon-check-circle" }, { kind: "component", type: InfoIconComponent, selector: "ea-icon-info" }, { kind: "component", type: AlertTriangleIconComponent, selector: "ea-icon-alert-triangle" }, { kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16496
16594
|
}
|
|
16497
16595
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ToastComponent, decorators: [{
|
|
16498
16596
|
type: Component,
|
|
@@ -16503,7 +16601,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
16503
16601
|
InfoIconComponent,
|
|
16504
16602
|
AlertTriangleIconComponent,
|
|
16505
16603
|
AlertCircleIconComponent,
|
|
16506
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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
|
|
16604
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 <span class=\"ea-toast__message\">{{ toast.message }}</span>\n @if (clearable()) {\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", 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--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;font-size:1em}.ea-toast__message{flex:1;min-width:0}.ea-toast__close{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:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-toast__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-toast__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toast__close:disabled{cursor:not-allowed;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"] }]
|
|
16507
16605
|
}], propDecorators: { containerEl: [{ type: i0.ViewChild, args: ['containerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }] } });
|
|
16508
16606
|
|
|
16509
16607
|
class ChevronsLeftIconComponent extends IconComponentBase {
|