@ember-eui/core 15.0.0 → 16.0.0

package/dist/components/eui-input-popover.js

@@ -1,8 +1,10 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { cached, tracked } from '@glimmer/tracking';
 import { concat, hash } from '@ember/helper';
 import { action } from '@ember/object';
 import { focusTrap } from 'ember-focus-trap';
+import { focusTrapFactory } from '../-private/focus-trap-registry.js';
+import { modifier } from 'ember-modifier';
 import onKey from 'ember-keyboard/modifiers/on-key';
 import { not } from 'ember-truth-helpers';
 import { tabbable } from 'tabbable';
@@ -10,11 +12,42 @@ import randomId from '../-private/random-id.js';
 import { argOrDefaultDecorator } from '../helpers/arg-or-default.js';
 import ResizeObserver from '../modifiers/resize-observer.js';
 import { cascadingMenuKeys } from '../utils/accesibility/cascading-menu-keys.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles } from '../utils/eui/styles.js';
+import { c0 as logicalCSS, ay as euiFormVariables } from '../styles.generated-SYAxYhey.js';
 import EuiPopoverComponent from './eui-popover.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+const closeOnScrollModifier = modifier((_element, [enabled, panel, input, close]) => {
+  if (!enabled || !panel) return;
+  const onScroll = event => {
+    const target = event.target;
+    if (!input || !target) return;
+    if (panel.contains(target) || input.contains(target)) return;
+    if (!target.contains(input)) return;
+    close?.();
+  };
+  const timeoutId = setTimeout(() => {
+    window.addEventListener('scroll', onScroll, {
+      passive: true,
+      capture: true
+    });
+  }, 500);
+  return () => {
+    window.removeEventListener('scroll', onScroll, {
+      capture: true
+    });
+    clearTimeout(timeoutId);
+  };
+});
+
+/**
+ * A popover attached below an input and as wide as it, e.g. for a custom
+ * picker. Takes EuiPopover's args (`@isOpen`, `@closePopover`, …).
+ */
+
 class EuiInputPopoverComponent extends Component {
   static {
     g(this.prototype, "anchorPosition", [argOrDefaultDecorator('downLeft')]);
@@ -40,12 +73,32 @@ class EuiInputPopoverComponent extends Component {
     g(this.prototype, "disableFocusTrap", [argOrDefaultDecorator(false)]);
   }
   #disableFocusTrap = (i(this, "disableFocusTrap"), void 0);
+  static {
+    g(this.prototype, "offset", [argOrDefaultDecorator(2)]);
+  }
+  #offset = (i(this, "offset"), void 0);
+  static {
+    g(this.prototype, "repositionToCrossAxis", [argOrDefaultDecorator(false)]);
+  }
+  #repositionToCrossAxis = (i(this, "repositionToCrossAxis"), void 0);
+  /** Upstream: `max-width` of the form controls unless `@fullWidth`. */get rootCss() {
+    if (this.fullWidth) return undefined;
+    const context = getEuiThemeContext(this);
+    const {
+      maxWidth
+    } = useEuiBorealisStyles(context, euiFormVariables);
+    return `${logicalCSS('max-width', maxWidth)};label:EuiInputPopover;`;
+  }
+  //State
+  static {
+    n(this.prototype, "rootCss", [cached]);
+  }
   static {
     g(this.prototype, "panel", [tracked], function () {
       return null;
     });
   }
-  #panel = (i(this, "panel"), void 0); //State
+  #panel = (i(this, "panel"), void 0);
   static {
     g(this.prototype, "input", [tracked], function () {
       return null;
@@ -76,9 +129,12 @@ class EuiInputPopoverComponent extends Component {
       panel,
       inputWidth
     } = this;
-    const newWidth = width || inputWidth;
+    const inputOrWidth = width || inputWidth;
+    const minWidth = this.args.panelMinWidth ?? 0;
+    // upstream: the input's width, at least `@panelMinWidth`
+    const newWidth = inputOrWidth && inputOrWidth < minWidth ? minWidth : inputOrWidth;
     if (panel && !!newWidth) {
-      panel.style.width = `${newWidth}px`;
+      panel.style.inlineSize = `${newWidth}px`;
       this.args.onPanelResize?.(newWidth);
     }
   }
@@ -120,14 +176,16 @@ class EuiInputPopoverComponent extends Component {
     this.input = null;
   }
   static {
-    setComponentTemplate(precompileTemplate("{{#let (randomId) as |id|}}\n  <EuiPopover class=\"euiInputPopover\n      {{if this.fullWidth \"euiInputPopover--fullWidth\"}}\" @ownFocus={{false}} @initialFocus={{@initialFocus}} @buttonRef={{this.didInsertInput}} @panelRef={{this.didInsertPanel}} @anchorPosition={{this.anchorPosition}} @panelPaddingSize={{this.panelPaddingSize}} @attachToAnchor={{this.attachToAnchor}} @display={{this.display}} @closePopover={{@closePopover}} @isOpen={{@isOpen}} ...attributes>\n    <:button>\n      <div {{resizeObserver onResize=this.onResize}}>\n        {{yield to=\"input\"}}\n      </div>\n    </:button>\n    <:content>\n      <div id={{id}} {{onKey \"_all\" this.onKeyDown}} {{focusTrap isActive=(not this.disableFocusTrap) focusTrapOptions=(hash clickOutsideDeactivates=true returnFocusOnDeactivate=false fallbackFocus=(concat \"#\" id))}}>\n        {{yield to=\"content\"}}\n      </div>\n    </:content>\n  </EuiPopover>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("{{#let (randomId) as |id|}}\n  <EuiPopover class=\"euiInputPopover\" @rootCss={{this.rootCss}} @css={{@css}} @panelCss={{@panelCss}} @offset={{this.offset}} @repositionToCrossAxis={{this.repositionToCrossAxis}} @ownFocus={{false}} @initialFocus={{@initialFocus}} @buttonRef={{this.didInsertInput}} @panelRef={{this.didInsertPanel}} @anchorPosition={{this.anchorPosition}} @panelPaddingSize={{this.panelPaddingSize}} @attachToAnchor={{this.attachToAnchor}} @display={{this.display}} @closePopover={{@closePopover}} @isOpen={{@isOpen}} @repositionOnScroll={{@repositionOnScroll}} @panelClassName={{@panelClassName}} @panelStyle={{@panelStyle}} @anchorClassName={{@anchorClassName}} @zIndex={{@zIndex}} @container={{@container}} @buffer={{@buffer}} @insert={{@insert}} @hasArrow={{@hasArrow}} @popoverScreenReaderText={{@popoverScreenReaderText}} @ariaLabel={{@ariaLabel}} @ariaLabelledBy={{@ariaLabelledBy}} @popoverRef={{@popoverRef}} @portalRef={{@portalRef}} @onTrapDeactivation={{@onTrapDeactivation}} @shouldAccountForOtherPopovers={{@shouldAccountForOtherPopovers}} ...attributes>\n    <:button>\n      <div {{resizeObserver onResize=this.onResize}}>\n        {{yield to=\"input\"}}\n      </div>\n    </:button>\n    <:content>\n      <div id={{id}} {{onKey \"_all\" this.onKeyDown}} {{closeOnScrollModifier @closeOnScroll this.panel this.input @closePopover}} {{focusTrap _createFocusTrap=focusTrapFactory isActive=(not this.disableFocusTrap) focusTrapOptions=(hash clickOutsideDeactivates=true returnFocusOnDeactivate=false fallbackFocus=(concat \"#\" id))}}>\n        {{yield to=\"content\"}}\n      </div>\n    </:content>\n  </EuiPopover>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         randomId,
         EuiPopover: EuiPopoverComponent,
         resizeObserver: ResizeObserver,
         onKey,
+        closeOnScrollModifier,
         focusTrap,
+        focusTrapFactory,
         not,
         hash,
         concat

package/dist/components/eui-input-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-input-popover.js","sources":["../../src/components/eui-input-popover.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { concat } from '@ember/helper';\nimport { hash } from '@ember/helper';\nimport { action } from '@ember/object';\n\nimport { focusTrap } from 'ember-focus-trap';\nimport onKey from 'ember-keyboard/modifiers/on-key';\nimport { not } from 'ember-truth-helpers';\nimport { tabbable } from 'tabbable';\n\nimport randomId from '../-private/random-id.ts';\nimport { argOrDefaultDecorator } from '../helpers/arg-or-default.ts';\nimport resizeObserver from '../modifiers/resize-observer.ts';\nimport { cascadingMenuKeys } from '../utils/accesibility/index.ts';\nimport EuiPopover from './eui-popover.gts';\n\nimport type { EuiPopoverArgs } from './eui-popover';\n\nexport interface EuiInputPopoverArgs\n  extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {\n  /**\n   * Lets focus leave the popover; Tab then closes it. Defaults to `false`\n   * (Tab cycles through the popover, closing after its last element).\n   */\n  disableFocusTrap?: boolean;\n  /** Stretches the input (and popover) to its container's width. */\n  fullWidth?: boolean;\n  /** @deprecated Has no effect, use the `<:input>` block. */\n  input?: EuiPopoverArgs['button'];\n  /** @deprecated Has no effect. */\n  inputRef?: EuiPopoverArgs['buttonRef'];\n  /** Called with the popover's new width when the input resizes. */\n  onPanelResize?: (width?: number) => void;\n}\n\n/**\n * A popover attached below an input and as wide as it, e.g. for a custom\n * picker. Takes EuiPopover's args (`@isOpen`, `@closePopover`, …).\n */\nexport interface EuiInputPopoverSignature {\n  Element: HTMLElement;\n  Args: EuiInputPopoverArgs;\n  Blocks: {\n    /** Unused, use `<:input>` and `<:content>`. */\n    default: [\n      {\n        closePopover: () => void;\n        isOpen: boolean;\n      },\n      {\n        input: HTMLElement;\n        content: HTMLElement;\n      }\n    ];\n    /** The input the popover attaches to; open it on focus or typing. */\n    input: [];\n    /** The popover's content, as wide as the input. */\n    content: [];\n  };\n}\n\nexport default class EuiInputPopoverComponent extends Component<EuiInputPopoverSignature> {\n  // Defaults\n  @argOrDefaultDecorator('downLeft') anchorPosition!: EuiPopoverArgs['anchorPosition'];\n  @argOrDefaultDecorator(true) attachToAnchor!: boolean;\n  @argOrDefaultDecorator('block') display!: EuiPopoverArgs['display'];\n  @argOrDefaultDecorator('s') panelPaddingSize!: EuiPopoverArgs['panelPaddingSize'];\n  @argOrDefaultDecorator(false) fullWidth!: boolean;\n  @argOrDefaultDecorator(false) disableFocusTrap!: boolean;\n\n  //State\n  @tracked panel: HTMLElement | null = null;\n  @tracked input: HTMLElement | null = null;\n  @tracked inputWidth!: number;\n  ///\n\n  @action\n  didInsertPanel(panel: HTMLElement | null): void {\n    this.panel = panel;\n    this.setPanelWidth();\n  }\n\n  @action\n  didInsertInput(input: HTMLElement): void {\n    this.input = input;\n    this.onResize();\n  }\n\n  @action\n  setPanelWidth(width?: number): void {\n    const { panel, inputWidth } = this;\n    const newWidth = width || inputWidth;\n\n    if (panel && !!newWidth) {\n      panel.style.width = `${newWidth}px`;\n      this.args.onPanelResize?.(newWidth);\n    }\n  }\n\n  @action\n  onResize(): void {\n    const { input } = this;\n\n    if (input) {\n      const width = input.getBoundingClientRect().width;\n\n      this.inputWidth = width;\n      this.setPanelWidth(width);\n    }\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    const { panel } = this;\n\n    if (panel && event.key === cascadingMenuKeys.TAB) {\n      const tabbableItems = tabbable(panel).filter(\n        (el: HTMLElement | SVGElement) => {\n          return (\n            Array.from(el.attributes)\n              .map((el) => el.name)\n              .indexOf('data-focus-guard') < 0\n          );\n        }\n      );\n\n      if (\n        this.args.disableFocusTrap ||\n        (tabbableItems.length &&\n          tabbableItems[tabbableItems.length - 1] === document.activeElement)\n      ) {\n        this.args.closePopover?.();\n      }\n    }\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    this.panel = null;\n    this.input = null;\n  }\n\n  <template>\n    {{#let (randomId) as |id|}}\n      <EuiPopover\n        class=\"euiInputPopover\n          {{if this.fullWidth 'euiInputPopover--fullWidth'}}\"\n        @ownFocus={{false}}\n        @initialFocus={{@initialFocus}}\n        @buttonRef={{this.didInsertInput}}\n        @panelRef={{this.didInsertPanel}}\n        @anchorPosition={{this.anchorPosition}}\n        @panelPaddingSize={{this.panelPaddingSize}}\n        @attachToAnchor={{this.attachToAnchor}}\n        @display={{this.display}}\n        @closePopover={{@closePopover}}\n        @isOpen={{@isOpen}}\n        ...attributes\n      >\n        <:button>\n          <div {{resizeObserver onResize=this.onResize}}>\n            {{yield to=\"input\"}}\n          </div>\n        </:button>\n        <:content>\n          <div\n            id={{id}}\n            {{onKey \"_all\" this.onKeyDown}}\n            {{focusTrap\n              isActive=(not this.disableFocusTrap)\n              focusTrapOptions=(hash\n                clickOutsideDeactivates=true\n                returnFocusOnDeactivate=false\n                fallbackFocus=(concat \"#\" id)\n              )\n            }}\n          >\n            {{yield to=\"content\"}}\n          </div>\n        </:content>\n      </EuiPopover>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiInputPopoverComponent","Component","g","prototype","argOrDefaultDecorator","i","tracked","didInsertPanel","panel","setPanelWidth","n","action","didInsertInput","input","onResize","width","inputWidth","newWidth","style","args","onPanelResize","getBoundingClientRect","onKeyDown","event","key","cascadingMenuKeys","TAB","tabbableItems","tabbable","filter","el","Array","from","attributes","map","name","indexOf","disableFocusTrap","length","document","activeElement","closePopover","willDestroy","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","EuiPopover","resizeObserver","onKey","focusTrap","not","hash","concat"],"mappings":"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"}
+{"version":3,"file":"eui-input-popover.js","sources":["../../src/components/eui-input-popover.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { concat } from '@ember/helper';\nimport { hash } from '@ember/helper';\nimport { action } from '@ember/object';\n\nimport { focusTrap } from 'ember-focus-trap';\nimport { focusTrapFactory } from '../-private/focus-trap-registry.ts';\nimport { modifier } from 'ember-modifier';\nimport onKey from 'ember-keyboard/modifiers/on-key';\nimport { not } from 'ember-truth-helpers';\nimport { tabbable } from 'tabbable';\n\nimport randomId from '../-private/random-id.ts';\nimport { argOrDefaultDecorator } from '../helpers/arg-or-default.ts';\nimport resizeObserver from '../modifiers/resize-observer.ts';\nimport { cascadingMenuKeys } from '../utils/accesibility/index.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport {\n  euiFormVariables,\n  logicalCSS\n} from '../utils/eui/styles.generated.ts';\nimport EuiPopover from './eui-popover.gts';\n\nimport type { EuiPopoverArgs } from './eui-popover';\n\n/**\n * Upstream `closeOnScroll`: after a 500ms grace period (scroll events fire\n * when the panel is appended), closes on a page scroll of an element that\n * contains the input, ignoring scrolls inside the input or the panel.\n */\nconst closeOnScrollModifier = modifier(\n  (\n    _element: HTMLElement,\n    [enabled, panel, input, close]: [\n      boolean | undefined,\n      HTMLElement | null,\n      HTMLElement | null,\n      (() => void) | undefined\n    ]\n  ) => {\n    if (!enabled || !panel) return;\n\n    const onScroll = (event: Event) => {\n      const target = event.target as Node | null;\n\n      if (!input || !target) return;\n      if (panel.contains(target) || input.contains(target)) return;\n      if (!target.contains(input)) return;\n\n      close?.();\n    };\n    const timeoutId = setTimeout(() => {\n      window.addEventListener('scroll', onScroll, {\n        passive: true,\n        capture: true\n      });\n    }, 500);\n\n    return () => {\n      window.removeEventListener('scroll', onScroll, { capture: true });\n      clearTimeout(timeoutId);\n    };\n  }\n);\n\nexport interface EuiInputPopoverArgs\n  extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {\n  /**\n   * Lets focus leave the popover; Tab then closes it. Defaults to `false`\n   * (Tab cycles through the popover, closing after its last element).\n   */\n  disableFocusTrap?: boolean;\n  /**\n   * Closes the popover when the page (or an element containing the input)\n   * scrolls. Defaults to `false`.\n   */\n  closeOnScroll?: boolean;\n  /**\n   * Stretches the input (and popover) to its container's width. Otherwise\n   * the popover is at most the form max width (upstream). Defaults to\n   * `false`.\n   */\n  fullWidth?: boolean;\n  /**\n   * Minimum width of the panel, when the input is narrower. Defaults to `0`.\n   */\n  panelMinWidth?: number;\n  /** @deprecated Has no effect, use the `<:input>` block. */\n  input?: EuiPopoverArgs['button'];\n  /** @deprecated Has no effect. */\n  inputRef?: EuiPopoverArgs['buttonRef'];\n  /** Called with the popover's new width when the input resizes. */\n  onPanelResize?: (width?: number) => void;\n}\n\n/**\n * A popover attached below an input and as wide as it, e.g. for a custom\n * picker. Takes EuiPopover's args (`@isOpen`, `@closePopover`, …).\n */\nexport interface EuiInputPopoverSignature {\n  Element: HTMLElement;\n  Args: EuiInputPopoverArgs;\n  Blocks: {\n    /** Unused, use `<:input>` and `<:content>`. */\n    default: [\n      {\n        closePopover: () => void;\n        isOpen: boolean;\n      },\n      {\n        input: HTMLElement;\n        content: HTMLElement;\n      }\n    ];\n    /** The input the popover attaches to; open it on focus or typing. */\n    input: [];\n    /** The popover's content, as wide as the input. */\n    content: [];\n  };\n}\n\nexport default class EuiInputPopoverComponent extends Component<EuiInputPopoverSignature> {\n  // Defaults\n  @argOrDefaultDecorator('downLeft') anchorPosition!: EuiPopoverArgs['anchorPosition'];\n  @argOrDefaultDecorator(true) attachToAnchor!: boolean;\n  @argOrDefaultDecorator('block') display!: EuiPopoverArgs['display'];\n  @argOrDefaultDecorator('s') panelPaddingSize!: EuiPopoverArgs['panelPaddingSize'];\n  @argOrDefaultDecorator(false) fullWidth!: boolean;\n  @argOrDefaultDecorator(false) disableFocusTrap!: boolean;\n  @argOrDefaultDecorator(2) offset!: number;\n  @argOrDefaultDecorator(false) repositionToCrossAxis!: boolean;\n\n  /** Upstream: `max-width` of the form controls unless `@fullWidth`. */\n  @cached\n  get rootCss(): string | undefined {\n    if (this.fullWidth) return undefined;\n\n    const context = getEuiThemeContext(this);\n    const { maxWidth } = useEuiBorealisStyles(context, euiFormVariables);\n\n    return `${logicalCSS('max-width', maxWidth)};label:EuiInputPopover;`;\n  }\n\n  //State\n  @tracked panel: HTMLElement | null = null;\n  @tracked input: HTMLElement | null = null;\n  @tracked inputWidth!: number;\n  ///\n\n  @action\n  didInsertPanel(panel: HTMLElement | null): void {\n    this.panel = panel;\n    this.setPanelWidth();\n  }\n\n  @action\n  didInsertInput(input: HTMLElement): void {\n    this.input = input;\n    this.onResize();\n  }\n\n  @action\n  setPanelWidth(width?: number): void {\n    const { panel, inputWidth } = this;\n    const inputOrWidth = width || inputWidth;\n    const minWidth = this.args.panelMinWidth ?? 0;\n    // upstream: the input's width, at least `@panelMinWidth`\n    const newWidth =\n      inputOrWidth && inputOrWidth < minWidth ? minWidth : inputOrWidth;\n\n    if (panel && !!newWidth) {\n      panel.style.inlineSize = `${newWidth}px`;\n      this.args.onPanelResize?.(newWidth);\n    }\n  }\n\n  @action\n  onResize(): void {\n    const { input } = this;\n\n    if (input) {\n      const width = input.getBoundingClientRect().width;\n\n      this.inputWidth = width;\n      this.setPanelWidth(width);\n    }\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    const { panel } = this;\n\n    if (panel && event.key === cascadingMenuKeys.TAB) {\n      const tabbableItems = tabbable(panel).filter(\n        (el: HTMLElement | SVGElement) => {\n          return (\n            Array.from(el.attributes)\n              .map((el) => el.name)\n              .indexOf('data-focus-guard') < 0\n          );\n        }\n      );\n\n      if (\n        this.args.disableFocusTrap ||\n        (tabbableItems.length &&\n          tabbableItems[tabbableItems.length - 1] === document.activeElement)\n      ) {\n        this.args.closePopover?.();\n      }\n    }\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    this.panel = null;\n    this.input = null;\n  }\n\n  <template>\n    {{#let (randomId) as |id|}}\n      <EuiPopover\n        class=\"euiInputPopover\"\n        @rootCss={{this.rootCss}}\n        @css={{@css}}\n        @panelCss={{@panelCss}}\n        @offset={{this.offset}}\n        @repositionToCrossAxis={{this.repositionToCrossAxis}}\n        @ownFocus={{false}}\n        @initialFocus={{@initialFocus}}\n        @buttonRef={{this.didInsertInput}}\n        @panelRef={{this.didInsertPanel}}\n        @anchorPosition={{this.anchorPosition}}\n        @panelPaddingSize={{this.panelPaddingSize}}\n        @attachToAnchor={{this.attachToAnchor}}\n        @display={{this.display}}\n        @closePopover={{@closePopover}}\n        @isOpen={{@isOpen}}\n        @repositionOnScroll={{@repositionOnScroll}}\n        @panelClassName={{@panelClassName}}\n        @panelStyle={{@panelStyle}}\n        @anchorClassName={{@anchorClassName}}\n        @zIndex={{@zIndex}}\n        @container={{@container}}\n        @buffer={{@buffer}}\n        @insert={{@insert}}\n        @hasArrow={{@hasArrow}}\n        @popoverScreenReaderText={{@popoverScreenReaderText}}\n        @ariaLabel={{@ariaLabel}}\n        @ariaLabelledBy={{@ariaLabelledBy}}\n        @popoverRef={{@popoverRef}}\n        @portalRef={{@portalRef}}\n        @onTrapDeactivation={{@onTrapDeactivation}}\n        @shouldAccountForOtherPopovers={{@shouldAccountForOtherPopovers}}\n        ...attributes\n      >\n        <:button>\n          <div {{resizeObserver onResize=this.onResize}}>\n            {{yield to=\"input\"}}\n          </div>\n        </:button>\n        <:content>\n          <div\n            id={{id}}\n            {{onKey \"_all\" this.onKeyDown}}\n            {{closeOnScrollModifier\n              @closeOnScroll\n              this.panel\n              this.input\n              @closePopover\n            }}\n            {{focusTrap\n          _createFocusTrap=focusTrapFactory\n              isActive=(not this.disableFocusTrap)\n              focusTrapOptions=(hash\n                clickOutsideDeactivates=true\n                returnFocusOnDeactivate=false\n                fallbackFocus=(concat \"#\" id)\n              )\n            }}\n          >\n            {{yield to=\"content\"}}\n          </div>\n        </:content>\n      </EuiPopover>\n    {{/let}}\n  </template>\n}\n"],"names":["closeOnScrollModifier","modifier","_element","enabled","panel","input","close","onScroll","event","target","contains","timeoutId","setTimeout","window","addEventListener","passive","capture","removeEventListener","clearTimeout","EuiInputPopoverComponent","Component","g","prototype","argOrDefaultDecorator","i","rootCss","fullWidth","undefined","context","getEuiThemeContext","maxWidth","useEuiBorealisStyles","euiFormVariables","logicalCSS","n","cached","tracked","didInsertPanel","setPanelWidth","action","didInsertInput","onResize","width","inputWidth","inputOrWidth","minWidth","args","panelMinWidth","newWidth","style","inlineSize","onPanelResize","getBoundingClientRect","onKeyDown","key","cascadingMenuKeys","TAB","tabbableItems","tabbable","filter","el","Array","from","attributes","map","name","indexOf","disableFocusTrap","length","document","activeElement","closePopover","willDestroy","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","EuiPopover","resizeObserver","onKey","focusTrap","focusTrapFactory","not","hash","concat"],"mappings":"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"}

package/dist/components/eui-key-pad-menu-item.js

@@ -1,37 +1,167 @@
-import { helper } from '@ember/component/helper';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
-import { eq, not, and } from 'ember-truth-helpers';
-import randomId from '../-private/random-id.js';
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
+import { randomId } from '../-private/random-id.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { euiKeyPadMenuItemChildStyles, euiKeyPadMenuItemStyles } from '../utils/eui/lists.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
 import EuiBetaBadge from './eui-beta-badge.js';
 import EuiCheckbox from './eui-checkbox.js';
+import { isValidHref, getSecureRelForTarget } from './eui-link.js';
 import EuiRadio from './eui-radio.js';
+import EuiMaybeToolTip from '../-private/eui-maybe-tool-tip.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
-const charAt = helper(function ([str, num]) {
-  return str?.charAt?.(num);
-});
-const EuiKeyPadMenuItem = setComponentTemplate(precompileTemplate("{{#let (if @checkable \"label\" (if (and @href (not @isDisabled)) \"a\" \"button\")) (argOrDefault @id (randomId)) (and @href (not @isDisabled)) as |ElementTag itemId useHref|}}\n  {{#let (element ElementTag) as |TagElement|}}\n    <TagElement href={{if useHref @href}} target={{if useHref @target}} aria-current={{if (and useHref @isSelected) \"true\"}} for={{if @checkable itemId}} disabled={{if (and (not useHref) (not @checkable)) @isDisabled}} type={{if (and (not useHref) (not @checkable)) \"button\"}} aria-pressed={{if (and (not useHref) (not @checkable)) (if @isSelected \"true\" \"false\")}} class={{classNames \"euiKeyPadMenuItem\" (if @betaBadgeLabel \"euiKeyPadMenuItem--hasBetaBadge\") (if @checkable \"euiKeyPadMenuItem--checkable\") (if @isDisabled \"euiKeyPadMenuItem-isDisabled\") (if @isSelected \"euiKeyPadMenuItem-isSelected\")}} rel={{if useHref \"noreferrer\"}} {{!--@glint-expect-error--}} ...attributes>\n      <span class=\"euiKeyPadMenuItem__inner\">\n        {{#if @checkable}}\n          {{#if (eq @checkable \"single\")}}\n            {{!-- template-lint-disable no-duplicate-id --}}\n            <EuiRadio id={{itemId}} @containerClass=\"euiKeyPadMenuItem__checkableInput\" @checked={{@isSelected}} @disabled={{@isDisabled}} @name={{@name}} value={{@value}} {{on \"change\" (fn @onChange itemId @value)}} />\n          {{else}}\n            <EuiCheckbox id={{itemId}} @containerClass=\"euiKeyPadMenuItem__checkableInput\" @checked={{@isSelected}} @disabled={{@isDisabled}} @name={{@name}} {{on \"change\" (fn @onChange itemId)}} />\n          {{/if}}\n        {{else if @betaBadgeLabel}}\n          <EuiBetaBadge @size=\"s\" @color=\"subdued\" class=\"euiKeyPadMenuItem__betaBadge\" @label={{charAt @betaBadgeLabel 0}} @title={{@betaBadgeLabel}} @iconType={{@betaBadgeIconType}} @tooltipContent={{@betaBadgeTooltipContent}} />\n        {{/if}}\n        <span class=\"euiKeyPadMenuItem__icon\">{{yield}}</span>\n        <span class=\"euiKeyPadMenuItem__label\">{{@label}}</span>\n      </span>\n    </TagElement>\n\n  {{/let}}\n{{/let}}", {
+/** The item's element (`a`, `button` or `label`). */const KeyPadMenuItemElement = setComponentTemplate(precompileTemplate("{{#if @item.isLink}}\n  <a class={{@item.classes}} href={{@item.args.href}} target={{@item.args.target}} rel={{@item.rel}} aria-current={{if @item.isSelected \"true\"}} ...attributes>\n    <span class={{@item.innerClass}}>\n      {{#if @item.args.betaBadgeLabel}}\n        <EuiBetaBadge @size=\"s\" @color=\"subdued\" class=\"euiKeyPadMenuItem__betaBadge\" @css={{@item.betaBadgeCss}} @label={{@item.betaBadgeLetter}} @iconType={{@item.args.betaBadgeIconType}} aria-hidden=\"true\" />\n      {{/if}}\n      <span class={{@item.iconClass}}>{{yield}}</span>\n      <span class={{@item.labelClass}}>{{@item.args.label}}</span>\n    </span>\n  </a>\n{{else if @item.isButton}}\n  <button class={{@item.classes}} type=\"button\" disabled={{@item.isDisabled}} aria-pressed={{@item.ariaPressed}} ...attributes>\n    <span class={{@item.innerClass}}>\n      {{#if @item.args.betaBadgeLabel}}\n        <EuiBetaBadge @size=\"s\" @color=\"subdued\" class=\"euiKeyPadMenuItem__betaBadge\" @css={{@item.betaBadgeCss}} @label={{@item.betaBadgeLetter}} @iconType={{@item.args.betaBadgeIconType}} aria-hidden=\"true\" />\n      {{/if}}\n      <span class={{@item.iconClass}}>{{yield}}</span>\n      <span class={{@item.labelClass}}>{{@item.args.label}}</span>\n    </span>\n  </button>\n{{else}}\n  <label class={{@item.classes}} for={{@item.itemId}} ...attributes>\n    <span class={{@item.innerClass}}>\n      {{#if @item.isRadio}}\n        <EuiRadio id={{@item.itemId}} @containerClass=\"euiKeyPadMenuItem__checkableInput\" @css={{@item.checkableCss}} @checked={{@item.isSelected}} @disabled={{@item.isDisabled}} @name={{@item.args.name}} value={{@item.args.value}} {{on \"change\" (fn @item.onChange @item.itemId @item.args.value)}} />\n      {{else}}\n        <EuiCheckbox id={{@item.itemId}} @containerClass=\"euiKeyPadMenuItem__checkableInput\" @css={{@item.checkableCss}} @checked={{@item.isSelected}} @disabled={{@item.isDisabled}} @name={{@item.args.name}} {{on \"change\" (fn @item.onChange @item.itemId)}} />\n      {{/if}}\n      <span class={{@item.iconClass}}>{{yield}}</span>\n      <span class={{@item.labelClass}}>{{@item.args.label}}</span>\n    </span>\n  </label>\n{{/if}}", {
   strictMode: true,
   scope: () => ({
-    and,
-    not,
-    argOrDefault,
-    randomId,
-    classNames,
-    eq,
+    EuiBetaBadge,
     EuiRadio,
     on,
     fn,
-    EuiCheckbox,
-    EuiBetaBadge,
-    charAt
+    EuiCheckbox
   })
 }), templateOnly());
+const noop = () => {};
+/** Native Ember key pad menu item using the upstream EUI 123 / Borealis styles. */
+class EuiKeyPadMenuItem extends Component {
+  generatedId = randomId();
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  get itemId() {
+    return this.args.id ?? this.generatedId;
+  }
+  get isDisabled() {
+    const {
+      href,
+      isDisabled
+    } = this.args;
+    return Boolean(isDisabled || href && !isValidHref(href));
+  }
+  get isSelected() {
+    return Boolean(this.args.isSelected);
+  }
+  get tagName() {
+    if (this.args.checkable) return 'label';
+    return this.args.href && !this.isDisabled ? 'a' : 'button';
+  }
+  get isLink() {
+    return this.tagName === 'a';
+  }
+  get isButton() {
+    return this.tagName === 'button';
+  }
+  get isRadio() {
+    return this.args.checkable === 'single';
+  }
+  get rel() {
+    return this.isLink ? getSecureRelForTarget(this.args.target, this.args.rel) : undefined;
+  }
+  get ariaPressed() {
+    const {
+      isSelected
+    } = this.args;
+    return this.isButton && isSelected !== undefined ? String(isSelected) : undefined;
+  }
+  get betaBadgeLetter() {
+    return this.args.betaBadgeLabel?.charAt(0);
+  }
+  /** Upstream wraps the item in a tooltip titled `@betaBadgeLabel`. */
+  get tooltipProps() {
+    const {
+      betaBadgeLabel,
+      betaBadgeTooltipContent,
+      betaBadgeTooltipProps
+    } = this.args;
+    if (!betaBadgeLabel) return undefined;
+    return {
+      ...betaBadgeTooltipProps,
+      title: betaBadgeLabel,
+      content: betaBadgeTooltipContent
+    };
+  }
+  static {
+    n(this.prototype, "tooltipProps", [cached]);
+  }
+  get onChange() {
+    return this.args.onChange ?? noop;
+  }
+  get childStyles() {
+    return useEuiBorealisStyles(this.context, euiKeyPadMenuItemChildStyles);
+  }
+  static {
+    n(this.prototype, "childStyles", [cached]);
+  }
+  get classes() {
+    const context = this.context;
+    const theme = context.upstream.euiTheme;
+    const styles = useEuiBorealisStyles(context, euiKeyPadMenuItemStyles);
+    const disabled = this.isDisabled;
+    // Scoped stand-in for React's global button/link reset; upstream after.
+    const reset = {
+      boxSizing: 'border-box',
+      margin: 0,
+      border: 0,
+      background: 'none',
+      fontFamily: theme.font.family,
+      fontSize: 'inherit',
+      textDecoration: 'none'
+    };
+    return `euiKeyPadMenuItem ${euiClass(context, reset, styles.euiKeyPadMenuItem, disabled ? styles.disabled.disabled : styles.enabled, this.isSelected && (disabled ? styles.disabled.selected : styles.selected))}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get innerClass() {
+    return `euiKeyPadMenuItem__inner ${euiClass(this.context, {
+      boxSizing: 'border-box'
+    }, this.childStyles.euiKeyPadMenuItem__inner)}`;
+  }
+  static {
+    n(this.prototype, "innerClass", [cached]);
+  }
+  get iconClass() {
+    return `euiKeyPadMenuItem__icon ${euiClass(this.context, this.childStyles.euiKeyPadMenuItem__icon)}`;
+  }
+  static {
+    n(this.prototype, "iconClass", [cached]);
+  }
+  get labelClass() {
+    return `euiKeyPadMenuItem__label ${euiClass(this.context, this.childStyles.euiKeyPadMenuItem__label)}`;
+  }
+  static {
+    n(this.prototype, "labelClass", [cached]);
+  }
+  get betaBadgeCss() {
+    return this.childStyles.euiKeyPadMenuItem__betaBadge;
+  }
+  static {
+    n(this.prototype, "betaBadgeCss", [cached]);
+  }
+  get checkableCss() {
+    const styles = this.childStyles;
+    const selected = this.isSelected;
+    const disabled = this.isDisabled;
+    return [styles.euiKeyPadMenuItem__checkableInput, !selected && disabled && styles.hideCheckableInput, !selected && !disabled && styles.showCheckableInputOnInteraction];
+  }
+  static {
+    n(this.prototype, "checkableCss", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiMaybeToolTip @props={{this.tooltipProps}}>\n  <KeyPadMenuItemElement @item={{this}} ...attributes>\n    {{yield}}\n  </KeyPadMenuItemElement>\n</EuiMaybeToolTip>", {
+      strictMode: true,
+      scope: () => ({
+        EuiMaybeToolTip,
+        KeyPadMenuItemElement
+      })
+    }), this);
+  }
+}
 
 export { EuiKeyPadMenuItem as default };
 //# sourceMappingURL=eui-key-pad-menu-item.js.map

package/dist/components/eui-key-pad-menu-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-key-pad-menu-item.js","sources":["../../src/components/eui-key-pad-menu-item.gts"],"sourcesContent":["import { helper } from '@ember/component/helper';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport { and, eq, not } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiBetaBadge from './eui-beta-badge.gts';\nimport EuiCheckbox from './eui-checkbox.gts';\nimport EuiRadio from './eui-radio.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst charAt = helper(function ([str, num]: [string | undefined, number]) {\n  return str?.charAt?.(num);\n});\n\nexport interface EuiKeyPadMenuItemSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement;\n  Args: {\n    /**\n     * Makes the item a checkbox (`'label'`) or a radio (`'single'`, share a\n     * `@name`) inside a checkable EuiKeyPadMenu.\n     */\n    checkable?: 'label' | 'single';\n    /** Makes the item a link. */\n    href?: string;\n    /** Disables the item. */\n    isDisabled?: boolean;\n    /** Selected (pressed, current page, or checked) state. */\n    isSelected?: boolean;\n    /** Text under the icon. */\n    label?: string;\n    /** `name` of the radio or checkbox. */\n    name?: string;\n    /** `value` of the radio. */\n    value?: string;\n    /**\n     * Called when a checkable item changes, with its id (and value for\n     * radios). Buttons use `{{on \"click\" …}}`.\n     */\n    onChange: (id: string, value?: string | Event) => void;\n    /** Shows a beta badge with the first letter of this label (full label on hover). */\n    betaBadgeLabel?: string;\n    /** Icon in the beta badge instead of the letter. */\n    betaBadgeIconType?: EuiIconSignature['Args']['type'];\n    /** Tooltip of the beta badge. */\n    betaBadgeTooltipContent?: string;\n    /** Id of the checkable input. Defaults to a random id. */\n    id?: string;\n    /** `target` of the `@href` link. */\n    target?: string;\n  };\n  Blocks: {\n    /** The icon, e.g. `<EuiIcon @type=\"discoverApp\" @size=\"l\" />`. */\n    default: [];\n  };\n}\n\nconst EuiKeyPadMenuItem: TemplateOnlyComponent<EuiKeyPadMenuItemSignature> =\n  <template>\n    {{#let\n      (if @checkable \"label\" (if (and @href (not @isDisabled)) \"a\" \"button\"))\n      (argOrDefault @id (randomId))\n      (and @href (not @isDisabled))\n      as |ElementTag itemId useHref|\n    }}\n      {{#let (element ElementTag) as |TagElement|}}\n        <TagElement\n          href={{if useHref @href}}\n          target={{if useHref @target}}\n          aria-current={{if (and useHref @isSelected) \"true\"}}\n          for={{if @checkable itemId}}\n          disabled={{if (and (not useHref) (not @checkable)) @isDisabled}}\n          type={{if (and (not useHref) (not @checkable)) \"button\"}}\n          aria-pressed={{if\n            (and (not useHref) (not @checkable))\n            (if @isSelected \"true\" \"false\")\n          }}\n          class={{classNames\n            \"euiKeyPadMenuItem\"\n            (if @betaBadgeLabel \"euiKeyPadMenuItem--hasBetaBadge\")\n            (if @checkable \"euiKeyPadMenuItem--checkable\")\n            (if @isDisabled \"euiKeyPadMenuItem-isDisabled\")\n            (if @isSelected \"euiKeyPadMenuItem-isSelected\")\n          }}\n          rel={{if useHref \"noreferrer\"}}\n          {{!@glint-expect-error}}\n          ...attributes\n        >\n          <span class=\"euiKeyPadMenuItem__inner\">\n            {{#if @checkable}}\n              {{#if (eq @checkable \"single\")}}\n                {{! template-lint-disable no-duplicate-id }}\n                <EuiRadio\n                  id={{itemId}}\n                  @containerClass=\"euiKeyPadMenuItem__checkableInput\"\n                  @checked={{@isSelected}}\n                  @disabled={{@isDisabled}}\n                  @name={{@name}}\n                  value={{@value}}\n                  {{on \"change\" (fn @onChange itemId @value)}}\n                />\n              {{else}}\n                <EuiCheckbox\n                  id={{itemId}}\n                  @containerClass=\"euiKeyPadMenuItem__checkableInput\"\n                  @checked={{@isSelected}}\n                  @disabled={{@isDisabled}}\n                  @name={{@name}}\n                  {{on \"change\" (fn @onChange itemId)}}\n                />\n              {{/if}}\n            {{else if @betaBadgeLabel}}\n              <EuiBetaBadge\n                @size=\"s\"\n                @color=\"subdued\"\n                class=\"euiKeyPadMenuItem__betaBadge\"\n                @label={{charAt @betaBadgeLabel 0}}\n                @title={{@betaBadgeLabel}}\n                @iconType={{@betaBadgeIconType}}\n                @tooltipContent={{@betaBadgeTooltipContent}}\n              />\n            {{/if}}\n            <span class=\"euiKeyPadMenuItem__icon\">{{yield}}</span>\n            <span class=\"euiKeyPadMenuItem__label\">{{@label}}</span>\n          </span>\n        </TagElement>\n\n      {{/let}}\n    {{/let}}\n  </template>;\n\nexport default EuiKeyPadMenuItem;\n"],"names":["charAt","helper","str","num","EuiKeyPadMenuItem","setComponentTemplate","precompileTemplate","strictMode","scope","and","not","argOrDefault","randomId","classNames","eq","EuiRadio","on","fn","EuiCheckbox","EuiBetaBadge","templateOnly"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAMA,MAAA,GAASC,MAAA,CAAO,UAAU,CAACC,GAAA,EAAKC,GAAA,CAAkC,EAAA;AACtE,EAAA,OAAOD,KAAKF,MAAA,GAASG,GAAA,CAAA;AACvB,CAAA,CAAA;AA4CA,MAAMC,iBAAyC,GAAAC,oBAAA,CAC7CC,kBAAA,CAAA,ohEAAA,EAuEA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,GAAA;IAAAC,GAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,QAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,WAAA;IAAAC,YAAA;AAAAnB,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAoB,YAAA,EAAA;;"}
+{"version":3,"file":"eui-key-pad-menu-item.js","sources":["../../src/components/eui-key-pad-menu-item.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport { randomId } from '../-private/random-id.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiKeyPadMenuItemChildStyles, euiKeyPadMenuItemStyles } from '../utils/eui/lists.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport EuiBetaBadge from './eui-beta-badge.gts';\nimport EuiCheckbox from './eui-checkbox.gts';\nimport { getSecureRelForTarget, isValidHref } from './eui-link.gts';\nimport EuiRadio from './eui-radio.gts';\nimport EuiMaybeToolTip from '../-private/eui-maybe-tool-tip.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiTooltipArgs } from './eui-tool-tip.gts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiKeyPadMenuItemSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement | HTMLLabelElement;\n  Args: {\n    /**\n     * Makes the item a `<label>` with a checkbox (`'multi'`, or the legacy\n     * `'label'`) or a radio (`'single'`, share a `@name`) inside a\n     * checkable EuiKeyPadMenu.\n     */\n    checkable?: 'single' | 'multi' | 'label';\n    /** Makes the item a link. A `javascript:` URL disables the item. */\n    href?: string;\n    /** Disables the item. */\n    isDisabled?: boolean;\n    /**\n     * Selected state: `aria-pressed` on buttons (omitted when not set),\n     * `aria-current` on links, `checked` on checkable items.\n     */\n    isSelected?: boolean;\n    /** Text under the icon. */\n    label?: string;\n    /** `name` of the radio or checkbox. */\n    name?: string;\n    /** `value` of the radio. */\n    value?: string;\n    /**\n     * Called when a checkable item changes, with its id (and value for\n     * radios). Buttons use `{{on \"click\" …}}`.\n     */\n    onChange?: (id: string, value?: string | Event) => void;\n    /** Shows a beta badge with the first letter of this label (full label on hover). */\n    betaBadgeLabel?: string;\n    /** Icon in the beta badge instead of the letter. */\n    betaBadgeIconType?: EuiIconSignature['Args']['type'];\n    /**\n     * Content of the tooltip shown with `@betaBadgeLabel` (its title is the\n     * label). The tooltip wraps the whole item, like upstream.\n     */\n    betaBadgeTooltipContent?: string;\n    /**\n     * EuiToolTip args for the item's `@betaBadgeLabel` tooltip (upstream\n     * `betaBadgeTooltipProps`), except `title` and `content`, e.g.\n     * `(hash position=\"bottom\" anchorProps=(hash data-test-subj=\"tip\"))`.\n     */\n    betaBadgeTooltipProps?: Partial<Omit<EuiTooltipArgs, 'title' | 'content'>>;\n    /** Id of the checkable input. Defaults to a random id. */\n    id?: string;\n    /** `target` of the `@href` link. */\n    target?: string;\n    /** `rel` of the link; `noreferrer` (and `noopener` for `_blank`) is added. */\n    rel?: string;\n  };\n  Blocks: {\n    /** The icon, e.g. `<EuiIcon @type=\"discoverApp\" @size=\"l\" />`. */\n    default: [];\n  };\n}\n\n/** The item's element (`a`, `button` or `label`). */\nconst KeyPadMenuItemElement: TemplateOnlyComponent<{\n  Element: EuiKeyPadMenuItemSignature['Element'];\n  Args: { item: EuiKeyPadMenuItem };\n  Blocks: { default: [] };\n}> = <template>\n    {{#if @item.isLink}}\n      <a\n        class={{@item.classes}}\n        href={{@item.args.href}}\n        target={{@item.args.target}}\n        rel={{@item.rel}}\n        aria-current={{if @item.isSelected \"true\"}}\n        ...attributes\n      >\n        <span class={{@item.innerClass}}>\n          {{#if @item.args.betaBadgeLabel}}\n            <EuiBetaBadge\n              @size=\"s\"\n              @color=\"subdued\"\n              class=\"euiKeyPadMenuItem__betaBadge\"\n              @css={{@item.betaBadgeCss}}\n              @label={{@item.betaBadgeLetter}}\n              @iconType={{@item.args.betaBadgeIconType}}\n              aria-hidden=\"true\"\n            />\n          {{/if}}\n          <span class={{@item.iconClass}}>{{yield}}</span>\n          <span class={{@item.labelClass}}>{{@item.args.label}}</span>\n        </span>\n      </a>\n    {{else if @item.isButton}}\n      <button\n        class={{@item.classes}}\n        type=\"button\"\n        disabled={{@item.isDisabled}}\n        aria-pressed={{@item.ariaPressed}}\n        ...attributes\n      >\n        <span class={{@item.innerClass}}>\n          {{#if @item.args.betaBadgeLabel}}\n            <EuiBetaBadge\n              @size=\"s\"\n              @color=\"subdued\"\n              class=\"euiKeyPadMenuItem__betaBadge\"\n              @css={{@item.betaBadgeCss}}\n              @label={{@item.betaBadgeLetter}}\n              @iconType={{@item.args.betaBadgeIconType}}\n              aria-hidden=\"true\"\n            />\n          {{/if}}\n          <span class={{@item.iconClass}}>{{yield}}</span>\n          <span class={{@item.labelClass}}>{{@item.args.label}}</span>\n        </span>\n      </button>\n    {{else}}\n      <label class={{@item.classes}} for={{@item.itemId}} ...attributes>\n        <span class={{@item.innerClass}}>\n          {{#if @item.isRadio}}\n            <EuiRadio\n              id={{@item.itemId}}\n              @containerClass=\"euiKeyPadMenuItem__checkableInput\"\n              @css={{@item.checkableCss}}\n              @checked={{@item.isSelected}}\n              @disabled={{@item.isDisabled}}\n              @name={{@item.args.name}}\n              value={{@item.args.value}}\n              {{on \"change\" (fn @item.onChange @item.itemId @item.args.value)}}\n            />\n          {{else}}\n            <EuiCheckbox\n              id={{@item.itemId}}\n              @containerClass=\"euiKeyPadMenuItem__checkableInput\"\n              @css={{@item.checkableCss}}\n              @checked={{@item.isSelected}}\n              @disabled={{@item.isDisabled}}\n              @name={{@item.args.name}}\n              {{on \"change\" (fn @item.onChange @item.itemId)}}\n            />\n          {{/if}}\n          <span class={{@item.iconClass}}>{{yield}}</span>\n          <span class={{@item.labelClass}}>{{@item.args.label}}</span>\n        </span>\n      </label>\n    {{/if}}\n</template>;\n\nconst noop = () => {};\n\n/** Native Ember key pad menu item using the upstream EUI 123 / Borealis styles. */\nexport default class EuiKeyPadMenuItem extends Component<EuiKeyPadMenuItemSignature> {\n  generatedId = randomId();\n\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  get itemId(): string {\n    return this.args.id ?? this.generatedId;\n  }\n\n  get isDisabled(): boolean {\n    const { href, isDisabled } = this.args;\n    return Boolean(isDisabled || (href && !isValidHref(href)));\n  }\n\n  get isSelected(): boolean {\n    return Boolean(this.args.isSelected);\n  }\n\n  get tagName(): 'a' | 'button' | 'label' {\n    if (this.args.checkable) return 'label';\n    return this.args.href && !this.isDisabled ? 'a' : 'button';\n  }\n\n  get isLink(): boolean {\n    return this.tagName === 'a';\n  }\n\n  get isButton(): boolean {\n    return this.tagName === 'button';\n  }\n\n  get isRadio(): boolean {\n    return this.args.checkable === 'single';\n  }\n\n  get rel(): string | undefined {\n    return this.isLink\n      ? getSecureRelForTarget(this.args.target, this.args.rel)\n      : undefined;\n  }\n\n  get ariaPressed(): string | undefined {\n    const { isSelected } = this.args;\n    return this.isButton && isSelected !== undefined\n      ? String(isSelected)\n      : undefined;\n  }\n\n  get betaBadgeLetter(): string | undefined {\n    return this.args.betaBadgeLabel?.charAt(0);\n  }\n\n  /** Upstream wraps the item in a tooltip titled `@betaBadgeLabel`. */\n  @cached\n  get tooltipProps(): Partial<EuiTooltipArgs> | undefined {\n    const { betaBadgeLabel, betaBadgeTooltipContent, betaBadgeTooltipProps } =\n      this.args;\n\n    if (!betaBadgeLabel) return undefined;\n\n    return {\n      ...betaBadgeTooltipProps,\n      title: betaBadgeLabel,\n      content: betaBadgeTooltipContent\n    };\n  }\n\n  get onChange() {\n    return this.args.onChange ?? noop;\n  }\n\n  @cached\n  get childStyles() {\n    return useEuiBorealisStyles(this.context, euiKeyPadMenuItemChildStyles);\n  }\n\n  @cached\n  get classes(): string {\n    const context = this.context;\n    const theme = context.upstream.euiTheme;\n    const styles = useEuiBorealisStyles(context, euiKeyPadMenuItemStyles);\n    const disabled = this.isDisabled;\n    // Scoped stand-in for React's global button/link reset; upstream after.\n    const reset = {\n      boxSizing: 'border-box' as const,\n      margin: 0,\n      border: 0,\n      background: 'none',\n      fontFamily: theme.font.family,\n      fontSize: 'inherit',\n      textDecoration: 'none'\n    };\n    return `euiKeyPadMenuItem ${euiClass(\n      context,\n      reset,\n      styles.euiKeyPadMenuItem,\n      disabled ? styles.disabled.disabled : styles.enabled,\n      this.isSelected && (disabled ? styles.disabled.selected : styles.selected)\n    )}`;\n  }\n\n  @cached\n  get innerClass(): string {\n    return `euiKeyPadMenuItem__inner ${euiClass(\n      this.context,\n      { boxSizing: 'border-box' },\n      this.childStyles.euiKeyPadMenuItem__inner\n    )}`;\n  }\n\n  @cached\n  get iconClass(): string {\n    return `euiKeyPadMenuItem__icon ${euiClass(\n      this.context,\n      this.childStyles.euiKeyPadMenuItem__icon\n    )}`;\n  }\n\n  @cached\n  get labelClass(): string {\n    return `euiKeyPadMenuItem__label ${euiClass(\n      this.context,\n      this.childStyles.euiKeyPadMenuItem__label\n    )}`;\n  }\n\n  @cached\n  get betaBadgeCss(): EuiCss {\n    return this.childStyles.euiKeyPadMenuItem__betaBadge;\n  }\n\n  @cached\n  get checkableCss(): EuiCss {\n    const styles = this.childStyles;\n    const selected = this.isSelected;\n    const disabled = this.isDisabled;\n    return [\n      styles.euiKeyPadMenuItem__checkableInput,\n      !selected && disabled && styles.hideCheckableInput,\n      !selected && !disabled && styles.showCheckableInputOnInteraction\n    ];\n  }\n\n  <template>\n    <EuiMaybeToolTip @props={{this.tooltipProps}}>\n      <KeyPadMenuItemElement @item={{this}} ...attributes>\n        {{yield}}\n      </KeyPadMenuItemElement>\n    </EuiMaybeToolTip>\n  </template>\n}\n"],"names":["KeyPadMenuItemElement","setComponentTemplate","precompileTemplate","strictMode","scope","EuiBetaBadge","EuiRadio","on","fn","EuiCheckbox","templateOnly","noop","EuiKeyPadMenuItem","Component","generatedId","randomId","context","getEuiThemeContext","itemId","args","id","isDisabled","href","Boolean","isValidHref","isSelected","tagName","checkable","isLink","isButton","isRadio","rel","getSecureRelForTarget","target","undefined","ariaPressed","String","betaBadgeLetter","betaBadgeLabel","charAt","tooltipProps","betaBadgeTooltipContent","betaBadgeTooltipProps","title","content","n","prototype","cached","onChange","childStyles","useEuiBorealisStyles","euiKeyPadMenuItemChildStyles","classes","theme","upstream","euiTheme","styles","euiKeyPadMenuItemStyles","disabled","reset","boxSizing","margin","border","background","fontFamily","font","family","fontSize","textDecoration","euiClass","euiKeyPadMenuItem","enabled","selected","innerClass","euiKeyPadMenuItem__inner","iconClass","euiKeyPadMenuItem__icon","labelClass","euiKeyPadMenuItem__label","betaBadgeCss","euiKeyPadMenuItem__betaBadge","checkableCss","euiKeyPadMenuItem__checkableInput","hideCheckableInput","showCheckableInputOnInteraction","EuiMaybeToolTip"],"mappings":"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"}

package/dist/components/eui-key-pad-menu.js

@@ -1,7 +1,14 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { c1 as euiKeyPadMenuStyles } from '../styles.generated-SYAxYhey.js';
+import spreadAttributes from '../-private/eui-spread-attributes.js';
 import EuiFormLabel from './eui-form-label.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
 const KeyComponent = setComponentTemplate(precompileTemplate("<li>{{yield}}</li>", {
   strictMode: true
@@ -11,13 +18,75 @@ const KeyComponent = setComponentTemplate(precompileTemplate("<li>{{yield}}</li>
  * switcher in a header popover.
  */
 
-const EuiKeyPadMenu = setComponentTemplate(precompileTemplate("{{#if @checkable.legend}}\n  <fieldset class=\"euiKeyPadMenu\" aria-label={{@checkable.ariaLegend}} ...attributes>\n    <EuiFormLabel @type=\"legend\">\n      {{@checkable.legend}}\n    </EuiFormLabel>\n    {{yield}}\n  </fieldset>\n{{else}}\n  <ul class=\"euiKeyPadMenu\" ...attributes>\n    {{yield KeyComponent}}\n  </ul>\n{{/if}}", {
-  strictMode: true,
-  scope: () => ({
-    EuiFormLabel,
-    KeyComponent
-  })
-}), templateOnly());
+/** Scoped stand-in for React's global list/fieldset reset. */const RESET = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  border: 0,
+  minInlineSize: 0,
+  listStyle: 'none',
+  '& > li': {
+    margin: 0,
+    padding: 0
+  }
+};
+/** Native Ember key pad menu using the upstream EUI 123 / Borealis factory. */
+class EuiKeyPadMenu extends Component {
+  Key = KeyComponent;
+  get context() {
+    return getEuiThemeContext(this);
+  }
+  get styles() {
+    return useEuiBorealisStyles(this.context, euiKeyPadMenuStyles);
+  }
+  static {
+    n(this.prototype, "styles", [cached]);
+  }
+  get isCheckable() {
+    return Boolean(this.args.checkable);
+  }
+  get legend() {
+    const {
+      checkable
+    } = this.args;
+    return typeof checkable === 'object' ? checkable.legend : undefined;
+  }
+  get ariaLegend() {
+    const {
+      checkable
+    } = this.args;
+    return typeof checkable === 'object' ? checkable.ariaLegend : undefined;
+  }
+  get classes() {
+    return `euiKeyPadMenu ${euiClass(this.context, RESET, this.styles.euiKeyPadMenu)}`;
+  }
+  /** `legendProps` keys handled as args. */
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  legendArgs = ['type'];
+  get legendProps() {
+    const {
+      checkable
+    } = this.args;
+    return typeof checkable === 'object' ? checkable.legendProps : undefined;
+  }
+  get legendCss() {
+    return [this.styles.euiKeyPadMenu__legend, this.legendProps?.css];
+  }
+  static {
+    n(this.prototype, "legendCss", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.isCheckable}}\n  <fieldset class={{this.classes}} aria-label={{this.ariaLegend}} ...attributes>\n    {{#if this.legend}}\n      <EuiFormLabel @type=\"legend\" @css={{this.legendCss}} class={{this.legendProps.className}} {{spreadAttributes this.legendProps this.legendArgs}}>\n        {{this.legend}}\n      </EuiFormLabel>\n    {{/if}}\n    {{yield}}\n  </fieldset>\n{{else}}\n  <ul class={{this.classes}} ...attributes>\n    {{yield this.Key}}\n  </ul>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiFormLabel,
+        spreadAttributes
+      })
+    }), this);
+  }
+}
 
 export { EuiKeyPadMenu as default };
 //# sourceMappingURL=eui-key-pad-menu.js.map

package/dist/components/eui-key-pad-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-key-pad-menu.js","sources":["../../src/components/eui-key-pad-menu.gts"],"sourcesContent":["import EuiFormLabel from './eui-form-label.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst KeyComponent: TemplateOnlyComponent<{\n  Blocks: {\n    default: [];\n  };\n}> = <template><li>{{yield}}</li></template>;\n\n/**\n * A grid of large square buttons (`EuiKeyPadMenuItem`s), e.g. an app\n * switcher in a header popover.\n */\nexport interface EuiKeyPadMenuSignature {\n  Element: HTMLUListElement | HTMLFieldSetElement;\n  Args: {\n    /**\n     * Makes the menu a group of radios or checkboxes (items with\n     * `@checkable`) under a visible `legend`, or an invisible `ariaLegend`.\n     */\n    checkable?: {\n      legend?: string;\n      ariaLegend?: string;\n    };\n    /** @deprecated Has no effect. */\n    iconType?: EuiIconSignature['Args']['type'];\n  };\n  Blocks: {\n    /**\n     * The items. Wrap each in the yielded `<Key>` (an `<li>`), except for\n     * checkable menus: `as |Key|` → `<Key><EuiKeyPadMenuItem …/></Key>`.\n     */\n    default: [typeof KeyComponent?];\n  };\n}\n\nconst EuiKeyPadMenu: TemplateOnlyComponent<EuiKeyPadMenuSignature> = <template>\n  {{#if @checkable.legend}}\n    <fieldset\n      class=\"euiKeyPadMenu\"\n      aria-label={{@checkable.ariaLegend}}\n      ...attributes\n    >\n      <EuiFormLabel @type=\"legend\">\n        {{@checkable.legend}}\n      </EuiFormLabel>\n      {{yield}}\n    </fieldset>\n  {{else}}\n    <ul class=\"euiKeyPadMenu\" ...attributes>\n      {{yield KeyComponent}}\n    </ul>\n  {{/if}}\n</template>;\n\nexport default EuiKeyPadMenu;\n"],"names":["KeyComponent","precompileTemplate","strictMode","templateOnly","EuiKeyPadMenu","setComponentTemplate","scope","EuiFormLabel"],"mappings":";;;;;AAKA,MAAMA,oCAIDC,kBAAA,CAAA,oBAAA,EAA4B;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAE3C;;;AAGC;;AAwBD,MAAMC,aAAqC,GAAAC,oBAAA,CAA0BJ,kBAAA,CAAA,+UAAA,EAiBrE;EAAAC,UAAA,EAAA,IAAA;AAAAI,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;AAAAP,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAG,YAAA,EAAA;;"}
+{"version":3,"file":"eui-key-pad-menu.js","sources":["../../src/components/eui-key-pad-menu.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport { euiKeyPadMenuStyles } from '../utils/eui/styles.generated.ts';\nimport spreadAttributes from '../-private/eui-spread-attributes.ts';\nimport EuiFormLabel from './eui-form-label.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst KeyComponent: TemplateOnlyComponent<{\n  Blocks: {\n    default: [];\n  };\n}> = <template><li>{{yield}}</li></template>;\n\n/**\n * A grid of large square buttons (`EuiKeyPadMenuItem`s), e.g. an app\n * switcher in a header popover.\n */\nexport interface EuiKeyPadMenuSignature {\n  Element: HTMLUListElement | HTMLFieldSetElement;\n  Args: {\n    /**\n     * Makes the menu a `<fieldset>` of radios or checkboxes (items with\n     * `@checkable`): `true`, or `{ legend }` for a visible legend and/or\n     * `{ ariaLegend }` for an `aria-label`. `legendProps` (upstream) are\n     * for the legend's EuiFormLabel: `className`, `css` and other keys as\n     * attributes.\n     */\n    checkable?:\n      | boolean\n      | {\n          legend?: string;\n          ariaLegend?: string;\n          legendProps?: {\n            className?: string;\n            css?: EuiCss;\n            [key: string]: unknown;\n          };\n        };\n    /** @deprecated Has no effect. */\n    iconType?: EuiIconSignature['Args']['type'];\n  };\n  Blocks: {\n    /**\n     * The items. Wrap each in the yielded `<Key>` (an `<li>`), except for\n     * checkable menus: `as |Key|` → `<Key><EuiKeyPadMenuItem …/></Key>`.\n     */\n    default: [typeof KeyComponent?];\n  };\n}\n\n/** Scoped stand-in for React's global list/fieldset reset. */\nconst RESET = {\n  boxSizing: 'border-box' as const,\n  margin: 0,\n  padding: 0,\n  border: 0,\n  minInlineSize: 0,\n  listStyle: 'none',\n  '& > li': { margin: 0, padding: 0 }\n};\n\n/** Native Ember key pad menu using the upstream EUI 123 / Borealis factory. */\nexport default class EuiKeyPadMenu extends Component<EuiKeyPadMenuSignature> {\n  Key = KeyComponent;\n\n  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  @cached\n  get styles() {\n    return useEuiBorealisStyles(this.context, euiKeyPadMenuStyles);\n  }\n\n  get isCheckable(): boolean {\n    return Boolean(this.args.checkable);\n  }\n\n  get legend(): string | undefined {\n    const { checkable } = this.args;\n    return typeof checkable === 'object' ? checkable.legend : undefined;\n  }\n\n  get ariaLegend(): string | undefined {\n    const { checkable } = this.args;\n    return typeof checkable === 'object' ? checkable.ariaLegend : undefined;\n  }\n\n  @cached\n  get classes(): string {\n    return `euiKeyPadMenu ${euiClass(this.context, RESET, this.styles.euiKeyPadMenu)}`;\n  }\n\n  /** `legendProps` keys handled as args. */\n  legendArgs = ['type'] as const;\n\n  get legendProps() {\n    const { checkable } = this.args;\n    return typeof checkable === 'object' ? checkable.legendProps : undefined;\n  }\n\n  @cached\n  get legendCss(): EuiCss {\n    return [this.styles.euiKeyPadMenu__legend, this.legendProps?.css];\n  }\n\n  <template>\n    {{#if this.isCheckable}}\n      <fieldset class={{this.classes}} aria-label={{this.ariaLegend}} ...attributes>\n        {{#if this.legend}}\n          <EuiFormLabel\n            @type=\"legend\"\n            @css={{this.legendCss}}\n            class={{this.legendProps.className}}\n            {{spreadAttributes this.legendProps this.legendArgs}}\n          >\n            {{this.legend}}\n          </EuiFormLabel>\n        {{/if}}\n        {{yield}}\n      </fieldset>\n    {{else}}\n      <ul class={{this.classes}} ...attributes>\n        {{yield this.Key}}\n      </ul>\n    {{/if}}\n  </template>\n}\n"],"names":["KeyComponent","precompileTemplate","strictMode","templateOnly","RESET","boxSizing","margin","padding","border","minInlineSize","listStyle","EuiKeyPadMenu","Component","Key","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiKeyPadMenuStyles","n","prototype","cached","isCheckable","Boolean","args","checkable","legend","undefined","ariaLegend","classes","euiClass","euiKeyPadMenu","legendArgs","legendProps","legendCss","euiKeyPadMenu__legend","css","setComponentTemplate","scope","EuiFormLabel","spreadAttributes"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,oCAIDC,kBAAA,CAAA,oBAAA,EAA4B;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAE3C;;;AAGC;;AAkCD,8DACA,MAAMC,KAAA,GAAQ;AACZC,EAAAA,SAAA,EAAW,YAAA;AACXC,EAAAA,MAAA,EAAQ,CAAA;AACRC,EAAAA,OAAA,EAAS,CAAA;AACTC,EAAAA,MAAA,EAAQ,CAAA;AACRC,EAAAA,aAAA,EAAe,CAAA;AACfC,EAAAA,SAAA,EAAW,MAAA;AACX,EAAA,QAAA,EAAU;AAAEJ,IAAAA,MAAA,EAAQ,CAAA;AAAGC,IAAAA,OAAA,EAAS;AAAE;AACpC,CAAA;AAEA;AACe,MAAMI,aAAA,SAAsBC,SAAA,CAAU;AACnDC,EAAAA,GAAA,GAAMb,YAAA;EAEN,IAAIc,OAAAA,GAAU;IACZ,OAAOC,mBAAmB,IAAI,CAAA;AAChC,EAAA;EAEA,IACIC,MAAAA,GAAS;AACX,IAAA,OAAOC,oBAAA,CAAqB,IAAI,CAACH,OAAO,EAAEI,mBAAA,CAAA;AAC5C,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,QAAA,EAAA,CAHCC,MAAA,CAAA,CAAA;AAAA;EAKD,IAAIC,WAAAA,GAAuB;AACzB,IAAA,OAAOC,OAAA,CAAQ,IAAI,CAACC,IAAI,CAACC,SAAS,CAAA;AACpC,EAAA;EAEA,IAAIC,MAAAA,GAA6B;IAC/B,MAAM;AAAED,MAAAA;KAAW,GAAG,IAAI,CAACD,IAAI;IAC/B,OAAO,OAAOC,SAAA,KAAc,QAAA,GAAWA,SAAA,CAAUC,MAAM,GAAGC,SAAA;AAC5D,EAAA;EAEA,IAAIC,UAAAA,GAAiC;IACnC,MAAM;AAAEH,MAAAA;KAAW,GAAG,IAAI,CAACD,IAAI;IAC/B,OAAO,OAAOC,SAAA,KAAc,QAAA,GAAWA,SAAA,CAAUG,UAAU,GAAGD,SAAA;AAChE,EAAA;EAEA,IACIE,OAAAA,GAAkB;AACpB,IAAA,OAAO,CAAA,cAAA,EAAiBC,QAAA,CAAS,IAAI,CAAChB,OAAO,EAAEV,KAAA,EAAO,IAAI,CAACY,MAAM,CAACe,aAAa,CAAA,CAAA,CAAG;AACpF,EAAA;AAEA;AAAA,EAAA;IAAAZ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CALCC,MAAA,CAAA,CAAA;AAAA;EAMDW,UAAA,GAAa,CAAC,MAAA,CAAO;EAErB,IAAIC,WAAAA,GAAc;IAChB,MAAM;AAAER,MAAAA;KAAW,GAAG,IAAI,CAACD,IAAI;IAC/B,OAAO,OAAOC,SAAA,KAAc,QAAA,GAAWA,SAAA,CAAUQ,WAAW,GAAGN,SAAA;AACjE,EAAA;EAEA,IACIO,YAAoB;AACtB,IAAA,OAAO,CAAC,IAAI,CAAClB,MAAM,CAACmB,qBAAqB,EAAE,IAAI,CAACF,WAAW,EAAEG,GAAA,CAAI;AACnE,EAAA;AAAA,EAAA;IAAAjB,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,WAAA,EAAA,CAHCC,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAgB,oBAAA,CAAApC,kBAAA,CAAA,2dAAA,EAoBA;MAAAC,UAAA,EAAA,IAAA;AAAAoC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,YAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}