@eagami/ui 5.17.1 → 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.
Files changed (6) hide show
  1. package/fesm2022/eagami-ui.mjs +108 -10
  2. package/fesm2022/eagami-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/src/styles/_mixins.scss +13 -0
  5. package/src/styles/_tooltip.scss +10 -1
  6. 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 + window.scrollY}px`);
5818
- this.renderer.setStyle(this.tooltipEl, 'left', `${left + window.scrollX}px`);
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
  /**