@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-pagination.js

@@ -14,6 +14,8 @@ import { setComponentTemplate } from '@ember/component';
 const BREAKPOINTS = ['xs', 's'];
 const MAX_VISIBLE_PAGES = 5;
 const NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
+/** Page numbers with previous/next buttons, for paged lists and tables. */
+
 class EuiPaginationComponent extends Component {
   get pageCount() {
     return this.args.pageCount ?? 1;
@@ -28,7 +30,7 @@ class EuiPaginationComponent extends Component {
     return this.ariaControls !== undefined;
   }
   get pages() {
-    let pages = [];
+    const pages = [];
     const {
       firstPageInRange,
       lastPageInRange
@@ -41,7 +43,7 @@ class EuiPaginationComponent extends Component {
     return pages;
   }
   get firstPageButtons() {
-    let firstPageButtons = [];
+    const firstPageButtons = [];
     if (this.firstPageInRange > 0) {
       firstPageButtons.push({
         pageIndex: 0
@@ -66,9 +68,9 @@ class EuiPaginationComponent extends Component {
     return firstPageButtons;
   }
   get lastPageButtons() {
-    let lastPageButtons = [];
-    let pageCount = this.pageCount;
-    let lastPageInRange = this.lastPageInRange;
+    const lastPageButtons = [];
+    const pageCount = this.pageCount;
+    const lastPageInRange = this.lastPageInRange;
     if (lastPageInRange < pageCount) {
       if (lastPageInRange + 1 === pageCount - 1) {
         lastPageButtons.push({
@@ -145,7 +147,7 @@ class EuiPaginationComponent extends Component {
     return Math.min(this.pageCount, this.firstPageInRange + MAX_VISIBLE_PAGES);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#if @compressed}}\n      <nav class=\"euiPagination\" ...attributes>\n        <PreviousButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.prevPageButtonProps}} />\n        <EuiHideFor @sizes={{BREAKPOINTS}}>\n          <EuiText @size=\"s\" class=\"euiPagination__compressedText\">\n            <EuiI18n @token=\"euiPagination.pageOfTotalCompressed\" @default=\"{page} of {total}\" @values={{hash page=(component ButtonWrapper pageIndex=this.activePage props=this.sharedButtonProps inList=false) total=(component ButtonWrapper pageIndex=(sub this.pageCount 1) props=this.sharedButtonProps inList=false)}} as |Token|>\n              <Token as |value|>\n                {{value}}\n              </Token>\n            </EuiI18n>\n          </EuiText>\n        </EuiHideFor>\n        <NextButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.nextPageButtonProps}} @pageCount={{this.pageCount}} />\n      </nav>\n    {{else}}\n      {{!--template-lint-disable no-duplicate-landmark-elements--}}\n      <nav class=\"euiPagination\" ...attributes>\n        <PreviousButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.prevPageButtonProps}} />\n        <ul class=\"euiPagination__list\">\n          {{#each this.firstPageButtons as |page|}}\n            {{#if page.i18n}}\n              <EuiI18n @token=\"euiPagination.firstRangeAriaLabel\" @default=\"Skipping pages 2 to {lastPage}\" @values={{hash lastPage=this.firstPageInRange}} as |Token|>\n                <Token as |firstRangeAriaLabel|>\n                  <li aria-label={{firstRangeAriaLabel}} class=\"euiPaginationButton-isPlaceholder euiPagination__item\">\n                    &hellip;\n                  </li>\n                </Token>\n              </EuiI18n>\n            {{else}}\n              <ButtonWrapper @pageIndex={{page.pageIndex}} @props={{this.sharedButtonProps}} />\n            {{/if}}\n          {{/each}}\n          {{#each this.pages as |page|}}\n            <ButtonWrapper @pageIndex={{page.pageIndex}} @props={{this.sharedButtonProps}} />\n          {{/each}}\n          {{#each this.lastPageButtons as |page|}}\n            {{#if page.i18n}}\n              <EuiI18n @token=\"euiPagination.lastRangeAriaLabel\" @default=\"Skipping pages {firstPage} to {lastPage}\" @values={{hash firstPage=(add this.lastPageInRange 1) lastPage=(sub this.pageCount 1)}} as |Token|>\n                <Token as |lastRangeAriaLabel|>\n                  <li aria-label={{lastRangeAriaLabel}} class=\"euiPaginationButton-isPlaceholder euiPagination__item\">\n                    &hellip;\n                  </li>\n                </Token>\n              </EuiI18n>\n            {{else}}\n              <ButtonWrapper @pageIndex={{page.pageIndex}} @props={{this.sharedButtonProps}} />\n            {{/if}}\n          {{/each}}\n        </ul>\n        <NextButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.nextPageButtonProps}} @pageCount={{this.pageCount}} />\n      </nav>\n    {{/if}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#if @compressed}}\n  <nav class=\"euiPagination\" ...attributes>\n    <PreviousButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.prevPageButtonProps}} />\n    <EuiHideFor @sizes={{BREAKPOINTS}}>\n      <EuiText @size=\"s\" class=\"euiPagination__compressedText\">\n        <EuiI18n @token=\"euiPagination.pageOfTotalCompressed\" @default=\"{page} of {total}\" @values={{hash page=(component ButtonWrapper pageIndex=this.activePage props=this.sharedButtonProps inList=false) total=(component ButtonWrapper pageIndex=(sub this.pageCount 1) props=this.sharedButtonProps inList=false)}} as |Token|>\n          <Token as |value|>\n            {{value}}\n          </Token>\n        </EuiI18n>\n      </EuiText>\n    </EuiHideFor>\n    <NextButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.nextPageButtonProps}} @pageCount={{this.pageCount}} />\n  </nav>\n{{else}}\n  {{!--template-lint-disable no-duplicate-landmark-elements--}}\n  <nav class=\"euiPagination\" ...attributes>\n    <PreviousButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.prevPageButtonProps}} />\n    <ul class=\"euiPagination__list\">\n      {{#each this.firstPageButtons as |page|}}\n        {{#if page.i18n}}\n          <EuiI18n @token=\"euiPagination.firstRangeAriaLabel\" @default=\"Skipping pages 2 to {lastPage}\" @values={{hash lastPage=this.firstPageInRange}} as |Token|>\n            <Token as |firstRangeAriaLabel|>\n              <li aria-label={{firstRangeAriaLabel}} class=\"euiPaginationButton-isPlaceholder euiPagination__item\">\n                &hellip;\n              </li>\n            </Token>\n          </EuiI18n>\n        {{else}}\n          <ButtonWrapper @pageIndex={{page.pageIndex}} @props={{this.sharedButtonProps}} />\n        {{/if}}\n      {{/each}}\n      {{#each this.pages as |page|}}\n        <ButtonWrapper @pageIndex={{page.pageIndex}} @props={{this.sharedButtonProps}} />\n      {{/each}}\n      {{#each this.lastPageButtons as |page|}}\n        {{#if page.i18n}}\n          <EuiI18n @token=\"euiPagination.lastRangeAriaLabel\" @default=\"Skipping pages {firstPage} to {lastPage}\" @values={{hash firstPage=(add this.lastPageInRange 1) lastPage=(sub this.pageCount 1)}} as |Token|>\n            <Token as |lastRangeAriaLabel|>\n              <li aria-label={{lastRangeAriaLabel}} class=\"euiPaginationButton-isPlaceholder euiPagination__item\">\n                &hellip;\n              </li>\n            </Token>\n          </EuiI18n>\n        {{else}}\n          <ButtonWrapper @pageIndex={{page.pageIndex}} @props={{this.sharedButtonProps}} />\n        {{/if}}\n      {{/each}}\n    </ul>\n    <NextButton @activePage={{this.activePage}} @safeClick={{this.safeClick}} @props={{this.nextPageButtonProps}} @pageCount={{this.pageCount}} />\n  </nav>\n{{/if}}", {
       strictMode: true,
       scope: () => ({
         PreviousButton,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-pagination.js","sources":["../../src/components/eui-pagination.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\n\nimport add from 'ember-math-helpers/helpers/add';\nimport sub from 'ember-math-helpers/helpers/sub';\n\nimport EuiHideFor from './eui-hide-for.gts';\nimport EuiI18n from './eui-i18n.gts';\nimport ButtonWrapper from './eui-pagination/button-wrapper.gts';\nimport NextButton from './eui-pagination/next-button.gts';\nimport PreviousButton from './eui-pagination/previous-button.gts';\nimport EuiText from './eui-text.gts';\n\nimport type { EuiHideForBreakpoints } from './eui-hide-for';\n\nconst BREAKPOINTS: EuiHideForBreakpoints[] = ['xs', 's'];\n\nexport type PageClickHandler = (pageIndex: number) => void;\nexport type SafeClickHandler = (pageIndex: number) => void;\n\ninterface Args {\n  /**\n   * The total number of pages.\n   */\n  pageCount?: number;\n\n  /**\n   * The current page using a zero based index.\n   * So if you set the activePage to 1, it will activate the second page.\n   */\n  activePage?: number;\n\n  onPageClick?: PageClickHandler;\n\n  /**\n   * If true, will only show next/prev arrows instead of page numbers.\n   */\n  compressed?: boolean;\n\n  /**\n   * If passed in, passes value through to each button to set aria-controls\n   */\n  'aria-controls'?: string;\n  ariaControls?: string;\n}\n\nconst MAX_VISIBLE_PAGES = 5;\nconst NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);\n\nexport interface EuiPaginationSignature {\n  Element: HTMLElement;\n  Args: Args;\n}\n\nexport default class EuiPaginationComponent extends Component<EuiPaginationSignature> {\n  get pageCount() {\n    return this.args.pageCount ?? 1;\n  }\n\n  get activePage() {\n    return this.args.activePage ?? 0;\n  }\n\n  get ariaControls() {\n    return this.args['aria-controls'] || this.args.ariaControls;\n  }\n\n  get hasControl() {\n    return this.ariaControls !== undefined;\n  }\n\n  get pages() {\n    let pages = [];\n    const { firstPageInRange, lastPageInRange } = this;\n\n    for (\n      let i = firstPageInRange, index = 0;\n      i < lastPageInRange;\n      i++, index++\n    ) {\n      pages.push({\n        pageIndex: i\n      });\n    }\n\n    return pages;\n  }\n\n  get firstPageButtons() {\n    let firstPageButtons = [];\n\n    if (this.firstPageInRange > 0) {\n      firstPageButtons.push({\n        pageIndex: 0\n      });\n\n      if (this.firstPageInRange > 1 && this.firstPageInRange !== 2) {\n        firstPageButtons.push({\n          i18n: {\n            key: 'startingEllipses',\n            token: 'euiPagination.firstRangeAriaLabel',\n            default: 'Skipping pages 2 to {lastPage}',\n            values: { lastPage: this.firstPageInRange }\n          }\n        });\n      } else if (this.firstPageInRange === 2) {\n        firstPageButtons.push({ pageIndex: 1 });\n      }\n    }\n\n    return firstPageButtons;\n  }\n\n  get lastPageButtons() {\n    let lastPageButtons = [];\n    let pageCount = this.pageCount;\n    let lastPageInRange = this.lastPageInRange;\n\n    if (lastPageInRange < pageCount) {\n      if (lastPageInRange + 1 === pageCount - 1) {\n        lastPageButtons.push({ pageIndex: lastPageInRange });\n      } else if (lastPageInRange < pageCount - 1) {\n        lastPageButtons.push({\n          i18n: {\n            key: 'endingEllipses',\n            token: 'euiPagination.lastRangeAriaLabel',\n            default: 'Skipping pages {firstPage} to {lastPage}',\n            values: { firstPage: lastPageInRange + 1, lastPage: pageCount - 1 }\n          }\n        });\n      }\n\n      lastPageButtons.push({ pageIndex: pageCount - 1 });\n    }\n\n    return lastPageButtons;\n  }\n\n  get sharedButtonProps() {\n    return {\n      activePage: this.activePage,\n      pageCount: this.pageCount,\n      ariaControls: this.ariaControls,\n      safeClick: this.safeClick\n    };\n  }\n\n  get prevPageButtonProps() {\n    let prevPageButtonProps = {};\n\n    if (this.hasControl && this.activePage !== 0) {\n      prevPageButtonProps = {\n        'aria-controls': this.ariaControls,\n        href: `#${this.ariaControls}`\n      };\n    } else {\n      prevPageButtonProps = { disabled: this.activePage === 0 };\n    }\n\n    return prevPageButtonProps;\n  }\n\n  get nextPageButtonProps() {\n    let nextPageButtonProps = {};\n\n    if (this.hasControl && this.activePage !== this.pageCount - 1) {\n      nextPageButtonProps = {\n        'aria-controls': this.ariaControls,\n        href: `#${this.ariaControls}`\n      };\n    } else {\n      nextPageButtonProps = {\n        disabled: this.activePage === this.pageCount - 1\n      };\n    }\n\n    return nextPageButtonProps;\n  }\n\n  safeClick: SafeClickHandler = (pageIndex) => {\n    if (this.ariaControls) {\n      const controlledElement = document.getElementById(this.ariaControls);\n\n      if (controlledElement) {\n        controlledElement.focus();\n      }\n    }\n\n    this.args.onPageClick?.(pageIndex);\n  };\n\n  get firstPageInRange() {\n    return Math.max(\n      0,\n      Math.min(\n        this.activePage - NUMBER_SURROUNDING_PAGES,\n        this.pageCount - MAX_VISIBLE_PAGES\n      )\n    );\n  }\n\n  get lastPageInRange() {\n    return Math.min(this.pageCount, this.firstPageInRange + MAX_VISIBLE_PAGES);\n  }\n\n  <template>\n    {{#if @compressed}}\n      <nav class=\"euiPagination\" ...attributes>\n        <PreviousButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.prevPageButtonProps}}\n        />\n        <EuiHideFor @sizes={{BREAKPOINTS}}>\n          <EuiText @size=\"s\" class=\"euiPagination__compressedText\">\n            <EuiI18n\n              @token=\"euiPagination.pageOfTotalCompressed\"\n              @default=\"{page} of {total}\"\n              @values={{hash\n                page=(component\n                  ButtonWrapper\n                  pageIndex=this.activePage\n                  props=this.sharedButtonProps\n                  inList=false\n                )\n                total=(component\n                  ButtonWrapper\n                  pageIndex=(sub this.pageCount 1)\n                  props=this.sharedButtonProps\n                  inList=false\n                )\n              }}\n              as |Token|\n            >\n              <Token as |value|>\n                {{value}}\n              </Token>\n            </EuiI18n>\n          </EuiText>\n        </EuiHideFor>\n        <NextButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.nextPageButtonProps}}\n          @pageCount={{this.pageCount}}\n        />\n      </nav>\n    {{else}}\n      {{!template-lint-disable no-duplicate-landmark-elements}}\n      <nav class=\"euiPagination\" ...attributes>\n        <PreviousButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.prevPageButtonProps}}\n        />\n        <ul class=\"euiPagination__list\">\n          {{#each this.firstPageButtons as |page|}}\n            {{#if page.i18n}}\n              <EuiI18n\n                @token=\"euiPagination.firstRangeAriaLabel\"\n                @default=\"Skipping pages 2 to {lastPage}\"\n                @values={{hash lastPage=this.firstPageInRange}}\n                as |Token|\n              >\n                <Token as |firstRangeAriaLabel|>\n                  <li\n                    aria-label={{firstRangeAriaLabel}}\n                    class=\"euiPaginationButton-isPlaceholder euiPagination__item\"\n                  >\n                    &hellip;\n                  </li>\n                </Token>\n              </EuiI18n>\n            {{else}}\n              <ButtonWrapper\n                @pageIndex={{page.pageIndex}}\n                @props={{this.sharedButtonProps}}\n              />\n            {{/if}}\n          {{/each}}\n          {{#each this.pages as |page|}}\n            <ButtonWrapper\n              @pageIndex={{page.pageIndex}}\n              @props={{this.sharedButtonProps}}\n            />\n          {{/each}}\n          {{#each this.lastPageButtons as |page|}}\n            {{#if page.i18n}}\n              <EuiI18n\n                @token=\"euiPagination.lastRangeAriaLabel\"\n                @default=\"Skipping pages {firstPage} to {lastPage}\"\n                @values={{hash\n                  firstPage=(add this.lastPageInRange 1)\n                  lastPage=(sub this.pageCount 1)\n                }}\n                as |Token|\n              >\n                <Token as |lastRangeAriaLabel|>\n                  <li\n                    aria-label={{lastRangeAriaLabel}}\n                    class=\"euiPaginationButton-isPlaceholder euiPagination__item\"\n                  >\n                    &hellip;\n                  </li>\n                </Token>\n              </EuiI18n>\n            {{else}}\n              <ButtonWrapper\n                @pageIndex={{page.pageIndex}}\n                @props={{this.sharedButtonProps}}\n              />\n            {{/if}}\n          {{/each}}\n        </ul>\n        <NextButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.nextPageButtonProps}}\n          @pageCount={{this.pageCount}}\n        />\n      </nav>\n    {{/if}}\n  </template>\n}\n"],"names":["BREAKPOINTS","MAX_VISIBLE_PAGES","NUMBER_SURROUNDING_PAGES","Math","floor","EuiPaginationComponent","Component","pageCount","args","activePage","ariaControls","hasControl","undefined","pages","firstPageInRange","lastPageInRange","i","index","push","pageIndex","firstPageButtons","i18n","key","token","default","values","lastPage","lastPageButtons","firstPage","sharedButtonProps","safeClick","prevPageButtonProps","href","disabled","nextPageButtonProps","controlledElement","document","getElementById","focus","onPageClick","max","min","setComponentTemplate","precompileTemplate","strictMode","scope","PreviousButton","EuiHideFor","EuiText","EuiI18n","hash","ButtonWrapper","sub","NextButton","add"],"mappings":"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"}
+{"version":3,"file":"eui-pagination.js","sources":["../../src/components/eui-pagination.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\n\nimport add from 'ember-math-helpers/helpers/add';\nimport sub from 'ember-math-helpers/helpers/sub';\n\nimport EuiHideFor from './eui-hide-for.gts';\nimport EuiI18n from './eui-i18n.gts';\nimport ButtonWrapper from './eui-pagination/button-wrapper.gts';\nimport NextButton from './eui-pagination/next-button.gts';\nimport PreviousButton from './eui-pagination/previous-button.gts';\nimport EuiText from './eui-text.gts';\n\nimport type { EuiHideForBreakpoints } from './eui-hide-for';\n\nconst BREAKPOINTS: EuiHideForBreakpoints[] = ['xs', 's'];\n\nexport type PageClickHandler = (pageIndex: number) => void;\nexport type SafeClickHandler = (pageIndex: number) => void;\n\ninterface Args {\n  /**\n   * The total number of pages. Defaults to `1`.\n   */\n  pageCount?: number;\n\n  /**\n   * The current page using a zero based index.\n   * So if you set the activePage to 1, it will activate the second page.\n   * Defaults to `0`.\n   */\n  activePage?: number;\n\n  /** Called with the clicked page's zero based index; update `@activePage` here. */\n  onPageClick?: PageClickHandler;\n\n  /**\n   * If true, will only show next/prev arrows instead of page numbers.\n   */\n  compressed?: boolean;\n\n  /**\n   * If passed in, passes value through to each button to set aria-controls\n   * (the id of the content the pages change).\n   */\n  'aria-controls'?: string;\n  /** Same as `'aria-controls'`. */\n  ariaControls?: string;\n}\n\nconst MAX_VISIBLE_PAGES = 5;\nconst NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);\n\n/** Page numbers with previous/next buttons, for paged lists and tables. */\nexport interface EuiPaginationSignature {\n  Element: HTMLElement;\n  Args: Args;\n}\n\nexport default class EuiPaginationComponent extends Component<EuiPaginationSignature> {\n  get pageCount() {\n    return this.args.pageCount ?? 1;\n  }\n\n  get activePage() {\n    return this.args.activePage ?? 0;\n  }\n\n  get ariaControls() {\n    return this.args['aria-controls'] || this.args.ariaControls;\n  }\n\n  get hasControl() {\n    return this.ariaControls !== undefined;\n  }\n\n  get pages() {\n    const pages = [];\n    const { firstPageInRange, lastPageInRange } = this;\n\n    for (\n      let i = firstPageInRange, index = 0;\n      i < lastPageInRange;\n      i++, index++\n    ) {\n      pages.push({\n        pageIndex: i\n      });\n    }\n\n    return pages;\n  }\n\n  get firstPageButtons() {\n    const firstPageButtons = [];\n\n    if (this.firstPageInRange > 0) {\n      firstPageButtons.push({\n        pageIndex: 0\n      });\n\n      if (this.firstPageInRange > 1 && this.firstPageInRange !== 2) {\n        firstPageButtons.push({\n          i18n: {\n            key: 'startingEllipses',\n            token: 'euiPagination.firstRangeAriaLabel',\n            default: 'Skipping pages 2 to {lastPage}',\n            values: { lastPage: this.firstPageInRange }\n          }\n        });\n      } else if (this.firstPageInRange === 2) {\n        firstPageButtons.push({ pageIndex: 1 });\n      }\n    }\n\n    return firstPageButtons;\n  }\n\n  get lastPageButtons() {\n    const lastPageButtons = [];\n    const pageCount = this.pageCount;\n    const lastPageInRange = this.lastPageInRange;\n\n    if (lastPageInRange < pageCount) {\n      if (lastPageInRange + 1 === pageCount - 1) {\n        lastPageButtons.push({ pageIndex: lastPageInRange });\n      } else if (lastPageInRange < pageCount - 1) {\n        lastPageButtons.push({\n          i18n: {\n            key: 'endingEllipses',\n            token: 'euiPagination.lastRangeAriaLabel',\n            default: 'Skipping pages {firstPage} to {lastPage}',\n            values: { firstPage: lastPageInRange + 1, lastPage: pageCount - 1 }\n          }\n        });\n      }\n\n      lastPageButtons.push({ pageIndex: pageCount - 1 });\n    }\n\n    return lastPageButtons;\n  }\n\n  get sharedButtonProps() {\n    return {\n      activePage: this.activePage,\n      pageCount: this.pageCount,\n      ariaControls: this.ariaControls,\n      safeClick: this.safeClick\n    };\n  }\n\n  get prevPageButtonProps() {\n    let prevPageButtonProps = {};\n\n    if (this.hasControl && this.activePage !== 0) {\n      prevPageButtonProps = {\n        'aria-controls': this.ariaControls,\n        href: `#${this.ariaControls}`\n      };\n    } else {\n      prevPageButtonProps = { disabled: this.activePage === 0 };\n    }\n\n    return prevPageButtonProps;\n  }\n\n  get nextPageButtonProps() {\n    let nextPageButtonProps = {};\n\n    if (this.hasControl && this.activePage !== this.pageCount - 1) {\n      nextPageButtonProps = {\n        'aria-controls': this.ariaControls,\n        href: `#${this.ariaControls}`\n      };\n    } else {\n      nextPageButtonProps = {\n        disabled: this.activePage === this.pageCount - 1\n      };\n    }\n\n    return nextPageButtonProps;\n  }\n\n  safeClick: SafeClickHandler = (pageIndex) => {\n    if (this.ariaControls) {\n      const controlledElement = document.getElementById(this.ariaControls);\n\n      if (controlledElement) {\n        controlledElement.focus();\n      }\n    }\n\n    this.args.onPageClick?.(pageIndex);\n  };\n\n  get firstPageInRange() {\n    return Math.max(\n      0,\n      Math.min(\n        this.activePage - NUMBER_SURROUNDING_PAGES,\n        this.pageCount - MAX_VISIBLE_PAGES\n      )\n    );\n  }\n\n  get lastPageInRange() {\n    return Math.min(this.pageCount, this.firstPageInRange + MAX_VISIBLE_PAGES);\n  }\n\n  <template>\n    {{#if @compressed}}\n      <nav class=\"euiPagination\" ...attributes>\n        <PreviousButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.prevPageButtonProps}}\n        />\n        <EuiHideFor @sizes={{BREAKPOINTS}}>\n          <EuiText @size=\"s\" class=\"euiPagination__compressedText\">\n            <EuiI18n\n              @token=\"euiPagination.pageOfTotalCompressed\"\n              @default=\"{page} of {total}\"\n              @values={{hash\n                page=(component\n                  ButtonWrapper\n                  pageIndex=this.activePage\n                  props=this.sharedButtonProps\n                  inList=false\n                )\n                total=(component\n                  ButtonWrapper\n                  pageIndex=(sub this.pageCount 1)\n                  props=this.sharedButtonProps\n                  inList=false\n                )\n              }}\n              as |Token|\n            >\n              <Token as |value|>\n                {{value}}\n              </Token>\n            </EuiI18n>\n          </EuiText>\n        </EuiHideFor>\n        <NextButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.nextPageButtonProps}}\n          @pageCount={{this.pageCount}}\n        />\n      </nav>\n    {{else}}\n      {{!template-lint-disable no-duplicate-landmark-elements}}\n      <nav class=\"euiPagination\" ...attributes>\n        <PreviousButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.prevPageButtonProps}}\n        />\n        <ul class=\"euiPagination__list\">\n          {{#each this.firstPageButtons as |page|}}\n            {{#if page.i18n}}\n              <EuiI18n\n                @token=\"euiPagination.firstRangeAriaLabel\"\n                @default=\"Skipping pages 2 to {lastPage}\"\n                @values={{hash lastPage=this.firstPageInRange}}\n                as |Token|\n              >\n                <Token as |firstRangeAriaLabel|>\n                  <li\n                    aria-label={{firstRangeAriaLabel}}\n                    class=\"euiPaginationButton-isPlaceholder euiPagination__item\"\n                  >\n                    &hellip;\n                  </li>\n                </Token>\n              </EuiI18n>\n            {{else}}\n              <ButtonWrapper\n                @pageIndex={{page.pageIndex}}\n                @props={{this.sharedButtonProps}}\n              />\n            {{/if}}\n          {{/each}}\n          {{#each this.pages as |page|}}\n            <ButtonWrapper\n              @pageIndex={{page.pageIndex}}\n              @props={{this.sharedButtonProps}}\n            />\n          {{/each}}\n          {{#each this.lastPageButtons as |page|}}\n            {{#if page.i18n}}\n              <EuiI18n\n                @token=\"euiPagination.lastRangeAriaLabel\"\n                @default=\"Skipping pages {firstPage} to {lastPage}\"\n                @values={{hash\n                  firstPage=(add this.lastPageInRange 1)\n                  lastPage=(sub this.pageCount 1)\n                }}\n                as |Token|\n              >\n                <Token as |lastRangeAriaLabel|>\n                  <li\n                    aria-label={{lastRangeAriaLabel}}\n                    class=\"euiPaginationButton-isPlaceholder euiPagination__item\"\n                  >\n                    &hellip;\n                  </li>\n                </Token>\n              </EuiI18n>\n            {{else}}\n              <ButtonWrapper\n                @pageIndex={{page.pageIndex}}\n                @props={{this.sharedButtonProps}}\n              />\n            {{/if}}\n          {{/each}}\n        </ul>\n        <NextButton\n          @activePage={{this.activePage}}\n          @safeClick={{this.safeClick}}\n          @props={{this.nextPageButtonProps}}\n          @pageCount={{this.pageCount}}\n        />\n      </nav>\n    {{/if}}\n  </template>\n}\n"],"names":["BREAKPOINTS","MAX_VISIBLE_PAGES","NUMBER_SURROUNDING_PAGES","Math","floor","EuiPaginationComponent","Component","pageCount","args","activePage","ariaControls","hasControl","undefined","pages","firstPageInRange","lastPageInRange","i","index","push","pageIndex","firstPageButtons","i18n","key","token","default","values","lastPage","lastPageButtons","firstPage","sharedButtonProps","safeClick","prevPageButtonProps","href","disabled","nextPageButtonProps","controlledElement","document","getElementById","focus","onPageClick","max","min","setComponentTemplate","precompileTemplate","strictMode","scope","PreviousButton","EuiHideFor","EuiText","EuiI18n","hash","ButtonWrapper","sub","NextButton","add"],"mappings":"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"}

package/dist/components/eui-panel.js

@@ -1,3 +1,4 @@
+import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { not, and, or, eq } from 'ember-truth-helpers';
 import argOrDefault from '../helpers/arg-or-default.js';
@@ -6,7 +7,19 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiPanel = setComponentTemplate(precompileTemplate("\n  {{#let (argOrDefault @hasShadow true) (argOrDefault @color \"plain\") (argOrDefault @grow true) as |hasShadow color grow|}}\n    {{#let (eq color \"plain\") (or (eq color \"plain\") (eq color \"transparent\")) as |canHaveShadow canHaveBorder|}}\n      {{#if @onClick}}\n        <div role=\"button\" class={{classNames (if (argOrDefault @isClickable true) \"euiPanel--isClickable\") (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\") (if (and (not canHaveShadow) (eq hasShadow false)) \"euiPanel--noShadow\") (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\") (if (and (not canHaveBorder) (eq @hasBorder false)) \"euiPanel--noBorder\") (unless grow \"euiPanel--flexGrowZero\") componentName=\"EuiPanel\" paddingSize=(argOrDefault @paddingSize \"m\") borderRadius=(argOrDefault @borderRadius \"m\") color=color}} {{on \"click\" @onClick}} ...attributes>\n          {{yield}}\n        </div>\n      {{else}}\n        <div class={{classNames (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\") (if (and (not canHaveShadow) (eq hasShadow false)) \"euiPanel--noShadow\") (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\") (if (and (not canHaveBorder) (eq @hasBorder false)) \"euiPanel--noBorder\") (unless grow \"euiPanel--flexGrowZero\") componentName=\"EuiPanel\" paddingSize=(argOrDefault @paddingSize \"m\") borderRadius=(argOrDefault @borderRadius \"m\") color=color}} ...attributes>\n          {{yield}}\n        </div>\n      {{/if}}\n    {{/let}}\n  {{/let}}\n", {
+/**
+ * Enter and Space activate a clickable panel, like a native button. Keys
+ * pressed in controls inside the panel are left alone.
+ */
+function activateOnKey(onClick, event) {
+  if (event.target !== event.currentTarget) return;
+  if (event.key === 'Enter' || event.key === ' ') {
+    // Space would otherwise scroll the page
+    event.preventDefault();
+    onClick(event);
+  }
+}
+const EuiPanel = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @hasShadow true) (argOrDefault @color \"plain\") (argOrDefault @grow true) as |hasShadow color grow|}}\n  {{#let (eq color \"plain\") (or (eq color \"plain\") (eq color \"transparent\")) as |canHaveShadow canHaveBorder|}}\n    {{#if @onClick}}\n      <div role=\"button\" class={{classNames (if (argOrDefault @isClickable true) \"euiPanel--isClickable\") (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\") (if (and (not canHaveShadow) (eq hasShadow false)) \"euiPanel--noShadow\") (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\") (if (and (not canHaveBorder) (eq @hasBorder false)) \"euiPanel--noBorder\") (unless grow \"euiPanel--flexGrowZero\") componentName=\"EuiPanel\" paddingSize=(argOrDefault @paddingSize \"m\") borderRadius=(argOrDefault @borderRadius \"m\") color=color}} tabindex=\"0\" {{on \"click\" @onClick}} {{on \"keydown\" (fn activateOnKey @onClick)}} ...attributes>\n        {{yield}}\n      </div>\n    {{else}}\n      <div class={{classNames (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\") (if (and (not canHaveShadow) (eq hasShadow false)) \"euiPanel--noShadow\") (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\") (if (and (not canHaveBorder) (eq @hasBorder false)) \"euiPanel--noBorder\") (unless grow \"euiPanel--flexGrowZero\") componentName=\"EuiPanel\" paddingSize=(argOrDefault @paddingSize \"m\") borderRadius=(argOrDefault @borderRadius \"m\") color=color}} ...attributes>\n        {{yield}}\n      </div>\n    {{/if}}\n  {{/let}}\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     argOrDefault,
@@ -15,7 +28,9 @@ const EuiPanel = setComponentTemplate(precompileTemplate("\n  {{#let (argOrDefau
     classNames,
     and,
     not,
-    on
+    on,
+    fn,
+    activateOnKey
   })
 }), templateOnly());
 

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

@@ -1 +1 @@
-{"version":3,"file":"eui-panel.js","sources":["../../src/components/eui-panel.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type {\n  borderRadiusMapping,\n  colorMapping,\n  paddingSizeMapping} from '../utils/css-mappings/eui-panel.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiPanelSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Adds a box shadow to the panel\n     */\n    hasShadow?: boolean;\n    /**\n     * Adds a border around the panel\n     */\n    hasBorder?: boolean;\n    /**\n     * Adds a padding around the panel\n     */\n    paddingSize?: keyof typeof paddingSizeMapping;\n    /**\n     * Adds a border radius to the panel\n     */\n    borderRadius?: keyof typeof borderRadiusMapping;\n    /**\n     * Adds a background color to the panel\n     */\n    color?: keyof typeof colorMapping;\n    /**\n     * Adds a flex-grow: 0 to the panel\n     */\n    grow?: boolean;\n    /**\n     * Adds a click handler to the panel\n     */\n    onClick?: (e: MouseEvent) => void;\n    /**\n     * Adds a click handler to the panel\n     */\n    isClickable?: boolean;\n  };\n\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiPanel: TemplateOnlyComponent<EuiPanelSignature> = <template>\n  {{#let\n    (argOrDefault @hasShadow true)\n    (argOrDefault @color \"plain\")\n    (argOrDefault @grow true)\n    as |hasShadow color grow|\n  }}\n    {{#let\n      (eq color \"plain\") (or (eq color \"plain\") (eq color \"transparent\"))\n      as |canHaveShadow canHaveBorder|\n    }}\n      {{#if @onClick}}\n        <div\n          role=\"button\"\n          class={{classNames\n            (if (argOrDefault @isClickable true) \"euiPanel--isClickable\")\n            (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\")\n            (if\n              (and (not canHaveShadow) (eq hasShadow false))\n              \"euiPanel--noShadow\"\n            )\n            (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\")\n            (if\n              (and (not canHaveBorder) (eq @hasBorder false))\n              \"euiPanel--noBorder\"\n            )\n            (unless grow \"euiPanel--flexGrowZero\")\n            componentName=\"EuiPanel\"\n            paddingSize=(argOrDefault @paddingSize \"m\")\n            borderRadius=(argOrDefault @borderRadius \"m\")\n            color=color\n          }}\n          {{on \"click\" @onClick}}\n          ...attributes\n        >\n          {{yield}}\n        </div>\n      {{else}}\n        <div\n          class={{classNames\n            (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\")\n            (if\n              (and (not canHaveShadow) (eq hasShadow false))\n              \"euiPanel--noShadow\"\n            )\n            (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\")\n            (if\n              (and (not canHaveBorder) (eq @hasBorder false))\n              \"euiPanel--noBorder\"\n            )\n            (unless grow \"euiPanel--flexGrowZero\")\n            componentName=\"EuiPanel\"\n            paddingSize=(argOrDefault @paddingSize \"m\")\n            borderRadius=(argOrDefault @borderRadius \"m\")\n            color=color\n          }}\n          ...attributes\n        >\n          {{yield}}\n        </div>\n      {{/if}}\n    {{/let}}\n  {{/let}}\n</template>;\n\nexport default EuiPanel;\n"],"names":["EuiPanel","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","eq","or","classNames","and","not","on","templateOnly"],"mappings":";;;;;;;;AAuDA,MAAMA,QAAqD,GAAAC,oBAAA,CAAAC,kBAAA,CA+D3D,qgDAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,GAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-panel.js","sources":["../../src/components/eui-panel.gts"],"sourcesContent":["import { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport { and, eq, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type {\n  borderRadiusMapping,\n  colorMapping,\n  paddingSizeMapping} from '../utils/css-mappings/eui-panel.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A box grouping content, with background, padding, border and shadow options. */\nexport interface EuiPanelSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Adds a box shadow (plain panels only). Defaults to `true`.\n     */\n    hasShadow?: boolean;\n    /**\n     * Adds a border (plain and transparent panels only).\n     */\n    hasBorder?: boolean;\n    /**\n     * Padding: `'none'`, `'s'`, `'m'` or `'l'`. Defaults to `'m'`.\n     */\n    paddingSize?: keyof typeof paddingSizeMapping;\n    /**\n     * `'none'` or `'m'`. Defaults to `'m'`.\n     */\n    borderRadius?: keyof typeof borderRadiusMapping;\n    /**\n     * Background: `'plain'`, `'transparent'`, `'subdued'`, `'accent'`,\n     * `'primary'`, `'success'`, `'warning'` or `'danger'`.\n     * Defaults to `'plain'`.\n     */\n    color?: keyof typeof colorMapping;\n    /**\n     * Grows to fill a flex parent's height. Defaults to `true`.\n     */\n    grow?: boolean;\n    /**\n     * Makes the whole panel clickable (hover styles, `role=\"button\"`,\n     * focusable, Enter and Space activate it).\n     */\n    onClick?: (e: MouseEvent) => void;\n    /**\n     * Hover styles for a clickable panel. Defaults to `true`.\n     */\n    isClickable?: boolean;\n  };\n\n  Blocks: {\n    /** The panel's content. */\n    default: [];\n  };\n}\n\n/**\n * Enter and Space activate a clickable panel, like a native button. Keys\n * pressed in controls inside the panel are left alone.\n */\nfunction activateOnKey(\n  onClick: (e: MouseEvent) => void,\n  event: KeyboardEvent\n): void {\n  if (event.target !== event.currentTarget) return;\n\n  if (event.key === 'Enter' || event.key === ' ') {\n    // Space would otherwise scroll the page\n    event.preventDefault();\n    onClick(event as unknown as MouseEvent);\n  }\n}\n\nconst EuiPanel: TemplateOnlyComponent<EuiPanelSignature> = <template>\n  {{#let\n    (argOrDefault @hasShadow true)\n    (argOrDefault @color \"plain\")\n    (argOrDefault @grow true)\n    as |hasShadow color grow|\n  }}\n    {{#let\n      (eq color \"plain\") (or (eq color \"plain\") (eq color \"transparent\"))\n      as |canHaveShadow canHaveBorder|\n    }}\n      {{#if @onClick}}\n        <div\n          role=\"button\"\n          class={{classNames\n            (if (argOrDefault @isClickable true) \"euiPanel--isClickable\")\n            (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\")\n            (if\n              (and (not canHaveShadow) (eq hasShadow false))\n              \"euiPanel--noShadow\"\n            )\n            (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\")\n            (if\n              (and (not canHaveBorder) (eq @hasBorder false))\n              \"euiPanel--noBorder\"\n            )\n            (unless grow \"euiPanel--flexGrowZero\")\n            componentName=\"EuiPanel\"\n            paddingSize=(argOrDefault @paddingSize \"m\")\n            borderRadius=(argOrDefault @borderRadius \"m\")\n            color=color\n          }}\n          tabindex=\"0\"\n          {{on \"click\" @onClick}}\n          {{on \"keydown\" (fn activateOnKey @onClick)}}\n          ...attributes\n        >\n          {{yield}}\n        </div>\n      {{else}}\n        <div\n          class={{classNames\n            (if (and canHaveShadow (eq hasShadow true)) \"euiPanel--hasShadow\")\n            (if\n              (and (not canHaveShadow) (eq hasShadow false))\n              \"euiPanel--noShadow\"\n            )\n            (if (and canHaveBorder (eq @hasBorder true)) \"euiPanel--hasBorder\")\n            (if\n              (and (not canHaveBorder) (eq @hasBorder false))\n              \"euiPanel--noBorder\"\n            )\n            (unless grow \"euiPanel--flexGrowZero\")\n            componentName=\"EuiPanel\"\n            paddingSize=(argOrDefault @paddingSize \"m\")\n            borderRadius=(argOrDefault @borderRadius \"m\")\n            color=color\n          }}\n          ...attributes\n        >\n          {{yield}}\n        </div>\n      {{/if}}\n    {{/let}}\n  {{/let}}\n</template>;\n\nexport default EuiPanel;\n"],"names":["activateOnKey","onClick","event","target","currentTarget","key","preventDefault","EuiPanel","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","eq","or","classNames","and","not","on","fn","templateOnly"],"mappings":";;;;;;;;;AA6DA;;;;AAIA,SAASA,aAAAA,CACPC,OAAgC,EAChCC,KAAoB,EACf;AACL,EAAA,IAAIA,KAAA,CAAMC,MAAM,KAAKD,KAAA,CAAME,aAAa,EAAE;EAE1C,IAAIF,MAAMG,GAAG,KAAK,WAAWH,KAAA,CAAMG,GAAG,KAAK,GAAA,EAAK;AAC9C;IACAH,KAAA,CAAMI,cAAc,EAAA;IACpBL,OAAA,CAAQC,KAAoB,CAAA;AAC9B,EAAA;AACF;AAEA,MAAMK,QAAgC,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,qiDAAA,EAiE3D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,EAAA;IAAAC,EAAA;IAAAC,UAAA;IAAAC,GAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,EAAA;AAAAnB,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAoB,YAAA,EAAA;;"}

package/dist/components/eui-pinnable-list-group.js

@@ -0,0 +1,46 @@
+import Component from '@glimmer/component';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import EuiButtonIcon from './eui-button-icon.js';
+import EuiListGroup from './eui-list-group.js';
+import EuiListGroupItem from './eui-list-group-item.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+const PinButton = setComponentTemplate(precompileTemplate("<EuiButtonIcon class=\"euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction\n    {{if @item.pinned \"euiPinnableListGroup__itemExtraAction-pinned euiListGroupItem__extraAction-alwaysShow\"}}\" @iconType=\"pinFilled\" @iconSize=\"s\" @color=\"primary\" title={{@title}} aria-label={{@title}} {{on \"click\" (fn @onPinClick @item)}} />", {
+  strictMode: true,
+  scope: () => ({
+    EuiButtonIcon,
+    on,
+    fn
+  })
+}), templateOnly());
+class EuiPinnableListGroup extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  title = item => {
+    if (item.pinned) {
+      return this.args.unpinTitle?.(item) ?? this.euiI18n.lookupToken('euiPinnableListGroup.pinnedExtraActionLabel', 'Unpin item');
+    }
+    return this.args.pinTitle?.(item) ?? this.euiI18n.lookupToken('euiPinnableListGroup.pinExtraActionLabel', 'Pin item');
+  };
+  isPinnable = item => item.pinnable !== false;
+  static {
+    setComponentTemplate(precompileTemplate("<EuiListGroup class=\"euiPinnableListGroup\" @bordered={{@bordered}} @flush={{@flush}} @gutterSize={{@gutterSize}} @maxWidth={{@maxWidth}} ...attributes>\n  {{#each @listItems as |item|}}\n    <EuiListGroupItem class=\"euiPinnableListGroup__item\" @label={{item.label}} @href={{item.href}} @onClick={{item.onClick}} @iconType={{item.iconType}} @isActive={{item.isActive}} @isDisabled={{item.isDisabled}} @size={{@size}} @color={{@color}} @extraAction={{if (this.isPinnable item) (component PinButton item=item title=(this.title item) onPinClick=@onPinClick)}} />\n  {{/each}}\n</EuiListGroup>", {
+      strictMode: true,
+      scope: () => ({
+        EuiListGroup,
+        EuiListGroupItem,
+        PinButton
+      })
+    }), this);
+  }
+}
+
+export { EuiPinnableListGroup as default };
+//# sourceMappingURL=eui-pinnable-list-group.js.map

package/dist/components/eui-pinnable-list-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-pinnable-list-group.js","sources":["../../src/components/eui-pinnable-list-group.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\nimport EuiButtonIcon from './eui-button-icon.gts';\nimport EuiListGroup from './eui-list-group.gts';\nimport EuiListGroupItem from './eui-list-group-item.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiListGroupSignature } from './eui-list-group';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiPinnableListGroupItem {\n  /** The item's text. */\n  label: string;\n  /** Makes the item a link. */\n  href?: string;\n  /** Called when the item is clicked. */\n  onClick?: (event: MouseEvent) => void;\n  /** Icon before the label, any `EuiIcon` type. */\n  iconType?: EuiIconSignature['Args']['type'];\n  /** Highlights the item, e.g. the current page. */\n  isActive?: boolean;\n  /** Disables the item. */\n  isDisabled?: boolean;\n  /** Shows the pin always, filled: the item is pinned. */\n  pinned?: boolean;\n  /** Set `false` for items that cannot be pinned. Defaults to `true`. */\n  pinnable?: boolean;\n  [key: string]: unknown;\n}\n\n/**\n * A list of links (e.g. the pages of an app) where each item can be\n * pinned, usually to a \"Pinned\" list at the top of a navigation. You keep\n * the `pinned` flags; `@onPinClick` is called with the clicked item.\n */\nexport interface EuiPinnableListGroupSignature {\n  Element: HTMLUListElement;\n  Args: {\n    /** The items. */\n    listItems: EuiPinnableListGroupItem[];\n    /** Called with the item whose pin was clicked. */\n    onPinClick: (item: EuiPinnableListGroupItem) => void;\n    /** Accessible label of the pin button. Defaults to \"Pin item\". */\n    pinTitle?: (item: EuiPinnableListGroupItem) => string;\n    /** Accessible label of the unpin button. Defaults to \"Unpin item\". */\n    unpinTitle?: (item: EuiPinnableListGroupItem) => string;\n    /** Adds a border around the list. */\n    bordered?: boolean;\n    /** Removes the padding around the list. */\n    flush?: boolean;\n    /** Space between items: `'none'` or `'s'`. Defaults to `'s'`. */\n    gutterSize?: EuiListGroupSignature['Args']['gutterSize'];\n    /** Limits the list's width: `true` for EUI's default, or a CSS width. */\n    maxWidth?: EuiListGroupSignature['Args']['maxWidth'];\n    /** Text size of the items: `'xs'`, `'s'`, `'m'` or `'l'`. */\n    size?: 'xs' | 's' | 'm' | 'l';\n    /** Text color of the items: `'primary'`, `'text'`, `'subdued'`, `'ghost'`. */\n    color?: 'primary' | 'text' | 'subdued' | 'ghost' | 'inherit';\n  };\n}\n\ninterface PinButtonSignature {\n  Args: {\n    item: EuiPinnableListGroupItem;\n    title: string;\n    onPinClick: (item: EuiPinnableListGroupItem) => void;\n  };\n}\n\nconst PinButton: TemplateOnlyComponent<PinButtonSignature> = <template>\n  <EuiButtonIcon\n    class=\"euiListGroupItem__extraAction euiPinnableListGroup__itemExtraAction\n      {{if\n        @item.pinned\n        'euiPinnableListGroup__itemExtraAction-pinned euiListGroupItem__extraAction-alwaysShow'\n      }}\"\n    @iconType=\"pinFilled\"\n    @iconSize=\"s\"\n    @color=\"primary\"\n    title={{@title}}\n    aria-label={{@title}}\n    {{on \"click\" (fn @onPinClick @item)}}\n  />\n</template>;\n\nexport default class EuiPinnableListGroup extends Component<EuiPinnableListGroupSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  title = (item: EuiPinnableListGroupItem): string => {\n    if (item.pinned) {\n      return (\n        this.args.unpinTitle?.(item) ??\n        this.euiI18n.lookupToken('euiPinnableListGroup.pinnedExtraActionLabel', 'Unpin item')\n      );\n    }\n\n    return (\n      this.args.pinTitle?.(item) ??\n      this.euiI18n.lookupToken('euiPinnableListGroup.pinExtraActionLabel', 'Pin item')\n    );\n  };\n\n  isPinnable = (item: EuiPinnableListGroupItem): boolean => item.pinnable !== false;\n\n  <template>\n    <EuiListGroup\n      class=\"euiPinnableListGroup\"\n      @bordered={{@bordered}}\n      @flush={{@flush}}\n      @gutterSize={{@gutterSize}}\n      @maxWidth={{@maxWidth}}\n      ...attributes\n    >\n      {{#each @listItems as |item|}}\n        <EuiListGroupItem\n          class=\"euiPinnableListGroup__item\"\n          @label={{item.label}}\n          @href={{item.href}}\n          @onClick={{item.onClick}}\n          @iconType={{item.iconType}}\n          @isActive={{item.isActive}}\n          @isDisabled={{item.isDisabled}}\n          @size={{@size}}\n          @color={{@color}}\n          @extraAction={{if\n            (this.isPinnable item)\n            (component\n              PinButton\n              item=item\n              title=(this.title item)\n              onPinClick=@onPinClick\n            )\n          }}\n        />\n      {{/each}}\n    </EuiListGroup>\n  </template>\n}\n"],"names":["PinButton","setComponentTemplate","precompileTemplate","strictMode","scope","EuiButtonIcon","on","fn","templateOnly","EuiPinnableListGroup","Component","g","prototype","service","i","title","item","pinned","args","unpinTitle","euiI18n","lookupToken","pinTitle","isPinnable","pinnable","EuiListGroup","EuiListGroupItem"],"mappings":";;;;;;;;;;;;AAyEA,MAAMA,SAAiC,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,8VAAA,EAc7D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,aAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAEK,MAAMC,6BAA6BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACzDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAEDC,KAAA,GAASC,IAAM,IAAiC;IAC9C,IAAIA,IAAA,CAAKC,MAAM,EAAE;AACf,MAAA,OACE,IAAI,CAACC,IAAI,CAACC,UAAU,GAAGH,IAAA,CAAA,IACvB,IAAI,CAACI,OAAO,CAACC,WAAW,CAAC,+CAA+C,YAAA,CAC1E;AACF,IAAA;AAEA,IAAA,OACE,IAAI,CAACH,IAAI,CAACI,QAAQ,GAAGN,IAAA,CAAA,IACrB,IAAI,CAACI,OAAO,CAACC,WAAW,CAAC,4CAA4C,UAAA,CACvE;EACF,CAAA;AAEAE,EAAAA,UAAA,GAAcP,IAAM,IAAsCA,IAAA,CAAKQ,QAAQ,KAAK,KAAA;AAE5E,EAAA;IAAAvB,oBAAA,CAAAC,kBAAA,CAAA,klBAAA,EAgCA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAqB,YAAA;QAAAC,gBAAA;AAAA1B,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"eui-popover-footer.js","sources":["../../src/components/eui-popover-footer.gts"],"sourcesContent":["import classNames from '../helpers/class-names.ts';\n\nimport type { paddingMapping } from '../utils/css-mappings/eui-popover-footer.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiPopoverFooterSignature {\n  Element: HTMLDivElement;\n  Args: {\n    paddingSize?: keyof typeof paddingMapping;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiPopoverFooter: TemplateOnlyComponent<EuiPopoverFooterSignature> =\n  <template>\n    <div\n      class={{classNames\n        paddingSize=@paddingSize\n        componentName=\"EuiPopoverFooter\"\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiPopoverFooter;\n"],"names":["EuiPopoverFooter","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","templateOnly"],"mappings":";;;;;AAeA,MAAMA,gBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAUA,6IAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-popover-footer.js","sources":["../../src/components/eui-popover-footer.gts"],"sourcesContent":["import classNames from '../helpers/class-names.ts';\n\nimport type { paddingMapping } from '../utils/css-mappings/eui-popover-footer.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** The footer of an EuiPopover (separated by a border). */\nexport interface EuiPopoverFooterSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Padding: `'none'`, `'s'`, `'m'` or `'l'`. Should match the popover's. */\n    paddingSize?: keyof typeof paddingMapping;\n  };\n  Blocks: {\n    /** E.g. a full width button. */\n    default: [];\n  };\n}\n\nconst EuiPopoverFooter: TemplateOnlyComponent<EuiPopoverFooterSignature> =\n  <template>\n    <div\n      class={{classNames\n        paddingSize=@paddingSize\n        componentName=\"EuiPopoverFooter\"\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiPopoverFooter;\n"],"names":["EuiPopoverFooter","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","templateOnly"],"mappings":";;;;;AAkBA,MAAMA,gBAAwC,GAAAC,oBAAA,CAC5CC,kBAAA,CAAA,2HAAA,EAUA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"eui-popover-title.js","sources":["../../src/components/eui-popover-title.gts"],"sourcesContent":["import classNames from '../helpers/class-names.ts';\n\nimport type { paddingMapping } from '../utils/css-mappings/eui-popover-title.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiPopoverTitleSignature {\n  Element: HTMLDivElement;\n  Args: {\n    paddingSize?: keyof typeof paddingMapping;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiPopoverTitle: TemplateOnlyComponent<EuiPopoverTitleSignature> =\n  <template>\n    <div\n      class={{classNames\n        paddingSize=@paddingSize\n        componentName=\"EuiPopoverTitle\"\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiPopoverTitle;\n"],"names":["EuiPopoverTitle","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","templateOnly"],"mappings":";;;;;AAeA,MAAMA,eACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAUA,4IAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-popover-title.js","sources":["../../src/components/eui-popover-title.gts"],"sourcesContent":["import classNames from '../helpers/class-names.ts';\n\nimport type { paddingMapping } from '../utils/css-mappings/eui-popover-title.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** The title of an EuiPopover (separated by a border). */\nexport interface EuiPopoverTitleSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Padding: `'none'`, `'s'`, `'m'` or `'l'`. Should match the popover's. */\n    paddingSize?: keyof typeof paddingMapping;\n  };\n  Blocks: {\n    /** The title text. */\n    default: [];\n  };\n}\n\nconst EuiPopoverTitle: TemplateOnlyComponent<EuiPopoverTitleSignature> =\n  <template>\n    <div\n      class={{classNames\n        paddingSize=@paddingSize\n        componentName=\"EuiPopoverTitle\"\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiPopoverTitle;\n"],"names":["EuiPopoverTitle","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","templateOnly"],"mappings":";;;;;AAkBA,MAAMA,eAAuC,GAAAC,oBAAA,CAC3CC,kBAAA,CAAA,0HAAA,EAUA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-popover.js

@@ -7,6 +7,7 @@ import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import didUpdate from '@ember/render-modifiers/modifiers/did-update';
 import { cancel, later, scheduleOnce } from '@ember/runloop';
 import { htmlSafe } from '@ember/template';
+import { buildWaiter } from '@ember/test-waiters';
 import optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';
 import { focusTrap } from 'ember-focus-trap';
 import onKey from 'ember-keyboard/modifiers/on-key';
@@ -28,7 +29,7 @@ import EuiPanel from './eui-panel.js';
 import EuiPortal from './eui-portal.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i, n } from 'decorator-transforms/runtime';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 const anchorPositionToPopoverPositionMap = {
   up: 'top',
@@ -66,6 +67,8 @@ function getPopoverAlignFromAnchorPosition(anchorPosition) {
 }
 const ANCHOR_POSITIONS = Object.keys(anchorPositionMapping);
 const DISPLAY = Object.keys(displayMapping);
+// tests settle once an opening popover has set its focus
+const focusWaiter = buildWaiter('@ember-eui/core:eui-popover-focus');
 const DEFAULT_POPOVER_STYLES = {
   top: 50,
   left: 50
@@ -80,6 +83,12 @@ function getElementFromInitialFocus(initialFocus) {
   }
   return initialFocus;
 }
+
+/**
+ * A floating panel anchored to a button, e.g. a menu or a small form. You
+ * control `@isOpen` and close it in `@closePopover`.
+ */
+
 class EuiPopoverComponent extends Component {
   static {
     g(this.prototype, "isOpen", [argOrDefaultDecorator(false)]);
@@ -178,6 +187,7 @@ class EuiPopoverComponent extends Component {
   closingTransitionTimeout = null;
   closingTransitionAnimationFrame;
   updateFocusAnimationFrame;
+  updateFocusToken;
   hasSetInitialFocus = false;
   static {
     g(this.prototype, "_button", [tracked], function () {
@@ -260,10 +270,24 @@ class EuiPopoverComponent extends Component {
   static {
     n(this.prototype, "onClickOutside", [action]);
   }
+  cancelUpdateFocus() {
+    cancelAnimationFrame(this.updateFocusAnimationFrame);
+    if (this.updateFocusToken) {
+      focusWaiter.endAsync(this.updateFocusToken);
+      this.updateFocusToken = undefined;
+    }
+  }
   updateFocus() {
+    this.cancelUpdateFocus();
+    const token = focusWaiter.beginAsync();
+    this.updateFocusToken = token;
     // Wait for the DOM to update.
     this.updateFocusAnimationFrame = window.requestAnimationFrame(() => {
-      if (!this.ownFocus || !this.panel || this.args.initialFocus === false) {
+      focusWaiter.endAsync(token);
+      this.updateFocusToken = undefined;
+      // without @ownFocus, only an explicit @initialFocus moves the focus
+      const hasInitialFocus = this.args.initialFocus !== undefined && this.args.initialFocus !== null;
+      if (!(this.ownFocus || hasInitialFocus) || !this.panel || this.args.initialFocus === false) {
         return;
       }
       // If we've already focused on something inside the panel, everything's fine.
@@ -411,7 +435,7 @@ class EuiPopoverComponent extends Component {
     cancel(this.respositionTimeout);
     cancel(this.closingTransitionTimeout);
     cancelAnimationFrame(this.closingTransitionAnimationFrame);
-    cancelAnimationFrame(this.updateFocusAnimationFrame);
+    this.cancelUpdateFocus();
   }
   onMutation(records) {
     const waitDuration = getWaitDuration(records);
@@ -540,7 +564,7 @@ class EuiPopoverComponent extends Component {
     n(this.prototype, "registerPanel", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#let (randomId) (classNames (if this.isOpening \"euiPopover-isOpen\") position=this.anchorPosition display=this.display componentName=\"EuiPopover\") (classNames \"euiPopover__panel\" (concat \"euiPopover__panel--\" this.arrowPosition) (if this.isOpening \"euiPopover__panel-isOpen\") (if (or (not this.hasArrow) @attachToAnchor) \"euiPopover__panel-noArrow\") (if @attachToAnchor \"euiPopover__panel-isAttached\") @panelClassName) as |descriptionId classes panelClasses|}}\n      <div class={{classes}} {{onKey \"_all\" this.onKeyDown priority=1}} {{didInsert this.didInsertPopover}} {{didUpdate this.didUpdateIsOpen @isOpen}} {{didUpdate this.didUpdateRepositionOnScroll @repositionOnScroll}} {{didInsert (optional @popoverRef)}} ...attributes>\n\n        {{!-- button --}}\n        {{#if (has-block \"button\")}}\n          <div class=\"euiPopover__anchor {{@anchorClassName}}\" {{didInsert this.registerButton}}>\n            {{yield to=\"button\"}}\n          </div>\n        {{/if}}\n        \n        {{!-- content --}}\n        {{#if (and (not this.suppressingPopover) (or this.isCurrentlyOpen this.isClosing))}}\n          <EuiPortal @insert={{this.insert}} @portalRef={{@portalRef}}>\n            {{#let (randomId) as |panelId|}}\n              <EuiPanel id={{panelId}} class={{panelClasses}} aria-live={{if this.ownFocus \"off\" \"assertive\"}} role=\"dialog\" aria-label={{@ariaLabel}} aria-labelledby={{@ariaLabelledBy}} aria-modal=\"true\" aria-describedby={{if this.ownFocus descriptionId}} tabindex={{this.tabindex}} @hasShadow={{false}} @paddingSize={{this.panelPaddingSize}} {{simpleStyle this._popoverStyles}} {{didInsert this.registerPanel}} {{outsideClickDetector onOutsideClick=this.onClickOutside}} {{onKey \"Escape\" this.onEscapeKey}} {{focusTrap isActive=(not (or (not this.ownFocus) (not this.isOpenStable) this.isClosing)) shouldSelfFocus=this.shouldSelfFocus isPaused=this.isFocusTrapPaused focusTrapOptions=(merge (hash returnFocusOnDeactivate=this.isOpenStable initialFocus=(or @initialFocus this.panel) onDeactivate=(optional @onTrapDeactivation) preventScroll=true clickOutsideDeactivates=true fallbackFocus=(concat \"#\" panelId)) @focusTrapOptions)}}>\n                <div class={{concat \"euiPopover__panelArrow euiPopover__panelArrow--\" this.arrowPosition}} style={{this._arrowStyles}}>\n                  {{yield to=\"arrowChildren\"}}\n                </div>\n                {{#if this.ownFocus}}\n                  <p id={{descriptionId}} {{screenReaderOnly}}>\n                    You are in a dialog. To close this dialog, hit escape.\n                  </p>\n                {{/if}}\n                <div {{mutationObserver onMutation=this.onMutation observerOptions=(merge (hash attributes=true childList=true characterData=true subtree=true) @mutationObserverOptions)}}>\n                  {{yield to=\"content\"}}\n                </div>\n              </EuiPanel>\n            {{/let}}\n          </EuiPortal>\n        {{/if}}\n\n      </div>\n    {{/let}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#let (randomId) (classNames (if this.isOpening \"euiPopover-isOpen\") position=this.anchorPosition display=this.display componentName=\"EuiPopover\") (classNames \"euiPopover__panel\" (concat \"euiPopover__panel--\" this.arrowPosition) (if this.isOpening \"euiPopover__panel-isOpen\") (if (or (not this.hasArrow) @attachToAnchor) \"euiPopover__panel-noArrow\") (if @attachToAnchor \"euiPopover__panel-isAttached\") @panelClassName) as |descriptionId classes panelClasses|}}\n  <div class={{classes}} {{onKey \"_all\" this.onKeyDown priority=1}} {{didInsert this.didInsertPopover}} {{didUpdate this.didUpdateIsOpen @isOpen}} {{didUpdate this.didUpdateRepositionOnScroll @repositionOnScroll}} {{didInsert (optional @popoverRef)}} ...attributes>\n\n    {{!-- button --}}\n    {{#if (has-block \"button\")}}\n      <div class=\"euiPopover__anchor {{@anchorClassName}}\" {{didInsert this.registerButton}}>\n        {{yield to=\"button\"}}\n      </div>\n    {{/if}}\n    \n    {{!-- content --}}\n    {{#if (and (not this.suppressingPopover) (or this.isCurrentlyOpen this.isClosing))}}\n      <EuiPortal @insert={{this.insert}} @portalRef={{@portalRef}}>\n        {{#let (randomId) as |panelId|}}\n          <EuiPanel id={{panelId}} class={{panelClasses}} aria-live={{if this.ownFocus \"off\" \"assertive\"}} role=\"dialog\" aria-label={{@ariaLabel}} aria-labelledby={{@ariaLabelledBy}} aria-modal=\"true\" aria-describedby={{if this.ownFocus descriptionId}} tabindex={{this.tabindex}} @hasShadow={{false}} @paddingSize={{this.panelPaddingSize}} {{simpleStyle this._popoverStyles}} {{didInsert this.registerPanel}} {{outsideClickDetector onOutsideClick=this.onClickOutside}} {{onKey \"Escape\" this.onEscapeKey}} {{!-- the trap only traps: updateFocus sets the initial focus,\n                once the panel is positioned and visible --}} {{focusTrap isActive=(not (or (not this.ownFocus) (not this.isOpenStable) this.isClosing)) shouldSelfFocus=this.shouldSelfFocus isPaused=this.isFocusTrapPaused focusTrapOptions=(merge (hash returnFocusOnDeactivate=this.isOpenStable initialFocus=false onDeactivate=(optional @onTrapDeactivation) preventScroll=true clickOutsideDeactivates=true fallbackFocus=(concat \"#\" panelId)) @focusTrapOptions)}}>\n            <div class={{concat \"euiPopover__panelArrow euiPopover__panelArrow--\" this.arrowPosition}} style={{this._arrowStyles}}>\n              {{yield to=\"arrowChildren\"}}\n            </div>\n            {{#if this.ownFocus}}\n              <p id={{descriptionId}} {{screenReaderOnly}}>\n                You are in a dialog. To close this dialog, hit escape.\n              </p>\n            {{/if}}\n            <div {{mutationObserver onMutation=this.onMutation observerOptions=(merge (hash attributes=true childList=true characterData=true subtree=true) @mutationObserverOptions)}}>\n              {{yield to=\"content\"}}\n            </div>\n          </EuiPanel>\n        {{/let}}\n      </EuiPortal>\n    {{/if}}\n\n  </div>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         randomId,