@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-context-menu.js

@@ -0,0 +1,176 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { get, fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import cssStyle from '../-private/css-style.js';
+import EuiContextMenuItemComponent from './eui-context-menu-item.js';
+import EuiContextMenuPanel from './eui-context-menu-panel.js';
+import EuiHorizontalRule from './eui-horizontal-rule.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+function itemSize(size) {
+  return size === 's' ? 's' : undefined;
+}
+function isSeparator(item) {
+  return item.isSeparator === true;
+}
+class EuiContextMenu extends Component {
+  static {
+    g(this.prototype, "incomingPanelId", [tracked]);
+  }
+  #incomingPanelId = (i(this, "incomingPanelId"), void 0);
+  static {
+    g(this.prototype, "outgoingPanelId", [tracked]);
+  }
+  #outgoingPanelId = (i(this, "outgoingPanelId"), void 0);
+  static {
+    g(this.prototype, "transitionDirection", [tracked]);
+  }
+  #transitionDirection = (i(this, "transitionDirection"), void 0);
+  static {
+    g(this.prototype, "isOutgoingPanelVisible", [tracked], function () {
+      return false;
+    });
+  }
+  #isOutgoingPanelVisible = (i(this, "isOutgoingPanelVisible"), void 0);
+  static {
+    g(this.prototype, "height", [tracked]);
+  }
+  #height = (i(this, "height"), void 0);
+  static {
+    g(this.prototype, "focusedItemIndex", [tracked]);
+  }
+  #focusedItemIndex = (i(this, "focusedItemIndex"), void 0);
+  static {
+    g(this.prototype, "isUsingKeyboardToNavigate", [tracked], function () {
+      return false;
+    });
+  }
+  #isUsingKeyboardToNavigate = (i(this, "isUsingKeyboardToNavigate"), void 0);
+  static {
+    g(this.prototype, "hasNavigated", [tracked], function () {
+      return false;
+    });
+  }
+  #hasNavigated = (i(this, "hasNavigated"), void 0);
+  /**
+  * Whether the user moved to another panel. The first panel does not take
+  * the focus (in a popover, the popover focuses its first item once it is
+  * positioned); panels reached afterwards do.
+  */
+  constructor(owner, args) {
+    super(owner, args);
+    // only the starting point: items then move between panels
+    this.incomingPanelId = args.initialPanelId;
+  }
+  get panelsById() {
+    return new Map(this.args.panels.map(panel => [panel.id, panel]));
+  }
+  /** For each panel opened from an item: the panel holding that item. */
+  get previousPanelIds() {
+    const map = new Map();
+    for (const panel of this.args.panels) {
+      for (const item of panel.items ?? []) {
+        if (!isSeparator(item) && item.panel !== undefined) map.set(item.panel, panel.id);
+      }
+    }
+    return map;
+  }
+  // one-element lists keyed by panel id, so a panel gets a new element
+  // (and its slide animation runs again) whenever the shown panel changes
+  get incomingPanels() {
+    const panel = this.panelsById.get(this.incomingPanelId);
+    return panel ? [panel] : [];
+  }
+  get outgoingPanels() {
+    const panel = this.isOutgoingPanelVisible && this.outgoingPanelId !== undefined ? this.panelsById.get(this.outgoingPanelId) : undefined;
+    return panel ? [panel] : [];
+  }
+  get width() {
+    return this.panelsById.get(this.incomingPanelId)?.width;
+  }
+  get classes() {
+    return this.args.size === 's' ? 'euiContextMenu euiContextMenu--small' : 'euiContextMenu';
+  }
+  hasPreviousPanel = panelId => this.previousPanelIds.has(panelId);
+  showPanel(panelId, direction) {
+    this.hasNavigated = true;
+    this.outgoingPanelId = this.incomingPanelId;
+    this.incomingPanelId = panelId;
+    this.transitionDirection = direction;
+    this.isOutgoingPanelVisible = true;
+  }
+  showNextPanel(itemIndex) {
+    if (itemIndex === undefined) return;
+    const item = this.panelsById.get(this.incomingPanelId)?.items?.[itemIndex];
+    const nextPanelId = item && !isSeparator(item) ? item.panel : undefined;
+    if (nextPanelId === undefined) return;
+    if (this.isUsingKeyboardToNavigate) {
+      this.focusedItemIndex = this.panelsById.get(nextPanelId)?.initialFocusedItemIndex ?? 0;
+    }
+    this.showPanel(nextPanelId, 'next');
+  }
+  static {
+    n(this.prototype, "showNextPanel", [action]);
+  }
+  showPreviousPanel() {
+    const previousPanelId = this.previousPanelIds.get(this.incomingPanelId);
+    if (previousPanelId === undefined) return;
+    // focus the item that opened the panel we are leaving
+    const index = (this.panelsById.get(previousPanelId)?.items ?? []).findIndex(item => !isSeparator(item) && item.panel === this.incomingPanelId);
+    if (index !== -1) this.focusedItemIndex = index;
+    this.showPanel(previousPanelId, 'previous');
+  }
+  static {
+    n(this.prototype, "showPreviousPanel", [action]);
+  }
+  onItemClick(item, index, event) {
+    if (isSeparator(item)) return;
+    item.onClick?.(event);
+    if (item.panel !== undefined) this.showNextPanel(index);
+  }
+  static {
+    n(this.prototype, "onItemClick", [action]);
+  }
+  onOutgoingTransitionComplete() {
+    this.isOutgoingPanelVisible = false;
+  }
+  static {
+    n(this.prototype, "onOutgoingTransitionComplete", [action]);
+  }
+  onIncomingHeightChange(height) {
+    if (height !== this.height) this.height = height;
+  }
+  static {
+    n(this.prototype, "onIncomingHeightChange", [action]);
+  }
+  onUseKeyboardToNavigate() {
+    if (!this.isUsingKeyboardToNavigate) this.isUsingKeyboardToNavigate = true;
+  }
+  static {
+    n(this.prototype, "onUseKeyboardToNavigate", [action]);
+  }
+  initialFocusedItemIndex = panel => this.isUsingKeyboardToNavigate ? this.focusedItemIndex : panel.initialFocusedItemIndex;
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} style={{cssStyle (hash height=this.height width=this.width)}} ...attributes>\n  {{#each this.outgoingPanels key=\"id\" as |panel|}}\n    <EuiContextMenuPanel class=\"euiContextMenu__panel\" @title={{panel.title}} @size={{@size}} @transitionType=\"out\" @transitionDirection={{this.transitionDirection}} @onTransitionComplete={{this.onOutgoingTransitionComplete}} @hasFocus={{false}}>\n      {{#if panel.items}}\n        {{#each panel.items as |item index|}}\n          {{#if item.isSeparator}}\n            <EuiHorizontalRule @margin=\"none\" />\n          {{else}}\n            <EuiContextMenuItem @icon={{item.icon}} @hasPanel={{if item.panel true false}} @href={{item.href}} @target={{item.target}} @disabled={{item.disabled}} @layoutAlign={{item.layoutAlign}} @size={{itemSize @size}} {{on \"click\" (fn this.onItemClick item index)}}>{{item.name}}</EuiContextMenuItem>\n          {{/if}}\n        {{/each}}\n      {{else}}\n        {{yield panel to=\"content\"}}\n      {{/if}}\n    </EuiContextMenuPanel>\n  {{/each}}\n  {{#each this.incomingPanels key=\"id\" as |panel|}}\n    <EuiContextMenuPanel class=\"euiContextMenu__panel\" @title={{panel.title}} @size={{@size}} @onClose={{if (this.hasPreviousPanel panel.id) this.showPreviousPanel}} @transitionType={{if this.isOutgoingPanelVisible \"in\"}} @transitionDirection={{if this.isOutgoingPanelVisible this.transitionDirection}} @hasFocus={{this.hasNavigated}} @initialFocusedItemIndex={{this.initialFocusedItemIndex panel}} @onHeightChange={{this.onIncomingHeightChange}} @showNextPanel={{this.showNextPanel}} @showPreviousPanel={{this.showPreviousPanel}} @onUseKeyboardToNavigate={{this.onUseKeyboardToNavigate}}>\n      {{#if panel.items}}\n        {{#each panel.items as |item index|}}\n          {{#if item.isSeparator}}\n            <EuiHorizontalRule @margin=\"none\" />\n          {{else}}\n            <EuiContextMenuItem @icon={{item.icon}} @hasPanel={{if item.panel true false}} @href={{item.href}} @target={{item.target}} @disabled={{item.disabled}} @layoutAlign={{item.layoutAlign}} @size={{itemSize @size}} data-test-subj={{get item \"data-test-subj\"}} {{on \"click\" (fn this.onItemClick item index)}}>{{item.name}}</EuiContextMenuItem>\n          {{/if}}\n        {{/each}}\n      {{else}}\n        {{yield panel to=\"content\"}}\n      {{/if}}\n    </EuiContextMenuPanel>\n  {{/each}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        cssStyle,
+        hash,
+        EuiContextMenuPanel,
+        EuiHorizontalRule,
+        EuiContextMenuItem: EuiContextMenuItemComponent,
+        itemSize,
+        on,
+        fn,
+        get
+      })
+    }), this);
+  }
+}
+
+export { EuiContextMenu as default };
+//# sourceMappingURL=eui-context-menu.js.map

package/dist/components/eui-context-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-context-menu.js","sources":["../../src/components/eui-context-menu.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn, get, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport cssStyle from '../-private/css-style.ts';\nimport EuiContextMenuItem from './eui-context-menu-item.gts';\nimport EuiContextMenuPanel from './eui-context-menu-panel.gts';\nimport EuiHorizontalRule from './eui-horizontal-rule.gts';\n\nimport type { EuiContextMenuItemSignature } from './eui-context-menu-item';\nimport type Owner from '@ember/owner';\n\ntype PanelId = string | number;\n\n/** One entry of a panel: an item, or a separator (`{ isSeparator: true }`). */\nexport type EuiContextMenuPanelItem =\n  | { isSeparator: true; key?: string }\n  | {\n      isSeparator?: false;\n      /** The item's text. */\n      name: string;\n      /** Icon before the text, any `EuiIcon` type. */\n      icon?: EuiContextMenuItemSignature['Args']['icon'];\n      /** Id of the panel this item opens (it gets an arrow). */\n      panel?: PanelId;\n      /** Called when the item is clicked (also when it opens a panel). */\n      onClick?: (event: MouseEvent) => void;\n      /** Makes the item a link. */\n      href?: string;\n      /** `target` of the link. */\n      target?: string;\n      /** Disables the item. */\n      disabled?: boolean;\n      /** Aligns the icon with the `'center'` or the `'top'` of the text. */\n      layoutAlign?: EuiContextMenuItemSignature['Args']['layoutAlign'];\n      /** `data-test-subj` of the item, for tests. */\n      'data-test-subj'?: string;\n    };\n\nexport interface EuiContextMenuPanelDescriptor {\n  /** Unique id; items open the panel with `panel: id`. */\n  id: PanelId;\n  /** Title of the panel (a back button on panels opened from another). */\n  title?: string;\n  /**\n   * The panel's items. Without items, the `<:content>` block renders the\n   * panel's content instead (e.g. a form).\n   */\n  items?: EuiContextMenuPanelItem[];\n  /** Width of the menu while this panel is shown, e.g. `400` (px). */\n  width?: number | string;\n  /** Item to focus when the panel opens. */\n  initialFocusedItemIndex?: number;\n}\n\n/**\n * A menu of panels: items can open another panel (a sub-menu), which\n * slides in with a back button to return. Usually the content of an\n * `EuiPopover`. For a single list of items, `EuiContextMenuPanel` is\n * enough.\n */\nexport interface EuiContextMenuSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Every panel, flat: an item's `panel` is the id of the panel it opens. */\n    panels: EuiContextMenuPanelDescriptor[];\n    /** Id of the panel shown first. */\n    initialPanelId: PanelId;\n    /** `'s'` for smaller items and titles. Defaults to `'m'`. */\n    size?: 's' | 'm';\n  };\n  Blocks: {\n    /** Content of the panels without `items`; yields the panel. */\n    content: [panel: EuiContextMenuPanelDescriptor];\n  };\n}\n\ntype Direction = 'next' | 'previous';\n\nfunction itemSize(size?: 's' | 'm'): 's' | undefined {\n  return size === 's' ? 's' : undefined;\n}\n\nfunction isSeparator(\n  item: EuiContextMenuPanelItem\n): item is { isSeparator: true; key?: string } {\n  return item.isSeparator === true;\n}\n\nexport default class EuiContextMenu extends Component<EuiContextMenuSignature> {\n  @tracked incomingPanelId: PanelId;\n  @tracked outgoingPanelId?: PanelId;\n  @tracked transitionDirection?: Direction;\n  @tracked isOutgoingPanelVisible = false;\n  @tracked height?: number;\n  @tracked focusedItemIndex?: number;\n  @tracked isUsingKeyboardToNavigate = false;\n  /**\n   * Whether the user moved to another panel. The first panel does not take\n   * the focus (in a popover, the popover focuses its first item once it is\n   * positioned); panels reached afterwards do.\n   */\n  @tracked hasNavigated = false;\n\n  constructor(owner: Owner, args: EuiContextMenuSignature['Args']) {\n    super(owner, args);\n    // only the starting point: items then move between panels\n    this.incomingPanelId = args.initialPanelId;\n  }\n\n  get panelsById(): Map<PanelId, EuiContextMenuPanelDescriptor> {\n    return new Map(this.args.panels.map((panel) => [panel.id, panel]));\n  }\n\n  /** For each panel opened from an item: the panel holding that item. */\n  get previousPanelIds(): Map<PanelId, PanelId> {\n    const map = new Map<PanelId, PanelId>();\n\n    for (const panel of this.args.panels) {\n      for (const item of panel.items ?? []) {\n        if (!isSeparator(item) && item.panel !== undefined) map.set(item.panel, panel.id);\n      }\n    }\n\n    return map;\n  }\n\n  // one-element lists keyed by panel id, so a panel gets a new element\n  // (and its slide animation runs again) whenever the shown panel changes\n  get incomingPanels(): EuiContextMenuPanelDescriptor[] {\n    const panel = this.panelsById.get(this.incomingPanelId);\n\n    return panel ? [panel] : [];\n  }\n\n  get outgoingPanels(): EuiContextMenuPanelDescriptor[] {\n    const panel =\n      this.isOutgoingPanelVisible && this.outgoingPanelId !== undefined\n        ? this.panelsById.get(this.outgoingPanelId)\n        : undefined;\n\n    return panel ? [panel] : [];\n  }\n\n  get width(): number | string | undefined {\n    return this.panelsById.get(this.incomingPanelId)?.width;\n  }\n\n  get classes(): string {\n    return this.args.size === 's' ? 'euiContextMenu euiContextMenu--small' : 'euiContextMenu';\n  }\n\n  hasPreviousPanel = (panelId: PanelId): boolean => this.previousPanelIds.has(panelId);\n\n  showPanel(panelId: PanelId, direction: Direction): void {\n    this.hasNavigated = true;\n    this.outgoingPanelId = this.incomingPanelId;\n    this.incomingPanelId = panelId;\n    this.transitionDirection = direction;\n    this.isOutgoingPanelVisible = true;\n  }\n\n  @action\n  showNextPanel(itemIndex?: number): void {\n    if (itemIndex === undefined) return;\n\n    const item = this.panelsById.get(this.incomingPanelId)?.items?.[itemIndex];\n    const nextPanelId = item && !isSeparator(item) ? item.panel : undefined;\n\n    if (nextPanelId === undefined) return;\n\n    if (this.isUsingKeyboardToNavigate) {\n      this.focusedItemIndex = this.panelsById.get(nextPanelId)?.initialFocusedItemIndex ?? 0;\n    }\n\n    this.showPanel(nextPanelId, 'next');\n  }\n\n  @action\n  showPreviousPanel(): void {\n    const previousPanelId = this.previousPanelIds.get(this.incomingPanelId);\n\n    if (previousPanelId === undefined) return;\n\n    // focus the item that opened the panel we are leaving\n    const index = (this.panelsById.get(previousPanelId)?.items ?? []).findIndex(\n      (item) => !isSeparator(item) && item.panel === this.incomingPanelId\n    );\n\n    if (index !== -1) this.focusedItemIndex = index;\n\n    this.showPanel(previousPanelId, 'previous');\n  }\n\n  @action\n  onItemClick(item: EuiContextMenuPanelItem, index: number, event: MouseEvent): void {\n    if (isSeparator(item)) return;\n\n    item.onClick?.(event);\n\n    if (item.panel !== undefined) this.showNextPanel(index);\n  }\n\n  @action\n  onOutgoingTransitionComplete(): void {\n    this.isOutgoingPanelVisible = false;\n  }\n\n  @action\n  onIncomingHeightChange(height: number): void {\n    if (height !== this.height) this.height = height;\n  }\n\n  @action\n  onUseKeyboardToNavigate(): void {\n    if (!this.isUsingKeyboardToNavigate) this.isUsingKeyboardToNavigate = true;\n  }\n\n  initialFocusedItemIndex = (panel: EuiContextMenuPanelDescriptor): number | undefined =>\n    this.isUsingKeyboardToNavigate ? this.focusedItemIndex : panel.initialFocusedItemIndex;\n\n  <template>\n    <div\n      class={{this.classes}}\n      style={{cssStyle (hash height=this.height width=this.width)}}\n      ...attributes\n    >\n      {{#each this.outgoingPanels key=\"id\" as |panel|}}\n        <EuiContextMenuPanel\n          class=\"euiContextMenu__panel\"\n          @title={{panel.title}}\n          @size={{@size}}\n          @transitionType=\"out\"\n          @transitionDirection={{this.transitionDirection}}\n          @onTransitionComplete={{this.onOutgoingTransitionComplete}}\n          @hasFocus={{false}}\n        >\n          {{#if panel.items}}\n            {{#each panel.items as |item index|}}\n              {{#if item.isSeparator}}\n                <EuiHorizontalRule @margin=\"none\" />\n              {{else}}\n                <EuiContextMenuItem\n                  @icon={{item.icon}}\n                  @hasPanel={{if item.panel true false}}\n                  @href={{item.href}}\n                  @target={{item.target}}\n                  @disabled={{item.disabled}}\n                  @layoutAlign={{item.layoutAlign}}\n                  @size={{itemSize @size}}\n                  {{on \"click\" (fn this.onItemClick item index)}}\n                >{{item.name}}</EuiContextMenuItem>\n              {{/if}}\n            {{/each}}\n          {{else}}\n            {{yield panel to=\"content\"}}\n          {{/if}}\n        </EuiContextMenuPanel>\n      {{/each}}\n      {{#each this.incomingPanels key=\"id\" as |panel|}}\n        <EuiContextMenuPanel\n          class=\"euiContextMenu__panel\"\n          @title={{panel.title}}\n          @size={{@size}}\n          @onClose={{if\n            (this.hasPreviousPanel panel.id)\n            this.showPreviousPanel\n          }}\n          @transitionType={{if this.isOutgoingPanelVisible \"in\"}}\n          @transitionDirection={{if\n            this.isOutgoingPanelVisible\n            this.transitionDirection\n          }}\n          @hasFocus={{this.hasNavigated}}\n          @initialFocusedItemIndex={{this.initialFocusedItemIndex panel}}\n          @onHeightChange={{this.onIncomingHeightChange}}\n          @showNextPanel={{this.showNextPanel}}\n          @showPreviousPanel={{this.showPreviousPanel}}\n          @onUseKeyboardToNavigate={{this.onUseKeyboardToNavigate}}\n        >\n          {{#if panel.items}}\n            {{#each panel.items as |item index|}}\n              {{#if item.isSeparator}}\n                <EuiHorizontalRule @margin=\"none\" />\n              {{else}}\n                <EuiContextMenuItem\n                  @icon={{item.icon}}\n                  @hasPanel={{if item.panel true false}}\n                  @href={{item.href}}\n                  @target={{item.target}}\n                  @disabled={{item.disabled}}\n                  @layoutAlign={{item.layoutAlign}}\n                  @size={{itemSize @size}}\n                  data-test-subj={{get item \"data-test-subj\"}}\n                  {{on \"click\" (fn this.onItemClick item index)}}\n                >{{item.name}}</EuiContextMenuItem>\n              {{/if}}\n            {{/each}}\n          {{else}}\n            {{yield panel to=\"content\"}}\n          {{/if}}\n        </EuiContextMenuPanel>\n      {{/each}}\n    </div>\n  </template>\n}\n"],"names":["itemSize","size","undefined","isSeparator","item","EuiContextMenu","Component","g","prototype","tracked","i","constructor","owner","args","incomingPanelId","initialPanelId","panelsById","Map","panels","map","panel","id","previousPanelIds","items","set","incomingPanels","get","outgoingPanels","isOutgoingPanelVisible","outgoingPanelId","width","classes","hasPreviousPanel","panelId","has","showPanel","direction","hasNavigated","transitionDirection","showNextPanel","itemIndex","nextPanelId","isUsingKeyboardToNavigate","focusedItemIndex","initialFocusedItemIndex","n","action","showPreviousPanel","previousPanelId","index","findIndex","onItemClick","event","onClick","onOutgoingTransitionComplete","onIncomingHeightChange","height","onUseKeyboardToNavigate","setComponentTemplate","precompileTemplate","strictMode","scope","cssStyle","hash","EuiContextMenuPanel","EuiHorizontalRule","EuiContextMenuItem","on","fn"],"mappings":"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"}

package/dist/components/eui-control-bar.js

@@ -0,0 +1,113 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash, fn, get } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
+import cssStyle from '../-private/css-style.js';
+import EuiBreadcrumbs from './eui-breadcrumbs.js';
+import EuiButton from './eui-button.js';
+import EuiButtonIcon from './eui-button-icon.js';
+import EuiIcon from './eui-icon.js';
+import EuiPortal from './eui-portal.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiControlBar extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "selectedTab", [tracked]);
+  }
+  #selectedTab = (i(this, "selectedTab"), void 0);
+  get position() {
+    return this.args.position ?? 'fixed';
+  }
+  get isFixed() {
+    return this.position === 'fixed';
+  }
+  get classes() {
+    const {
+      showContent,
+      showOnMobile
+    } = this.args;
+    return ['euiControlBar', showContent && 'euiControlBar-isOpen', `euiControlBar--${{
+      s: 'small',
+      m: 'medium',
+      l: 'large'
+    }[this.args.size ?? 'l']}`, `euiControlBar--${this.position}`, showOnMobile && 'euiControlBar--showOnMobile'].filter(Boolean).join(' ');
+  }
+  get heading() {
+    return this.args.landmarkHeading ?? this.euiI18n.lookupToken('euiControlBar.screenReaderHeading', 'Page level controls');
+  }
+  get announcement() {
+    return this.args.landmarkHeading ? this.euiI18n.lookupToken('euiControlBar.customScreenReaderAnnouncement', 'There is a new region landmark called {landmarkHeading} with page level controls at the end of the document.', {
+      landmarkHeading: this.args.landmarkHeading
+    }) : this.euiI18n.lookupToken('euiControlBar.screenReaderAnnouncement', 'There is a new region landmark with page level controls at the end of the document.');
+  }
+  tabClasses = (id, className) => ['euiControlBar__tab', this.args.showContent && id === this.selectedTab && 'euiControlBar__tab--active', className].filter(Boolean).join(' ');
+  onTabClick(control, event) {
+    this.selectedTab = control.id;
+    control.onClick(event);
+  }
+  /** A fixed bar pads the bottom of `<body>` by its height while shown. */
+  static {
+    n(this.prototype, "onTabClick", [action]);
+  }
+  padBody = modifier((controls, [isFixed, bodyClassName]) => {
+    if (!isFixed) return;
+    document.body.style.paddingBottom = `${controls.clientHeight}px`;
+    if (bodyClassName) document.body.classList.add(bodyClassName);
+    return () => {
+      document.body.style.paddingBottom = '';
+      if (bodyClassName) document.body.classList.remove(bodyClassName);
+    };
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.isFixed}}\n  <EuiPortal>\n    {{!-- template-lint-disable no-duplicate-landmark-elements --}}\n    <section class={{this.classes}} aria-label={{this.heading}} style={{cssStyle (hash left=(if @leftOffset @leftOffset 0) right=(if @rightOffset @rightOffset 0) maxHeight=@maxHeight)}} ...attributes>\n      <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n      <div class=\"euiControlBar__controls\" {{this.padBody true @bodyClassName}}>\n        {{#each @controls as |control|}}\n          <Control @control={{control}} @tabClasses={{this.tabClasses}} @onTabClick={{this.onTabClick}} />\n        {{/each}}\n      </div>\n      {{#if @showContent}}\n        <div class=\"euiControlBar__content\">{{yield}}</div>\n      {{/if}}\n    </section>\n    <EuiScreenReaderOnly>\n      <p aria-live=\"assertive\">{{this.announcement}}</p>\n    </EuiScreenReaderOnly>\n  </EuiPortal>\n{{else}}\n  <section class={{this.classes}} aria-label={{this.heading}} style={{cssStyle (hash left=(if @leftOffset @leftOffset 0) right=(if @rightOffset @rightOffset 0) maxHeight=@maxHeight)}} ...attributes>\n    <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n    <div class=\"euiControlBar__controls\">\n      {{#each @controls as |control|}}\n        <Control @control={{control}} @tabClasses={{this.tabClasses}} @onTabClick={{this.onTabClick}} />\n      {{/each}}\n    </div>\n    {{#if @showContent}}\n      <div class=\"euiControlBar__content\">{{yield}}</div>\n    {{/if}}\n  </section>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiPortal,
+        cssStyle,
+        hash,
+        EuiScreenReaderOnly,
+        Control
+      })
+    }), this);
+  }
+}
+function is(control, type) {
+  return control.controlType === type ? control : undefined;
+}
+function noop() {}
+const Control = setComponentTemplate(precompileTemplate("{{#let (is @control \"button\") (is @control \"icon\") (is @control \"tab\") (is @control \"text\") (is @control \"breadcrumbs\") as |buttonControl iconControl tabControl textControl crumbsControl|}}\n  {{#if buttonControl}}\n    <EuiButton class=\"euiControlBar__button {{buttonControl.className}}\" @color={{if buttonControl.color buttonControl.color \"ghost\"}} @size=\"s\" @href={{buttonControl.href}} @iconType={{buttonControl.iconType}} @isDisabled={{buttonControl.isDisabled}} {{on \"click\" (if buttonControl.onClick buttonControl.onClick noop)}}>{{buttonControl.label}}</EuiButton>\n  {{else if iconControl}}\n    {{#if (or2 iconControl.onClick iconControl.href)}}\n      <EuiButtonIcon class=\"euiControlBar__buttonIcon {{iconControl.className}}\" @iconType={{iconControl.iconType}} @href={{iconControl.href}} @color={{if iconControl.color iconControl.color \"ghost\"}} aria-label={{get iconControl \"aria-label\"}} {{on \"click\" (if iconControl.onClick iconControl.onClick noop)}} />\n    {{else}}\n      <EuiIcon class=\"euiControlBar__icon {{iconControl.className}}\" @type={{iconControl.iconType}} @color={{if iconControl.color iconControl.color \"ghost\"}} aria-label={{get iconControl \"aria-label\"}} />\n    {{/if}}\n  {{else if tabControl}}\n    <button type=\"button\" class={{@tabClasses tabControl.id tabControl.className}} {{on \"click\" (fn @onTabClick tabControl)}}>{{tabControl.label}}</button>\n  {{else if textControl}}\n    <div class=\"euiControlBar__text {{textControl.className}}\">{{textControl.text}}</div>\n  {{else if crumbsControl}}\n    <EuiBreadcrumbs class=\"euiControlBar__breadcrumbs\" @breadcrumbs={{crumbsControl.breadcrumbs}} />\n  {{else if (eq2 @control.controlType \"divider\")}}\n    <div class=\"euiControlBar__divider\"></div>\n  {{else if (eq2 @control.controlType \"spacer\")}}\n    <div class=\"euiControlBar__spacer\"></div>\n  {{/if}}\n{{/let}}", {
+  strictMode: true,
+  scope: () => ({
+    is,
+    EuiButton,
+    on,
+    noop,
+    or2,
+    EuiButtonIcon,
+    get,
+    EuiIcon,
+    fn,
+    EuiBreadcrumbs,
+    eq2
+  })
+}), templateOnly());
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function eq2(a, b) {
+  return a === b;
+}
+
+export { EuiControlBar as default };
+//# sourceMappingURL=eui-control-bar.js.map

package/dist/components/eui-control-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-control-bar.js","sources":["../../src/components/eui-control-bar.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn, get, hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport cssStyle from '../-private/css-style.ts';\nimport EuiBreadcrumbs from './eui-breadcrumbs.gts';\nimport EuiButton from './eui-button.gts';\nimport EuiButtonIcon from './eui-button-icon.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiPortal from './eui-portal.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiBreadcrumb } from './eui-breadcrumbs';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A control in the bar; `controlType` decides which. */\nexport type EuiControlBarControl =\n  | {\n      controlType: 'button';\n      id: string;\n      label: string;\n      onClick?: (event: MouseEvent) => void;\n      href?: string;\n      /** Any `EuiButton` color. Defaults to `'ghost'`. */\n      color?: string;\n      iconType?: EuiIconSignature['Args']['type'];\n      isDisabled?: boolean;\n      className?: string;\n    }\n  | {\n      controlType: 'icon';\n      id: string;\n      iconType: EuiIconSignature['Args']['type'];\n      /** Makes it a button (with `href`, a link); otherwise a plain icon. */\n      onClick?: (event: MouseEvent) => void;\n      href?: string;\n      /** Accessible label; needed for icon buttons. */\n      'aria-label'?: string;\n      /** Any `EuiButtonIcon` color. Defaults to `'ghost'`. */\n      color?: 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'ghost' | 'text';\n      className?: string;\n    }\n  | {\n      controlType: 'tab';\n      id: string;\n      label: string;\n      /** Usually toggles `@showContent` and shows this tab's content. */\n      onClick: (event: MouseEvent) => void;\n      className?: string;\n    }\n  | { controlType: 'text'; id: string; text: string; className?: string }\n  | { controlType: 'breadcrumbs'; id: string; breadcrumbs: EuiBreadcrumb[] }\n  | { controlType: 'divider' }\n  | { controlType: 'spacer' };\n\n/**\n * A dark bar of controls at the bottom of the page (or of a container),\n * e.g. an editor's toolbar or a code console: buttons, icons, text,\n * breadcrumbs and tabs that open a content area above it.\n */\nexport interface EuiControlBarSignature {\n  Element: HTMLElement;\n  Args: {\n    /** The controls, from left to right. */\n    controls: EuiControlBarControl[];\n    /** Shows the content (the default block) above the controls. */\n    showContent?: boolean;\n    /** Height of the content area: `'s'`, `'m'` or `'l'`. Defaults to `'l'`. */\n    size?: 's' | 'm' | 'l';\n    /**\n     * `'fixed'` (bottom of the window, rendered at the end of `<body>`),\n     * `'absolute'` or `'relative'` (inside a positioned container).\n     * Defaults to `'fixed'`.\n     */\n    position?: 'fixed' | 'absolute' | 'relative';\n    /** Space on the left, e.g. for a side navigation. Defaults to `0`. */\n    leftOffset?: number | string;\n    /** Space on the right. Defaults to `0`. */\n    rightOffset?: number | string;\n    /** Maximum height of the bar with its content. */\n    maxHeight?: number | string;\n    /** Keeps the bar on small screens (hidden there by default). */\n    showOnMobile?: boolean;\n    /** Class added to `<body>` while a fixed bar is shown. */\n    bodyClassName?: string;\n    /** Accessible name of the bar's region. Defaults to \"Page level controls\". */\n    landmarkHeading?: string;\n  };\n  Blocks: {\n    /** Content shown above the controls while `@showContent`. */\n    default: [];\n  };\n}\n\nexport default class EuiControlBar extends Component<EuiControlBarSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked selectedTab?: string;\n\n  get position(): string {\n    return this.args.position ?? 'fixed';\n  }\n\n  get isFixed(): boolean {\n    return this.position === 'fixed';\n  }\n\n  get classes(): string {\n    const { showContent, showOnMobile } = this.args;\n\n    return [\n      'euiControlBar',\n      showContent && 'euiControlBar-isOpen',\n      `euiControlBar--${{ s: 'small', m: 'medium', l: 'large' }[this.args.size ?? 'l']}`,\n      `euiControlBar--${this.position}`,\n      showOnMobile && 'euiControlBar--showOnMobile'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get heading(): string {\n    return (\n      this.args.landmarkHeading ??\n      this.euiI18n.lookupToken('euiControlBar.screenReaderHeading', 'Page level controls')\n    );\n  }\n\n  get announcement(): string {\n    return this.args.landmarkHeading\n      ? this.euiI18n.lookupToken(\n          'euiControlBar.customScreenReaderAnnouncement',\n          'There is a new region landmark called {landmarkHeading} with page level controls at the end of the document.',\n          { landmarkHeading: this.args.landmarkHeading }\n        )\n      : this.euiI18n.lookupToken(\n          'euiControlBar.screenReaderAnnouncement',\n          'There is a new region landmark with page level controls at the end of the document.'\n        );\n  }\n\n  tabClasses = (id: string, className?: string): string =>\n    [\n      'euiControlBar__tab',\n      this.args.showContent && id === this.selectedTab && 'euiControlBar__tab--active',\n      className\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n  @action\n  onTabClick(control: { id: string; onClick: (event: MouseEvent) => void }, event: MouseEvent): void {\n    this.selectedTab = control.id;\n    control.onClick(event);\n  }\n\n  /** A fixed bar pads the bottom of `<body>` by its height while shown. */\n  padBody = modifier((controls: HTMLElement, [isFixed, bodyClassName]: [boolean, string | undefined]) => {\n    if (!isFixed) return;\n\n    document.body.style.paddingBottom = `${controls.clientHeight}px`;\n    if (bodyClassName) document.body.classList.add(bodyClassName);\n\n    return () => {\n      document.body.style.paddingBottom = '';\n      if (bodyClassName) document.body.classList.remove(bodyClassName);\n    };\n  });\n\n  <template>\n    {{#if this.isFixed}}\n      <EuiPortal>\n        {{! template-lint-disable no-duplicate-landmark-elements }}\n        <section\n          class={{this.classes}}\n          aria-label={{this.heading}}\n          style={{cssStyle\n            (hash\n              left=(if @leftOffset @leftOffset 0)\n              right=(if @rightOffset @rightOffset 0)\n              maxHeight=@maxHeight\n            )\n          }}\n          ...attributes\n        >\n          <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n          <div class=\"euiControlBar__controls\" {{this.padBody true @bodyClassName}}>\n            {{#each @controls as |control|}}\n              <Control\n                @control={{control}}\n                @tabClasses={{this.tabClasses}}\n                @onTabClick={{this.onTabClick}}\n              />\n            {{/each}}\n          </div>\n          {{#if @showContent}}\n            <div class=\"euiControlBar__content\">{{yield}}</div>\n          {{/if}}\n        </section>\n        <EuiScreenReaderOnly>\n          <p aria-live=\"assertive\">{{this.announcement}}</p>\n        </EuiScreenReaderOnly>\n      </EuiPortal>\n    {{else}}\n      <section\n        class={{this.classes}}\n        aria-label={{this.heading}}\n        style={{cssStyle\n          (hash\n            left=(if @leftOffset @leftOffset 0)\n            right=(if @rightOffset @rightOffset 0)\n            maxHeight=@maxHeight\n          )\n        }}\n        ...attributes\n      >\n        <EuiScreenReaderOnly><h2>{{this.heading}}</h2></EuiScreenReaderOnly>\n        <div class=\"euiControlBar__controls\">\n          {{#each @controls as |control|}}\n            <Control\n                @control={{control}}\n                @tabClasses={{this.tabClasses}}\n                @onTabClick={{this.onTabClick}}\n              />\n          {{/each}}\n        </div>\n        {{#if @showContent}}\n          <div class=\"euiControlBar__content\">{{yield}}</div>\n        {{/if}}\n      </section>\n    {{/if}}\n  </template>\n}\n\ninterface ControlSignature {\n  Args: {\n    control: EuiControlBarControl;\n    tabClasses: (id: string, className?: string) => string;\n    onTabClick: (control: { id: string; onClick: (event: MouseEvent) => void }, event: MouseEvent) => void;\n  };\n}\n\nfunction is<T extends EuiControlBarControl['controlType']>(\n  control: EuiControlBarControl,\n  type: T\n): Extract<EuiControlBarControl, { controlType: T }> | undefined {\n  return control.controlType === type\n    ? (control as Extract<EuiControlBarControl, { controlType: T }>)\n    : undefined;\n}\n\nfunction noop(): void {}\n\nconst Control: TemplateOnlyComponent<ControlSignature> = <template>\n  {{#let\n    (is @control \"button\")\n    (is @control \"icon\")\n    (is @control \"tab\")\n    (is @control \"text\")\n    (is @control \"breadcrumbs\")\n    as |buttonControl iconControl tabControl textControl crumbsControl|\n  }}\n    {{#if buttonControl}}\n      <EuiButton\n        class=\"euiControlBar__button {{buttonControl.className}}\"\n        @color={{if buttonControl.color buttonControl.color \"ghost\"}}\n        @size=\"s\"\n        @href={{buttonControl.href}}\n        @iconType={{buttonControl.iconType}}\n        @isDisabled={{buttonControl.isDisabled}}\n        {{on \"click\" (if buttonControl.onClick buttonControl.onClick noop)}}\n      >{{buttonControl.label}}</EuiButton>\n    {{else if iconControl}}\n      {{#if (or2 iconControl.onClick iconControl.href)}}\n        <EuiButtonIcon\n          class=\"euiControlBar__buttonIcon {{iconControl.className}}\"\n          @iconType={{iconControl.iconType}}\n          @href={{iconControl.href}}\n          @color={{if iconControl.color iconControl.color \"ghost\"}}\n          aria-label={{get iconControl \"aria-label\"}}\n          {{on \"click\" (if iconControl.onClick iconControl.onClick noop)}}\n        />\n      {{else}}\n        <EuiIcon\n          class=\"euiControlBar__icon {{iconControl.className}}\"\n          @type={{iconControl.iconType}}\n          @color={{if iconControl.color iconControl.color \"ghost\"}}\n          aria-label={{get iconControl \"aria-label\"}}\n        />\n      {{/if}}\n    {{else if tabControl}}\n      <button\n        type=\"button\"\n        class={{@tabClasses tabControl.id tabControl.className}}\n        {{on \"click\" (fn @onTabClick tabControl)}}\n      >{{tabControl.label}}</button>\n    {{else if textControl}}\n      <div class=\"euiControlBar__text {{textControl.className}}\">{{textControl.text}}</div>\n    {{else if crumbsControl}}\n      <EuiBreadcrumbs\n        class=\"euiControlBar__breadcrumbs\"\n        @breadcrumbs={{crumbsControl.breadcrumbs}}\n      />\n    {{else if (eq2 @control.controlType \"divider\")}}\n      <div class=\"euiControlBar__divider\"></div>\n    {{else if (eq2 @control.controlType \"spacer\")}}\n      <div class=\"euiControlBar__spacer\"></div>\n    {{/if}}\n  {{/let}}\n</template>;\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction eq2(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n"],"names":["EuiControlBar","Component","g","prototype","service","i","tracked","position","args","isFixed","classes","showContent","showOnMobile","s","m","l","size","filter","Boolean","join","heading","landmarkHeading","euiI18n","lookupToken","announcement","tabClasses","id","className","selectedTab","onTabClick","control","event","onClick","n","action","padBody","modifier","controls","bodyClassName","document","body","style","paddingBottom","clientHeight","classList","add","remove","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPortal","cssStyle","hash","EuiScreenReaderOnly","Control","is","type","controlType","undefined","noop","EuiButton","on","or2","EuiButtonIcon","get","EuiIcon","fn","EuiBreadcrumbs","eq2","templateOnly","a","b"],"mappings":";;;;;;;;;;;;;;;;;;;AAqGe,MAAMA,sBAAsBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAClDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;AAAA,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,aAAA,EAAA,CAEAG,OAAA,CAAA,CAAA;AAAA;EAAA,YAAA,IAAAD,CAAA,CAAA,IAAA,EAAA,aAAA,CAAA,EAAA,MAAA;EAED,IAAIE,QAAAA,GAAmB;AACrB,IAAA,OAAO,IAAI,CAACC,IAAI,CAACD,QAAQ,IAAI,OAAA;AAC/B,EAAA;EAEA,IAAIE,OAAAA,GAAmB;AACrB,IAAA,OAAO,IAAI,CAACF,QAAQ,KAAK,OAAA;AAC3B,EAAA;EAEA,IAAIG,OAAAA,GAAkB;IACpB,MAAM;MAAEC,WAAW;AAAEC,MAAAA;KAAc,GAAG,IAAI,CAACJ,IAAI;AAE/C,IAAA,OAAO,CACL,eAAA,EACAG,WAAA,IAAe,sBAAA,EACf,CAAA,eAAA,EAAkB;AAAEE,MAAAA,CAAA,EAAG,OAAA;AAASC,MAAAA,CAAA,EAAG,QAAA;AAAUC,MAAAA,CAAA,EAAG;AAAQ,KAAC,CAAC,IAAI,CAACP,IAAI,CAACQ,IAAI,IAAI,IAAI,CAAA,CAAE,EAClF,CAAA,eAAA,EAAkB,IAAI,CAACT,QAAQ,CAAA,CAAE,EACjCK,YAAA,IAAgB,6BAAA,CACjB,CACEK,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AACV,EAAA;EAEA,IAAIC,OAAAA,GAAkB;AACpB,IAAA,OACE,IAAI,CAACZ,IAAI,CAACa,eAAe,IACzB,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,qCAAqC,qBAAA,CAChE;AACF,EAAA;EAEA,IAAIC,YAAAA,GAAuB;AACzB,IAAA,OAAO,IAAI,CAAChB,IAAI,CAACa,eAAe,GAC5B,IAAI,CAACC,OAAO,CAACC,WAAW,CACtB,gDACA,8GAAA,EACA;AAAEF,MAAAA,eAAA,EAAiB,IAAI,CAACb,IAAI,CAACa;KAAgB,CAAA,GAE/C,IAAI,CAACC,OAAO,CAACC,WAAW,CACtB,wCAAA,EACA,qFAAA,CAAA;AAER,EAAA;AAEAE,EAAAA,UAAA,GAAaA,CAACC,EAAU,EAAEC,SAAkB,KAC1C,CACE,oBAAA,EACA,IAAI,CAACnB,IAAI,CAACG,WAAW,IAAIe,EAAA,KAAO,IAAI,CAACE,WAAW,IAAI,4BAAA,EACpDD,SAAA,CACD,CACEV,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AAGVU,EAAAA,UAAAA,CAAWC,OAA6D,EAAEC,KAAiB,EAAQ;AACjG,IAAA,IAAI,CAACH,WAAW,GAAGE,OAAA,CAAQJ,EAAE;AAC7BI,IAAAA,OAAA,CAAQE,OAAO,CAACD,KAAA,CAAA;AAClB,EAAA;AAEA;AAAA,EAAA;IAAAE,CAAA,CAAA,IAAA,CAAA9B,SAAA,EAAA,YAAA,EAAA,CANC+B,MAAA,CAAA,CAAA;AAAA;EAODC,OAAA,GAAUC,QAAA,CAAS,CAACC,QAAU,EAAa,CAAC5B,OAAA,EAAS6B,aAAA,CAA6C,KAAA;IAChG,IAAI,CAAC7B,OAAA,EAAS;IAEd8B,QAAA,CAASC,IAAI,CAACC,KAAK,CAACC,aAAa,GAAG,CAAA,EAAGL,QAAA,CAASM,YAAY,CAAA,EAAA,CAAI;IAChE,IAAIL,eAAeC,QAAA,CAASC,IAAI,CAACI,SAAS,CAACC,GAAG,CAACP,aAAA,CAAA;AAE/C,IAAA,OAAO,MAAA;AACLC,MAAAA,QAAA,CAASC,IAAI,CAACC,KAAK,CAACC,aAAa,GAAG,EAAA;MACpC,IAAIJ,eAAeC,QAAA,CAASC,IAAI,CAACI,SAAS,CAACE,MAAM,CAACR,aAAA,CAAA;IACpD,CAAA;AACF,EAAA,CAAA,CAAA;AAEA,EAAA;IAAAS,oBAAA,CAAAC,kBAAA,CAAA,2/CAAA,EA8DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,IAAA;QAAAC,mBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAUA,SAASC,EAAAA,CACP1B,OAA6B,EAC7B2B,IAAO,EACuD;EAC9D,OAAO3B,QAAQ4B,WAAW,KAAKD,IAAA,GAC1B3B,UACD6B,SAAA;AACN;AAEA,SAASC,IAAAA,GAAY,CAAE;AAEvB,MAAML,OAA+B,GAAAR,oBAAA,CAAoBC,kBAAA,CAAA,+2DAAA,EAwDzD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAM,EAAA;IAAAK,SAAA;IAAAC,EAAA;IAAAF,IAAA;IAAAG,GAAA;IAAAC,aAAA;IAAAC,GAAA;IAAAC,OAAA;IAAAC,EAAA;IAAAC,cAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAEV,SAASP,IAAIQ,CAAU,EAAEC,CAAU,EAAU;AAC3C,EAAA,OAAOtD,QAAQqD,CAAA,IAAKC,CAAA,CAAA;AACtB;AAEA,SAASH,IAAIE,CAAU,EAAEC,CAAU,EAAU;EAC3C,OAAOD,CAAA,KAAMC,CAAA;AACf;;"}

package/dist/components/eui-copy.js

@@ -5,32 +5,34 @@ import { copyToClipboard } from '../utils/copy-to-clipboard.js';
 import EuiToolTip from './eui-tool-tip.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i, n } from 'decorator-transforms/runtime';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 class EuiCopyComponent extends Component {
   static {
-    g(this.prototype, "tooltipText", [tracked], function () {
-      return this.args.beforeMessage;
+    g(this.prototype, "isCopied", [tracked], function () {
+      return false;
     });
   }
-  #tooltipText = (i(this, "tooltipText"), void 0);
+  #isCopied = (i(this, "isCopied"), void 0);
+  get tooltipText() {
+    return this.isCopied ? this.args.afterMessage : this.args.beforeMessage;
+  }
   copy() {
-    const isCopied = copyToClipboard(this.args.textToCopy);
-    if (isCopied) {
-      this.tooltipText = this.args.afterMessage;
+    if (copyToClipboard(this.args.textToCopy)) {
+      this.isCopied = true;
     }
   }
   static {
     n(this.prototype, "copy", [action]);
   }
   resetTooltipText() {
-    this.tooltipText = this.args.beforeMessage;
+    this.isCopied = false;
   }
   static {
     n(this.prototype, "resetTooltipText", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    <EuiToolTip @content={{this.tooltipText}} @onMouseOut={{this.resetTooltipText}} ...attributes>\n      <:anchor>\n        {{yield this.copy}}\n      </:anchor>\n    </EuiToolTip>\n  ", {
+    setComponentTemplate(precompileTemplate("<EuiToolTip @content={{this.tooltipText}} @onMouseOut={{this.resetTooltipText}} ...attributes>\n  <:anchor>\n    {{yield this.copy}}\n  </:anchor>\n</EuiToolTip>", {
       strictMode: true,
       scope: () => ({
         EuiToolTip

package/dist/components/eui-copy.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-copy.js","sources":["../../src/components/eui-copy.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { action } from \"@ember/object\";\n\nimport { copyToClipboard } from \"../utils/copy-to-clipboard.ts\";\nimport EuiToolTip from \"./eui-tool-tip.gts\";\n\nimport type { EuiToolTipSignature } from \"./eui-tool-tip\";\n\ntype EuiCopyArgs = {\n  /**\n   * Text that will be copied to clipboard when copy function is executed.\n   */\n  textToCopy: string;\n  /**\n   * Tooltip message displayed before copy function is called.\n   */\n  beforeMessage?: string;\n  /**\n   * Tooltip message displayed after copy function is called that lets the user know that\n   * 'textToCopy' has been copied to the clipboard.\n   */\n  afterMessage?: string;\n\n  /**\n   * The element that will be used as the anchor for the tooltip.\n   * Defaults to the child element of EuiCopy.\n   */\n  anchor?: HTMLElement;\n};\n\nexport interface EuiCopySignature {\n  Element: EuiToolTipSignature[\"Element\"];\n  Args: EuiCopyArgs;\n  Blocks: {\n    default: [() => void];\n  };\n}\n\nexport default class EuiCopyComponent extends Component<EuiCopySignature> {\n  @tracked tooltipText = this.args.beforeMessage;\n\n  @action\n  copy() {\n    const isCopied = copyToClipboard(this.args.textToCopy);\n\n    if (isCopied) {\n      this.tooltipText = this.args.afterMessage;\n    }\n  }\n\n  @action\n  resetTooltipText(): void {\n    this.tooltipText = this.args.beforeMessage;\n  }\n\n  <template>\n    <EuiToolTip\n      @content={{this.tooltipText}}\n      @onMouseOut={{this.resetTooltipText}}\n      ...attributes\n    >\n      <:anchor>\n        {{yield this.copy}}\n      </:anchor>\n    </EuiToolTip>\n  </template>\n}\n"],"names":["EuiCopyComponent","Component","g","prototype","tracked","args","beforeMessage","i","void 0","copy","isCopied","copyToClipboard","textToCopy","tooltipText","afterMessage","n","action","resetTooltipText","setComponentTemplate","precompileTemplate","strictMode","scope","EuiToolTip"],"mappings":";;;;;;;;;AAuCe,MAAMA,yBAAyBC,SAAU,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,aAAA,EAAA,CACrDC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAsB,IAAI,CAACC,IAAI,CAACC,aAAa;AAAA,KAAA,CAAA;AAAA;AAAA,EAAA,YAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,aAAA,CAAA,EAAAC,MAAA;AAG9CC,EAAAA,IAAOA,GAAA;IACL,MAAMC,WAAWC,eAAgB,CAAA,IAAI,CAACN,IAAI,CAACO,UAAU,CAAA;AAErD,IAAA,IAAIF,QAAU,EAAA;AACZ,MAAA,IAAI,CAACG,WAAW,GAAG,IAAI,CAACR,IAAI,CAACS,YAAY;AAC3C;AACF;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAZ,SAAA,EAAA,MAAA,EAAA,CAPCa,MAAA,CAAA,CAAA;AAAA;AAUDC,EAAAA,gBAAAA,GAAyB;AACvB,IAAA,IAAI,CAACJ,WAAW,GAAG,IAAI,CAACR,IAAI,CAACC,aAAa;AAC5C;AAAA,EAAA;IAAAS,CAAA,CAAA,IAAA,CAAAZ,SAAA,EAAA,kBAAA,EAAA,CAHCa,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAUA,6LAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-copy.js","sources":["../../src/components/eui-copy.gts"],"sourcesContent":["import Component from \"@glimmer/component\";\nimport { tracked } from \"@glimmer/tracking\";\nimport { action } from \"@ember/object\";\n\nimport { copyToClipboard } from \"../utils/copy-to-clipboard.ts\";\nimport EuiToolTip from \"./eui-tool-tip.gts\";\n\nimport type { EuiToolTipSignature } from \"./eui-tool-tip\";\n\ntype EuiCopyArgs = {\n  /**\n   * Text that will be copied to clipboard when copy function is executed.\n   */\n  textToCopy: string;\n  /**\n   * Tooltip message displayed before copy function is called, e.g.\n   * \"Click to copy\". No tooltip without it.\n   */\n  beforeMessage?: string;\n  /**\n   * Tooltip message displayed after copy function is called that lets the user know that\n   * 'textToCopy' has been copied to the clipboard, e.g. \"Copied\".\n   */\n  afterMessage?: string;\n\n  /**\n   * @deprecated Has no effect: the tooltip is anchored to the block's\n   * content.\n   */\n  anchor?: HTMLElement;\n};\n\nexport interface EuiCopySignature {\n  Element: EuiToolTipSignature['Element'];\n  Args: EuiCopyArgs;\n  Blocks: {\n    /**\n     * The element triggering the copy; call the yielded function from it:\n     * `as |copy|` → `<EuiButton {{on \"click\" copy}}>Copy</EuiButton>`.\n     */\n    default: [() => void];\n  };\n}\n\nexport default class EuiCopyComponent extends Component<EuiCopySignature> {\n  @tracked isCopied = false;\n\n  get tooltipText() {\n    return this.isCopied ? this.args.afterMessage : this.args.beforeMessage;\n  }\n\n  @action\n  copy() {\n    if (copyToClipboard(this.args.textToCopy)) {\n      this.isCopied = true;\n    }\n  }\n\n  @action\n  resetTooltipText(): void {\n    this.isCopied = false;\n  }\n\n  <template>\n    <EuiToolTip\n      @content={{this.tooltipText}}\n      @onMouseOut={{this.resetTooltipText}}\n      ...attributes\n    >\n      <:anchor>\n        {{yield this.copy}}\n      </:anchor>\n    </EuiToolTip>\n  </template>\n}\n"],"names":["EuiCopyComponent","Component","g","prototype","tracked","i","tooltipText","isCopied","args","afterMessage","beforeMessage","copy","copyToClipboard","textToCopy","n","action","resetTooltipText","setComponentTemplate","precompileTemplate","strictMode","scope","EuiToolTip"],"mappings":";;;;;;;;;AA4Ce,MAAMA,yBAAyBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,UAAA,EAAA,CACrDC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAmB,KAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,SAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,UAAA,CAAA,EAAA,MAAA;EAEpB,IAAIC,WAAAA,GAAc;AAChB,IAAA,OAAO,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACC,IAAI,CAACC,YAAY,GAAG,IAAI,CAACD,IAAI,CAACE,aAAa;AACzE,EAAA;AAGAC,EAAAA,IAAAA,GAAO;IACL,IAAIC,gBAAgB,IAAI,CAACJ,IAAI,CAACK,UAAU,CAAA,EAAG;MACzC,IAAI,CAACN,QAAQ,GAAG,IAAA;AAClB,IAAA;AACF,EAAA;AAAA,EAAA;IAAAO,CAAA,CAAA,IAAA,CAAAX,SAAA,EAAA,MAAA,EAAA,CALCY,MAAA,CAAA,CAAA;AAAA;AAQDC,EAAAA,gBAAAA,GAAyB;IACvB,IAAI,CAACT,QAAQ,GAAG,KAAA;AAClB,EAAA;AAAA,EAAA;IAAAO,CAAA,CAAA,IAAA,CAAAX,SAAA,EAAA,kBAAA,EAAA,CAHCY,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAAA,mKAAA,EAUA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-date-picker-range.js

@@ -0,0 +1,24 @@
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const START = 'euiDatePicker euiDatePickerRange__start';
+const END = 'euiDatePicker euiDatePickerRange__end';
+/**
+ * Two date inputs joined in one field with an arrow between them, for a
+ * start and end date. It only does the layout: put any date input in the
+ * blocks (`EuiPikaday`, `EuiFlatpickr`, or `<EuiFieldText type="date">`),
+ * rendered without their own frame (`@controlOnly={{true}}`) and with the
+ * class each block yields.
+ */
+
+const EuiDatePickerRange = setComponentTemplate(precompileTemplate("<div class=\"euiDatePickerRange\n    {{if @fullWidth \"euiDatePickerRange--fullWidth\"}}\n    {{if @readOnly \"euiDatePickerRange--readOnly\"}}\" ...attributes>\n  {{#if (has-block)}}\n    {{yield}}\n  {{else}}\n    {{yield START to=\"start\"}}\n    <div class=\"euiText euiText--small euiDatePickerRange__delimeter\"><div class=\"euiTextColor euiTextColor--subdued\">\u2192</div></div>\n    {{yield END to=\"end\"}}\n  {{/if}}\n</div>", {
+  strictMode: true,
+  scope: () => ({
+    START,
+    END
+  })
+}), templateOnly());
+
+export { EuiDatePickerRange as default };
+//# sourceMappingURL=eui-date-picker-range.js.map

package/dist/components/eui-date-picker-range.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-date-picker-range.js","sources":["../../src/components/eui-date-picker-range.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst START = 'euiDatePicker euiDatePickerRange__start';\nconst END = 'euiDatePicker euiDatePickerRange__end';\n\n/**\n * Two date inputs joined in one field with an arrow between them, for a\n * start and end date. It only does the layout: put any date input in the\n * blocks (`EuiPikaday`, `EuiFlatpickr`, or `<EuiFieldText type=\"date\">`),\n * rendered without their own frame (`@controlOnly={{true}}`) and with the\n * class each block yields.\n */\nexport interface EuiDatePickerRangeSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Takes the container's full width instead of 400px at most. */\n    fullWidth?: boolean;\n    /** Read-only look. */\n    readOnly?: boolean;\n  };\n  Blocks: {\n    /** The start input; yields the classes to give it. */\n    start: [className: string];\n    /** The end input; yields the classes to give it. */\n    end: [className: string];\n    /** Anything else, instead of the start and end blocks. */\n    default: [];\n  };\n}\n\nconst EuiDatePickerRange: TemplateOnlyComponent<EuiDatePickerRangeSignature> =\n  <template>\n    <div\n      class=\"euiDatePickerRange\n        {{if @fullWidth 'euiDatePickerRange--fullWidth'}}\n        {{if @readOnly 'euiDatePickerRange--readOnly'}}\"\n      ...attributes\n    >\n      {{#if (has-block)}}\n        {{yield}}\n      {{else}}\n        {{yield START to=\"start\"}}\n        <div\n          class=\"euiText euiText--small euiDatePickerRange__delimeter\"\n        ><div class=\"euiTextColor euiTextColor--subdued\">→</div></div>\n        {{yield END to=\"end\"}}\n      {{/if}}\n    </div>\n  </template>;\n\nexport default EuiDatePickerRange;\n"],"names":["START","END","EuiDatePickerRange","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;AAEA,MAAMA,KAAA,GAAQ,yCAAA;AACd,MAAMC,GAAA,GAAM,uCAAA;AAEZ;;;;;;AAMC;;AAmBD,MAAMC,kBAA0C,GAAAC,oBAAA,CAC9CC,kBAAA,CAAA,qbAAA,EAiBA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAN,KAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAM,YAAA,EAAA;;"}

package/dist/components/eui-delay-hide.js

@@ -0,0 +1,50 @@
+import { tracked } from '@glimmer/tracking';
+import Helper from '@ember/component/helper';
+import { later, cancel } from '@ember/runloop';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+/**
+ * Whether the content is shown. Each time it appears a countdown starts;
+ * it may hide once the latest countdown has expired.
+ */
+class IsShown extends Helper {
+  countdown = 0;
+  static {
+    g(this.prototype, "expiredCountdown", [tracked], function () {
+      return 0;
+    });
+  }
+  #expiredCountdown = (i(this, "expiredCountdown"), void 0);
+  timer;
+  wasHidden;
+  compute([hide, minimumDuration]) {
+    const hidden = Boolean(hide);
+    // becoming visible starts a countdown, unless one is running
+    if (!hidden && this.wasHidden !== false && !this.timer) {
+      const countdown = ++this.countdown;
+      this.timer = later(() => {
+        this.timer = undefined;
+        this.expiredCountdown = countdown;
+      }, minimumDuration ?? 1000);
+    }
+    this.wasHidden = hidden;
+    // hidden from the start (no countdown yet) shows nothing
+    return !hidden || this.countdown > 0 && this.expiredCountdown !== this.countdown;
+  }
+  willDestroy() {
+    super.willDestroy();
+    if (this.timer) cancel(this.timer);
+  }
+}
+const EuiDelayHide = setComponentTemplate(precompileTemplate("{{#if (IsShown @hide @minimumDuration)}}\n  {{yield}}\n{{/if}}", {
+  strictMode: true,
+  scope: () => ({
+    IsShown
+  })
+}), templateOnly());
+
+export { EuiDelayHide as default };
+//# sourceMappingURL=eui-delay-hide.js.map

package/dist/components/eui-delay-hide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-delay-hide.js","sources":["../../src/components/eui-delay-hide.gts"],"sourcesContent":["import { tracked } from '@glimmer/tracking';\nimport Helper from '@ember/component/helper';\nimport { cancel, later } from '@ember/runloop';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\nimport type { Timer } from '@ember/runloop';\n\n/**\n * Keeps its content shown for a minimum time once it appears, even if\n * `@hide` becomes true sooner, e.g. so a fast loading indicator does not\n * flash.\n */\nexport interface EuiDelayHideSignature {\n  Args: {\n    /** Hides the content (once it has been shown for the minimum time). */\n    hide?: boolean;\n    /** Milliseconds the content stays at least. Defaults to `1000`. */\n    minimumDuration?: number;\n  };\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\n/**\n * Whether the content is shown. Each time it appears a countdown starts;\n * it may hide once the latest countdown has expired.\n */\nclass IsShown extends Helper<{\n  Args: { Positional: [hide: boolean | undefined, minimumDuration: number | undefined] };\n  Return: boolean;\n}> {\n  countdown = 0;\n  @tracked expiredCountdown = 0;\n  timer?: Timer;\n  wasHidden?: boolean;\n\n  compute([hide, minimumDuration]: [boolean | undefined, number | undefined]): boolean {\n    const hidden = Boolean(hide);\n\n    // becoming visible starts a countdown, unless one is running\n    if (!hidden && this.wasHidden !== false && !this.timer) {\n      const countdown = ++this.countdown;\n\n      this.timer = later(() => {\n        this.timer = undefined;\n        this.expiredCountdown = countdown;\n      }, minimumDuration ?? 1000);\n    }\n\n    this.wasHidden = hidden;\n\n    // hidden from the start (no countdown yet) shows nothing\n    return !hidden || (this.countdown > 0 && this.expiredCountdown !== this.countdown);\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n    if (this.timer) cancel(this.timer);\n  }\n}\n\nconst EuiDelayHide: TemplateOnlyComponent<EuiDelayHideSignature> = <template>\n  {{#if (IsShown @hide @minimumDuration)}}\n    {{yield}}\n  {{/if}}\n</template>;\n\nexport default EuiDelayHide;\n"],"names":["IsShown","Helper","countdown","g","prototype","tracked","i","timer","wasHidden","compute","hide","minimumDuration","hidden","Boolean","later","undefined","expiredCountdown","willDestroy","cancel","EuiDelayHide","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;;;;;AAyBA;;;AAGC;AACD,MAAMA,OAAA,SAAgBC,MAAA;AAIpBC,EAAAA,SAAA,GAAY,CAAA;AAAE,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,kBAAA,EAAA,CACbC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAA2B,CAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,iBAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,kBAAA,CAAA,EAAA,MAAA;EAC5BC,KAAA;EACAC,SAAA;AAEAC,EAAAA,OAAAA,CAAQ,CAACC,IAAA,EAAMC,eAAA,CAA2D,EAAW;AACnF,IAAA,MAAMC,SAASC,OAAA,CAAQH,IAAA,CAAA;AAEvB;AACA,IAAA,IAAI,CAACE,MAAA,IAAU,IAAI,CAACJ,SAAS,KAAK,KAAA,IAAS,CAAC,IAAI,CAACD,KAAK,EAAE;AACtD,MAAA,MAAML,SAAA,GAAY,EAAE,IAAI,CAACA,SAAS;AAElC,MAAA,IAAI,CAACK,KAAK,GAAGO,KAAA,CAAM,MAAA;QACjB,IAAI,CAACP,KAAK,GAAGQ,SAAA;QACb,IAAI,CAACC,gBAAgB,GAAGd,SAAA;AAC1B,MAAA,CAAA,EAAGS,eAAA,IAAmB,IAAA,CAAA;AACxB,IAAA;IAEA,IAAI,CAACH,SAAS,GAAGI,MAAA;AAEjB;AACA,IAAA,OAAO,CAACA,MAAA,IAAW,IAAI,CAACV,SAAS,GAAG,CAAA,IAAK,IAAI,CAACc,gBAAgB,KAAK,IAAI,CAACd,SAAS;AACnF,EAAA;AAEAe,EAAAA,WAAAA,GAAoB;IAClB,KAAK,CAACA,WAAA,EAAA;IACN,IAAI,IAAI,CAACV,KAAK,EAAEW,MAAA,CAAO,IAAI,CAACX,KAAK,CAAA;AACnC,EAAA;AACF;AAEA,MAAMY,YAAoC,GAAAC,oBAAA,CAAyBC,kBAAA,CAAA,gEAAA,EAInE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAvB,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAwB,YAAA,EAAA;;"}

package/dist/components/eui-delay-render.js

@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { registerDestructor } from '@ember/destroyable';
+import { later, cancel } from '@ember/runloop';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+class EuiDelayRender extends Component {
+  static {
+    g(this.prototype, "isVisible", [tracked], function () {
+      return false;
+    });
+  }
+  #isVisible = (i(this, "isVisible"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    const timer = later(() => this.isVisible = true, this.args.delay ?? 500);
+    registerDestructor(this, () => cancel(timer));
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if this.isVisible}}\n  {{yield}}\n{{/if}}", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { EuiDelayRender as default };
+//# sourceMappingURL=eui-delay-render.js.map

package/dist/components/eui-delay-render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-delay-render.js","sources":["../../src/components/eui-delay-render.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { registerDestructor } from '@ember/destroyable';\nimport { cancel, later } from '@ember/runloop';\n\nimport type Owner from '@ember/owner';\n\n/**\n * Renders its content only after a delay, e.g. a loading indicator that\n * should not flash when loading is fast.\n */\nexport interface EuiDelayRenderSignature {\n  Args: {\n    /** Milliseconds to wait before rendering. Defaults to `500`. */\n    delay?: number;\n  };\n  Blocks: {\n    /** Rendered once the delay has passed. */\n    default: [];\n  };\n}\n\nexport default class EuiDelayRender extends Component<EuiDelayRenderSignature> {\n  @tracked isVisible = false;\n\n  constructor(owner: Owner, args: EuiDelayRenderSignature['Args']) {\n    super(owner, args);\n\n    const timer = later(() => (this.isVisible = true), this.args.delay ?? 500);\n\n    registerDestructor(this, () => cancel(timer));\n  }\n\n  <template>\n    {{#if this.isVisible}}\n      {{yield}}\n    {{/if}}\n  </template>\n}\n"],"names":["EuiDelayRender","Component","g","prototype","tracked","i","constructor","owner","args","timer","later","isVisible","delay","registerDestructor","cancel","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;AAsBe,MAAMA,uBAAuBC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,WAAA,EAAA,CACnDC,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAoB,KAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAErBC,EAAAA,WAAAA,CAAYC,KAAY,EAAEC,IAAqC,EAAE;AAC/D,IAAA,KAAK,CAACD,KAAA,EAAOC,IAAA,CAAA;AAEb,IAAA,MAAMC,KAAA,GAAQC,KAAA,CAAM,MAAO,IAAI,CAACC,SAAS,GAAG,MAAO,IAAI,CAACH,IAAI,CAACI,KAAK,IAAI,GAAA,CAAA;IAEtEC,kBAAA,CAAmB,IAAI,EAAE,MAAMC,MAAA,CAAOL,KAAA,CAAA,CAAA;AACxC,EAAA;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAAA,8CAAA,EAIA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-described-form-group.js

@@ -8,7 +8,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiDescribedFormGroup = setComponentTemplate(precompileTemplate("\n    <div role=\"group\" class={{classNames \"euiDescribedFormGroup\" (if @fullWidth \"euiDescribedFormGroup--fullWidth\")}} ...attributes>\n      <EuiFlexGroup @gutterSize={{argOrDefault @gutterSize \"l\"}}>\n        <EuiFlexItem @grow={{@descriptionFlexItemProps.grow}} class={{@descriptionFlexItemProps.class}}>\n          <EuiTitle class=\"euiDescribedFormGroup__title\" @size={{@titleSize}} @tagName={{@titleTagName}}>\n            {{yield to=\"title\"}}\n          </EuiTitle>\n          <EuiText class=\"euiDescribedFormGroup__description\" @size=\"s\" @color=\"subdued\">\n            {{yield to=\"description\"}}\n          </EuiText>\n        </EuiFlexItem>\n        <EuiFlexItem class={{classNames \"euiDescribedFormGroup__fields\" @fieldFlexItemProps.class componentName=\"EuiDescribedFormGroup\" paddingSize=(argOrDefault @titleSize \"xs\")}} @grow={{@fieldFlexItemProps.grow}}>\n          {{yield}}\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </div>\n  ", {
+const EuiDescribedFormGroup = setComponentTemplate(precompileTemplate("<div role=\"group\" class={{classNames \"euiDescribedFormGroup\" (if @fullWidth \"euiDescribedFormGroup--fullWidth\")}} ...attributes>\n  <EuiFlexGroup @gutterSize={{argOrDefault @gutterSize \"l\"}}>\n    <EuiFlexItem @grow={{@descriptionFlexItemProps.grow}} class={{@descriptionFlexItemProps.class}}>\n      <EuiTitle class=\"euiDescribedFormGroup__title\" @size={{@titleSize}} @tagName={{@titleTagName}}>\n        {{yield to=\"title\"}}\n      </EuiTitle>\n      <EuiText class=\"euiDescribedFormGroup__description\" @size=\"s\" @color=\"subdued\">\n        {{yield to=\"description\"}}\n      </EuiText>\n    </EuiFlexItem>\n    <EuiFlexItem class={{classNames \"euiDescribedFormGroup__fields\" @fieldFlexItemProps.class componentName=\"EuiDescribedFormGroup\" paddingSize=(argOrDefault @titleSize \"xs\")}} @grow={{@fieldFlexItemProps.grow}}>\n      {{yield}}\n    </EuiFlexItem>\n  </EuiFlexGroup>\n</div>", {
   strictMode: true,
   scope: () => ({
     classNames,

package/dist/components/eui-described-form-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-described-form-group.js","sources":["../../src/components/eui-described-form-group.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiText from './eui-text.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type { EuiFlexGroupSignature } from './eui-flex-group';\nimport type { EuiFlexItemSignature } from './eui-flex-item';\nimport type { EuiTitleSignature } from './eui-title';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiDescribedFormGroupSignature {\n  Element: HTMLDivElement;\n  Args: {\n    fullWidth?: boolean;\n    gutterSize?: EuiFlexGroupSignature['Args']['gutterSize'];\n    titleSize?: EuiTitleSignature['Args']['size'];\n    titleTagName?: EuiTitleSignature['Args']['tagName'];\n    fieldFlexItemProps?: {\n      grow?: EuiFlexItemSignature['Args']['grow'];\n      class?: string;\n    };\n    descriptionFlexItemProps?: {\n      grow?: EuiFlexItemSignature['Args']['grow'];\n      class?: string;\n    };\n  };\n  Blocks: {\n    default: [];\n    title?: [];\n    description?: [];\n  };\n}\n\nconst EuiDescribedFormGroup: TemplateOnlyComponent<EuiDescribedFormGroupSignature> =\n  <template>\n    <div\n      role=\"group\"\n      class={{classNames\n        \"euiDescribedFormGroup\"\n        (if @fullWidth \"euiDescribedFormGroup--fullWidth\")\n      }}\n      ...attributes\n    >\n      <EuiFlexGroup @gutterSize={{argOrDefault @gutterSize \"l\"}}>\n        <EuiFlexItem\n          @grow={{@descriptionFlexItemProps.grow}}\n          class={{@descriptionFlexItemProps.class}}\n        >\n          <EuiTitle\n            class=\"euiDescribedFormGroup__title\"\n            @size={{@titleSize}}\n            @tagName={{@titleTagName}}\n          >\n            {{yield to=\"title\"}}\n          </EuiTitle>\n          <EuiText\n            class=\"euiDescribedFormGroup__description\"\n            @size=\"s\"\n            @color=\"subdued\"\n          >\n            {{yield to=\"description\"}}\n          </EuiText>\n        </EuiFlexItem>\n        <EuiFlexItem\n          class={{classNames\n            \"euiDescribedFormGroup__fields\"\n            @fieldFlexItemProps.class\n            componentName=\"EuiDescribedFormGroup\"\n            paddingSize=(argOrDefault @titleSize \"xs\")\n          }}\n          @grow={{@fieldFlexItemProps.grow}}\n        >\n          {{yield}}\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </div>\n  </template>;\n\nexport default EuiDescribedFormGroup;\n"],"names":["EuiDescribedFormGroup","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","EuiFlexGroup","argOrDefault","EuiFlexItem","EuiTitle","EuiText","templateOnly"],"mappings":";;;;;;;;;;AAmCA,MAAMA,qBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CA0CA,k9BAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC,QAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-described-form-group.js","sources":["../../src/components/eui-described-form-group.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiText from './eui-text.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type { EuiFlexGroupSignature } from './eui-flex-group';\nimport type { EuiFlexItemSignature } from './eui-flex-item';\nimport type { EuiTitleSignature } from './eui-title';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * A section of a long form: a title and description on the left, its\n * fields on the right (stacked on small screens).\n */\nexport interface EuiDescribedFormGroupSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Lets the fields column grow to the container's width. */\n    fullWidth?: boolean;\n    /** Space between the description and the fields. Defaults to `'l'`. */\n    gutterSize?: EuiFlexGroupSignature['Args']['gutterSize'];\n    /**\n     * Size of the title, any `EuiTitle` size; also aligns the fields with\n     * it. Defaults to `'xs'`.\n     */\n    titleSize?: EuiTitleSignature['Args']['size'];\n    /** Tag of the title, e.g. `'h3'`. */\n    titleTagName?: EuiTitleSignature['Args']['tagName'];\n    /** Props for the fields column: `{ grow, class }`. */\n    fieldFlexItemProps?: {\n      grow?: EuiFlexItemSignature['Args']['grow'];\n      class?: string;\n    };\n    /** Props for the title and description column: `{ grow, class }`. */\n    descriptionFlexItemProps?: {\n      grow?: EuiFlexItemSignature['Args']['grow'];\n      class?: string;\n    };\n  };\n  Blocks: {\n    /** The fields, usually `EuiFormRow`s. */\n    default: [];\n    /**\n     * Title of the group (on the left), as text: it is rendered in an\n     * `EuiTitle` whose tag is `@titleTagName`.\n     */\n    title?: [];\n    /** Explanation under the title. */\n    description?: [];\n  };\n}\n\nconst EuiDescribedFormGroup: TemplateOnlyComponent<EuiDescribedFormGroupSignature> =\n  <template>\n    <div\n      role=\"group\"\n      class={{classNames\n        \"euiDescribedFormGroup\"\n        (if @fullWidth \"euiDescribedFormGroup--fullWidth\")\n      }}\n      ...attributes\n    >\n      <EuiFlexGroup @gutterSize={{argOrDefault @gutterSize \"l\"}}>\n        <EuiFlexItem\n          @grow={{@descriptionFlexItemProps.grow}}\n          class={{@descriptionFlexItemProps.class}}\n        >\n          <EuiTitle\n            class=\"euiDescribedFormGroup__title\"\n            @size={{@titleSize}}\n            @tagName={{@titleTagName}}\n          >\n            {{yield to=\"title\"}}\n          </EuiTitle>\n          <EuiText\n            class=\"euiDescribedFormGroup__description\"\n            @size=\"s\"\n            @color=\"subdued\"\n          >\n            {{yield to=\"description\"}}\n          </EuiText>\n        </EuiFlexItem>\n        <EuiFlexItem\n          class={{classNames\n            \"euiDescribedFormGroup__fields\"\n            @fieldFlexItemProps.class\n            componentName=\"EuiDescribedFormGroup\"\n            paddingSize=(argOrDefault @titleSize \"xs\")\n          }}\n          @grow={{@fieldFlexItemProps.grow}}\n        >\n          {{yield}}\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </div>\n  </template>;\n\nexport default EuiDescribedFormGroup;\n"],"names":["EuiDescribedFormGroup","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","EuiFlexGroup","argOrDefault","EuiFlexItem","EuiTitle","EuiText","templateOnly"],"mappings":";;;;;;;;;;AAsDA,MAAMA,qBAA6C,GAAAC,oBAAA,CACjDC,kBAAA,CAAA,g5BAAA,EA0CA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC,QAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}