@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-selectable.js

@@ -0,0 +1,231 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { randomId } from '../-private/random-id.js';
+import { getMatchingOptions, toggleOption } from '../-private/selectable-options.js';
+import EuiLoadingSpinner from './eui-loading-spinner.js';
+import EuiSelectableList from './eui-selectable-list.js';
+import EuiSelectableMessage from './eui-selectable-message.js';
+import EuiSelectableSearch from './eui-selectable-search.js';
+import EuiSpacer from './eui-spacer.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiSelectable extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "searchValue", [tracked], function () {
+      return '';
+    });
+  }
+  #searchValue = (i(this, "searchValue"), void 0);
+  static {
+    g(this.prototype, "activeOptionIndex", [tracked]);
+  }
+  #activeOptionIndex = (i(this, "activeOptionIndex"), void 0);
+  static {
+    g(this.prototype, "isFocused", [tracked], function () {
+      return false;
+    });
+  }
+  #isFocused = (i(this, "isFocused"), void 0);
+  rootId = `euiSelectable_${randomId()}`;
+  preventOnFocus = false;
+  constructor(owner, args) {
+    super(owner, args);
+    this.searchValue = args.searchProps?.defaultValue ?? '';
+    // a single selected option starts as the current one
+    const checked = args.options.filter(option => option.checked);
+    if (args.singleSelection && checked.length === 1) {
+      const index = this.visibleOptions.indexOf(checked[0]);
+      if (index !== -1) this.activeOptionIndex = index;
+    }
+  }
+  get visibleOptions() {
+    return getMatchingOptions(this.args.options, this.searchValue, this.args.isPreFiltered);
+  }
+  get listId() {
+    return `${this.rootId}_listbox`;
+  }
+  get messageId() {
+    return `${this.rootId}_messageContent`;
+  }
+  makeOptionId = index => `${this.listId}_option-${index}`;
+  get activeDescendant() {
+    return this.activeOptionIndex === undefined ? undefined : this.makeOptionId(this.activeOptionIndex);
+  }
+  get placeholder() {
+    return this.args.searchProps?.placeholder ?? this.euiI18n.lookupToken('euiSelectable.placeholderName', 'Filter options');
+  }
+  get message() {
+    if (this.args.isLoading) {
+      return {
+        isLoading: true,
+        text: this.args.loadingMessage ?? this.euiI18n.lookupToken('euiSelectable.loadingOptions', 'Loading options')
+      };
+    }
+    if (this.searchValue && this.visibleOptions.length === 0) {
+      return this.args.noMatchesMessage ? {
+        text: this.args.noMatchesMessage
+      } : {
+        searchValue: this.searchValue
+      };
+    }
+    if (!this.args.options.length) {
+      return {
+        text: this.args.emptyMessage ?? this.euiI18n.lookupToken('euiSelectable.noAvailableOptions', 'No options available')
+      };
+    }
+    return undefined;
+  }
+  get noMatchesSuffix() {
+    return this.euiI18n.lookupToken('euiSelectable.noMatchingOptions', "{searchValue} doesn't match any options", {
+      searchValue: '\u0000'
+    }).split('\u0000').slice(1).join('');
+  }
+  get noMatchesPrefix() {
+    return this.euiI18n.lookupToken('euiSelectable.noMatchingOptions', "{searchValue} doesn't match any options", {
+      searchValue: '\u0000'
+    }).split('\u0000')[0];
+  }
+  isSelectable = option => Boolean(option && !option.disabled && !option.isGroupLabel);
+  onMouseDown() {
+    // a click on an option must not first move the current option
+    this.preventOnFocus = true;
+  }
+  static {
+    n(this.prototype, "onMouseDown", [action]);
+  }
+  onFocus() {
+    if (this.preventOnFocus) {
+      this.preventOnFocus = false;
+      return;
+    }
+    if (!this.visibleOptions.length || this.activeOptionIndex) return;
+    const firstChecked = this.visibleOptions.findIndex(option => option.checked && this.isSelectable(option));
+    this.activeOptionIndex = firstChecked > -1 ? firstChecked : this.visibleOptions.findIndex(this.isSelectable);
+    this.isFocused = true;
+  }
+  static {
+    n(this.prototype, "onFocus", [action]);
+  }
+  onBlur(event) {
+    const container = event.currentTarget;
+    if (event.relatedTarget && container.contains(event.relatedTarget)) return;
+    this.activeOptionIndex = undefined;
+    this.isFocused = false;
+  }
+  static {
+    n(this.prototype, "onBlur", [action]);
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        event.stopPropagation();
+        this.moveActiveOption(-1);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        event.stopPropagation();
+        this.moveActiveOption(1);
+        break;
+      case 'Enter':
+        {
+          event.preventDefault();
+          event.stopPropagation();
+          const option = this.activeOptionIndex !== undefined ? this.visibleOptions[this.activeOptionIndex] : undefined;
+          const options = option ? toggleOption(this.args.options, option, {
+            allowExclusions: this.args.allowExclusions,
+            singleSelection: this.args.singleSelection
+          }) : undefined;
+          if (options) this.args.onChange?.(options);
+          break;
+        }
+      default:
+        // typing in the search: the current option is picked again
+        this.activeOptionIndex = undefined;
+        break;
+    }
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  moveActiveOption(amount) {
+    const options = this.visibleOptions;
+    if (!options.length || !options.some(this.isSelectable)) return;
+    const current = this.activeOptionIndex;
+    let next = current === undefined || current < 0 ? amount < 0 ? options.length - 1 : 0 : (current + amount + options.length) % options.length;
+    // skip group labels and disabled options
+    while (!this.isSelectable(options[next])) {
+      next = (next + (amount > 0 ? 1 : -1) + options.length) % options.length;
+    }
+    this.activeOptionIndex = next;
+  }
+  onSearchChange(matchingOptions, searchValue) {
+    this.searchValue = searchValue;
+    this.activeOptionIndex = undefined;
+    this.args.searchProps?.onSearch?.(searchValue, matchingOptions);
+    if (this.isFocused) this.onFocus();
+  }
+  static {
+    n(this.prototype, "onSearchChange", [action]);
+  }
+  setActiveOptionIndex(index) {
+    this.activeOptionIndex = index;
+  }
+  static {
+    n(this.prototype, "setActiveOptionIndex", [action]);
+  }
+  onOptionClick(options) {
+    this.args.onChange?.(options);
+  }
+  static {
+    n(this.prototype, "onOptionClick", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"euiSelectable {{if (isFull @height) \"euiSelectable-fullHeight\"}}\" {{on \"keydown\" this.onKeyDown}} {{on \"focusin\" this.onFocus}} {{on \"focusout\" this.onBlur}} {{on \"mousedown\" this.onMouseDown}} ...attributes>\n  {{#let (if @searchable (component EuiSelectableSearch options=@options onChange=this.onSearchChange placeholder=this.placeholder defaultValue=@searchProps.defaultValue compressed=@searchProps.compressed isPreFiltered=@isPreFiltered listId=(if this.message undefined this.listId))) (component SelectableBody selectable=this options=@options searchable=@searchable singleSelection=@singleSelection allowExclusions=@allowExclusions height=@height listProps=@listProps searchValue=this.searchValue activeOptionIndex=this.activeOptionIndex message=this.message) as |Search List|}}\n    {{#if (has-block)}}\n      {{yield (hash list=List search=Search)}}\n    {{else}}\n      {{#if Search}}\n        <Search aria-activedescendant={{this.activeDescendant}} aria-label={{this.placeholder}} />\n      {{/if}}\n      <List @hasOption={{has-block \"option\"}} @hasOptionPrepend={{has-block \"optionPrepend\"}} @hasOptionAppend={{has-block \"optionAppend\"}}>\n        <:option as |option searchValue|>\n          {{yield option searchValue to=\"option\"}}\n        </:option>\n        <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n        <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n      </List>\n    {{/if}}\n  {{/let}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        isFull,
+        on,
+        EuiSelectableSearch,
+        SelectableBody,
+        hash
+      })
+    }), this);
+  }
+}
+function flag(explicit, hasBlock) {
+  return explicit ?? hasBlock;
+}
+function isFull(height) {
+  return height === 'full';
+}
+/** The list, or the message replacing it (loading, no matches, empty). */class SelectableBody extends Component {
+  get selectable() {
+    return this.args.selectable;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if @message}}\n  <EuiSelectableMessage id={{this.selectable.messageId}} @bordered={{@listProps.bordered}} ...attributes>\n    {{#if @message.isLoading}}\n      <EuiLoadingSpinner @size=\"m\" />\n      <EuiSpacer @size=\"xs\" />\n    {{/if}}\n    <p>\n      {{#if @message.searchValue}}\n        {{this.selectable.noMatchesPrefix}}<strong>{{@message.searchValue}}</strong>{{this.selectable.noMatchesSuffix}}\n      {{else}}\n        {{@message.text}}\n      {{/if}}\n    </p>\n  </EuiSelectableMessage>\n{{else}}\n  <EuiSelectableList @options={{@options}} @visibleOptions={{this.selectable.visibleOptions}} @searchValue={{@searchValue}} @activeOptionIndex={{@activeOptionIndex}} @setActiveOptionIndex={{this.selectable.setActiveOptionIndex}} @onOptionClick={{this.selectable.onOptionClick}} @singleSelection={{@singleSelection}} @allowExclusions={{@allowExclusions}} @searchable={{@searchable}} @height={{@height}} @bordered={{@listProps.bordered}} @showIcons={{@listProps.showIcons}} @rowHeight={{@listProps.rowHeight}} @onFocusBadge={{@listProps.onFocusBadge}} @listId={{this.selectable.listId}} @makeOptionId={{this.selectable.makeOptionId}} @hasOption={{flag @hasOption (has-block \"option\")}} @hasOptionPrepend={{flag @hasOptionPrepend (has-block \"optionPrepend\")}} @hasOptionAppend={{flag @hasOptionAppend (has-block \"optionAppend\")}} aria-label={{if @searchable this.selectable.placeholder}} ...attributes>\n    <:option as |option searchValue|>{{yield option searchValue to=\"option\"}}</:option>\n    <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n    <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n  </EuiSelectableList>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        EuiSelectableMessage,
+        EuiLoadingSpinner,
+        EuiSpacer,
+        EuiSelectableList,
+        flag
+      })
+    }), this);
+  }
+}
+
+export { EuiSelectable as default };
+//# sourceMappingURL=eui-selectable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-selectable.js","sources":["../../src/components/eui-selectable.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { randomId } from '../-private/random-id.ts';\nimport { getMatchingOptions, toggleOption } from '../-private/selectable-options.ts';\nimport EuiLoadingSpinner from './eui-loading-spinner.gts';\nimport EuiSelectableList from './eui-selectable-list.gts';\nimport EuiSelectableMessage from './eui-selectable-message.gts';\nimport EuiSelectableSearch from './eui-selectable-search.gts';\nimport EuiSpacer from './eui-spacer.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiSelectableOption } from '../-private/selectable-options.ts';\nimport type Owner from '@ember/owner';\nimport type { ComponentLike } from '@glint/template';\n\nexport type { EuiSelectableOption };\n\ninterface OptionBlocks {\n  /** Renders an option's label yourself; yields the option and the search. */\n  option: [option: EuiSelectableOption, searchValue: string];\n  /** Content before each label (e.g. an icon); yields the option. */\n  optionPrepend: [option: EuiSelectableOption];\n  /** Content after each label (e.g. a badge); yields the option. */\n  optionAppend: [option: EuiSelectableOption];\n}\n\n/**\n * A list of options to pick one or several from, optionally with a search\n * field. It is the building block of pickers: put it in a popover for a\n * filter menu, or in a panel for a \"choose fields\" list. Options are\n * `{ label, checked }` objects; `@onChange` gets them all back with the\n * change applied.\n */\nexport interface EuiSelectableSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The options: `{ label, checked, disabled, isGroupLabel, prepend, append }`. */\n    options: EuiSelectableOption[];\n    /** Called with all options after one is checked or unchecked. */\n    onChange?: (options: EuiSelectableOption[]) => void;\n    /** Adds a search field that filters the options. */\n    searchable?: boolean;\n    /**\n     * Options of the search field: `{ placeholder, compressed,\n     * defaultValue, onSearch(searchValue, matchingOptions) }`.\n     */\n    searchProps?: {\n      placeholder?: string;\n      compressed?: boolean;\n      defaultValue?: string;\n      onSearch?: (searchValue: string, matchingOptions: EuiSelectableOption[]) => void;\n    };\n    /**\n     * `true`: one option at most; `'always'`: exactly one (clicking the\n     * checked option keeps it).\n     */\n    singleSelection?: boolean | 'always';\n    /** Pressing a checked option excludes it (`checked: 'off'`, a cross). */\n    allowExclusions?: boolean;\n    /** Shows a loading message instead of the list. */\n    isLoading?: boolean;\n    /** The options are already filtered (e.g. by a server): the search does not filter. */\n    isPreFiltered?: boolean;\n    /** Height of the list in px, or `'full'` to fill the container. */\n    height?: number | 'full';\n    /**\n     * Options of the list: `{ bordered, showIcons, rowHeight, onFocusBadge }`.\n     */\n    listProps?: {\n      bordered?: boolean;\n      showIcons?: boolean;\n      rowHeight?: number;\n      onFocusBadge?: boolean | { text?: string; iconSide?: 'left' | 'right' };\n    };\n    /** Message while `@isLoading`. Defaults to \"Loading options\". */\n    loadingMessage?: string;\n    /** Message when the search matches nothing. */\n    noMatchesMessage?: string;\n    /** Message when there are no options. Defaults to \"No options available\". */\n    emptyMessage?: string;\n  };\n  Blocks: {\n    /**\n     * Lays out the parts yourself: yields `{ list, search }` components,\n     * e.g. `as |parts|` → `<parts.search />` … `<parts.list />`. Without\n     * it, the search (if any) comes above the list.\n     */\n    default: [\n      {\n        list: ComponentLike<{ Element: HTMLDivElement; Blocks: OptionBlocks }>;\n        search: ComponentLike<{ Element: HTMLInputElement }> | undefined;\n      }\n    ];\n  } & OptionBlocks;\n}\n\nexport default class EuiSelectable extends Component<EuiSelectableSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked searchValue = '';\n  @tracked activeOptionIndex?: number;\n  @tracked isFocused = false;\n\n  rootId = `euiSelectable_${randomId()}`;\n  preventOnFocus = false;\n\n  constructor(owner: Owner, args: EuiSelectableSignature['Args']) {\n    super(owner, args);\n    this.searchValue = args.searchProps?.defaultValue ?? '';\n\n    // a single selected option starts as the current one\n    const checked = args.options.filter((option) => option.checked);\n\n    if (args.singleSelection && checked.length === 1) {\n      const index = this.visibleOptions.indexOf(checked[0]!);\n\n      if (index !== -1) this.activeOptionIndex = index;\n    }\n  }\n\n  get visibleOptions(): EuiSelectableOption[] {\n    return getMatchingOptions(this.args.options, this.searchValue, this.args.isPreFiltered);\n  }\n\n  get listId(): string {\n    return `${this.rootId}_listbox`;\n  }\n\n  get messageId(): string {\n    return `${this.rootId}_messageContent`;\n  }\n\n  makeOptionId = (index: number): string => `${this.listId}_option-${index}`;\n\n  get activeDescendant(): string | undefined {\n    return this.activeOptionIndex === undefined ? undefined : this.makeOptionId(this.activeOptionIndex);\n  }\n\n  get placeholder(): string {\n    return (\n      this.args.searchProps?.placeholder ??\n      this.euiI18n.lookupToken('euiSelectable.placeholderName', 'Filter options')\n    );\n  }\n\n  get message(): { text?: string; isLoading?: boolean; searchValue?: string } | undefined {\n    if (this.args.isLoading) {\n      return {\n        isLoading: true,\n        text:\n          this.args.loadingMessage ??\n          this.euiI18n.lookupToken('euiSelectable.loadingOptions', 'Loading options')\n      };\n    }\n\n    if (this.searchValue && this.visibleOptions.length === 0) {\n      return this.args.noMatchesMessage\n        ? { text: this.args.noMatchesMessage }\n        : { searchValue: this.searchValue };\n    }\n\n    if (!this.args.options.length) {\n      return {\n        text:\n          this.args.emptyMessage ??\n          this.euiI18n.lookupToken('euiSelectable.noAvailableOptions', 'No options available')\n      };\n    }\n\n    return undefined;\n  }\n\n  get noMatchesSuffix(): string {\n    return this.euiI18n\n      .lookupToken('euiSelectable.noMatchingOptions', \"{searchValue} doesn't match any options\", {\n        searchValue: '\\u0000'\n      })\n      .split('\\u0000')\n      .slice(1)\n      .join('');\n  }\n\n  get noMatchesPrefix(): string {\n    return this.euiI18n\n      .lookupToken('euiSelectable.noMatchingOptions', \"{searchValue} doesn't match any options\", {\n        searchValue: '\\u0000'\n      })\n      .split('\\u0000')[0]!;\n  }\n\n  isSelectable = (option: EuiSelectableOption | undefined): boolean =>\n    Boolean(option && !option.disabled && !option.isGroupLabel);\n\n  @action\n  onMouseDown(): void {\n    // a click on an option must not first move the current option\n    this.preventOnFocus = true;\n  }\n\n  @action\n  onFocus(): void {\n    if (this.preventOnFocus) {\n      this.preventOnFocus = false;\n\n      return;\n    }\n\n    if (!this.visibleOptions.length || this.activeOptionIndex) return;\n\n    const firstChecked = this.visibleOptions.findIndex(\n      (option) => option.checked && this.isSelectable(option)\n    );\n\n    this.activeOptionIndex =\n      firstChecked > -1 ? firstChecked : this.visibleOptions.findIndex(this.isSelectable);\n    this.isFocused = true;\n  }\n\n  @action\n  onBlur(event: FocusEvent): void {\n    const container = event.currentTarget as HTMLElement;\n\n    if (event.relatedTarget && container.contains(event.relatedTarget as Node)) return;\n\n    this.activeOptionIndex = undefined;\n    this.isFocused = false;\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        event.stopPropagation();\n        this.moveActiveOption(-1);\n        break;\n      case 'ArrowDown':\n        event.preventDefault();\n        event.stopPropagation();\n        this.moveActiveOption(1);\n        break;\n      case 'Enter': {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const option =\n          this.activeOptionIndex !== undefined\n            ? this.visibleOptions[this.activeOptionIndex]\n            : undefined;\n\n        const options = option\n          ? toggleOption(this.args.options, option, {\n              allowExclusions: this.args.allowExclusions,\n              singleSelection: this.args.singleSelection\n            })\n          : undefined;\n\n        if (options) this.args.onChange?.(options);\n        break;\n      }\n      default:\n        // typing in the search: the current option is picked again\n        this.activeOptionIndex = undefined;\n        break;\n    }\n  }\n\n  moveActiveOption(amount: number): void {\n    const options = this.visibleOptions;\n\n    if (!options.length || !options.some(this.isSelectable)) return;\n\n    const current = this.activeOptionIndex;\n    let next =\n      current === undefined || current < 0\n        ? amount < 0\n          ? options.length - 1\n          : 0\n        : (current + amount + options.length) % options.length;\n\n    // skip group labels and disabled options\n    while (!this.isSelectable(options[next])) {\n      next = (next + (amount > 0 ? 1 : -1) + options.length) % options.length;\n    }\n\n    this.activeOptionIndex = next;\n  }\n\n  @action\n  onSearchChange(matchingOptions: EuiSelectableOption[], searchValue: string): void {\n    this.searchValue = searchValue;\n    this.activeOptionIndex = undefined;\n    this.args.searchProps?.onSearch?.(searchValue, matchingOptions);\n\n    if (this.isFocused) this.onFocus();\n  }\n\n  @action\n  setActiveOptionIndex(index: number): void {\n    this.activeOptionIndex = index;\n  }\n\n  @action\n  onOptionClick(options: EuiSelectableOption[]): void {\n    this.args.onChange?.(options);\n  }\n\n  <template>\n    <div\n      class=\"euiSelectable {{if (isFull @height) 'euiSelectable-fullHeight'}}\"\n      {{on \"keydown\" this.onKeyDown}}\n      {{on \"focusin\" this.onFocus}}\n      {{on \"focusout\" this.onBlur}}\n      {{on \"mousedown\" this.onMouseDown}}\n      ...attributes\n    >\n      {{#let\n        (if\n          @searchable\n          (component\n            EuiSelectableSearch\n            options=@options\n            onChange=this.onSearchChange\n            placeholder=this.placeholder\n            defaultValue=@searchProps.defaultValue\n            compressed=@searchProps.compressed\n            isPreFiltered=@isPreFiltered\n            listId=(if this.message undefined this.listId)\n          )\n        )\n        (component\n          SelectableBody\n          selectable=this\n          options=@options\n          searchable=@searchable\n          singleSelection=@singleSelection\n          allowExclusions=@allowExclusions\n          height=@height\n          listProps=@listProps\n          searchValue=this.searchValue\n          activeOptionIndex=this.activeOptionIndex\n          message=this.message\n        )\n        as |Search List|\n      }}\n        {{#if (has-block)}}\n          {{yield (hash list=List search=Search)}}\n        {{else}}\n          {{#if Search}}\n            <Search\n              aria-activedescendant={{this.activeDescendant}}\n              aria-label={{this.placeholder}}\n            />\n          {{/if}}\n          <List\n            @hasOption={{has-block \"option\"}}\n            @hasOptionPrepend={{has-block \"optionPrepend\"}}\n            @hasOptionAppend={{has-block \"optionAppend\"}}\n          >\n            <:option as |option searchValue|>\n              {{yield option searchValue to=\"option\"}}\n            </:option>\n            <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n            <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n          </List>\n        {{/if}}\n      {{/let}}\n    </div>\n  </template>\n}\n\nfunction flag(explicit: boolean | undefined, hasBlock: boolean): boolean {\n  return explicit ?? hasBlock;\n}\n\nfunction isFull(height: unknown): boolean {\n  return height === 'full';\n}\n\ninterface SelectableBodySignature {\n  Element: HTMLDivElement;\n  Args: {\n    selectable: EuiSelectable;\n    options: EuiSelectableOption[];\n    searchable?: boolean;\n    singleSelection?: boolean | 'always';\n    allowExclusions?: boolean;\n    height?: number | 'full';\n    listProps?: EuiSelectableSignature['Args']['listProps'];\n    searchValue: string;\n    activeOptionIndex?: number;\n    message?: EuiSelectable['message'];\n    hasOption?: boolean;\n    hasOptionPrepend?: boolean;\n    hasOptionAppend?: boolean;\n  };\n  Blocks: OptionBlocks;\n}\n\n/** The list, or the message replacing it (loading, no matches, empty). */\nclass SelectableBody extends Component<SelectableBodySignature> {\n  get selectable(): EuiSelectable {\n    return this.args.selectable;\n  }\n\n  <template>\n    {{#if @message}}\n      <EuiSelectableMessage\n        id={{this.selectable.messageId}}\n        @bordered={{@listProps.bordered}}\n        ...attributes\n      >\n        {{#if @message.isLoading}}\n          <EuiLoadingSpinner @size=\"m\" />\n          <EuiSpacer @size=\"xs\" />\n        {{/if}}\n        <p>\n          {{#if @message.searchValue}}\n            {{this.selectable.noMatchesPrefix}}<strong>{{@message.searchValue}}</strong>{{this.selectable.noMatchesSuffix}}\n          {{else}}\n            {{@message.text}}\n          {{/if}}\n        </p>\n      </EuiSelectableMessage>\n    {{else}}\n      <EuiSelectableList\n        @options={{@options}}\n        @visibleOptions={{this.selectable.visibleOptions}}\n        @searchValue={{@searchValue}}\n        @activeOptionIndex={{@activeOptionIndex}}\n        @setActiveOptionIndex={{this.selectable.setActiveOptionIndex}}\n        @onOptionClick={{this.selectable.onOptionClick}}\n        @singleSelection={{@singleSelection}}\n        @allowExclusions={{@allowExclusions}}\n        @searchable={{@searchable}}\n        @height={{@height}}\n        @bordered={{@listProps.bordered}}\n        @showIcons={{@listProps.showIcons}}\n        @rowHeight={{@listProps.rowHeight}}\n        @onFocusBadge={{@listProps.onFocusBadge}}\n        @listId={{this.selectable.listId}}\n        @makeOptionId={{this.selectable.makeOptionId}}\n        @hasOption={{flag @hasOption (has-block \"option\")}}\n        @hasOptionPrepend={{flag @hasOptionPrepend (has-block \"optionPrepend\")}}\n        @hasOptionAppend={{flag @hasOptionAppend (has-block \"optionAppend\")}}\n        aria-label={{if @searchable this.selectable.placeholder}}\n        ...attributes\n      >\n        <:option as |option searchValue|>{{yield option searchValue to=\"option\"}}</:option>\n        <:optionPrepend as |option|>{{yield option to=\"optionPrepend\"}}</:optionPrepend>\n        <:optionAppend as |option|>{{yield option to=\"optionAppend\"}}</:optionAppend>\n      </EuiSelectableList>\n    {{/if}}\n  </template>\n}\n"],"names":["EuiSelectable","Component","g","prototype","service","i","tracked","rootId","randomId","preventOnFocus","constructor","owner","args","searchValue","searchProps","defaultValue","checked","options","filter","option","singleSelection","length","index","visibleOptions","indexOf","activeOptionIndex","getMatchingOptions","isPreFiltered","listId","messageId","makeOptionId","activeDescendant","undefined","placeholder","euiI18n","lookupToken","message","isLoading","text","loadingMessage","noMatchesMessage","emptyMessage","noMatchesSuffix","split","slice","join","noMatchesPrefix","isSelectable","Boolean","disabled","isGroupLabel","onMouseDown","n","action","onFocus","firstChecked","findIndex","isFocused","onBlur","event","container","currentTarget","relatedTarget","contains","onKeyDown","key","preventDefault","stopPropagation","moveActiveOption","toggleOption","allowExclusions","onChange","amount","some","current","next","onSearchChange","matchingOptions","onSearch","setActiveOptionIndex","onOptionClick","setComponentTemplate","precompileTemplate","strictMode","scope","isFull","on","EuiSelectableSearch","SelectableBody","hash","flag","explicit","hasBlock","height","selectable","EuiSelectableMessage","EuiLoadingSpinner","EuiSpacer","EuiSelectableList"],"mappings":"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"}

package/dist/components/eui-show-for.js

@@ -7,7 +7,7 @@ import { throttle } from '@ember/runloop';
 import { getBreakpoint } from '../utils/breakpoint.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime';
+import { g, i } from 'decorator-transforms/runtime-esm';
 
 class CurrentBreakPointHelper extends Helper {
   static {
@@ -43,6 +43,9 @@ class CurrentBreakPointHelper extends Helper {
     }
   }
 }
+
+/** Renders its content only on the given screen sizes. See EuiHideFor. */
+
 class EuiShowForComponent extends Component {
   currentBreakpointHelper = invokeHelper(this, CurrentBreakPointHelper, () => {
     return {
@@ -53,7 +56,7 @@ class EuiShowForComponent extends Component {
     return getValue(this.currentBreakpointHelper);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#if this.shouldShow}}\n      {{yield}}\n    {{/if}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#if this.shouldShow}}\n  {{yield}}\n{{/if}}", {
       strictMode: true
     }), this);
   }

package/dist/components/eui-show-for.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-show-for.js","sources":["../../src/components/eui-show-for.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n//@ts-ignore\nimport { getValue } from '@glimmer/tracking/primitives/cache';\nimport Helper from '@ember/component/helper';\n//@ts-ignore\nimport { invokeHelper } from '@ember/helper';\nimport { throttle } from '@ember/runloop';\n\nimport { getBreakpoint } from '../utils/breakpoint.ts';\n\nimport type { EuiBreakpointSize } from '../utils/breakpoint.ts';\n\nexport class CurrentBreakPointHelper extends Helper {\n  @tracked currentBreakpoint: string | undefined;\n  functionToCallOnWindowResize: undefined | (() => void);\n\n  compute([sizes]: [EuiHideForBreakpoints[] | 'all' | 'none']) {\n    this.currentBreakpoint = getBreakpoint(\n      typeof window === 'undefined' ? -Infinity : window.innerWidth\n    );\n\n    this.setupListeners();\n\n    return (\n      sizes === 'all' ||\n      sizes.includes(this.currentBreakpoint as EuiBreakpointSize)\n    );\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n    this.teardown();\n  }\n\n  setupListeners() {\n    this.functionToCallOnWindowResize = () => {\n      const fn = () => {\n        const newBreakpoint = getBreakpoint(window.innerWidth);\n\n        if (newBreakpoint !== this.currentBreakpoint) {\n          this.currentBreakpoint = newBreakpoint;\n        }\n      };\n\n      throttle(this, fn, 50);\n    };\n\n    window.addEventListener('resize', this.functionToCallOnWindowResize);\n  }\n\n  teardown() {\n    if (typeof this.functionToCallOnWindowResize === 'function') {\n      window.removeEventListener('resize', this.functionToCallOnWindowResize);\n      this.functionToCallOnWindowResize = undefined;\n    }\n  }\n}\n\nexport type EuiHideForBreakpoints = EuiBreakpointSize;\n\nexport interface EuiShowForArgs {\n  /**\n   * List of all the responsive sizes to hide the children for.\n   * Array of #EuiBreakpointSize\n   */\n  sizes: EuiHideForBreakpoints[] | 'all' | 'none';\n}\n\nexport interface EuiShowForSignature {\n  Args: EuiShowForArgs;\n  Blocks: {\n    default: [];\n  };\n}\n\nexport default class EuiShowForComponent extends Component<EuiShowForSignature> {\n  currentBreakpointHelper: any = invokeHelper(this, CurrentBreakPointHelper, () => {\n    return {\n      positional: [this.args.sizes]\n    };\n  });\n\n  get shouldShow() {\n    return getValue(this.currentBreakpointHelper);\n  }\n\n  <template>\n    {{#if this.shouldShow}}\n      {{yield}}\n    {{/if}}\n  </template>\n}\n"],"names":["CurrentBreakPointHelper","Helper","g","prototype","tracked","i","void 0","functionToCallOnWindowResize","compute","sizes","currentBreakpoint","getBreakpoint","window","Infinity","innerWidth","setupListeners","includes","willDestroy","teardown","fn","newBreakpoint","throttle","addEventListener","removeEventListener","undefined","EuiShowForComponent","Component","currentBreakpointHelper","invokeHelper","positional","args","shouldShow","getValue","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;;;AAaO,MAAMA,uBAAgC,SAAAC,MAAA,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,mBAAA,EAAA,CAC1CC,OAAA,CAAA,CAAA;AAAA;AAAA,EAAA,kBAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,mBAAA,CAAA,EAAAC,MAAA;EACDC,4BAA8B;AAE9BC,EAAAA,OAAAA,CAAQ,CAACC,KAAA,CAAkD,EAAE;AAC3D,IAAA,IAAI,CAACC,iBAAiB,GAAGC,aACvB,CAAA,OAAOC,WAAW,WAAc,GAAA,CAACC,QAAW,GAAAD,MAAA,CAAOE,UAAU,CAAA;IAG/D,IAAI,CAACC,cAAc,EAAA;IAEnB,OACEN,KAAU,KAAA,KAAA,IACVA,KAAM,CAAAO,QAAQ,CAAC,IAAI,CAACN,iBACtB,CAAA;AACF;AAEAO,EAAAA,WAAAA,GAAoB;IAClB,KAAK,CAACA,WAAA,EAAA;IACN,IAAI,CAACC,QAAQ,EAAA;AACf;AAEAH,EAAAA,cAAiBA,GAAA;IACf,IAAI,CAACR,4BAA4B,GAAG,MAAA;MAClC,MAAMY,EAAK,GAAAA,MAAA;AACT,QAAA,MAAMC,aAAA,GAAgBT,aAAc,CAAAC,MAAA,CAAOE,UAAU,CAAA;AAErD,QAAA,IAAIM,aAAkB,KAAA,IAAI,CAACV,iBAAiB,EAAE;UAC5C,IAAI,CAACA,iBAAiB,GAAGU,aAAA;AAC3B;OACF;AAEAC,MAAAA,QAAS,CAAA,IAAI,EAAEF,EAAI,EAAA,EAAA,CAAA;KACrB;IAEAP,MAAA,CAAOU,gBAAgB,CAAC,QAAU,EAAA,IAAI,CAACf,4BAA4B,CAAA;AACrE;AAEAW,EAAAA,QAAWA,GAAA;AACT,IAAA,IAAI,OAAO,IAAI,CAACX,4BAA4B,KAAK,UAAY,EAAA;MAC3DK,MAAA,CAAOW,mBAAmB,CAAC,QAAU,EAAA,IAAI,CAAChB,4BAA4B,CAAA;MACtE,IAAI,CAACA,4BAA4B,GAAGiB,SAAA;AACtC;AACF;AACF;AAmBe,MAAMC,4BAA4BC,SAAU,CAAA;AACzDC,EAAAA,uBAAA,GAA+BC,YAAa,CAAA,IAAI,EAAE5B,uBAAyB,EAAA,MAAA;IACzE,OAAO;AACL6B,MAAAA,UAAY,EAAA,CAAC,IAAI,CAACC,IAAI,CAACrB,KAAK;KAC9B;AACF,GAAG,CAAA;EAEH,IAAIsB,UAAaA,GAAA;AACf,IAAA,OAAOC,QAAA,CAAS,IAAI,CAACL,uBAAuB,CAAA;AAC9C;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAIA,iEAAA,EAAA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-show-for.js","sources":["../../src/components/eui-show-for.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\n//@ts-ignore\nimport { getValue } from '@glimmer/tracking/primitives/cache';\nimport Helper from '@ember/component/helper';\n//@ts-ignore\nimport { invokeHelper } from '@ember/helper';\nimport { throttle } from '@ember/runloop';\n\nimport { getBreakpoint } from '../utils/breakpoint.ts';\n\nimport type { EuiBreakpointSize } from '../utils/breakpoint.ts';\n\nexport class CurrentBreakPointHelper extends Helper {\n  @tracked currentBreakpoint: string | undefined;\n  functionToCallOnWindowResize: undefined | (() => void);\n\n  compute([sizes]: [EuiHideForBreakpoints[] | 'all' | 'none']) {\n    this.currentBreakpoint = getBreakpoint(\n      typeof window === 'undefined' ? -Infinity : window.innerWidth\n    );\n\n    this.setupListeners();\n\n    return (\n      sizes === 'all' ||\n      sizes.includes(this.currentBreakpoint as EuiBreakpointSize)\n    );\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n    this.teardown();\n  }\n\n  setupListeners() {\n    this.functionToCallOnWindowResize = () => {\n      const fn = () => {\n        const newBreakpoint = getBreakpoint(window.innerWidth);\n\n        if (newBreakpoint !== this.currentBreakpoint) {\n          this.currentBreakpoint = newBreakpoint;\n        }\n      };\n\n      throttle(this, fn, 50);\n    };\n\n    window.addEventListener('resize', this.functionToCallOnWindowResize);\n  }\n\n  teardown() {\n    if (typeof this.functionToCallOnWindowResize === 'function') {\n      window.removeEventListener('resize', this.functionToCallOnWindowResize);\n      this.functionToCallOnWindowResize = undefined;\n    }\n  }\n}\n\nexport type EuiHideForBreakpoints = EuiBreakpointSize;\n\nexport interface EuiShowForArgs {\n  /**\n   * Screen sizes to show the content on: any of `'xs'`, `'s'`, `'m'`,\n   * `'l'`, `'xl'`, or `'all'`. E.g. `(array \"xs\" \"s\")` shows it only on\n   * phones.\n   */\n  sizes: EuiHideForBreakpoints[] | 'all' | 'none';\n}\n\n/** Renders its content only on the given screen sizes. See EuiHideFor. */\nexport interface EuiShowForSignature {\n  Args: EuiShowForArgs;\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\nexport default class EuiShowForComponent extends Component<EuiShowForSignature> {\n  currentBreakpointHelper: any = invokeHelper(this, CurrentBreakPointHelper, () => {\n    return {\n      positional: [this.args.sizes]\n    };\n  });\n\n  get shouldShow() {\n    return getValue(this.currentBreakpointHelper);\n  }\n\n  <template>\n    {{#if this.shouldShow}}\n      {{yield}}\n    {{/if}}\n  </template>\n}\n"],"names":["CurrentBreakPointHelper","Helper","g","prototype","tracked","i","functionToCallOnWindowResize","compute","sizes","currentBreakpoint","getBreakpoint","window","Infinity","innerWidth","setupListeners","includes","willDestroy","teardown","fn","newBreakpoint","throttle","addEventListener","removeEventListener","undefined","EuiShowForComponent","Component","currentBreakpointHelper","invokeHelper","positional","args","shouldShow","getValue","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;;;AAaO,MAAMA,uBAAA,SAAgCC,MAAA,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,mBAAA,EAAA,CAC1CC,OAAA,CAAA,CAAA;AAAA;EAAA,kBAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,mBAAA,CAAA,EAAA,MAAA;EACDC,4BAAA;AAEAC,EAAAA,OAAAA,CAAQ,CAACC,KAAA,CAAkD,EAAE;AAC3D,IAAA,IAAI,CAACC,iBAAiB,GAAGC,aAAA,CACvB,OAAOC,WAAW,WAAA,GAAc,CAACC,QAAA,GAAWD,MAAA,CAAOE,UAAU,CAAA;IAG/D,IAAI,CAACC,cAAc,EAAA;IAEnB,OACEN,KAAA,KAAU,KAAA,IACVA,KAAA,CAAMO,QAAQ,CAAC,IAAI,CAACN,iBAAqB,CAC3C;AACF,EAAA;AAEAO,EAAAA,WAAAA,GAAoB;IAClB,KAAK,CAACA,WAAA,EAAA;IACN,IAAI,CAACC,QAAQ,EAAA;AACf,EAAA;AAEAH,EAAAA,cAAAA,GAAiB;IACf,IAAI,CAACR,4BAA4B,GAAG,MAAA;MAClC,MAAMY,EAAA,GAAKA,MAAA;AACT,QAAA,MAAMC,aAAA,GAAgBT,aAAA,CAAcC,MAAA,CAAOE,UAAU,CAAA;AAErD,QAAA,IAAIM,aAAA,KAAkB,IAAI,CAACV,iBAAiB,EAAE;UAC5C,IAAI,CAACA,iBAAiB,GAAGU,aAAA;AAC3B,QAAA;MACF,CAAA;AAEAC,MAAAA,QAAA,CAAS,IAAI,EAAEF,EAAA,EAAI,EAAA,CAAA;IACrB,CAAA;IAEAP,MAAA,CAAOU,gBAAgB,CAAC,QAAA,EAAU,IAAI,CAACf,4BAA4B,CAAA;AACrE,EAAA;AAEAW,EAAAA,QAAAA,GAAW;AACT,IAAA,IAAI,OAAO,IAAI,CAACX,4BAA4B,KAAK,UAAA,EAAY;MAC3DK,MAAA,CAAOW,mBAAmB,CAAC,QAAA,EAAU,IAAI,CAAChB,4BAA4B,CAAA;MACtE,IAAI,CAACA,4BAA4B,GAAGiB,SAAA;AACtC,IAAA;AACF,EAAA;AACF;;AAaA;;AASe,MAAMC,4BAA4BC,SAAA,CAAU;AACzDC,EAAAA,uBAAA,GAA+BC,YAAA,CAAa,IAAI,EAAE3B,uBAAA,EAAyB,MAAA;IACzE,OAAO;AACL4B,MAAAA,UAAA,EAAY,CAAC,IAAI,CAACC,IAAI,CAACrB,KAAK;KAC9B;AACF,EAAA,CAAA,CAAA;EAEA,IAAIsB,UAAAA,GAAa;AACf,IAAA,OAAOC,QAAA,CAAS,IAAI,CAACL,uBAAuB,CAAA;AAC9C,EAAA;AAEA,EAAA;IAAAM,oBAAA,CAAAC,kBAAA,CAAA,+CAAA,EAIA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-side-nav-item/button.js

@@ -7,7 +7,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiSideNavItemButton = setComponentTemplate(precompileTemplate("\n    {{#let (argOrDefault @truncate true) as |truncate|}}\n      <span class=\"euiSideNavItemButton__content\">\n        {{#if @icon}}\n          <EuiIcon @type={{@icon}} @size=\"m\" class={{classNames \"euiSideNavItemButton__icon\" @buttonIconClasses}} />\n        {{/if}}\n\n        <EuiInnerText as |setRef innerText|>\n          <span class={{classNames \"euiSideNavItemButton__label\" (if truncate \"euiSideNavItemButton__label--truncated\")}} {{didInsert setRef}} title={{if truncate innerText}}>\n            {{yield}}\n          </span>\n        </EuiInnerText>\n        {{#if @caret}}\n          <EuiIcon @type=\"arrowDown\" @color=\"subdued\" @size=\"s\" />\n        {{/if}}\n      </span>\n    {{/let}}\n  ", {
+const EuiSideNavItemButton = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @truncate true) as |truncate|}}\n  <span class=\"euiSideNavItemButton__content\">\n    {{#if @icon}}\n      <EuiIcon @type={{@icon}} @size=\"m\" class={{classNames \"euiSideNavItemButton__icon\" @buttonIconClasses}} />\n    {{/if}}\n\n    <EuiInnerText as |setRef innerText|>\n      <span class={{classNames \"euiSideNavItemButton__label\" (if truncate \"euiSideNavItemButton__label--truncated\")}} {{didInsert setRef}} title={{if truncate innerText}}>\n        {{yield}}\n      </span>\n    </EuiInnerText>\n    {{#if @caret}}\n      <EuiIcon @type=\"arrowDown\" @color=\"subdued\" @size=\"s\" />\n    {{/if}}\n  </span>\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     argOrDefault,

package/dist/components/eui-side-nav-item/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/eui-side-nav-item/button.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport argOrDefault from '../../helpers/arg-or-default.ts';\nimport classNames from '../../helpers/class-names.ts';\nimport EuiIcon from '../eui-icon.gts';\nimport EuiInnerText from '../eui-inner-text.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiSideNavItemButtonSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    icon?: string;\n    caret?: boolean;\n    truncate?: boolean;\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiSideNavItemButton: TemplateOnlyComponent<EuiSideNavItemButtonSignature> =\n  <template>\n    {{#let (argOrDefault @truncate true) as |truncate|}}\n      <span class=\"euiSideNavItemButton__content\">\n        {{#if @icon}}\n          <EuiIcon\n            @type={{@icon}}\n            @size=\"m\"\n            class={{classNames \"euiSideNavItemButton__icon\" @buttonIconClasses}}\n          />\n        {{/if}}\n\n        <EuiInnerText as |setRef innerText|>\n          <span\n            class={{classNames\n              \"euiSideNavItemButton__label\"\n              (if truncate \"euiSideNavItemButton__label--truncated\")\n            }}\n            {{didInsert setRef}}\n            title={{if truncate innerText}}\n          >\n            {{yield}}\n          </span>\n        </EuiInnerText>\n        {{#if @caret}}\n          <EuiIcon @type=\"arrowDown\" @color=\"subdued\" @size=\"s\" />\n        {{/if}}\n      </span>\n    {{/let}}\n  </template>;\n\nexport default EuiSideNavItemButton;\n"],"names":["EuiSideNavItemButton","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","EuiIcon","classNames","EuiInnerText","didInsert","templateOnly"],"mappings":";;;;;;;;;AAsBA,MAAMA,oBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CA4BA,gtBAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,UAAA;kBAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"button.js","sources":["../../../src/components/eui-side-nav-item/button.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport argOrDefault from '../../helpers/arg-or-default.ts';\nimport classNames from '../../helpers/class-names.ts';\nimport EuiIcon from '../eui-icon.gts';\nimport EuiInnerText from '../eui-inner-text.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private The button or link of an EuiSideNav item. */\nexport interface EuiSideNavItemButtonSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** Icon before the text. */\n    icon?: string;\n    /** Shows an arrow, for items with children. */\n    caret?: boolean;\n    /** Truncates long text. Defaults to `true`. */\n    truncate?: boolean;\n    /** Extra classes for the icon. */\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    /** The text. */\n    default: [];\n  };\n}\n\nconst EuiSideNavItemButton: TemplateOnlyComponent<EuiSideNavItemButtonSignature> =\n  <template>\n    {{#let (argOrDefault @truncate true) as |truncate|}}\n      <span class=\"euiSideNavItemButton__content\">\n        {{#if @icon}}\n          <EuiIcon\n            @type={{@icon}}\n            @size=\"m\"\n            class={{classNames \"euiSideNavItemButton__icon\" @buttonIconClasses}}\n          />\n        {{/if}}\n\n        <EuiInnerText as |setRef innerText|>\n          <span\n            class={{classNames\n              \"euiSideNavItemButton__label\"\n              (if truncate \"euiSideNavItemButton__label--truncated\")\n            }}\n            {{didInsert setRef}}\n            title={{if truncate innerText}}\n          >\n            {{yield}}\n          </span>\n        </EuiInnerText>\n        {{#if @caret}}\n          <EuiIcon @type=\"arrowDown\" @color=\"subdued\" @size=\"s\" />\n        {{/if}}\n      </span>\n    {{/let}}\n  </template>;\n\nexport default EuiSideNavItemButton;\n"],"names":["EuiSideNavItemButton","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","EuiIcon","classNames","EuiInnerText","didInsert","templateOnly"],"mappings":";;;;;;;;;AA4BA,MAAMA,oBAA4C,GAAAC,oBAAA,CAChDC,kBAAA,CAAA,8oBAAA,EA4BA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,UAAA;kBAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-side-nav-item.js

@@ -9,7 +9,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiSideNavItem = setComponentTemplate(precompileTemplate("\n    <div class={{classNames \"euiSideNavItem\" (if (eq @depth 1) \"euiSideNavItem--trunk\") (if (eq @depth 0) \"euiSideNavItem--root\") (if (and (eq @depth 0) @icon) \"euiSideNavItem--rootIcon\") (if (gt @depth 1) \"euiSideNavItem--branch\") (if @items.length \"euiSideNavItem--hasChildItems\") (if @emphasize \"euiSideNavItem--emphasized\")}}>\n      {{#let (classNames \"euiSideNavItemButton\" (if (or @onClick @href) \"euiSideNavItemButton--isClickable\") (if (and (gt @depth 0) @isOpen (not @isSelected)) \"euiSideNavItemButton-isOpen\") (if @isSelected \"euiSideNavItemButton-isSelected\") @buttonClassName) (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected)) as |className caret|}}\n        {{#if (and @href (not @disabled))}}\n          <a class={{className}} href={{@href}} target={{@target}} rel={{@rel}} {{on \"click\" (optional @onClick)}}>\n            <Button @icon={{@icon}} @buttonIconClasses={{@buttonIconClasses}} @caret={{caret}}>\n              {{yield}}\n            </Button>\n          </a>\n        {{else if (or @onClick @disabled)}}\n          <button type=\"button\" class={{className}} disabled={{@disabled}} {{on \"click\" (optional @onClick)}}>\n            <Button @icon={{@icon}} @truncate={{@truncate}} @buttonIconClasses={{@buttonIconClasses}} @caret={{caret}}>\n              {{yield}}\n            </Button>\n          </button>\n        {{else}}\n          <div class={{className}}>\n            <Button @icon={{@icon}} @truncate={{@truncate}} @buttonIconClasses={{@buttonIconClasses}} @caret={{caret}}>\n              {{yield}}\n            </Button>\n          </div>\n        {{/if}}\n      {{/let}}\n      {{#if (or (eq @depth 0) (and @items.length @isOpen))}}\n        <div class=\"euiSideNavItem__items\">\n          {{#each @items as |item|}}\n            {{#let (and (gt @depth 0) (not item.onClick) (not item.href) (not (not item.items))) as |childrenOnly|}}\n              <EuiSideNavItem @selectedItem={{@selectedItem}} @isOpen={{isItemOpen item @selectedItem}} @isSelected={{and (not childrenOnly) (eq item.id @selectedItem)}} @isParent={{not (not item.items)}} @icon={{item.icon}} @onClick={{item.onClick}} @href={{item.href}} @className={{item.className}} @rel={{item.rel}} @target={{item.target}} @items={{item.items}} @depth={{add @depth 1}} @name={{item.name}} @renderItem={{item.renderItem}} @disabled={{item.disabled}} @truncate={{item.truncate}} @emphasize={{item.emphasize}} @buttonClassName={{item.buttonClassName}} @childrenOnly={{childrenOnly}}>\n                {{item.name}}\n              </EuiSideNavItem>\n            {{/let}}\n          {{/each}}\n        </div>\n      {{/if}}\n    </div>\n  ", {
+const EuiSideNavItem = setComponentTemplate(precompileTemplate("<div class={{classNames \"euiSideNavItem\" (if (eq @depth 1) \"euiSideNavItem--trunk\") (if (eq @depth 0) \"euiSideNavItem--root\") (if (and (eq @depth 0) @icon) \"euiSideNavItem--rootIcon\") (if (gt @depth 1) \"euiSideNavItem--branch\") (if @items.length \"euiSideNavItem--hasChildItems\") (if @emphasize \"euiSideNavItem--emphasized\")}}>\n  {{#let (classNames \"euiSideNavItemButton\" (if (or @onClick @href) \"euiSideNavItemButton--isClickable\") (if (and (gt @depth 0) @isOpen (not @isSelected)) \"euiSideNavItemButton-isOpen\") (if @isSelected \"euiSideNavItemButton-isSelected\") @buttonClassName) (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected)) as |className caret|}}\n    {{#if (and @href (not @disabled))}}\n      <a class={{className}} href={{@href}} target={{@target}} rel={{@rel}} {{on \"click\" (optional @onClick)}}>\n        <Button @icon={{@icon}} @buttonIconClasses={{@buttonIconClasses}} @caret={{caret}}>\n          {{yield}}\n        </Button>\n      </a>\n    {{else if (or @onClick @disabled)}}\n      <button type=\"button\" class={{className}} disabled={{@disabled}} {{on \"click\" (optional @onClick)}}>\n        <Button @icon={{@icon}} @truncate={{@truncate}} @buttonIconClasses={{@buttonIconClasses}} @caret={{caret}}>\n          {{yield}}\n        </Button>\n      </button>\n    {{else}}\n      <div class={{className}}>\n        <Button @icon={{@icon}} @truncate={{@truncate}} @buttonIconClasses={{@buttonIconClasses}} @caret={{caret}}>\n          {{yield}}\n        </Button>\n      </div>\n    {{/if}}\n  {{/let}}\n  {{#if (or (eq @depth 0) (and @items.length @isOpen))}}\n    <div class=\"euiSideNavItem__items\">\n      {{#each @items as |item|}}\n        {{#let (and (gt @depth 0) (not item.onClick) (not item.href) (not (not item.items))) as |childrenOnly|}}\n          <EuiSideNavItem @selectedItem={{@selectedItem}} @isOpen={{isItemOpen item @selectedItem}} @isSelected={{and (not childrenOnly) (eq item.id @selectedItem)}} @isParent={{not (not item.items)}} @icon={{item.icon}} @onClick={{item.onClick}} @href={{item.href}} @className={{item.className}} @rel={{item.rel}} @target={{item.target}} @items={{item.items}} @depth={{add @depth 1}} @name={{item.name}} @renderItem={{item.renderItem}} @disabled={{item.disabled}} @truncate={{item.truncate}} @emphasize={{item.emphasize}} @buttonClassName={{item.buttonClassName}} @childrenOnly={{childrenOnly}}>\n            {{item.name}}\n          </EuiSideNavItem>\n        {{/let}}\n      {{/each}}\n    </div>\n  {{/if}}\n</div>", {
   strictMode: true,
   scope: () => ({
     classNames,

package/dist/components/eui-side-nav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-side-nav-item.js","sources":["../../src/components/eui-side-nav-item.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport add from 'ember-math-helpers/helpers/add';\nimport { and, eq, gt, not, or } from 'ember-truth-helpers';\n\nimport Button from '../components/eui-side-nav-item/button.gts';\nimport classNames from '../helpers/class-names.ts';\nimport isItemOpen from '../helpers/is-item-open.ts';\n\nimport type { Item } from './eui-side-nav';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiSideNavItemSignature {\n  Args: {\n    selectedItem?: string;\n    isOpen?: boolean;\n    isSelected?: boolean;\n    isParent?: boolean;\n    icon?: string;\n    onClick?: () => void;\n    href?: string;\n    className?: string;\n    rel?: string;\n    target?: string;\n    items?: Item[];\n    depth?: number;\n    name?: string;\n    renderItem?: unknown;\n    disabled?: boolean;\n    truncate?: boolean;\n    emphasize?: boolean;\n    buttonClassName?: string;\n    childrenOnly?: boolean;\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiSideNavItem: TemplateOnlyComponent<EuiSideNavItemSignature> =\n  <template>\n    <div\n      class={{classNames\n        \"euiSideNavItem\"\n        (if (eq @depth 1) \"euiSideNavItem--trunk\")\n        (if (eq @depth 0) \"euiSideNavItem--root\")\n        (if (and (eq @depth 0) @icon) \"euiSideNavItem--rootIcon\")\n        (if (gt @depth 1) \"euiSideNavItem--branch\")\n        (if @items.length \"euiSideNavItem--hasChildItems\")\n        (if @emphasize \"euiSideNavItem--emphasized\")\n      }}\n    >\n      {{#let\n        (classNames\n          \"euiSideNavItemButton\"\n          (if (or @onClick @href) \"euiSideNavItemButton--isClickable\")\n          (if\n            (and (gt @depth 0) @isOpen (not @isSelected))\n            \"euiSideNavItemButton-isOpen\"\n          )\n          (if @isSelected \"euiSideNavItemButton-isSelected\")\n          @buttonClassName\n        )\n        (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected))\n        as |className caret|\n      }}\n        {{#if (and @href (not @disabled))}}\n          <a\n            class={{className}}\n            href={{@href}}\n            target={{@target}}\n            rel={{@rel}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </a>\n        {{else if (or @onClick @disabled)}}\n          <button\n            type=\"button\"\n            class={{className}}\n            disabled={{@disabled}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </button>\n        {{else}}\n          <div class={{className}}>\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </div>\n        {{/if}}\n      {{/let}}\n      {{#if (or (eq @depth 0) (and @items.length @isOpen))}}\n        <div class=\"euiSideNavItem__items\">\n          {{#each @items as |item|}}\n            {{#let\n              (and\n                (gt @depth 0)\n                (not item.onClick)\n                (not item.href)\n                (not (not item.items))\n              )\n              as |childrenOnly|\n            }}\n              <EuiSideNavItem\n                @selectedItem={{@selectedItem}}\n                @isOpen={{isItemOpen item @selectedItem}}\n                @isSelected={{and\n                  (not childrenOnly)\n                  (eq item.id @selectedItem)\n                }}\n                @isParent={{not (not item.items)}}\n                @icon={{item.icon}}\n                @onClick={{item.onClick}}\n                @href={{item.href}}\n                @className={{item.className}}\n                @rel={{item.rel}}\n                @target={{item.target}}\n                @items={{item.items}}\n                @depth={{add @depth 1}}\n                @name={{item.name}}\n                @renderItem={{item.renderItem}}\n                @disabled={{item.disabled}}\n                @truncate={{item.truncate}}\n                @emphasize={{item.emphasize}}\n                @buttonClassName={{item.buttonClassName}}\n                @childrenOnly={{childrenOnly}}\n              >\n                {{item.name}}\n              </EuiSideNavItem>\n            {{/let}}\n          {{/each}}\n        </div>\n      {{/if}}\n    </div>\n  </template>;\n\nexport default EuiSideNavItem;\n"],"names":["EuiSideNavItem","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","eq","and","gt","or","not","on","optional","Button","isItemOpen","add","templateOnly"],"mappings":";;;;;;;;;;;AAyCA,MAAMA,cACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAkHA,inFAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,QAAA;YAAAC,oBAAA;IAAAb,cAAA;IAAAc,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-side-nav-item.js","sources":["../../src/components/eui-side-nav-item.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport add from 'ember-math-helpers/helpers/add';\nimport { and, eq, gt, not, or } from 'ember-truth-helpers';\n\nimport Button from '../components/eui-side-nav-item/button.gts';\nimport classNames from '../helpers/class-names.ts';\nimport isItemOpen from '../helpers/is-item-open.ts';\n\nimport type { Item } from './eui-side-nav';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private One item of an EuiSideNav (rendered from its `@items`). */\nexport interface EuiSideNavItemSignature {\n  Args: {\n    /** The side nav's `@selectedItem`, passed down to children. */\n    selectedItem?: string;\n    /** Shows the children. */\n    isOpen?: boolean;\n    /** Highlights the item. */\n    isSelected?: boolean;\n    /** Has children. */\n    isParent?: boolean;\n    /** Icon before the name. */\n    icon?: string;\n    /** Makes the item a button calling this function. */\n    onClick?: () => void;\n    /** Makes the item a link. */\n    href?: string;\n    /** Class for the item. */\n    className?: string;\n    /** `rel` of the link. */\n    rel?: string;\n    /** `target` of the link. */\n    target?: string;\n    /** Nested items. */\n    items?: Item[];\n    /** Nesting level. */\n    depth?: number;\n    /** @deprecated Has no effect; the name is the block content. */\n    name?: string;\n    /** @deprecated Has no effect. */\n    renderItem?: unknown;\n    /** Disables the item. */\n    disabled?: boolean;\n    /** Truncates a long name. */\n    truncate?: boolean;\n    /** Bolder style. */\n    emphasize?: boolean;\n    /** Class for the item's button or link. */\n    buttonClassName?: string;\n    /** Renders the item as a section title (children, no action). */\n    childrenOnly?: boolean;\n    /** Extra classes for the icon. */\n    buttonIconClasses?: string;\n  };\n  Blocks: {\n    /** The item's name. */\n    default: [];\n  };\n}\n\nconst EuiSideNavItem: TemplateOnlyComponent<EuiSideNavItemSignature> =\n  <template>\n    <div\n      class={{classNames\n        \"euiSideNavItem\"\n        (if (eq @depth 1) \"euiSideNavItem--trunk\")\n        (if (eq @depth 0) \"euiSideNavItem--root\")\n        (if (and (eq @depth 0) @icon) \"euiSideNavItem--rootIcon\")\n        (if (gt @depth 1) \"euiSideNavItem--branch\")\n        (if @items.length \"euiSideNavItem--hasChildItems\")\n        (if @emphasize \"euiSideNavItem--emphasized\")\n      }}\n    >\n      {{#let\n        (classNames\n          \"euiSideNavItemButton\"\n          (if (or @onClick @href) \"euiSideNavItemButton--isClickable\")\n          (if\n            (and (gt @depth 0) @isOpen (not @isSelected))\n            \"euiSideNavItemButton-isOpen\"\n          )\n          (if @isSelected \"euiSideNavItemButton-isSelected\")\n          @buttonClassName\n        )\n        (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected))\n        as |className caret|\n      }}\n        {{#if (and @href (not @disabled))}}\n          <a\n            class={{className}}\n            href={{@href}}\n            target={{@target}}\n            rel={{@rel}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </a>\n        {{else if (or @onClick @disabled)}}\n          <button\n            type=\"button\"\n            class={{className}}\n            disabled={{@disabled}}\n            {{on \"click\" (optional @onClick)}}\n          >\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </button>\n        {{else}}\n          <div class={{className}}>\n            <Button\n              @icon={{@icon}}\n              @truncate={{@truncate}}\n              @buttonIconClasses={{@buttonIconClasses}}\n              @caret={{caret}}\n            >\n              {{yield}}\n            </Button>\n          </div>\n        {{/if}}\n      {{/let}}\n      {{#if (or (eq @depth 0) (and @items.length @isOpen))}}\n        <div class=\"euiSideNavItem__items\">\n          {{#each @items as |item|}}\n            {{#let\n              (and\n                (gt @depth 0)\n                (not item.onClick)\n                (not item.href)\n                (not (not item.items))\n              )\n              as |childrenOnly|\n            }}\n              <EuiSideNavItem\n                @selectedItem={{@selectedItem}}\n                @isOpen={{isItemOpen item @selectedItem}}\n                @isSelected={{and\n                  (not childrenOnly)\n                  (eq item.id @selectedItem)\n                }}\n                @isParent={{not (not item.items)}}\n                @icon={{item.icon}}\n                @onClick={{item.onClick}}\n                @href={{item.href}}\n                @className={{item.className}}\n                @rel={{item.rel}}\n                @target={{item.target}}\n                @items={{item.items}}\n                @depth={{add @depth 1}}\n                @name={{item.name}}\n                @renderItem={{item.renderItem}}\n                @disabled={{item.disabled}}\n                @truncate={{item.truncate}}\n                @emphasize={{item.emphasize}}\n                @buttonClassName={{item.buttonClassName}}\n                @childrenOnly={{childrenOnly}}\n              >\n                {{item.name}}\n              </EuiSideNavItem>\n            {{/let}}\n          {{/each}}\n        </div>\n      {{/if}}\n    </div>\n  </template>;\n\nexport default EuiSideNavItem;\n"],"names":["EuiSideNavItem","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","eq","and","gt","or","not","on","optional","Button","isItemOpen","add","templateOnly"],"mappings":";;;;;;;;;;;AA+DA,MAAMA,cAAsC,GAAAC,oBAAA,CAC1CC,kBAAA,CAAA,m+EAAA,EAkHA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,QAAA;YAAAC,oBAAA;IAAAb,cAAA;IAAAc,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-side-nav.js

@@ -17,12 +17,13 @@ import screenReaderOnly from '../modifiers/screen-reader-only.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
+/** A hierarchical navigation tree for a page's side bar. */
 class EuiSideNavComponent extends Component {
   get mobileBreakpoints() {
     return this.args.mobileBreakpoints || ['xs', 's'];
   }
   get contentClasses() {
-    let mobileBreakpoints = Array.isArray(this.mobileBreakpoints) ? this.mobileBreakpoints : [this.mobileBreakpoints];
+    const mobileBreakpoints = Array.isArray(this.mobileBreakpoints) ? this.mobileBreakpoints : [this.mobileBreakpoints];
     return `euiSideNav__content ${mobileBreakpoints.map?.(breakpointName => {
       return `euiSideNav__contentMobile-${breakpointName}`;
     }).join(' ')}`;
@@ -31,7 +32,7 @@ class EuiSideNavComponent extends Component {
     return this.mobileBreakpoints?.length > 0;
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#let (classNames \"euiSideNav\" (if @isOpenMobile \"euiSideNav-isOpenMobile\")) (element (argOrDefault @headingProps.element \"h2\")) (argOrDefault @headingProps.id (randomId)) (randomId) (or (has-block \"heading\") (not (not @heading))) as |classes HeadingElement headingId sideNavContentId hasHeader|}}\n      {{#if this.hasMobileVersion}}\n        <EuiShowFor @sizes={{this.mobileBreakpoints}}>\n          <nav aria-labelledby={{headingId}} class={{classes}} ...attributes>\n            <HeadingElement id={{headingId}} class={{@headingProps.className}}>\n              <EuiButtonEmpty type=\"button\" class=\"euiSideNav__mobileToggle\" @contentClasses=\"euiSideNav__mobileToggleContent\" @textClasses=\"euiSideNav__mobileToggleText\" {{on \"click\" (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))}} @iconType=\"apps\" @iconSide=\"right\" aria-controls={{sideNavContentId}} aria-expanded={{@isOpenMobile}}>\n                {{#if @mobileTitle}}\n                  {{@mobileTitle}}\n                {{else if (has-block \"heading\")}}\n                  {{yield to=\"heading\"}}\n                {{else}}\n                  {{@heading}}\n                {{/if}}\n              </EuiButtonEmpty>\n            </HeadingElement>\n            <div id={{sideNavContentId}} class={{this.contentClasses}}>\n              {{#each @items as |item|}}\n                {{#let (and (not item.onClick) (not item.href) (not (not item.items))) as |childrenOnly|}}\n                  <EuiSideNavItem @selectedItem={{@selectedItem}} @isOpen={{isItemOpen item @selectedItem}} @isSelected={{and (not childrenOnly) (eq item.id item.isSelected)}} @isParent={{not (not item.items)}} @icon={{item.icon}} @onClick={{item.onClick}} @href={{item.href}} @className={{item.className}} @rel={{item.rel}} @target={{item.target}} @items={{item.items}} @depth={{0}} @renderItem={{item.renderItem}} @disabled={{item.disabled}} @truncate={{item.truncate}} @emphasize={{item.emphasize}} @buttonClassName={{item.buttonClassName}} @childrenOnly={{childrenOnly}}>\n                    {{item.name}}\n                  </EuiSideNavItem>\n                {{/let}}\n              {{/each}}\n            </div>\n          </nav>\n        </EuiShowFor>\n      {{/if}}\n\n      <EuiHideFor @sizes={{this.mobileBreakpoints}}>\n        <nav aria-labelledby={{if hasHeader headingId}} class={{classes}} ...attributes>\n          {{#if hasHeader}}\n            {{#let (argOrDefault @headingProps.screenReaderOnly false) as |shouldScreenReader|}}\n              {{#if (has-block \"heading\")}}\n                {{#if shouldScreenReader}}\n                  <HeadingElement {{screenReaderOnly}}>\n                    {{yield to=\"heading\"}}\n                  </HeadingElement>\n                {{else}}\n                  <EuiTitle class={{classNames \"euiSideNav__heading\" @headingProps.className}} @size=\"xs\">\n                    <HeadingElement>\n                      {{yield to=\"heading\"}}\n                    </HeadingElement>\n                  </EuiTitle>\n                {{/if}}\n              {{else}}\n                {{#if screenReaderOnly}}\n                  <HeadingElement {{screenReaderOnly}}>\n                    {{@heading}}\n                  </HeadingElement>\n                {{else}}\n                  <EuiTitle class={{classNames \"euiSideNav__heading\" @headingProps.className}} @size=\"xs\">\n                    {{@heading}}\n                  </EuiTitle>\n                {{/if}}\n              {{/if}}\n            {{/let}}\n          {{/if}}\n          <div id={{sideNavContentId}} class={{this.contentClasses}}>\n            {{#each @items as |item|}}\n              {{#let (and (not item.onClick) (not item.href) (not (not item.items))) as |childrenOnly|}}\n                <EuiSideNavItem @selectedItem={{@selectedItem}} @isOpen={{isItemOpen item @selectedItem}} @isSelected={{and (not childrenOnly) (eq item.id item.isSelected)}} @isParent={{not (not item.items)}} @icon={{item.icon}} @onClick={{item.onClick}} @href={{item.href}} @className={{item.className}} @rel={{item.rel}} @target={{item.target}} @items={{item.items}} @depth={{0}} @renderItem={{item.renderItem}} @disabled={{item.disabled}} @truncate={{item.truncate}} @emphasize={{item.emphasize}} @buttonClassName={{item.buttonClassName}} @childrenOnly={{childrenOnly}}>\n                  {{item.name}}\n                </EuiSideNavItem>\n              {{/let}}\n            {{/each}}\n          </div>\n        </nav>\n      </EuiHideFor>\n    {{/let}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#let (classNames \"euiSideNav\" (if @isOpenMobile \"euiSideNav-isOpenMobile\")) (element (argOrDefault @headingProps.element \"h2\")) (argOrDefault @headingProps.id (randomId)) (randomId) (or (has-block \"heading\") (not (not @heading))) as |classes HeadingElement headingId sideNavContentId hasHeader|}}\n  {{#if this.hasMobileVersion}}\n    <EuiShowFor @sizes={{this.mobileBreakpoints}}>\n      <nav aria-labelledby={{headingId}} class={{classes}} ...attributes>\n        <HeadingElement id={{headingId}} class={{@headingProps.className}}>\n          <EuiButtonEmpty type=\"button\" class=\"euiSideNav__mobileToggle\" @contentClasses=\"euiSideNav__mobileToggleContent\" @textClasses=\"euiSideNav__mobileToggleText\" {{on \"click\" (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))}} @iconType=\"apps\" @iconSide=\"right\" aria-controls={{sideNavContentId}} aria-expanded={{if @isOpenMobile \"true\" \"false\"}}>\n            {{#if @mobileTitle}}\n              {{@mobileTitle}}\n            {{else if (has-block \"heading\")}}\n              {{yield to=\"heading\"}}\n            {{else}}\n              {{@heading}}\n            {{/if}}\n          </EuiButtonEmpty>\n        </HeadingElement>\n        <div id={{sideNavContentId}} class={{this.contentClasses}}>\n          {{#each @items as |item|}}\n            {{#let (and (not item.onClick) (not item.href) (not (not item.items))) as |childrenOnly|}}\n              <EuiSideNavItem @selectedItem={{@selectedItem}} @isOpen={{isItemOpen item @selectedItem}} @isSelected={{and (not childrenOnly) (eq item.id @selectedItem)}} @isParent={{not (not item.items)}} @icon={{item.icon}} @onClick={{item.onClick}} @href={{item.href}} @className={{item.className}} @rel={{item.rel}} @target={{item.target}} @items={{item.items}} @depth={{0}} @renderItem={{item.renderItem}} @disabled={{item.disabled}} @truncate={{item.truncate}} @emphasize={{item.emphasize}} @buttonClassName={{item.buttonClassName}} @childrenOnly={{childrenOnly}}>\n                {{item.name}}\n              </EuiSideNavItem>\n            {{/let}}\n          {{/each}}\n        </div>\n      </nav>\n    </EuiShowFor>\n  {{/if}}\n\n  <EuiHideFor @sizes={{this.mobileBreakpoints}}>\n    <nav aria-labelledby={{if hasHeader headingId}} class={{classes}} ...attributes>\n      {{#if hasHeader}}\n        {{#let (argOrDefault @headingProps.screenReaderOnly false) as |shouldScreenReader|}}\n          {{#if (has-block \"heading\")}}\n            {{#if shouldScreenReader}}\n              <HeadingElement {{screenReaderOnly}}>\n                {{yield to=\"heading\"}}\n              </HeadingElement>\n            {{else}}\n              <EuiTitle class={{classNames \"euiSideNav__heading\" @headingProps.className}} @size=\"xs\">\n                <HeadingElement>\n                  {{yield to=\"heading\"}}\n                </HeadingElement>\n              </EuiTitle>\n            {{/if}}\n          {{else}}\n            {{#if shouldScreenReader}}\n              <HeadingElement {{screenReaderOnly}}>\n                {{@heading}}\n              </HeadingElement>\n            {{else}}\n              <EuiTitle class={{classNames \"euiSideNav__heading\" @headingProps.className}} @size=\"xs\">\n                {{@heading}}\n              </EuiTitle>\n            {{/if}}\n          {{/if}}\n        {{/let}}\n      {{/if}}\n      <div id={{sideNavContentId}} class={{this.contentClasses}}>\n        {{#each @items as |item|}}\n          {{#let (and (not item.onClick) (not item.href) (not (not item.items))) as |childrenOnly|}}\n            <EuiSideNavItem @selectedItem={{@selectedItem}} @isOpen={{isItemOpen item @selectedItem}} @isSelected={{and (not childrenOnly) (eq item.id @selectedItem)}} @isParent={{not (not item.items)}} @icon={{item.icon}} @onClick={{item.onClick}} @href={{item.href}} @className={{item.className}} @rel={{item.rel}} @target={{item.target}} @items={{item.items}} @depth={{0}} @renderItem={{item.renderItem}} @disabled={{item.disabled}} @truncate={{item.truncate}} @emphasize={{item.emphasize}} @buttonClassName={{item.buttonClassName}} @childrenOnly={{childrenOnly}}>\n              {{item.name}}\n            </EuiSideNavItem>\n          {{/let}}\n        {{/each}}\n      </div>\n    </nav>\n  </EuiHideFor>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         classNames,

package/dist/components/eui-side-nav.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-side-nav.js","sources":["../../src/components/eui-side-nav.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { element } from 'ember-element-helper';\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiButtonEmpty from '../components/eui-button-empty.gts';\nimport EuiHideFor from '../components/eui-hide-for.gts';\nimport EuiShowFor from '../components/eui-show-for.gts';\nimport EuiSideNavItem from '../components/eui-side-nav-item.gts';\nimport EuiTitle from '../components/eui-title.gts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport isItemOpen from '../helpers/is-item-open.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\n\nimport type { EuiHideForSignature } from '../components/eui-hide-for';\n\nexport interface Item {\n  id: string;\n  icon?: string;\n  onClick?: () => void;\n  href?: string;\n  className?: string;\n  rel?: string;\n  target?: string;\n  items?: Item[];\n  depth?: number;\n  name?: string;\n  renderItem?: unknown;\n  isSelected?: boolean;\n  disabled?: boolean;\n  truncate?: boolean;\n  emphasize?: boolean;\n  buttonClassName?: string;\n}\n\nexport interface EuiSideNavSignature {\n  Element: HTMLDivElement | HTMLUListElement | HTMLElement;\n  Args: {\n    mobileBreakpoints?: EuiHideForSignature['Args']['sizes'];\n    isOpenMobile?: boolean;\n    toggleOpenOnMobile?: () => void;\n    heading?: string;\n    headingProps?: {\n      element?: string;\n      id?: string;\n      className?: string;\n      screenReaderOnly?: boolean;\n    };\n    mobileTitle?: string;\n    items?: Item[];\n    selectedItem?: string;\n  };\n  Blocks: {\n    default: [Item];\n    heading: [];\n  };\n}\n\nexport default class EuiSideNavComponent extends Component<EuiSideNavSignature> {\n  get mobileBreakpoints() {\n    return this.args.mobileBreakpoints || ['xs', 's'];\n  }\n\n  get contentClasses() {\n    let mobileBreakpoints = Array.isArray(this.mobileBreakpoints)\n      ? this.mobileBreakpoints\n      : [this.mobileBreakpoints];\n\n    return `euiSideNav__content ${mobileBreakpoints\n      .map?.((breakpointName) => {\n        return `euiSideNav__contentMobile-${breakpointName}`;\n      })\n      .join(' ')}`;\n  }\n\n  get hasMobileVersion() {\n    return this.mobileBreakpoints?.length > 0;\n  }\n\n  <template>\n    {{#let\n      (classNames \"euiSideNav\" (if @isOpenMobile \"euiSideNav-isOpenMobile\"))\n      (element (argOrDefault @headingProps.element \"h2\"))\n      (argOrDefault @headingProps.id (randomId))\n      (randomId)\n      (or (has-block \"heading\") (not (not @heading)))\n      as |classes HeadingElement headingId sideNavContentId hasHeader|\n    }}\n      {{#if this.hasMobileVersion}}\n        <EuiShowFor @sizes={{this.mobileBreakpoints}}>\n          <nav aria-labelledby={{headingId}} class={{classes}} ...attributes>\n            <HeadingElement id={{headingId}} class={{@headingProps.className}}>\n              <EuiButtonEmpty\n                type=\"button\"\n                class=\"euiSideNav__mobileToggle\"\n                @contentClasses=\"euiSideNav__mobileToggleContent\"\n                @textClasses=\"euiSideNav__mobileToggleText\"\n                {{on\n                  \"click\"\n                  (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))\n                }}\n                @iconType=\"apps\"\n                @iconSide=\"right\"\n                aria-controls={{sideNavContentId}}\n                aria-expanded={{@isOpenMobile}}\n              >\n                {{#if @mobileTitle}}\n                  {{@mobileTitle}}\n                {{else if (has-block \"heading\")}}\n                  {{yield to=\"heading\"}}\n                {{else}}\n                  {{@heading}}\n                {{/if}}\n              </EuiButtonEmpty>\n            </HeadingElement>\n            <div id={{sideNavContentId}} class={{this.contentClasses}}>\n              {{#each @items as |item|}}\n                {{#let\n                  (and\n                    (not item.onClick) (not item.href) (not (not item.items))\n                  )\n                  as |childrenOnly|\n                }}\n                  <EuiSideNavItem\n                    @selectedItem={{@selectedItem}}\n                    @isOpen={{isItemOpen item @selectedItem}}\n                    @isSelected={{and\n                      (not childrenOnly)\n                      (eq item.id item.isSelected)\n                    }}\n                    @isParent={{not (not item.items)}}\n                    @icon={{item.icon}}\n                    @onClick={{item.onClick}}\n                    @href={{item.href}}\n                    @className={{item.className}}\n                    @rel={{item.rel}}\n                    @target={{item.target}}\n                    @items={{item.items}}\n                    @depth={{0}}\n                    @renderItem={{item.renderItem}}\n                    @disabled={{item.disabled}}\n                    @truncate={{item.truncate}}\n                    @emphasize={{item.emphasize}}\n                    @buttonClassName={{item.buttonClassName}}\n                    @childrenOnly={{childrenOnly}}\n                  >\n                    {{item.name}}\n                  </EuiSideNavItem>\n                {{/let}}\n              {{/each}}\n            </div>\n          </nav>\n        </EuiShowFor>\n      {{/if}}\n\n      <EuiHideFor @sizes={{this.mobileBreakpoints}}>\n        <nav\n          aria-labelledby={{if hasHeader headingId}}\n          class={{classes}}\n          ...attributes\n        >\n          {{#if hasHeader}}\n            {{#let\n              (argOrDefault @headingProps.screenReaderOnly false)\n              as |shouldScreenReader|\n            }}\n              {{#if (has-block \"heading\")}}\n                {{#if shouldScreenReader}}\n                  <HeadingElement {{screenReaderOnly}}>\n                    {{yield to=\"heading\"}}\n                  </HeadingElement>\n                {{else}}\n                  <EuiTitle\n                    class={{classNames\n                      \"euiSideNav__heading\"\n                      @headingProps.className\n                    }}\n                    @size=\"xs\"\n                  >\n                    <HeadingElement>\n                      {{yield to=\"heading\"}}\n                    </HeadingElement>\n                  </EuiTitle>\n                {{/if}}\n              {{else}}\n                {{#if screenReaderOnly}}\n                  <HeadingElement {{screenReaderOnly}}>\n                    {{@heading}}\n                  </HeadingElement>\n                {{else}}\n                  <EuiTitle\n                    class={{classNames\n                      \"euiSideNav__heading\"\n                      @headingProps.className\n                    }}\n                    @size=\"xs\"\n                  >\n                    {{@heading}}\n                  </EuiTitle>\n                {{/if}}\n              {{/if}}\n            {{/let}}\n          {{/if}}\n          <div id={{sideNavContentId}} class={{this.contentClasses}}>\n            {{#each @items as |item|}}\n              {{#let\n                (and (not item.onClick) (not item.href) (not (not item.items)))\n                as |childrenOnly|\n              }}\n                <EuiSideNavItem\n                  @selectedItem={{@selectedItem}}\n                  @isOpen={{isItemOpen item @selectedItem}}\n                  @isSelected={{and\n                    (not childrenOnly)\n                    (eq item.id item.isSelected)\n                  }}\n                  @isParent={{not (not item.items)}}\n                  @icon={{item.icon}}\n                  @onClick={{item.onClick}}\n                  @href={{item.href}}\n                  @className={{item.className}}\n                  @rel={{item.rel}}\n                  @target={{item.target}}\n                  @items={{item.items}}\n                  @depth={{0}}\n                  @renderItem={{item.renderItem}}\n                  @disabled={{item.disabled}}\n                  @truncate={{item.truncate}}\n                  @emphasize={{item.emphasize}}\n                  @buttonClassName={{item.buttonClassName}}\n                  @childrenOnly={{childrenOnly}}\n                >\n                  {{item.name}}\n                </EuiSideNavItem>\n              {{/let}}\n            {{/each}}\n          </div>\n        </nav>\n      </EuiHideFor>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiSideNavComponent","Component","mobileBreakpoints","args","contentClasses","Array","isArray","map","breakpointName","join","hasMobileVersion","length","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","element","argOrDefault","randomId","or","not","EuiShowFor","EuiButtonEmpty","on","fn","optional","and","EuiSideNavItem","isItemOpen","eq","EuiHideFor","screenReaderOnly","EuiTitle"],"mappings":";;;;;;;;;;;;;;;;;;;AA+De,MAAMA,4BAA4BC,SAAU,CAAA;EACzD,IAAIC,iBAAoBA,GAAA;IACtB,OAAO,IAAI,CAACC,IAAI,CAACD,iBAAiB,IAAI,CAAC,IAAA,EAAM,GAAA,CAAI;AACnD;EAEA,IAAIE,cAAiBA,GAAA;AACnB,IAAA,IAAIF,iBAAA,GAAoBG,KAAM,CAAAC,OAAO,CAAC,IAAI,CAACJ,iBAAiB,CACxD,GAAA,IAAI,CAACA,iBAAiB,GACtB,CAAC,IAAI,CAACA,iBAAiB,CAAC;AAE5B,IAAA,OAAO,uBAAuBA,iBAC3B,CAAAK,GAAG,GAAIC,cAAA,IAAA;MACN,OAAO,CAAA,0BAAA,EAA6BA,cAAA,CAAgB,CAAA;AACtD,KACC,CAAA,CAAAC,IAAA,CAAK,KAAM,CAAA;AAChB;EAEA,IAAIC,gBAAmBA,GAAA;AACrB,IAAA,OAAO,IAAI,CAACR,iBAAiB,EAAES,MAAS,GAAA,CAAA;AAC1C;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAiKA,q7IAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,UAAA;QAAAC,OAAA;QAAAC,YAAA;QAAAC,QAAA;QAAAC,EAAA;QAAAC,GAAA;oBAAAC,mBAAA;QAAAC,cAAA;QAAAC,EAAA;QAAAC,EAAA;QAAAC,QAAA;QAAAC,GAAA;QAAAC,cAAA;QAAAC,UAAA;QAAAC,EAAA;oBAAAC,mBAAA;QAAAC,gBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-side-nav.js","sources":["../../src/components/eui-side-nav.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { element } from 'ember-element-helper';\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiButtonEmpty from '../components/eui-button-empty.gts';\nimport EuiHideFor from '../components/eui-hide-for.gts';\nimport EuiShowFor from '../components/eui-show-for.gts';\nimport EuiSideNavItem from '../components/eui-side-nav-item.gts';\nimport EuiTitle from '../components/eui-title.gts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport isItemOpen from '../helpers/is-item-open.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\n\nimport type { EuiHideForSignature } from '../components/eui-hide-for';\n\nexport interface Item {\n  /** Unique id, matched against `@selectedItem`. */\n  id: string;\n  /** Icon before the name; anything `EuiIcon`'s `@type` accepts. */\n  icon?: string;\n  /** Makes the item a button calling this function. */\n  onClick?: () => void;\n  /** Makes the item a link. */\n  href?: string;\n  /** Class for the item. */\n  className?: string;\n  /** `rel` of the link. */\n  rel?: string;\n  /** `target` of the link. */\n  target?: string;\n  /**\n   * Nested items. An item with children but no `href`/`onClick` is a\n   * section title; nested levels open while one of them is selected.\n   */\n  items?: Item[];\n  /** @private Nesting level. */\n  depth?: number;\n  /** The item's text. */\n  name?: string;\n  /** @deprecated Has no effect. */\n  renderItem?: unknown;\n  /** @deprecated Has no effect, use the side nav's `@selectedItem`. */\n  isSelected?: boolean;\n  /** Disables the item. */\n  disabled?: boolean;\n  /** Truncates a long name instead of wrapping. */\n  truncate?: boolean;\n  /** Bolder style, e.g. for the top level. */\n  emphasize?: boolean;\n  /** Class for the item's button or link. */\n  buttonClassName?: string;\n}\n\n/** A hierarchical navigation tree for a page's side bar. */\nexport interface EuiSideNavSignature {\n  Element: HTMLDivElement | HTMLUListElement | HTMLElement;\n  Args: {\n    /**\n     * Screen sizes showing the nav collapsed behind a toggle button.\n     * Defaults to `['xs', 's']`; pass `[]` to never collapse.\n     */\n    mobileBreakpoints?: EuiHideForSignature['Args']['sizes'];\n    /** Whether the collapsed (mobile) nav is open. */\n    isOpenMobile?: boolean;\n    /** Called by the mobile toggle button with the new open state. */\n    toggleOpenOnMobile?: () => void;\n    /** Heading above the items (and the toggle text on mobile). */\n    heading?: string;\n    /**\n     * Props for the heading: `{ element: 'h2', id, className,\n     * screenReaderOnly }`.\n     */\n    headingProps?: {\n      element?: string;\n      id?: string;\n      className?: string;\n      screenReaderOnly?: boolean;\n    };\n    /** Text of the mobile toggle button. Defaults to the heading. */\n    mobileTitle?: string;\n    /** The navigation tree, see `Item`. */\n    items?: Item[];\n    /** Id of the current item: it is highlighted and its parents open. */\n    selectedItem?: string;\n  };\n  Blocks: {\n    /** Unused. */\n    default: [Item];\n    /** Custom heading, instead of `@heading`. */\n    heading: [];\n  };\n}\n\nexport default class EuiSideNavComponent extends Component<EuiSideNavSignature> {\n  get mobileBreakpoints() {\n    return this.args.mobileBreakpoints || ['xs', 's'];\n  }\n\n  get contentClasses() {\n    const mobileBreakpoints = Array.isArray(this.mobileBreakpoints)\n      ? this.mobileBreakpoints\n      : [this.mobileBreakpoints];\n\n    return `euiSideNav__content ${mobileBreakpoints\n      .map?.((breakpointName) => {\n        return `euiSideNav__contentMobile-${breakpointName}`;\n      })\n      .join(' ')}`;\n  }\n\n  get hasMobileVersion() {\n    return this.mobileBreakpoints?.length > 0;\n  }\n\n  <template>\n    {{#let\n      (classNames \"euiSideNav\" (if @isOpenMobile \"euiSideNav-isOpenMobile\"))\n      (element (argOrDefault @headingProps.element \"h2\"))\n      (argOrDefault @headingProps.id (randomId))\n      (randomId)\n      (or (has-block \"heading\") (not (not @heading)))\n      as |classes HeadingElement headingId sideNavContentId hasHeader|\n    }}\n      {{#if this.hasMobileVersion}}\n        <EuiShowFor @sizes={{this.mobileBreakpoints}}>\n          <nav aria-labelledby={{headingId}} class={{classes}} ...attributes>\n            <HeadingElement id={{headingId}} class={{@headingProps.className}}>\n              <EuiButtonEmpty\n                type=\"button\"\n                class=\"euiSideNav__mobileToggle\"\n                @contentClasses=\"euiSideNav__mobileToggleContent\"\n                @textClasses=\"euiSideNav__mobileToggleText\"\n                {{on\n                  \"click\"\n                  (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))\n                }}\n                @iconType=\"apps\"\n                @iconSide=\"right\"\n                aria-controls={{sideNavContentId}}\n                aria-expanded={{if @isOpenMobile \"true\" \"false\"}}\n              >\n                {{#if @mobileTitle}}\n                  {{@mobileTitle}}\n                {{else if (has-block \"heading\")}}\n                  {{yield to=\"heading\"}}\n                {{else}}\n                  {{@heading}}\n                {{/if}}\n              </EuiButtonEmpty>\n            </HeadingElement>\n            <div id={{sideNavContentId}} class={{this.contentClasses}}>\n              {{#each @items as |item|}}\n                {{#let\n                  (and\n                    (not item.onClick) (not item.href) (not (not item.items))\n                  )\n                  as |childrenOnly|\n                }}\n                  <EuiSideNavItem\n                    @selectedItem={{@selectedItem}}\n                    @isOpen={{isItemOpen item @selectedItem}}\n                    @isSelected={{and\n                      (not childrenOnly)\n                      (eq item.id @selectedItem)\n                    }}\n                    @isParent={{not (not item.items)}}\n                    @icon={{item.icon}}\n                    @onClick={{item.onClick}}\n                    @href={{item.href}}\n                    @className={{item.className}}\n                    @rel={{item.rel}}\n                    @target={{item.target}}\n                    @items={{item.items}}\n                    @depth={{0}}\n                    @renderItem={{item.renderItem}}\n                    @disabled={{item.disabled}}\n                    @truncate={{item.truncate}}\n                    @emphasize={{item.emphasize}}\n                    @buttonClassName={{item.buttonClassName}}\n                    @childrenOnly={{childrenOnly}}\n                  >\n                    {{item.name}}\n                  </EuiSideNavItem>\n                {{/let}}\n              {{/each}}\n            </div>\n          </nav>\n        </EuiShowFor>\n      {{/if}}\n\n      <EuiHideFor @sizes={{this.mobileBreakpoints}}>\n        <nav\n          aria-labelledby={{if hasHeader headingId}}\n          class={{classes}}\n          ...attributes\n        >\n          {{#if hasHeader}}\n            {{#let\n              (argOrDefault @headingProps.screenReaderOnly false)\n              as |shouldScreenReader|\n            }}\n              {{#if (has-block \"heading\")}}\n                {{#if shouldScreenReader}}\n                  <HeadingElement {{screenReaderOnly}}>\n                    {{yield to=\"heading\"}}\n                  </HeadingElement>\n                {{else}}\n                  <EuiTitle\n                    class={{classNames\n                      \"euiSideNav__heading\"\n                      @headingProps.className\n                    }}\n                    @size=\"xs\"\n                  >\n                    <HeadingElement>\n                      {{yield to=\"heading\"}}\n                    </HeadingElement>\n                  </EuiTitle>\n                {{/if}}\n              {{else}}\n                {{#if shouldScreenReader}}\n                  <HeadingElement {{screenReaderOnly}}>\n                    {{@heading}}\n                  </HeadingElement>\n                {{else}}\n                  <EuiTitle\n                    class={{classNames\n                      \"euiSideNav__heading\"\n                      @headingProps.className\n                    }}\n                    @size=\"xs\"\n                  >\n                    {{@heading}}\n                  </EuiTitle>\n                {{/if}}\n              {{/if}}\n            {{/let}}\n          {{/if}}\n          <div id={{sideNavContentId}} class={{this.contentClasses}}>\n            {{#each @items as |item|}}\n              {{#let\n                (and (not item.onClick) (not item.href) (not (not item.items)))\n                as |childrenOnly|\n              }}\n                <EuiSideNavItem\n                  @selectedItem={{@selectedItem}}\n                  @isOpen={{isItemOpen item @selectedItem}}\n                  @isSelected={{and\n                    (not childrenOnly)\n                    (eq item.id @selectedItem)\n                  }}\n                  @isParent={{not (not item.items)}}\n                  @icon={{item.icon}}\n                  @onClick={{item.onClick}}\n                  @href={{item.href}}\n                  @className={{item.className}}\n                  @rel={{item.rel}}\n                  @target={{item.target}}\n                  @items={{item.items}}\n                  @depth={{0}}\n                  @renderItem={{item.renderItem}}\n                  @disabled={{item.disabled}}\n                  @truncate={{item.truncate}}\n                  @emphasize={{item.emphasize}}\n                  @buttonClassName={{item.buttonClassName}}\n                  @childrenOnly={{childrenOnly}}\n                >\n                  {{item.name}}\n                </EuiSideNavItem>\n              {{/let}}\n            {{/each}}\n          </div>\n        </nav>\n      </EuiHideFor>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiSideNavComponent","Component","mobileBreakpoints","args","contentClasses","Array","isArray","map","breakpointName","join","hasMobileVersion","length","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","element","argOrDefault","randomId","or","not","EuiShowFor","EuiButtonEmpty","on","fn","optional","and","EuiSideNavItem","isItemOpen","eq","EuiHideFor","screenReaderOnly","EuiTitle"],"mappings":";;;;;;;;;;;;;;;;;;;AA2DA;AAwCe,MAAMA,4BAA4BC,SAAA,CAAU;EACzD,IAAIC,iBAAAA,GAAoB;IACtB,OAAO,IAAI,CAACC,IAAI,CAACD,iBAAiB,IAAI,CAAC,IAAA,EAAM,GAAA,CAAI;AACnD,EAAA;EAEA,IAAIE,cAAAA,GAAiB;AACnB,IAAA,MAAMF,iBAAA,GAAoBG,KAAA,CAAMC,OAAO,CAAC,IAAI,CAACJ,iBAAiB,CAAA,GAC1D,IAAI,CAACA,iBAAiB,GACtB,CAAC,IAAI,CAACA,iBAAiB,CAAC;AAE5B,IAAA,OAAO,uBAAuBA,iBAAA,CAC3BK,GAAG,GAAIC,cAAA,IAAA;MACN,OAAO,CAAA,0BAAA,EAA6BA,cAAA,CAAA,CAAgB;AACtD,IAAA,CAAA,CAAA,CACCC,KAAK,GAAA,CAAA,CAAA,CAAM;AAChB,EAAA;EAEA,IAAIC,gBAAAA,GAAmB;AACrB,IAAA,OAAO,IAAI,CAACR,iBAAiB,EAAES,MAAA,GAAS,CAAA;AAC1C,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,mrIAAA,EAiKA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,UAAA;QAAAC,OAAA;QAAAC,YAAA;QAAAC,QAAA;QAAAC,EAAA;QAAAC,GAAA;oBAAAC,mBAAA;QAAAC,cAAA;QAAAC,EAAA;QAAAC,EAAA;QAAAC,QAAA;QAAAC,GAAA;QAAAC,cAAA;QAAAC,UAAA;QAAAC,EAAA;oBAAAC,mBAAA;QAAAC,gBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-skip-link.js

@@ -0,0 +1,22 @@
+import { concat } from '@ember/helper';
+import screenReaderOnly from '../modifiers/screen-reader-only.js';
+import EuiButton from './eui-button.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const EuiSkipLink = setComponentTemplate(precompileTemplate("<EuiButton class={{concat \"euiSkipLink euiSkipLink--\" (if @position @position \"static\")}} @href={{concat \"#\" @destinationId}} @size=\"s\" @fill={{true}} tabindex={{if (isFixed @position) 0 @tabIndex}} {{screenReaderOnly true}} ...attributes>\n  {{yield}}\n</EuiButton>", {
+  strictMode: true,
+  scope: () => ({
+    EuiButton,
+    concat,
+    isFixed,
+    screenReaderOnly
+  })
+}), templateOnly());
+function isFixed(position) {
+  return position === 'fixed';
+}
+
+export { EuiSkipLink as default };
+//# sourceMappingURL=eui-skip-link.js.map

package/dist/components/eui-skip-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-skip-link.js","sources":["../../src/components/eui-skip-link.gts"],"sourcesContent":["import { concat } from '@ember/helper';\n\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\nimport EuiButton from './eui-button.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * A link for keyboard users to jump past repeated content (like the\n * header) to the main content. It is hidden until focused, so put it\n * first in the page.\n */\nexport interface EuiSkipLinkSignature {\n  Element: HTMLElement;\n  Args: {\n    /**\n     * Id of the element to jump to (without `#`), e.g. `'main-content'`.\n     * Give that element `tabindex=\"-1\"` if it is not focusable itself.\n     */\n    destinationId: string;\n    /**\n     * Where the link shows when focused: `'static'` (in place),\n     * `'fixed'` (top left of the viewport) or `'absolute'`. Defaults to\n     * `'static'`.\n     */\n    position?: 'static' | 'fixed' | 'absolute';\n    /** `tabindex` of the link; a fixed link always gets `0`. */\n    tabIndex?: number;\n  };\n  Blocks: {\n    /** The link text, e.g. \"Skip to main content\". */\n    default: [];\n  };\n}\n\nconst EuiSkipLink: TemplateOnlyComponent<EuiSkipLinkSignature> = <template>\n  <EuiButton\n    class={{concat \"euiSkipLink euiSkipLink--\" (if @position @position \"static\")}}\n    @href={{concat \"#\" @destinationId}}\n    @size=\"s\"\n    @fill={{true}}\n    tabindex={{if (isFixed @position) 0 @tabIndex}}\n    {{screenReaderOnly true}}\n    ...attributes\n  >\n    {{yield}}\n  </EuiButton>\n</template>;\n\nfunction isFixed(position: string | undefined): boolean {\n  return position === 'fixed';\n}\n\nexport default EuiSkipLink;\n"],"names":["EuiSkipLink","setComponentTemplate","precompileTemplate","strictMode","scope","EuiButton","concat","isFixed","screenReaderOnly","templateOnly","position"],"mappings":";;;;;;;AAmCA,MAAMA,WAAmC,GAAAC,oBAAA,CAAwBC,kBAAA,CAAA,oRAAA,EAYjE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,SAAA;IAAAC,MAAA;IAAAC,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;AAEV,SAASF,QAAQG,QAA4B,EAAU;EACrD,OAAOA,QAAA,KAAa,OAAA;AACtB;;"}

package/dist/components/eui-spacer.js

@@ -4,7 +4,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiSpacer = setComponentTemplate(precompileTemplate("\n  <div class={{classNames componentName=\"EuiSpacer\" size=(argOrDefault @size \"l\")}} ...attributes></div>\n", {
+const EuiSpacer = setComponentTemplate(precompileTemplate("<div class={{classNames componentName=\"EuiSpacer\" size=(argOrDefault @size \"l\")}} ...attributes></div>", {
   strictMode: true,
   scope: () => ({
     classNames,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-spacer.js","sources":["../../src/components/eui-spacer.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { sizeMapping } from '../utils/css-mappings/eui-spacer.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiSpacerSignature {\n  Element: HTMLDivElement;\n  Args: {\n    size?: keyof typeof sizeMapping;\n  };\n}\n\nconst EuiSpacer: TemplateOnlyComponent<EuiSpacerSignature> = <template>\n  <div\n    class={{classNames componentName=\"EuiSpacer\" size=(argOrDefault @size \"l\")}}\n    ...attributes\n  ></div>\n</template>;\n\nexport default EuiSpacer;\n"],"names":["EuiSpacer","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;AAaA,MAAMA,SAAuD,GAAAC,oBAAA,CAAAC,kBAAA,CAK7D,kHAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-spacer.js","sources":["../../src/components/eui-spacer.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { sizeMapping } from '../utils/css-mappings/eui-spacer.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** Vertical space between elements. */\nexport interface EuiSpacerSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * `'xs'` (4px), `'s'` (8px), `'m'` (16px), `'l'` (24px), `'xl'` (32px)\n     * or `'xxl'` (40px). Defaults to `'l'`.\n     */\n    size?: keyof typeof sizeMapping;\n  };\n}\n\nconst EuiSpacer: TemplateOnlyComponent<EuiSpacerSignature> = <template>\n  <div\n    class={{classNames componentName=\"EuiSpacer\" size=(argOrDefault @size \"l\")}}\n    ...attributes\n  ></div>\n</template>;\n\nexport default EuiSpacer;\n"],"names":["EuiSpacer","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;AAkBA,MAAMA,SAAiC,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,4GAAA,EAK7D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-split-panel/inner.js

@@ -4,7 +4,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiSplitPanelInner = setComponentTemplate(precompileTemplate("\n    <EuiPanel class=\"euiSplitPanel__inner\" @hasShadow={{argOrDefault @hasShadow false}} @color={{argOrDefault @color \"transparent\"}} @borderRadius={{argOrDefault @borderRadius \"none\"}} @hasBorder={{argOrDefault @hasBorder false}} @paddingSize={{@paddingSize}} ...attributes>\n      {{yield}}\n    </EuiPanel>\n  ", {
+const EuiSplitPanelInner = setComponentTemplate(precompileTemplate("<EuiPanel class=\"euiSplitPanel__inner\" @hasShadow={{argOrDefault @hasShadow false}} @color={{argOrDefault @color \"transparent\"}} @borderRadius={{argOrDefault @borderRadius \"none\"}} @hasBorder={{argOrDefault @hasBorder false}} @paddingSize={{@paddingSize}} ...attributes>\n  {{yield}}\n</EuiPanel>", {
   strictMode: true,
   scope: () => ({
     EuiPanel,