@ember-eui/core 14.0.0 → 14.1.0

package/dist/components/eui-tour-step-indicator.js

@@ -0,0 +1,48 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import EuiIcon from './eui-icon.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+class EuiTourStepIndicator extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  get label() {
+    return this.euiI18n.lookupToken('euiTourStepIndicator.ariaLabel', 'Step {number} {status}', {
+      number: this.args.number,
+      status: this.args.status ?? ''
+    });
+  }
+  get iconLabel() {
+    const {
+      status
+    } = this.args;
+    if (status === 'active') return this.euiI18n.lookupToken('euiTourStepIndicator.isActive', 'active');
+    if (status === 'complete') return this.euiI18n.lookupToken('euiTourStepIndicator.isComplete', 'complete');
+    if (status === 'incomplete') {
+      return this.euiI18n.lookupToken('euiTourStepIndicator.isIncomplete', 'incomplete');
+    }
+    return undefined;
+  }
+  get classes() {
+    return this.args.status ? `euiTourStepIndicator euiTourStepIndicator--${this.args.status}` : 'euiTourStepIndicator';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<li class={{this.classes}} aria-label={{this.label}} ...attributes>\n  {{#if this.iconLabel}}\n    <EuiIcon class=\"euiStepNumber__icon\" @type=\"dot\" @color={{if (isActive @status) \"success\" \"subdued\"}} aria-label={{this.iconLabel}} aria-current={{if (isActive @status) \"step\"}} />\n  {{/if}}\n</li>", {
+      strictMode: true,
+      scope: () => ({
+        EuiIcon,
+        isActive
+      })
+    }), this);
+  }
+}
+function isActive(status) {
+  return status === 'active';
+}
+
+export { EuiTourStepIndicator as default };
+//# sourceMappingURL=eui-tour-step-indicator.js.map

package/dist/components/eui-tour-step-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-tour-step-indicator.js","sources":["../../src/components/eui-tour-step-indicator.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nimport EuiIcon from './eui-icon.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\n\n/** One dot of a tour's progress: `'complete'`, `'active'` or `'incomplete'`. */\nexport interface EuiTourStepIndicatorSignature {\n  Element: HTMLLIElement;\n  Args: {\n    /** The step's number (1-based). */\n    number: number;\n    /** `'complete'`, `'active'` or `'incomplete'`. */\n    status?: 'complete' | 'active' | 'incomplete';\n  };\n}\n\nexport default class EuiTourStepIndicator extends Component<EuiTourStepIndicatorSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get label(): string {\n    return this.euiI18n.lookupToken('euiTourStepIndicator.ariaLabel', 'Step {number} {status}', {\n      number: this.args.number,\n      status: this.args.status ?? ''\n    });\n  }\n\n  get iconLabel(): string | undefined {\n    const { status } = this.args;\n\n    if (status === 'active') return this.euiI18n.lookupToken('euiTourStepIndicator.isActive', 'active');\n    if (status === 'complete') return this.euiI18n.lookupToken('euiTourStepIndicator.isComplete', 'complete');\n    if (status === 'incomplete') {\n      return this.euiI18n.lookupToken('euiTourStepIndicator.isIncomplete', 'incomplete');\n    }\n\n    return undefined;\n  }\n\n  get classes(): string {\n    return this.args.status\n      ? `euiTourStepIndicator euiTourStepIndicator--${this.args.status}`\n      : 'euiTourStepIndicator';\n  }\n\n  <template>\n    <li class={{this.classes}} aria-label={{this.label}} ...attributes>\n      {{#if this.iconLabel}}\n        <EuiIcon\n          class=\"euiStepNumber__icon\"\n          @type=\"dot\"\n          @color={{if (isActive @status) \"success\" \"subdued\"}}\n          aria-label={{this.iconLabel}}\n          aria-current={{if (isActive @status) \"step\"}}\n        />\n      {{/if}}\n    </li>\n  </template>\n}\n\nfunction isActive(status?: string): boolean {\n  return status === 'active';\n}\n"],"names":["EuiTourStepIndicator","Component","g","prototype","service","i","label","euiI18n","lookupToken","number","args","status","iconLabel","undefined","classes","setComponentTemplate","precompileTemplate","strictMode","scope","EuiIcon","isActive"],"mappings":";;;;;;;AAkBe,MAAMA,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;EAED,IAAIC,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,kCAAkC,wBAAA,EAA0B;AAC1FC,MAAAA,MAAA,EAAQ,IAAI,CAACC,IAAI,CAACD,MAAM;AACxBE,MAAAA,MAAA,EAAQ,IAAI,CAACD,IAAI,CAACC,MAAM,IAAI;AAC9B,KAAA,CAAA;AACF,EAAA;EAEA,IAAIC,SAAAA,GAAgC;IAClC,MAAM;AAAED,MAAAA;KAAQ,GAAG,IAAI,CAACD,IAAI;AAE5B,IAAA,IAAIC,MAAA,KAAW,UAAU,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,+BAAA,EAAiC,QAAA,CAAA;AAC1F,IAAA,IAAIG,MAAA,KAAW,YAAY,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,iCAAA,EAAmC,UAAA,CAAA;IAC9F,IAAIG,WAAW,YAAA,EAAc;MAC3B,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,mCAAA,EAAqC,YAAA,CAAA;AACvE,IAAA;AAEA,IAAA,OAAOK,SAAA;AACT,EAAA;EAEA,IAAIC,OAAAA,GAAkB;AACpB,IAAA,OAAO,IAAI,CAACJ,IAAI,CAACC,MAAM,GACnB,CAAA,2CAAA,EAA8C,IAAI,CAACD,IAAI,CAACC,MAAM,CAAA,CAAE,GAChE,sBAAA;AACN,EAAA;AAEA,EAAA;IAAAI,oBAAA,CAAAC,kBAAA,CAAA,qTAAA,EAYA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASA,QAAAA,CAAST,MAAe,EAAU;EACzC,OAAOA,MAAA,KAAW,QAAA;AACpB;;"}

package/dist/components/eui-tour-step.js

@@ -0,0 +1,105 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { randomId } from '../-private/random-id.js';
+import EuiBeacon from './eui-beacon.js';
+import EuiButtonEmpty from './eui-button-empty.js';
+import EuiFlexGroup from './eui-flex-group.js';
+import EuiFlexItem from './eui-flex-item.js';
+import EuiPopoverComponent from './eui-popover.js';
+import EuiPopoverFooter from './eui-popover-footer.js';
+import EuiPopoverTitle from './eui-popover-title.js';
+import EuiTitle from './eui-title.js';
+import EuiTourStepIndicator from './eui-tour-step-indicator.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+class EuiTourStep extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  titleId = `euiTourStep_${randomId()}`;
+  get step() {
+    return this.args.step ?? 1;
+  }
+  get config() {
+    return this.args.tour?.stepConfig(this.step);
+  }
+  get isOpen() {
+    if (this.args.isStepOpen !== undefined) return this.args.isStepOpen;
+    const tour = this.args.tour;
+    return Boolean(tour?.isTourActive && tour.currentTourStep === this.step);
+  }
+  get stepsTotal() {
+    return this.args.stepsTotal ?? this.args.tour?.stepsTotal ?? 1;
+  }
+  get title() {
+    return this.args.title ?? this.config?.title;
+  }
+  get subtitle() {
+    return this.args.subtitle ?? this.args.tour?.tourSubtitle;
+  }
+  get content() {
+    return this.args.content ?? this.config?.content;
+  }
+  get anchorPosition() {
+    return this.args.anchorPosition ?? this.config?.anchorPosition ?? 'leftUp';
+  }
+  get hasBeacon() {
+    return (this.args.decoration ?? 'beacon') === 'beacon';
+  }
+  get panelStyle() {
+    const minWidth = this.args.minWidth ?? this.args.tour?.tourPopoverWidth ?? 300;
+    return {
+      minWidth: `${minWidth}px`,
+      maxWidth: `${this.args.maxWidth ?? 600}px`
+    };
+  }
+  get statuses() {
+    return Array.from({
+      length: this.stepsTotal
+    }, (_, i) => ({
+      number: i + 1,
+      status: this.step === i + 1 ? 'active' : this.step <= i ? 'incomplete' : 'complete'
+    }));
+  }
+  get finishLabel() {
+    const t = (token, text) => this.euiI18n.lookupToken(`euiTourStep.${token}`, text);
+    if (this.stepsTotal > 1) {
+      return this.stepsTotal === this.step ? t('endTour', 'End tour') : t('skipTour', 'Skip tour');
+    }
+    return t('closeTour', 'Close tour');
+  }
+  finish = () => {
+    (this.args.onFinish ?? this.args.tour?.finishTour)?.();
+  };
+  close = () => {
+    this.args.closePopover?.();
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<EuiPopover @isOpen={{this.isOpen}} @closePopover={{this.close}} @anchorPosition={{this.anchorPosition}} @ownFocus={{false}} @panelClassName=\"euiTour\" @panelStyle={{this.panelStyle}} @offset={{if this.hasBeacon 10 0}} @ariaLabelledBy={{this.titleId}} ...attributes>\n  <:button>{{yield}}</:button>\n  <:arrowChildren>\n    {{#if this.hasBeacon}}\n      <EuiBeacon class=\"euiTour__beacon\" />\n    {{/if}}\n  </:arrowChildren>\n  <:content>\n    <EuiPopoverTitle class=\"euiTourHeader\" id={{this.titleId}}>\n      {{#if this.subtitle}}\n        <EuiTitle class=\"euiTourHeader__subtitle\" @size=\"xxxs\" @tagName=\"h2\">{{this.subtitle}}</EuiTitle>\n        <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h3\">{{this.title}}</EuiTitle>\n      {{else}}\n        <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h2\">{{this.title}}</EuiTitle>\n      {{/if}}\n    </EuiPopoverTitle>\n    <div class=\"euiTour__content\">\n      {{#if (has-block \"content\")}}\n        {{yield to=\"content\"}}\n      {{else}}\n        {{this.content}}\n      {{/if}}\n    </div>\n    <EuiPopoverFooter class=\"euiTourFooter\">\n      <EuiFlexGroup @responsive={{false}} @justifyContent={{if (isMany this.stepsTotal) \"spaceBetween\" \"flexEnd\"}}>\n        {{#if (isMany this.stepsTotal)}}\n          <EuiFlexItem @grow={{false}}>\n            <ul class=\"euiTourFooter__stepList\">\n              {{#each this.statuses as |indicator|}}\n                <EuiTourStepIndicator @number={{indicator.number}} @status={{indicator.status}} />\n              {{/each}}\n            </ul>\n          </EuiFlexItem>\n        {{/if}}\n        <EuiFlexItem @grow={{false}}>\n          {{#if (has-block \"footerAction\")}}\n            {{yield to=\"footerAction\"}}\n          {{else}}\n            <EuiButtonEmpty @color=\"text\" @flush=\"right\" @size=\"xs\" {{on \"click\" this.finish}}>{{this.finishLabel}}</EuiButtonEmpty>\n          {{/if}}\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </EuiPopoverFooter>\n  </:content>\n</EuiPopover>", {
+      strictMode: true,
+      scope: () => ({
+        EuiPopover: EuiPopoverComponent,
+        EuiBeacon,
+        EuiPopoverTitle,
+        EuiTitle,
+        EuiPopoverFooter,
+        EuiFlexGroup,
+        isMany,
+        EuiFlexItem,
+        EuiTourStepIndicator,
+        EuiButtonEmpty,
+        on
+      })
+    }), this);
+  }
+}
+function isMany(count) {
+  return count > 1;
+}
+
+export { EuiTourStep as default };
+//# sourceMappingURL=eui-tour-step.js.map

package/dist/components/eui-tour-step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-tour-step.js","sources":["../../src/components/eui-tour-step.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\nimport { randomId } from '../-private/random-id.ts';\nimport EuiBeacon from './eui-beacon.gts';\nimport EuiButtonEmpty from './eui-button-empty.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiPopoverFooter from './eui-popover-footer.gts';\nimport EuiPopoverTitle from './eui-popover-title.gts';\nimport EuiTitle from './eui-title.gts';\nimport EuiTourStepIndicator from './eui-tour-step-indicator.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiPopoverSignature } from './eui-popover';\n\n/** What a tour tells its steps (set by `EuiTour`). */\nexport interface EuiTourContext {\n  currentTourStep: number;\n  isTourActive: boolean;\n  stepsTotal: number;\n  tourPopoverWidth?: number;\n  tourSubtitle?: string;\n  finishTour: () => void;\n  stepConfig: (step: number) => EuiTourStepConfig | undefined;\n}\n\n/** The content of a step, given to `EuiTour`'s `@steps`. */\nexport interface EuiTourStepConfig {\n  /** The step's number (1-based). */\n  step: number;\n  /** Title of the step. */\n  title: string;\n  /** Text of the step. */\n  content?: string;\n  /** Where the popover opens. Defaults to `'leftUp'`. */\n  anchorPosition?: EuiPopoverSignature['Args']['anchorPosition'];\n}\n\n/**\n * One step of a guided tour: a popover with a pulsing beacon next to the\n * element it explains (the block), a title, content, the progress and a\n * button to skip or end the tour. Render it through `EuiTour`, which opens\n * the current step, or on its own with `@isStepOpen`.\n */\nexport interface EuiTourStepSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Shows the popover. Defaults to whether it is the tour's current step. */\n    isStepOpen?: boolean;\n    /** The step's number (1-based). Defaults to `1`. */\n    step?: number;\n    /** Number of steps in the tour, for the progress dots. */\n    stepsTotal?: number;\n    /** Title of the step. */\n    title?: string;\n    /** Small title above it, e.g. the tour's name. */\n    subtitle?: string;\n    /** Text of the step. Use the `<:content>` block for markup. */\n    content?: string;\n    /** Where the popover opens. Defaults to `'leftUp'`. */\n    anchorPosition?: EuiPopoverSignature['Args']['anchorPosition'];\n    /** Minimum width in px. Defaults to `300`. */\n    minWidth?: number;\n    /** Maximum width in px. Defaults to `600`. */\n    maxWidth?: number;\n    /** Called by the \"Skip / End / Close tour\" button. */\n    onFinish?: () => void;\n    /** Called when clicking outside or pressing Escape. */\n    closePopover?: () => void;\n    /** `'beacon'` (a pulsing dot on the arrow) or `'none'`. Defaults to `'beacon'`. */\n    decoration?: 'beacon' | 'none';\n    /** @private Set by `EuiTour`. */\n    tour?: EuiTourContext;\n  };\n  Blocks: {\n    /** The element the step points at. */\n    default: [];\n    /** Markup for the step's content, instead of `@content`. */\n    content: [];\n    /** Replaces the \"Skip tour\" button, e.g. with \"Next\" / \"Back\" buttons. */\n    footerAction: [];\n  };\n}\n\ntype Status = 'complete' | 'active' | 'incomplete';\n\nexport default class EuiTourStep extends Component<EuiTourStepSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  titleId = `euiTourStep_${randomId()}`;\n\n  get step(): number {\n    return this.args.step ?? 1;\n  }\n\n  get config(): EuiTourStepConfig | undefined {\n    return this.args.tour?.stepConfig(this.step);\n  }\n\n  get isOpen(): boolean {\n    if (this.args.isStepOpen !== undefined) return this.args.isStepOpen;\n\n    const tour = this.args.tour;\n\n    return Boolean(tour?.isTourActive && tour.currentTourStep === this.step);\n  }\n\n  get stepsTotal(): number {\n    return this.args.stepsTotal ?? this.args.tour?.stepsTotal ?? 1;\n  }\n\n  get title(): string | undefined {\n    return this.args.title ?? this.config?.title;\n  }\n\n  get subtitle(): string | undefined {\n    return this.args.subtitle ?? this.args.tour?.tourSubtitle;\n  }\n\n  get content(): string | undefined {\n    return this.args.content ?? this.config?.content;\n  }\n\n  get anchorPosition(): EuiPopoverSignature['Args']['anchorPosition'] {\n    return this.args.anchorPosition ?? this.config?.anchorPosition ?? 'leftUp';\n  }\n\n  get hasBeacon(): boolean {\n    return (this.args.decoration ?? 'beacon') === 'beacon';\n  }\n\n  get panelStyle(): Record<string, string> {\n    const minWidth = this.args.minWidth ?? this.args.tour?.tourPopoverWidth ?? 300;\n\n    return { minWidth: `${minWidth}px`, maxWidth: `${this.args.maxWidth ?? 600}px` };\n  }\n\n  get statuses(): { number: number; status: Status }[] {\n    return Array.from({ length: this.stepsTotal }, (_, i) => ({\n      number: i + 1,\n      status: this.step === i + 1 ? 'active' : this.step <= i ? 'incomplete' : 'complete'\n    }));\n  }\n\n  get finishLabel(): string {\n    const t = (token: string, text: string) => this.euiI18n.lookupToken(`euiTourStep.${token}`, text);\n\n    if (this.stepsTotal > 1) {\n      return this.stepsTotal === this.step ? t('endTour', 'End tour') : t('skipTour', 'Skip tour');\n    }\n\n    return t('closeTour', 'Close tour');\n  }\n\n  finish = (): void => {\n    (this.args.onFinish ?? this.args.tour?.finishTour)?.();\n  };\n\n  close = (): void => {\n    this.args.closePopover?.();\n  };\n\n  <template>\n    <EuiPopover\n      @isOpen={{this.isOpen}}\n      @closePopover={{this.close}}\n      @anchorPosition={{this.anchorPosition}}\n      @ownFocus={{false}}\n      @panelClassName=\"euiTour\"\n      @panelStyle={{this.panelStyle}}\n      @offset={{if this.hasBeacon 10 0}}\n      @ariaLabelledBy={{this.titleId}}\n      ...attributes\n    >\n      <:button>{{yield}}</:button>\n      <:arrowChildren>\n        {{#if this.hasBeacon}}\n          <EuiBeacon class=\"euiTour__beacon\" />\n        {{/if}}\n      </:arrowChildren>\n      <:content>\n        <EuiPopoverTitle class=\"euiTourHeader\" id={{this.titleId}}>\n          {{#if this.subtitle}}\n            <EuiTitle class=\"euiTourHeader__subtitle\" @size=\"xxxs\" @tagName=\"h2\">{{this.subtitle}}</EuiTitle>\n            <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h3\">{{this.title}}</EuiTitle>\n          {{else}}\n            <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h2\">{{this.title}}</EuiTitle>\n          {{/if}}\n        </EuiPopoverTitle>\n        <div class=\"euiTour__content\">\n          {{#if (has-block \"content\")}}\n            {{yield to=\"content\"}}\n          {{else}}\n            {{this.content}}\n          {{/if}}\n        </div>\n        <EuiPopoverFooter class=\"euiTourFooter\">\n          <EuiFlexGroup\n            @responsive={{false}}\n            @justifyContent={{if (isMany this.stepsTotal) \"spaceBetween\" \"flexEnd\"}}\n          >\n            {{#if (isMany this.stepsTotal)}}\n              <EuiFlexItem @grow={{false}}>\n                <ul class=\"euiTourFooter__stepList\">\n                  {{#each this.statuses as |indicator|}}\n                    <EuiTourStepIndicator @number={{indicator.number}} @status={{indicator.status}} />\n                  {{/each}}\n                </ul>\n              </EuiFlexItem>\n            {{/if}}\n            <EuiFlexItem @grow={{false}}>\n              {{#if (has-block \"footerAction\")}}\n                {{yield to=\"footerAction\"}}\n              {{else}}\n                <EuiButtonEmpty\n                  @color=\"text\"\n                  @flush=\"right\"\n                  @size=\"xs\"\n                  {{on \"click\" this.finish}}\n                >{{this.finishLabel}}</EuiButtonEmpty>\n              {{/if}}\n            </EuiFlexItem>\n          </EuiFlexGroup>\n        </EuiPopoverFooter>\n      </:content>\n    </EuiPopover>\n  </template>\n}\n\nfunction isMany(count: number): boolean {\n  return count > 1;\n}\n\n"],"names":["EuiTourStep","Component","g","prototype","service","i","titleId","randomId","step","args","config","tour","stepConfig","isOpen","isStepOpen","undefined","Boolean","isTourActive","currentTourStep","stepsTotal","title","subtitle","tourSubtitle","content","anchorPosition","hasBeacon","decoration","panelStyle","minWidth","tourPopoverWidth","maxWidth","statuses","Array","from","length","_","number","status","finishLabel","t","token","text","euiI18n","lookupToken","finish","onFinish","finishTour","close","closePopover","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","EuiBeacon","EuiPopoverTitle","EuiTitle","EuiPopoverFooter","EuiFlexGroup","isMany","EuiFlexItem","EuiTourStepIndicator","EuiButtonEmpty","on","count"],"mappings":"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"}

package/dist/components/eui-tour.js

@@ -0,0 +1,100 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { action } from '@ember/object';
+import EuiTourStep from './eui-tour-step.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiTour extends Component {
+  static {
+    g(this.prototype, "currentTourStep", [tracked]);
+  }
+  #currentTourStep = (i(this, "currentTourStep"), void 0);
+  static {
+    g(this.prototype, "isTourActive", [tracked]);
+  }
+  #isTourActive = (i(this, "isTourActive"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    // only the starting point: the actions then change it
+    this.currentTourStep = args.initialState.currentTourStep;
+    this.isTourActive = args.initialState.isTourActive;
+  }
+  get stepsTotal() {
+    return this.args.steps?.length ?? this.args.stepsTotal ?? 1;
+  }
+  get state() {
+    return {
+      ...this.args.initialState,
+      currentTourStep: this.currentTourStep,
+      isTourActive: this.isTourActive
+    };
+  }
+  get context() {
+    return {
+      currentTourStep: this.currentTourStep,
+      isTourActive: this.isTourActive,
+      stepsTotal: this.stepsTotal,
+      tourPopoverWidth: this.args.initialState.tourPopoverWidth,
+      tourSubtitle: this.args.initialState.tourSubtitle,
+      finishTour: () => this.finishTour(),
+      stepConfig: step => this.args.steps?.find(config => config.step === step)
+    };
+  }
+  finishTour(resetTour = true) {
+    if (resetTour) this.currentTourStep = 1;
+    this.isTourActive = false;
+  }
+  static {
+    n(this.prototype, "finishTour", [action]);
+  }
+  resetTour() {
+    this.currentTourStep = 1;
+    this.isTourActive = true;
+  }
+  static {
+    n(this.prototype, "resetTour", [action]);
+  }
+  incrementStep() {
+    if (this.currentTourStep < this.stepsTotal) this.currentTourStep++;
+  }
+  static {
+    n(this.prototype, "incrementStep", [action]);
+  }
+  decrementStep() {
+    if (this.currentTourStep > 1) this.currentTourStep--;
+  }
+  static {
+    n(this.prototype, "decrementStep", [action]);
+  }
+  goToStep(step, isTourActive) {
+    if (step > 0 && step <= this.stepsTotal) this.currentTourStep = step;
+    if (isTourActive !== undefined) this.isTourActive = isTourActive;
+  }
+  static {
+    n(this.prototype, "goToStep", [action]);
+  }
+  get actions() {
+    return {
+      finishTour: this.finishTour,
+      resetTour: this.resetTour,
+      incrementStep: this.incrementStep,
+      decrementStep: this.decrementStep,
+      goToStep: this.goToStep
+    };
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{yield (hash Step=(component EuiTourStep tour=this.context) actions=this.actions state=this.state)}}", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        EuiTourStep
+      })
+    }), this);
+  }
+}
+
+export { EuiTour as default };
+//# sourceMappingURL=eui-tour.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-tour.js","sources":["../../src/components/eui-tour.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { action } from '@ember/object';\n\nimport EuiTourStep from './eui-tour-step.gts';\n\nimport type { EuiTourContext, EuiTourStepConfig } from './eui-tour-step';\nimport type { EuiTourStepSignature } from './eui-tour-step';\nimport type Owner from '@ember/owner';\nimport type { ComponentLike } from '@glint/template';\n\nexport type { EuiTourStepConfig };\n\nexport interface EuiTourState {\n  /** The step shown (1-based). */\n  currentTourStep: number;\n  /** Whether the tour runs. */\n  isTourActive: boolean;\n  /** Minimum width of the steps' popovers, in px. */\n  tourPopoverWidth?: number;\n  /** Subtitle of every step, e.g. the tour's name. */\n  tourSubtitle?: string;\n}\n\nexport interface EuiTourActions {\n  /** Ends the tour; `resetTour` (default `true`) goes back to step 1. */\n  finishTour: (resetTour?: boolean) => void;\n  /** Starts again from step 1. */\n  resetTour: () => void;\n  /** Goes to the next step. */\n  incrementStep: () => void;\n  /** Goes to the previous step. */\n  decrementStep: () => void;\n  /** Goes to a step, and starts or stops the tour with `isTourActive`. */\n  goToStep: (step: number, isTourActive?: boolean) => void;\n}\n\n/**\n * A guided tour: a series of `EuiTourStep` popovers shown one at a time.\n * It keeps the tour's state and yields `{ Step, actions, state }`: render\n * a `<tour.Step @step={{n}}>` around each element the tour points at, and\n * move with `tour.actions`.\n */\nexport interface EuiTourSignature {\n  Args: {\n    /** Where the tour starts (and whether it runs at first). */\n    initialState: EuiTourState;\n    /**\n     * The steps' titles and contents: `[{ step, title, content }]`. Each\n     * `<tour.Step @step={{n}}>` uses the entry with its number. Optional\n     * when the steps get their text directly.\n     */\n    steps?: EuiTourStepConfig[];\n    /** Number of steps, when `@steps` is not given. */\n    stepsTotal?: number;\n  };\n  Blocks: {\n    default: [\n      {\n        /** An `EuiTourStep` wired to this tour. */\n        Step: ComponentLike<{\n          Element: HTMLDivElement;\n          Args: Omit<EuiTourStepSignature['Args'], 'tour'>;\n          Blocks: EuiTourStepSignature['Blocks'];\n        }>;\n        actions: EuiTourActions;\n        state: EuiTourState;\n      }\n    ];\n  };\n}\n\nexport default class EuiTour extends Component<EuiTourSignature> {\n  @tracked currentTourStep: number;\n  @tracked isTourActive: boolean;\n\n  constructor(owner: Owner, args: EuiTourSignature['Args']) {\n    super(owner, args);\n    // only the starting point: the actions then change it\n    this.currentTourStep = args.initialState.currentTourStep;\n    this.isTourActive = args.initialState.isTourActive;\n  }\n\n  get stepsTotal(): number {\n    return this.args.steps?.length ?? this.args.stepsTotal ?? 1;\n  }\n\n  get state(): EuiTourState {\n    return {\n      ...this.args.initialState,\n      currentTourStep: this.currentTourStep,\n      isTourActive: this.isTourActive\n    };\n  }\n\n  get context(): EuiTourContext {\n    return {\n      currentTourStep: this.currentTourStep,\n      isTourActive: this.isTourActive,\n      stepsTotal: this.stepsTotal,\n      tourPopoverWidth: this.args.initialState.tourPopoverWidth,\n      tourSubtitle: this.args.initialState.tourSubtitle,\n      finishTour: () => this.finishTour(),\n      stepConfig: (step: number) => this.args.steps?.find((config) => config.step === step)\n    };\n  }\n\n  @action\n  finishTour(resetTour = true): void {\n    if (resetTour) this.currentTourStep = 1;\n    this.isTourActive = false;\n  }\n\n  @action\n  resetTour(): void {\n    this.currentTourStep = 1;\n    this.isTourActive = true;\n  }\n\n  @action\n  incrementStep(): void {\n    if (this.currentTourStep < this.stepsTotal) this.currentTourStep++;\n  }\n\n  @action\n  decrementStep(): void {\n    if (this.currentTourStep > 1) this.currentTourStep--;\n  }\n\n  @action\n  goToStep(step: number, isTourActive?: boolean): void {\n    if (step > 0 && step <= this.stepsTotal) this.currentTourStep = step;\n    if (isTourActive !== undefined) this.isTourActive = isTourActive;\n  }\n\n  get actions(): EuiTourActions {\n    return {\n      finishTour: this.finishTour,\n      resetTour: this.resetTour,\n      incrementStep: this.incrementStep,\n      decrementStep: this.decrementStep,\n      goToStep: this.goToStep\n    };\n  }\n\n  <template>\n    {{yield\n      (hash\n        Step=(component EuiTourStep tour=this.context)\n        actions=this.actions\n        state=this.state\n      )\n    }}\n  </template>\n}\n"],"names":["EuiTour","Component","g","prototype","tracked","i","constructor","owner","args","currentTourStep","initialState","isTourActive","stepsTotal","steps","length","state","context","tourPopoverWidth","tourSubtitle","finishTour","stepConfig","step","find","config","resetTour","n","action","incrementStep","decrementStep","goToStep","undefined","actions","setComponentTemplate","precompileTemplate","strictMode","scope","hash","EuiTourStep"],"mappings":"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"}

package/dist/components/eui-tree-view.js

@@ -0,0 +1,146 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { fn } 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 EuiIcon from './eui-icon.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+function initiallyOpen(items, expandByDefault) {
+  return items.filter(node => node.children && (expandByDefault || node.isExpanded)).map(node => node.id);
+}
+class EuiTreeView extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "openItems", [tracked], function () {
+      return initiallyOpen(this.args.items, this.args.expandByDefault);
+    });
+  }
+  #openItems = (i(this, "openItems"), void 0);
+  static {
+    g(this.prototype, "activeItem", [tracked]);
+  }
+  #activeItem = (i(this, "activeItem"), void 0);
+  static {
+    g(this.prototype, "expandChildNodes", [tracked], function () {
+      return this.args.expandByDefault ?? false;
+    });
+  }
+  #expandChildNodes = (i(this, "expandChildNodes"), void 0); // only the levels shown at first follow @expandByDefault
+  ownTreeId = this.args.treeId ?? `euiTreeView_${randomId()}`;
+  get isNested() {
+    return Boolean(this.args.treeId);
+  }
+  get treeId() {
+    return this.args.treeId ?? this.ownTreeId;
+  }
+  get instructionsId() {
+    return `${this.treeId}--instruction`;
+  }
+  get instructions() {
+    return this.euiI18n.lookupToken('euiTreeView.listNavigationInstructions', 'You can quickly navigate this list using arrow keys.');
+  }
+  get isCompressed() {
+    return this.args.display === 'compressed';
+  }
+  get classes() {
+    return ['euiTreeView', this.isCompressed && 'euiTreeView--compressed', this.args.showExpansionArrows && 'euiTreeView--withArrows'].filter(Boolean).join(' ');
+  }
+  isOpen = node => this.openItems.includes(node.id);
+  nodeClasses = node => ['euiTreeView__node', this.isCompressed && 'euiTreeView--compressed', this.isOpen(node) && 'euiTreeView__node--expanded'].filter(Boolean).join(' ');
+  buttonClasses = node => ['euiTreeView__nodeInner', this.args.showExpansionArrows && node.children && 'euiTreeView__nodeInner--withArrows', this.activeItem === node.id && 'euiTreeView__node--active', node.className].filter(Boolean).join(' ');
+  iconOf = node => this.isOpen(node) && node.iconWhenExpanded || node.icon || 'empty';
+  childrenId = node => `${this.treeId}_${node.id}_children`;
+  toggle(node) {
+    this.expandChildNodes = false;
+    if (this.isOpen(node)) {
+      this.openItems = this.openItems.filter(id => id !== node.id);
+    } else {
+      this.openItems = [...this.openItems, node.id];
+      this.activeItem = node.id;
+    }
+  }
+  onClick(node) {
+    this.toggle(node);
+    node.callback?.();
+  }
+  static {
+    n(this.prototype, "onClick", [action]);
+  }
+  onKeyDown(node, event) {
+    const button = event.currentTarget;
+    switch (event.key) {
+      case 'ArrowDown':
+      case 'ArrowUp':
+        {
+          const buttons = Array.from(document.querySelectorAll(`[data-test-subj="euiTreeViewButton-${this.treeId}"]`));
+          const index = buttons.indexOf(button);
+          const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];
+          if (index > -1 && next) {
+            event.preventDefault();
+            event.stopPropagation();
+            next.focus();
+          }
+          break;
+        }
+      case 'ArrowRight':
+        if (!this.isOpen(node)) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.toggle(node);
+        }
+        break;
+      case 'ArrowLeft':
+        if (this.isOpen(node)) {
+          event.preventDefault();
+          event.stopPropagation();
+          this.toggle(node);
+        }
+        break;
+    }
+  }
+  /** Arrow left inside a node's children moves back to that node. */
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  onChildrenKeyDown(node, event) {
+    if (event.key !== 'ArrowLeft') return;
+    event.preventDefault();
+    event.stopPropagation();
+    document.getElementById(node.id)?.focus();
+  }
+  static {
+    n(this.prototype, "onChildrenKeyDown", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"euiText {{if this.isCompressed \"euiText--small\" \"euiText--medium\"}} euiTreeView__wrapper\">\n  {{#unless this.isNested}}\n    <EuiScreenReaderOnly>\n      <p id={{this.instructionsId}}>{{this.instructions}}</p>\n    </EuiScreenReaderOnly>\n  {{/unless}}\n  <ul class={{this.classes}} id={{unless this.isNested this.treeId}} aria-describedby={{unless this.isNested this.instructionsId}} ...attributes>\n    {{#each @items as |node|}}\n      <li class={{this.nodeClasses node}}>\n        <button type=\"button\" id={{node.id}} class={{this.buttonClasses node}} aria-controls={{this.childrenId node}} aria-expanded={{if (this.isOpen node) \"true\" \"false\"}} data-test-subj=\"euiTreeViewButton-{{this.treeId}}\" {{on \"click\" (fn this.onClick node)}} {{on \"keydown\" (fn this.onKeyDown node)}}>\n          {{#if (and2 @showExpansionArrows node.children)}}\n            <EuiIcon class=\"euiTreeView__expansionArrow\" @size={{if this.isCompressed \"s\" \"m\"}} @type={{if (this.isOpen node) \"arrowDown\" \"arrowRight\"}} />\n          {{/if}}\n          {{#if node.icon}}\n            <span class=\"euiTreeView__iconWrapper\">\n              <EuiIcon @type={{this.iconOf node}} />\n            </span>\n          {{else if node.useEmptyIcon}}\n            <span class=\"euiTreeView__iconPlaceholder\"></span>\n          {{/if}}\n          <span class=\"euiTreeView__nodeLabel\">\n            {{~#if (has-block \"label\")~}}\n              {{yield node to=\"label\"}}\n            {{~else~}}\n              {{node.label}}\n            {{~/if~}}\n          </span>\n        </button>\n        <div id={{this.childrenId node}} {{on \"keydown\" (fn this.onChildrenKeyDown node)}}>\n          {{#if (and2 node.children (this.isOpen node))}}\n            <EuiTreeView @items={{childrenOf node}} @display={{@display}} @showExpansionArrows={{@showExpansionArrows}} @expandByDefault={{this.expandChildNodes}} @treeId={{this.treeId}} aria-labelledby={{node.id}}>\n              <:label as |child|>\n                {{~#if (has-block \"label\")~}}\n                  {{yield child to=\"label\"}}\n                {{~else~}}\n                  {{child.label}}\n                {{~/if~}}\n              </:label>\n            </EuiTreeView>\n          {{/if}}\n        </div>\n      </li>\n    {{/each}}\n  </ul>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        EuiScreenReaderOnly,
+        on,
+        fn,
+        and2,
+        EuiIcon,
+        EuiTreeView,
+        childrenOf
+      })
+    }), this);
+  }
+}
+function childrenOf(node) {
+  return node.children ?? [];
+}
+function and2(a, b) {
+  return Boolean(a && b);
+}
+
+export { EuiTreeView as default };
+//# sourceMappingURL=eui-tree-view.js.map

package/dist/components/eui-tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-tree-view.js","sources":["../../src/components/eui-tree-view.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn } 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 EuiIcon from './eui-icon.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiIconSignature } from './eui-icon';\n\nexport interface EuiTreeViewNode {\n  /** Unique id, also the id of the node's button. */\n  id: string;\n  /** The node's text. Use the `<:label>` block for markup. */\n  label: string;\n  /** Icon before the label, any `EuiIcon` type, e.g. `'folderClosed'`. */\n  icon?: EuiIconSignature['Args']['type'];\n  /** Icon while the node is open, e.g. `'folderOpen'`. */\n  iconWhenExpanded?: EuiIconSignature['Args']['type'];\n  /** Keeps the icon's space without an icon, to align with siblings. */\n  useEmptyIcon?: boolean;\n  /** Child nodes: the node opens and closes them. */\n  children?: EuiTreeViewNode[];\n  /** Starts open. */\n  isExpanded?: boolean;\n  /** Called when the node is clicked. */\n  callback?: () => void;\n  /** Extra classes for the node's button. */\n  className?: string;\n}\n\n/**\n * A hierarchy of nodes (folders and files, sections and pages) that open\n * and close. Arrow keys move between nodes (up and down) and open or close\n * them (right and left). Give it an `aria-label`.\n */\nexport interface EuiTreeViewSignature {\n  Element: HTMLUListElement;\n  Args: {\n    /** The top-level nodes; each may have `children`. */\n    items: EuiTreeViewNode[];\n    /** `'default'` or `'compressed'` (smaller text and spacing). */\n    display?: 'default' | 'compressed';\n    /** Opens every node that has children. */\n    expandByDefault?: boolean;\n    /** Shows an arrow before nodes that have children. */\n    showExpansionArrows?: boolean;\n    /** @private The root tree's id, for nested levels. */\n    treeId?: string;\n  };\n  Blocks: {\n    /** Renders a node's label yourself; yields the node. */\n    label: [node: EuiTreeViewNode];\n  };\n}\n\nfunction initiallyOpen(items: EuiTreeViewNode[], expandByDefault?: boolean): string[] {\n  return items\n    .filter((node) => node.children && (expandByDefault || node.isExpanded))\n    .map((node) => node.id);\n}\n\nexport default class EuiTreeView extends Component<EuiTreeViewSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked openItems: string[] = initiallyOpen(this.args.items, this.args.expandByDefault);\n  @tracked activeItem?: string;\n  // only the levels shown at first follow @expandByDefault\n  @tracked expandChildNodes = this.args.expandByDefault ?? false;\n\n  ownTreeId = this.args.treeId ?? `euiTreeView_${randomId()}`;\n\n  get isNested(): boolean {\n    return Boolean(this.args.treeId);\n  }\n\n  get treeId(): string {\n    return this.args.treeId ?? this.ownTreeId;\n  }\n\n  get instructionsId(): string {\n    return `${this.treeId}--instruction`;\n  }\n\n  get instructions(): string {\n    return this.euiI18n.lookupToken(\n      'euiTreeView.listNavigationInstructions',\n      'You can quickly navigate this list using arrow keys.'\n    );\n  }\n\n  get isCompressed(): boolean {\n    return this.args.display === 'compressed';\n  }\n\n  get classes(): string {\n    return [\n      'euiTreeView',\n      this.isCompressed && 'euiTreeView--compressed',\n      this.args.showExpansionArrows && 'euiTreeView--withArrows'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  isOpen = (node: EuiTreeViewNode): boolean => this.openItems.includes(node.id);\n\n  nodeClasses = (node: EuiTreeViewNode): string =>\n    [\n      'euiTreeView__node',\n      this.isCompressed && 'euiTreeView--compressed',\n      this.isOpen(node) && 'euiTreeView__node--expanded'\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n  buttonClasses = (node: EuiTreeViewNode): string =>\n    [\n      'euiTreeView__nodeInner',\n      this.args.showExpansionArrows && node.children && 'euiTreeView__nodeInner--withArrows',\n      this.activeItem === node.id && 'euiTreeView__node--active',\n      node.className\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n  iconOf = (node: EuiTreeViewNode): EuiIconSignature['Args']['type'] =>\n    (this.isOpen(node) && node.iconWhenExpanded) || node.icon || 'empty';\n\n  childrenId = (node: EuiTreeViewNode): string => `${this.treeId}_${node.id}_children`;\n\n  toggle(node: EuiTreeViewNode): void {\n    this.expandChildNodes = false;\n\n    if (this.isOpen(node)) {\n      this.openItems = this.openItems.filter((id) => id !== node.id);\n    } else {\n      this.openItems = [...this.openItems, node.id];\n      this.activeItem = node.id;\n    }\n  }\n\n  @action\n  onClick(node: EuiTreeViewNode): void {\n    this.toggle(node);\n    node.callback?.();\n  }\n\n  @action\n  onKeyDown(node: EuiTreeViewNode, event: KeyboardEvent): void {\n    const button = event.currentTarget as HTMLElement;\n\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp': {\n        const buttons = Array.from(\n          document.querySelectorAll<HTMLElement>(\n            `[data-test-subj=\"euiTreeViewButton-${this.treeId}\"]`\n          )\n        );\n        const index = buttons.indexOf(button);\n        const next = buttons[index + (event.key === 'ArrowDown' ? 1 : -1)];\n\n        if (index > -1 && next) {\n          event.preventDefault();\n          event.stopPropagation();\n          next.focus();\n        }\n        break;\n      }\n      case 'ArrowRight':\n        if (!this.isOpen(node)) {\n          event.preventDefault();\n          event.stopPropagation();\n          this.toggle(node);\n        }\n        break;\n      case 'ArrowLeft':\n        if (this.isOpen(node)) {\n          event.preventDefault();\n          event.stopPropagation();\n          this.toggle(node);\n        }\n        break;\n    }\n  }\n\n  /** Arrow left inside a node's children moves back to that node. */\n  @action\n  onChildrenKeyDown(node: EuiTreeViewNode, event: KeyboardEvent): void {\n    if (event.key !== 'ArrowLeft') return;\n\n    event.preventDefault();\n    event.stopPropagation();\n    document.getElementById(node.id)?.focus();\n  }\n\n  <template>\n    <div class=\"euiText {{if this.isCompressed 'euiText--small' 'euiText--medium'}} euiTreeView__wrapper\">\n      {{#unless this.isNested}}\n        <EuiScreenReaderOnly>\n          <p id={{this.instructionsId}}>{{this.instructions}}</p>\n        </EuiScreenReaderOnly>\n      {{/unless}}\n      <ul\n        class={{this.classes}}\n        id={{unless this.isNested this.treeId}}\n        aria-describedby={{unless this.isNested this.instructionsId}}\n        ...attributes\n      >\n        {{#each @items as |node|}}\n          <li class={{this.nodeClasses node}}>\n            <button\n              type=\"button\"\n              id={{node.id}}\n              class={{this.buttonClasses node}}\n              aria-controls={{this.childrenId node}}\n              aria-expanded={{if (this.isOpen node) \"true\" \"false\"}}\n              data-test-subj=\"euiTreeViewButton-{{this.treeId}}\"\n              {{on \"click\" (fn this.onClick node)}}\n              {{on \"keydown\" (fn this.onKeyDown node)}}\n            >\n              {{#if (and2 @showExpansionArrows node.children)}}\n                <EuiIcon\n                  class=\"euiTreeView__expansionArrow\"\n                  @size={{if this.isCompressed \"s\" \"m\"}}\n                  @type={{if (this.isOpen node) \"arrowDown\" \"arrowRight\"}}\n                />\n              {{/if}}\n              {{#if node.icon}}\n                <span class=\"euiTreeView__iconWrapper\">\n                  <EuiIcon @type={{this.iconOf node}} />\n                </span>\n              {{else if node.useEmptyIcon}}\n                <span class=\"euiTreeView__iconPlaceholder\"></span>\n              {{/if}}\n              <span class=\"euiTreeView__nodeLabel\">\n                {{~#if (has-block \"label\")~}}\n                  {{yield node to=\"label\"}}\n                {{~else~}}\n                  {{node.label}}\n                {{~/if~}}\n              </span>\n            </button>\n            <div\n              id={{this.childrenId node}}\n              {{on \"keydown\" (fn this.onChildrenKeyDown node)}}\n            >\n              {{#if (and2 node.children (this.isOpen node))}}\n                <EuiTreeView\n                  @items={{childrenOf node}}\n                  @display={{@display}}\n                  @showExpansionArrows={{@showExpansionArrows}}\n                  @expandByDefault={{this.expandChildNodes}}\n                  @treeId={{this.treeId}}\n                  aria-labelledby={{node.id}}\n                >\n                  <:label as |child|>\n                    {{~#if (has-block \"label\")~}}\n                      {{yield child to=\"label\"}}\n                    {{~else~}}\n                      {{child.label}}\n                    {{~/if~}}\n                  </:label>\n                </EuiTreeView>\n              {{/if}}\n            </div>\n          </li>\n        {{/each}}\n      </ul>\n    </div>\n  </template>\n}\n\nfunction childrenOf(node: EuiTreeViewNode): EuiTreeViewNode[] {\n  return node.children ?? [];\n}\n\nfunction and2(a: unknown, b: unknown): boolean {\n  return Boolean(a && b);\n}\n"],"names":["initiallyOpen","items","expandByDefault","filter","node","children","isExpanded","map","id","EuiTreeView","Component","g","prototype","service","i","tracked","args","ownTreeId","treeId","randomId","isNested","Boolean","instructionsId","instructions","euiI18n","lookupToken","isCompressed","display","classes","showExpansionArrows","join","isOpen","openItems","includes","nodeClasses","buttonClasses","activeItem","className","iconOf","iconWhenExpanded","icon","childrenId","toggle","expandChildNodes","onClick","callback","n","action","onKeyDown","event","button","currentTarget","key","buttons","Array","from","document","querySelectorAll","index","indexOf","next","preventDefault","stopPropagation","focus","onChildrenKeyDown","getElementById","setComponentTemplate","precompileTemplate","strictMode","scope","EuiScreenReaderOnly","on","fn","and2","EuiIcon","childrenOf","a","b"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"eui-wrapping-popover.js","sources":["../../src/components/eui-wrapping-popover.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport { modifier } from 'ember-modifier';\n\nimport EuiPopover from './eui-popover.gts';\nimport EuiPortal from './eui-portal.gts';\n\nimport type { EuiPopoverSignature } from './eui-popover.gts';\n\nexport interface EuiWrappingPopoverSignature {\n  Element: EuiPopoverSignature['Element'];\n  Args: EuiPopoverSignature['Args'] & {\n    button?: HTMLElement;\n    onWrappingDestroy?: () => void;\n    portalRef?: (ref: HTMLElement) => void;\n    popoverPortalRef?: (ref: HTMLElement) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nexport default class EuiWrappingPopover extends Component<EuiWrappingPopoverSignature> {\n  private portal: HTMLElement | null = null;\n  private anchor: HTMLElement | null = null;\n\n  setAnchorRef = modifier((element: HTMLElement) => {\n    this.anchor = element;\n    this.anchor.insertAdjacentElement('beforebegin', this.args.button!);\n  });\n\n  setPortalRef = (element: HTMLElement) => {\n    this.portal = element;\n    this.args.portalRef?.(element);\n  };\n\n  get insert(): { sibling: HTMLElement; position: 'after' } | undefined {\n    if (this.args.button) {\n      return {\n        sibling: this.args.button,\n        position: 'after'\n      };\n    }\n\n    return;\n  }\n\n  willDestroy() {\n    super.willDestroy();\n\n    if (this.args.button && this.args.button.parentNode) {\n      if (this.portal) {\n        this.portal.insertAdjacentElement('beforebegin', this.args.button);\n      }\n    }\n\n    this.args.onWrappingDestroy?.();\n    this.portal = null;\n    this.anchor = null;\n  }\n\n  <template>\n    <EuiPortal @portalRef={{this.setPortalRef}} @insert={{this.insert}}>\n      <EuiPopover\n        @closePopover={{@closePopover}}\n        @isOpen={{@isOpen}}\n        @anchorClassName={{@anchorClassName}}\n        @portalRef={{@popoverPortalRef}}\n        @anchorPosition={{@anchorPosition}}\n        @attachToAnchor={{@attachToAnchor}}\n        @container={{@container}}\n        @display={{@display}}\n        @hasArrow={{@hasArrow}}\n        @initialFocus={{@initialFocus}}\n        @ownFocus={{@ownFocus}}\n        @panelClassName={{@panelClassName}}\n        @panelPaddingSize={{@panelPaddingSize}}\n        @panelStyle={{@panelStyle}}\n        @panelRef={{@panelRef}}\n        @popoverRef={{@popoverRef}}\n        ...attributes\n      >\n        <:button>\n          <div {{this.setAnchorRef}} class=\"euiWrappingPopover__anchor\" />\n        </:button>\n\n        <:content>\n          {{yield}}\n        </:content>\n      </EuiPopover>\n    </EuiPortal>\n  </template>\n}\n"],"names":["EuiWrappingPopover","Component","portal","anchor","setAnchorRef","modifier","element","insertAdjacentElement","args","button","setPortalRef","portalRef","insert","sibling","position","willDestroy","parentNode","onWrappingDestroy","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPortal","EuiPopover"],"mappings":";;;;;;;AAsBe,MAAMA,2BAA2BC,SAAU,CAAA;AAChDC,EAAAA,MAAQ,GAAqB,IAAK;AAClCC,EAAAA,MAAQ,GAAqB,IAAK;AAE1CC,EAAAA,YAAe,GAAAC,QAAA,CAAUC,OAAS,IAAA;IAChC,IAAI,CAACH,MAAM,GAAGG,OAAA;AACd,IAAA,IAAI,CAACH,MAAM,CAACI,qBAAqB,CAAC,eAAe,IAAI,CAACC,IAAI,CAACC,MAAM,CAAA;AACnE,GAAG,CAAA;EAEHC,YAAA,GAAgBJ,OAAS,IAAA;IACvB,IAAI,CAACJ,MAAM,GAAGI,OAAA;AACd,IAAA,IAAI,CAACE,IAAI,CAACG,SAAS,GAAGL,OAAA,CAAA;GACtB;EAEF,IAAIM,MAAAA,GAAkE;AACpE,IAAA,IAAI,IAAI,CAACJ,IAAI,CAACC,MAAM,EAAE;MACpB,OAAO;AACLI,QAAAA,OAAA,EAAS,IAAI,CAACL,IAAI,CAACC,MAAM;AACzBK,QAAAA,QAAU,EAAA;OACZ;AACF;AAEA,IAAA;AACF;AAEAC,EAAAA,WAAcA,GAAA;IACZ,KAAK,CAACA,WAAA,EAAA;AAEN,IAAA,IAAI,IAAI,CAACP,IAAI,CAACC,MAAM,IAAI,IAAI,CAACD,IAAI,CAACC,MAAM,CAACO,UAAU,EAAE;MACnD,IAAI,IAAI,CAACd,MAAM,EAAE;AACf,QAAA,IAAI,CAACA,MAAM,CAACK,qBAAqB,CAAC,eAAe,IAAI,CAACC,IAAI,CAACC,MAAM,CAAA;AACnE;AACF;AAEA,IAAA,IAAI,CAACD,IAAI,CAACS,iBAAiB,IAAA;IAC3B,IAAI,CAACf,MAAM,GAAG,IAAA;IACd,IAAI,CAACC,MAAM,GAAG,IAAA;AAChB;AAEA,EAAA;IAAAe,oBAAA,CAAAC,kBAAA,CA8BA,+vBAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,SAAA;AAAAC,oBAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-wrapping-popover.js","sources":["../../src/components/eui-wrapping-popover.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport { modifier } from 'ember-modifier';\n\nimport EuiPopover from './eui-popover.gts';\nimport EuiPortal from './eui-portal.gts';\n\nimport type { EuiPopoverSignature } from './eui-popover.gts';\n\n/**\n * An EuiPopover anchored to an element that already exists in the page\n * (passed as `@button`), e.g. one rendered outside Ember. Takes\n * EuiPopover's args.\n */\nexport interface EuiWrappingPopoverSignature {\n  Element: EuiPopoverSignature['Element'];\n  Args: EuiPopoverSignature['Args'] & {\n    /** The existing element to anchor the popover to. */\n    button?: HTMLElement;\n    /** Called when the popover is destroyed. */\n    onWrappingDestroy?: () => void;\n    /** Called with the portal element wrapping the button. */\n    portalRef?: (ref: HTMLElement) => void;\n    /** Called with the popover's portal element. */\n    popoverPortalRef?: (ref: HTMLElement) => void;\n  };\n  Blocks: {\n    /** The popover's content. */\n    default: [];\n  };\n}\n\nexport default class EuiWrappingPopover extends Component<EuiWrappingPopoverSignature> {\n  private portal: HTMLElement | null = null;\n  private anchor: HTMLElement | null = null;\n\n  setAnchorRef = modifier((element: HTMLElement) => {\n    this.anchor = element;\n    this.anchor.insertAdjacentElement('beforebegin', this.args.button!);\n  });\n\n  setPortalRef = (element: HTMLElement) => {\n    this.portal = element;\n    this.args.portalRef?.(element);\n  };\n\n  get insert(): { sibling: HTMLElement; position: 'after' } | undefined {\n    if (this.args.button) {\n      return {\n        sibling: this.args.button,\n        position: 'after'\n      };\n    }\n\n    return;\n  }\n\n  willDestroy() {\n    super.willDestroy();\n\n    if (this.args.button && this.args.button.parentNode) {\n      if (this.portal) {\n        this.portal.insertAdjacentElement('beforebegin', this.args.button);\n      }\n    }\n\n    this.args.onWrappingDestroy?.();\n    this.portal = null;\n    this.anchor = null;\n  }\n\n  <template>\n    <EuiPortal @portalRef={{this.setPortalRef}} @insert={{this.insert}}>\n      <EuiPopover\n        @closePopover={{@closePopover}}\n        @isOpen={{@isOpen}}\n        @anchorClassName={{@anchorClassName}}\n        @portalRef={{@popoverPortalRef}}\n        @anchorPosition={{@anchorPosition}}\n        @attachToAnchor={{@attachToAnchor}}\n        @container={{@container}}\n        @display={{@display}}\n        @hasArrow={{@hasArrow}}\n        @initialFocus={{@initialFocus}}\n        @ownFocus={{@ownFocus}}\n        @panelClassName={{@panelClassName}}\n        @panelPaddingSize={{@panelPaddingSize}}\n        @panelStyle={{@panelStyle}}\n        @panelRef={{@panelRef}}\n        @popoverRef={{@popoverRef}}\n        ...attributes\n      >\n        <:button>\n          <div {{this.setAnchorRef}} class=\"euiWrappingPopover__anchor\" />\n        </:button>\n\n        <:content>\n          {{yield}}\n        </:content>\n      </EuiPopover>\n    </EuiPortal>\n  </template>\n}\n"],"names":["EuiWrappingPopover","Component","portal","anchor","setAnchorRef","modifier","element","insertAdjacentElement","args","button","setPortalRef","portalRef","insert","sibling","position","willDestroy","parentNode","onWrappingDestroy","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPortal","EuiPopover"],"mappings":";;;;;;;AAgCe,MAAMA,2BAA2BC,SAAA,CAAU;AAChDC,EAAAA,MAAA,GAA6B,IAAA;AAC7BC,EAAAA,MAAA,GAA6B,IAAA;AAErCC,EAAAA,YAAA,GAAeC,QAAA,CAAUC,OAAS,IAAA;IAChC,IAAI,CAACH,MAAM,GAAGG,OAAA;AACd,IAAA,IAAI,CAACH,MAAM,CAACI,qBAAqB,CAAC,eAAe,IAAI,CAACC,IAAI,CAACC,MAAM,CAAA;AACnE,EAAA,CAAA,CAAA;EAEAC,YAAA,GAAgBJ,OAAS,IAAA;IACvB,IAAI,CAACJ,MAAM,GAAGI,OAAA;AACd,IAAA,IAAI,CAACE,IAAI,CAACG,SAAS,GAAGL,OAAA,CAAA;EACxB,CAAA;EAEA,IAAIM,MAAAA,GAAkE;AACpE,IAAA,IAAI,IAAI,CAACJ,IAAI,CAACC,MAAM,EAAE;MACpB,OAAO;AACLI,QAAAA,OAAA,EAAS,IAAI,CAACL,IAAI,CAACC,MAAM;AACzBK,QAAAA,QAAA,EAAU;OACZ;AACF,IAAA;AAEA,IAAA;AACF,EAAA;AAEAC,EAAAA,WAAAA,GAAc;IACZ,KAAK,CAACA,WAAA,EAAA;AAEN,IAAA,IAAI,IAAI,CAACP,IAAI,CAACC,MAAM,IAAI,IAAI,CAACD,IAAI,CAACC,MAAM,CAACO,UAAU,EAAE;MACnD,IAAI,IAAI,CAACd,MAAM,EAAE;AACf,QAAA,IAAI,CAACA,MAAM,CAACK,qBAAqB,CAAC,eAAe,IAAI,CAACC,IAAI,CAACC,MAAM,CAAA;AACnE,MAAA;AACF,IAAA;AAEA,IAAA,IAAI,CAACD,IAAI,CAACS,iBAAiB,IAAA;IAC3B,IAAI,CAACf,MAAM,GAAG,IAAA;IACd,IAAI,CAACC,MAAM,GAAG,IAAA;AAChB,EAAA;AAEA,EAAA;IAAAe,oBAAA,CAAAC,kBAAA,CAAA,+vBAAA,EA8BA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,SAAA;AAAAC,oBAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/text-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-block.js","sources":["../../src/components/text-block.gts"],"sourcesContent":["import { eq } from 'ember-truth-helpers';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface TextBlockSignature {\n  Element: HTMLHeadingElement | HTMLParagraphElement | HTMLLegendElement;\n  Args: {\n    tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'legend';\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst TextBlock: TemplateOnlyComponent<TextBlockSignature> = <template>\n  {{#if (eq @tagName \"h1\")}}\n    <h1 ...attributes>\n      {{yield}}\n    </h1>\n  {{else if (eq @tagName \"h2\")}}\n    <h2 ...attributes>\n      {{yield}}\n    </h2>\n  {{else if (eq @tagName \"h3\")}}\n    <h3 ...attributes>\n      {{yield}}\n    </h3>\n  {{else if (eq @tagName \"h4\")}}\n    <h4 ...attributes>\n      {{yield}}\n    </h4>\n  {{else if (eq @tagName \"h5\")}}\n    <h5 ...attributes>\n      {{yield}}\n    </h5>\n  {{else if (eq @tagName \"h6\")}}\n    <h6 ...attributes>\n      {{yield}}\n    </h6>\n  {{else if (eq @tagName \"p\")}}\n    <p ...attributes>\n      {{yield}}\n    </p>\n  {{else if (eq @tagName \"legend\")}}\n    <legend ...attributes>\n      {{yield}}\n    </legend>\n  {{/if}}\n</template>;\n\nexport default TextBlock;\n"],"names":["TextBlock","setComponentTemplate","precompileTemplate","strictMode","scope","eq","templateOnly"],"mappings":";;;;;AAcA,MAAMA,SAAuD,GAAAC,oBAAA,CAAAC,kBAAA,CAkC7D,8oBAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"text-block.js","sources":["../../src/components/text-block.gts"],"sourcesContent":["import { eq } from 'ember-truth-helpers';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private Renders a heading, `<p>` or `<legend>` by tag name. */\nexport interface TextBlockSignature {\n  Element: HTMLHeadingElement | HTMLParagraphElement | HTMLLegendElement;\n  Args: {\n    /** The tag to render. */\n    tagName: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'legend';\n  };\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\nconst TextBlock: TemplateOnlyComponent<TextBlockSignature> = <template>\n  {{#if (eq @tagName \"h1\")}}\n    <h1 ...attributes>\n      {{yield}}\n    </h1>\n  {{else if (eq @tagName \"h2\")}}\n    <h2 ...attributes>\n      {{yield}}\n    </h2>\n  {{else if (eq @tagName \"h3\")}}\n    <h3 ...attributes>\n      {{yield}}\n    </h3>\n  {{else if (eq @tagName \"h4\")}}\n    <h4 ...attributes>\n      {{yield}}\n    </h4>\n  {{else if (eq @tagName \"h5\")}}\n    <h5 ...attributes>\n      {{yield}}\n    </h5>\n  {{else if (eq @tagName \"h6\")}}\n    <h6 ...attributes>\n      {{yield}}\n    </h6>\n  {{else if (eq @tagName \"p\")}}\n    <p ...attributes>\n      {{yield}}\n    </p>\n  {{else if (eq @tagName \"legend\")}}\n    <legend ...attributes>\n      {{yield}}\n    </legend>\n  {{/if}}\n</template>;\n\nexport default TextBlock;\n"],"names":["TextBlock","setComponentTemplate","precompileTemplate","strictMode","scope","eq","templateOnly"],"mappings":";;;;;AAiBA,MAAMA,SAAiC,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,8oBAAA,EAkC7D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}