@ember-eui/core 13.0.5 → 14.1.0

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

@@ -1,7 +1,8 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { inject } from '@ember/service';
+import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
 import { or, eq } from 'ember-truth-helpers';
 import argOrDefault, { argOrDefaultDecorator } from '../helpers/arg-or-default.js';
 import classNames from '../helpers/class-names.js';
@@ -13,10 +14,10 @@ import EuiDatePickerRange from './eui-super-date-picker/eui-date-picker-range.js
 import EuiQuickSelectPopover from './eui-super-date-picker/eui-quick-select-popover.js';
 import EuiSuperUpdateButton from './eui-super-date-picker/eui-super-update-button.js';
 import { isRangeInvalid } from './eui-super-date-picker/utils/index.js';
-import { useI18nTimeOptions } from './eui-super-date-picker/utils/time-options.js';
+import useI18nTimeOptions from './eui-super-date-picker/utils/time-options.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i, n } from 'decorator-transforms/runtime';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 class EuiSuperDatePicker extends Component {
   static {
@@ -53,33 +54,45 @@ class EuiSuperDatePicker extends Component {
   }
   #refreshInterval = (i(this, "refreshInterval"), void 0); // recentlyUsedRanges: [],
   static {
-    g(this.prototype, "euiI18n", [inject]);
+    g(this.prototype, "euiI18n", [service]);
   }
   #euiI18n = (i(this, "euiI18n"), void 0);
   static {
-    g(this.prototype, "start", [tracked]);
+    g(this.prototype, "draft", [tracked]);
   }
-  #start = (i(this, "start"), void 0);
-  static {
-    g(this.prototype, "end", [tracked]);
+  #draft = (i(this, "draft"), void 0);
+  /**
+  * The range the user is editing, before it is applied with the update
+  * button. It remembers the @start/@end it was based on: when the parent
+  * passes a different range, the draft no longer applies and the picker
+  * shows the new arguments (like EUI React's getDerivedStateFromProps).
+  */
+  get currentDraft() {
+    const {
+      draft
+    } = this;
+    return draft && draft.forStart === this.args.start && draft.forEnd === this.args.end ? draft : undefined;
   }
-  #end = (i(this, "end"), void 0);
-  static {
-    g(this.prototype, "isInvalid", [tracked], function () {
-      return false;
-    });
+  get start() {
+    return this.currentDraft?.start ?? this.args.start ?? 'now-15m';
   }
-  #isInvalid = (i(this, "isInvalid"), void 0);
-  static {
-    g(this.prototype, "hasChanged", [tracked], function () {
-      return false;
-    });
+  get end() {
+    return this.currentDraft?.end ?? this.args.end ?? 'now';
+  }
+  get isInvalid() {
+    return isRangeInvalid(this.start, this.end);
   }
-  #hasChanged = (i(this, "hasChanged"), void 0);
-  constructor(owner, args) {
-    super(owner, args);
-    this.start = this.args.start ?? 'now-15m';
-    this.end = this.args.end ?? 'now';
+  get hasChanged() {
+    return this.currentDraft?.hasChanged ?? false;
+  }
+  setDraft(start, end, hasChanged) {
+    this.draft = {
+      start,
+      end,
+      hasChanged,
+      forStart: this.args.start,
+      forEnd: this.args.end
+    };
   }
   get timeOptions() {
     return useI18nTimeOptions(this.euiI18n);
@@ -88,16 +101,13 @@ class EuiSuperDatePicker extends Component {
     start,
     end
   }) {
-    this.hasChanged = !(this.start === start && this.end === end);
-    this.start = start;
-    this.end = end;
-    this.isInvalid = isRangeInvalid(start, end);
+    this.setDraft(start, end, !(this.start === start && this.end === end));
     if (!this.showUpdateButton) {
       this.args.onTimeChange({
         start,
         end,
         isQuickSelection: false,
-        isInvalid: this.isInvalid
+        isInvalid: isRangeInvalid(start, end)
       });
     }
   }
@@ -113,8 +123,7 @@ class EuiSuperDatePicker extends Component {
     start,
     end
   }) {
-    this.start = start;
-    this.end = end;
+    this.setDraft(start, end, false);
     this.args.onTimeChange({
       start,
       end,
@@ -145,8 +154,7 @@ class EuiSuperDatePicker extends Component {
   }
   handleClickUpdateButton() {
     if (!this.hasChanged && this.args.onRefresh) {
-      // const { start, end, refreshInterval } = this.args;
-      this.args.onRefresh({
+      void this.args.onRefresh({
         start: this.start,
         end: this.end,
         refreshInterval: this.refreshInterval
@@ -154,13 +162,45 @@ class EuiSuperDatePicker extends Component {
     } else {
       this.applyTime();
     }
-    this.hasChanged = false;
+    if (this.currentDraft) {
+      this.draft = {
+        ...this.currentDraft,
+        hasChanged: false
+      };
+    }
   }
+  /**
+  * Calls `@onRefresh` every `@refreshInterval` ms while not `@isPaused`.
+  * A returned promise delays the next call until it settles; a rejected
+  * one stops the refreshing.
+  */
   static {
     n(this.prototype, "handleClickUpdateButton", [action]);
   }
-  static {
-    setComponentTemplate(precompileTemplate("\n    <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}} class={{classNames \"euiSuperDatePicker__flexWrapper\" (unless this.showUpdateButton \"euiSuperDatePicker__flexWrapper--noUpdateButton\") (if this.isAutoRefreshOnly \"euiSuperDatePicker__flexWrapper--isAutoRefreshOnly\") (if @isQuickSelectOnly \"euiSuperDatePicker__flexWrapper--isQuickSelectOnly\") (if (eq this.width \"full\") \"euiSuperDatePicker__flexWrapper--fullWidth\") (if (eq this.width \"auto\") \"euiSuperDatePicker__flexWrapper--autoWidth\")}}>\n      <EuiFlexItem>\n        <EuiFormControlLayout class=\"euiSuperDatePicker\" @compressed={{@compressed}} @isDisabled={{@isDisabled}} @useGroup={{true}}>\n          <:prepend>\n            <EuiQuickSelectPopover @start={{this.start}} @end={{this.end}} @applyTime={{this.applyQuickTime}} @timeOptions={{this.timeOptions}} @isDisabled={{@isDisabled}} @commonlyUsedRanges={{argOrDefault @commonlyUsedRanges this.timeOptions.commonDurationRanges}} />\n          </:prepend>\n\n          <:field>\n            <EuiDatePickerRange @className=\"euiDatePickerRange--inGroup\" @isInvalid={{this.isInvalid}} @disabled={{@isDisabled}}>\n              <:startDateControl>\n                <EuiDatePopoverButton @className=\"euiSuperDatePicker__startPopoverButton\" @value={{this.start}} @compressed={{@compressed}} @position=\"start\" @isDisabled={{@isDisabled}} @dateFormat={{this.dateFormat}} @onChange={{this.setStart}} @isInvalid={{this.isInvalid}} @timeOptions={{this.timeOptions}} @needsUpdating={{this.hasChanged}} @locale={{@locale}} />\n              </:startDateControl>\n\n              <:endDateControl>\n                <EuiDatePopoverButton @className=\"euiSuperDatePicker__startPopoverButton\" @value={{this.end}} @compressed={{@compressed}} @position=\"end\" @isDisabled={{@isDisabled}} @dateFormat={{this.dateFormat}} @onChange={{this.setEnd}} @isInvalid={{this.isInvalid}} @timeOptions={{this.timeOptions}} @roundUp={{true}} @needsUpdating={{this.hasChanged}} @locale={{@locale}} />\n              </:endDateControl>\n            </EuiDatePickerRange>\n          </:field>\n        </EuiFormControlLayout>\n      </EuiFlexItem>\n\n      {{#if this.showUpdateButton}}\n        <EuiFlexItem @grow={{false}}>\n          <EuiSuperUpdateButton @size={{if @compressed \"s\" \"m\"}} @onClick={{this.handleClickUpdateButton}} @isLoading={{@isLoading}} @isDisabled={{or @isDisabled this.isInvalid}} @needsUpdate={{this.hasChanged}} @fill={{true}} @iconOnly={{eq this.showUpdateButton \"iconOnly\"}} />\n        </EuiFlexItem>\n      {{/if}}\n    </EuiFlexGroup>\n  ", {
+  autoRefresh = modifier((_element, [onRefresh, isPaused, refreshInterval]) => {
+    if (!onRefresh || isPaused || !(refreshInterval > 0)) return;
+    let stopped = false;
+    let timer;
+    const tick = async () => {
+      try {
+        await onRefresh({
+          start: this.start,
+          end: this.end,
+          refreshInterval
+        });
+      } catch {
+        stopped = true;
+      }
+      if (!stopped) timer = setTimeout(() => void tick(), refreshInterval);
+    };
+    timer = setTimeout(() => void tick(), refreshInterval);
+    return () => {
+      stopped = true;
+      clearTimeout(timer);
+    };
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<EuiFlexGroup {{this.autoRefresh @onRefresh this.isPaused this.refreshInterval}} @gutterSize=\"s\" @responsive={{false}} class={{classNames \"euiSuperDatePicker__flexWrapper\" (unless this.showUpdateButton \"euiSuperDatePicker__flexWrapper--noUpdateButton\") (if this.isAutoRefreshOnly \"euiSuperDatePicker__flexWrapper--isAutoRefreshOnly\") (if @isQuickSelectOnly \"euiSuperDatePicker__flexWrapper--isQuickSelectOnly\") (if (eq this.width \"full\") \"euiSuperDatePicker__flexWrapper--fullWidth\") (if (eq this.width \"auto\") \"euiSuperDatePicker__flexWrapper--autoWidth\")}}>\n  <EuiFlexItem>\n    <EuiFormControlLayout class=\"euiSuperDatePicker\" @compressed={{@compressed}} @isDisabled={{@isDisabled}} @useGroup={{true}}>\n      <:prepend>\n        <EuiQuickSelectPopover @start={{this.start}} @end={{this.end}} @applyTime={{this.applyQuickTime}} @timeOptions={{this.timeOptions}} @isDisabled={{@isDisabled}} @commonlyUsedRanges={{argOrDefault @commonlyUsedRanges this.timeOptions.commonDurationRanges}} @applyRefreshInterval={{@onRefreshChange}} @isPaused={{this.isPaused}} @refreshInterval={{this.refreshInterval}} />\n      </:prepend>\n\n      <:field>\n        <EuiDatePickerRange @className=\"euiDatePickerRange--inGroup\" @isInvalid={{this.isInvalid}} @disabled={{@isDisabled}}>\n          <:startDateControl>\n            <EuiDatePopoverButton @className=\"euiSuperDatePicker__startPopoverButton\" @value={{this.start}} @compressed={{@compressed}} @position=\"start\" @isDisabled={{@isDisabled}} @dateFormat={{this.dateFormat}} @onChange={{this.setStart}} @isInvalid={{this.isInvalid}} @timeOptions={{this.timeOptions}} @needsUpdating={{this.hasChanged}} @locale={{@locale}} />\n          </:startDateControl>\n\n          <:endDateControl>\n            <EuiDatePopoverButton @className=\"euiSuperDatePicker__startPopoverButton\" @value={{this.end}} @compressed={{@compressed}} @position=\"end\" @isDisabled={{@isDisabled}} @dateFormat={{this.dateFormat}} @onChange={{this.setEnd}} @isInvalid={{this.isInvalid}} @timeOptions={{this.timeOptions}} @roundUp={{true}} @needsUpdating={{this.hasChanged}} @locale={{@locale}} />\n          </:endDateControl>\n        </EuiDatePickerRange>\n      </:field>\n    </EuiFormControlLayout>\n  </EuiFlexItem>\n\n  {{#if this.showUpdateButton}}\n    <EuiFlexItem @grow={{false}}>\n      <EuiSuperUpdateButton @size={{if @compressed \"s\" \"m\"}} @onClick={{this.handleClickUpdateButton}} @isLoading={{@isLoading}} @isDisabled={{or @isDisabled this.isInvalid}} @needsUpdate={{this.hasChanged}} @fill={{true}} @iconOnly={{eq this.showUpdateButton \"iconOnly\"}} />\n    </EuiFlexItem>\n  {{/if}}\n</EuiFlexGroup>", {
       strictMode: true,
       scope: () => ({
         EuiFlexGroup,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-super-date-picker.js","sources":["../../src/components/eui-super-date-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { inject as service } from '@ember/service';\n\nimport { eq, or } from 'ember-truth-helpers';\n\nimport argOrDefault, { argOrDefaultDecorator } from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiDatePopoverButton from './eui-super-date-picker/date-popover/eui-date-popover-button.gts';\nimport EuiDatePickerRange from './eui-super-date-picker/eui-date-picker-range.gts';\nimport EuiQuickSelectPopover from './eui-super-date-picker/eui-quick-select-popover.gts';\nimport EuiSuperUpdateButton from './eui-super-date-picker/eui-super-update-button.gts';\nimport { isRangeInvalid } from './eui-super-date-picker/utils/index.ts';\nimport { useI18nTimeOptions } from './eui-super-date-picker/utils/time-options.ts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type {\n  ApplyRefreshInterval,\n  DurationRange,\n  Milliseconds,\n  ShortDate\n} from './eui-super-date-picker/types/global';\nimport type { LocaleSpecifier } from 'moment';\n\nexport type { ApplyRefreshInterval, DurationRange, Milliseconds, ShortDate };\n\nexport interface EuiSuperDatePickerArgs {\n  commonlyUsedRanges?: DurationRange[];\n  // customQuickSelectPanels?: QuickSelectPanel[];\n  /**\n   * Specifies the formatted used when displaying dates and/or datetimes\n   */\n  dateFormat?: string;\n  /**\n   * Set isAutoRefreshOnly to true to limit the component to only display auto refresh content.\n   */\n  isAutoRefreshOnly?: boolean;\n  isDisabled?: boolean;\n  isLoading?: boolean;\n  isPaused?: boolean;\n  /**\n   * Sets the overall width by adding sensible min and max widths.\n   * - `auto`: fits width to internal content / time string.\n   * - `restricted`: static width that fits the longest possible time string.\n   * - `full`: expands to 100% of the container.\n   */\n  width?: 'restricted' | 'full' | 'auto';\n  /**\n   * Reduces overall height to compressed form size\n   */\n  compressed?: boolean;\n  /**\n   * Used to localize e.g. month names, passed to `moment`\n   */\n  locale?: LocaleSpecifier;\n  /**\n   * Callback for when the refresh interval is fired.\n   * EuiSuperDatePicker will only manage a refresh interval timer when onRefresh callback is supplied\n   * If a promise is returned, the next refresh interval will not start until the promise has resolved.\n   * If the promise rejects the refresh interval will stop and the error thrown\n   */\n  onRefresh?: (props: {\n    start: string;\n    end: string;\n    refreshInterval: number;\n  }) => void;\n  /**\n   * Callback for when the refresh interval changes.\n   * Supply onRefreshChange to show refresh interval inputs in quick select popover\n   */\n  onRefreshChange?: ApplyRefreshInterval;\n  /**\n   * Callback for when the time changes.\n   */\n  onTimeChange: (props: {\n    start: string;\n    end: string;\n    isQuickSelection: boolean;\n    isInvalid: boolean;\n  }) => void;\n  // recentlyUsedRanges?: DurationRange[];\n  /**\n   * Refresh interval in milliseconds\n   */\n  refreshInterval?: Milliseconds;\n  start?: ShortDate;\n  end?: ShortDate;\n  /**\n   * Specifies the formatted used when displaying times\n   */\n  timeFormat?: string;\n  utcOffset?: number;\n  /**\n   * Set showUpdateButton to false to immediately invoke onTimeChange for all start and end changes.\n   */\n  showUpdateButton?: boolean | 'iconOnly';\n  /**\n   * Hides the actual input reducing to just the quick select button.\n   */\n  isQuickSelectOnly?: boolean;\n  /**\n   * Props passed to the update button #EuiSuperUpdateButtonProps\n   */\n  // updateButtonProps?: EuiSuperUpdateButtonProps;\n}\n\nexport default class EuiSuperDatePicker extends Component<EuiSuperDatePickerArgs> {\n  @argOrDefaultDecorator('MMM D, YYYY @ HH:mm:ss.SSS') dateFormat!: string;\n  @argOrDefaultDecorator('HH:mm') timeFormat!: string;\n  // @argOrDefaultDecorator('now-15m') start!: ShortDate;\n  // @argOrDefaultDecorator('now') end!: ShortDate;\n  @argOrDefaultDecorator(false) isAutoRefreshOnly!: boolean;\n  @argOrDefaultDecorator(false) isDisabled!: boolean;\n  @argOrDefaultDecorator(true) isPaused!: boolean;\n  @argOrDefaultDecorator(true) showUpdateButton!: boolean;\n  @argOrDefaultDecorator('restricted') width!: string;\n  // recentlyUsedRanges: [],\n  @argOrDefaultDecorator(1000) refreshInterval!: Milliseconds;\n\n  @service declare euiI18n: EuiI18n;\n\n  @tracked start: ShortDate;\n  @tracked end: ShortDate;\n  @tracked isInvalid = false;\n  @tracked hasChanged = false;\n\n  constructor(owner: any, args: EuiSuperDatePickerArgs) {\n    super(owner, args);\n\n    this.start = this.args.start ?? 'now-15m';\n    this.end = this.args.end ?? 'now';\n  }\n\n  get timeOptions() {\n    return useI18nTimeOptions(this.euiI18n);\n  }\n\n  setTime({ start, end }: DurationRange) {\n    this.hasChanged = !(this.start === start && this.end === end);\n    this.start = start;\n    this.end = end;\n    this.isInvalid = isRangeInvalid(start, end);\n\n    if (!this.showUpdateButton) {\n      this.args.onTimeChange({\n        start,\n        end,\n        isQuickSelection: false,\n        isInvalid: this.isInvalid\n      });\n    }\n  }\n\n  applyTime() {\n    this.args.onTimeChange({\n      start: this.start,\n      end: this.end,\n      isQuickSelection: false,\n      isInvalid: false\n    });\n  }\n\n  @action\n  applyQuickTime({ start, end }: DurationRange) {\n    this.start = start;\n    this.end = end;\n\n    this.args.onTimeChange({\n      start,\n      end,\n      isQuickSelection: true,\n      isInvalid: false\n    });\n  }\n\n  @action\n  setStart(start: ShortDate) {\n    this.setTime({ start, end: this.end });\n  }\n\n  @action\n  setEnd(end: ShortDate) {\n    this.setTime({ start: this.start, end });\n  }\n\n  @action\n  handleClickUpdateButton() {\n    if (!this.hasChanged && this.args.onRefresh) {\n      // const { start, end, refreshInterval } = this.args;\n      this.args.onRefresh({\n        start: this.start,\n        end: this.end,\n        refreshInterval: this.refreshInterval\n      });\n    } else {\n      this.applyTime();\n    }\n\n    this.hasChanged = false;\n  }\n\n  <template>\n    <EuiFlexGroup\n      @gutterSize=\"s\"\n      @responsive={{false}}\n      class={{classNames\n        \"euiSuperDatePicker__flexWrapper\"\n        (unless\n          this.showUpdateButton\n          \"euiSuperDatePicker__flexWrapper--noUpdateButton\"\n        )\n        (if\n          this.isAutoRefreshOnly\n          \"euiSuperDatePicker__flexWrapper--isAutoRefreshOnly\"\n        )\n        (if\n          @isQuickSelectOnly\n          \"euiSuperDatePicker__flexWrapper--isQuickSelectOnly\"\n        )\n        (if (eq this.width \"full\") \"euiSuperDatePicker__flexWrapper--fullWidth\")\n        (if (eq this.width \"auto\") \"euiSuperDatePicker__flexWrapper--autoWidth\")\n      }}\n    >\n      <EuiFlexItem>\n        <EuiFormControlLayout\n          class=\"euiSuperDatePicker\"\n          @compressed={{@compressed}}\n          @isDisabled={{@isDisabled}}\n          @useGroup={{true}}\n        >\n          <:prepend>\n            <EuiQuickSelectPopover\n              @start={{this.start}}\n              @end={{this.end}}\n              @applyTime={{this.applyQuickTime}}\n              @timeOptions={{this.timeOptions}}\n              @isDisabled={{@isDisabled}}\n              @commonlyUsedRanges={{argOrDefault\n                @commonlyUsedRanges\n                this.timeOptions.commonDurationRanges\n              }}\n            />\n          </:prepend>\n\n          <:field>\n            <EuiDatePickerRange\n              @className=\"euiDatePickerRange--inGroup\"\n              @isInvalid={{this.isInvalid}}\n              @disabled={{@isDisabled}}\n            >\n              <:startDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.start}}\n                  @compressed={{@compressed}}\n                  @position=\"start\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setStart}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:startDateControl>\n\n              <:endDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.end}}\n                  @compressed={{@compressed}}\n                  @position=\"end\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setEnd}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @roundUp={{true}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:endDateControl>\n            </EuiDatePickerRange>\n          </:field>\n        </EuiFormControlLayout>\n      </EuiFlexItem>\n\n      {{#if this.showUpdateButton}}\n        <EuiFlexItem @grow={{false}}>\n          <EuiSuperUpdateButton\n            @size={{if @compressed \"s\" \"m\"}}\n            @onClick={{this.handleClickUpdateButton}}\n            @isLoading={{@isLoading}}\n            @isDisabled={{or @isDisabled this.isInvalid}}\n            @needsUpdate={{this.hasChanged}}\n            @fill={{true}}\n            @iconOnly={{eq this.showUpdateButton \"iconOnly\"}}\n          />\n        </EuiFlexItem>\n      {{/if}}\n    </EuiFlexGroup>\n  </template>\n}\n"],"names":["EuiSuperDatePicker","Component","g","prototype","argOrDefaultDecorator","i","void 0","service","tracked","constructor","owner","args","start","end","timeOptions","useI18nTimeOptions","euiI18n","setTime","hasChanged","isInvalid","isRangeInvalid","showUpdateButton","onTimeChange","isQuickSelection","applyTime","applyQuickTime","n","action","setStart","setEnd","handleClickUpdateButton","onRefresh","refreshInterval","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFlexGroup","classNames","eq","EuiFlexItem","EuiFormControlLayout","EuiQuickSelectPopover","argOrDefault","EuiDatePickerRange","EuiDatePopoverButton","EuiSuperUpdateButton","or"],"mappings":"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"}
+{"version":3,"file":"eui-super-date-picker.js","sources":["../../src/components/eui-super-date-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\nimport { eq, or } from 'ember-truth-helpers';\n\nimport argOrDefault, { argOrDefaultDecorator } from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiDatePopoverButton from './eui-super-date-picker/date-popover/eui-date-popover-button.gts';\nimport EuiDatePickerRange from './eui-super-date-picker/eui-date-picker-range.gts';\nimport EuiQuickSelectPopover from './eui-super-date-picker/eui-quick-select-popover.gts';\nimport EuiSuperUpdateButton from './eui-super-date-picker/eui-super-update-button.gts';\nimport { isRangeInvalid } from './eui-super-date-picker/utils/index.ts';\nimport { useI18nTimeOptions } from './eui-super-date-picker/utils/time-options.ts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type {\n  ApplyRefreshInterval,\n  DurationRange,\n  Milliseconds,\n  ShortDate\n} from './eui-super-date-picker/types/global';\nimport type { LocaleSpecifier } from 'moment';\n\nexport type { ApplyRefreshInterval, DurationRange, Milliseconds, ShortDate };\n\n/**\n * EuiSuperDatePicker picks a time range (absolute dates, relative like\n * \"last 15 minutes\", or \"now\") with a quick select popover and optional\n * auto refresh, as in Kibana. `@onTimeChange` receives date math strings.\n */\nexport interface EuiSuperDatePickerArgs {\n  /**\n   * Ranges listed as \"Commonly used\" in the quick select popover:\n   * `[{ start: 'now/d', end: 'now/d', label: 'Today' }, …]`. Defaults to\n   * EUI's list (Today, This week, Last 15 minutes, …).\n   */\n  commonlyUsedRanges?: DurationRange[];\n  // customQuickSelectPanels?: QuickSelectPanel[];\n  /**\n   * moment format for absolute dates. Defaults to\n   * `'MMM D, YYYY @ HH:mm:ss.SSS'`.\n   */\n  dateFormat?: string;\n  /**\n   * Set isAutoRefreshOnly to true to limit the component to only display\n   * auto refresh content. Defaults to `false`.\n   */\n  isAutoRefreshOnly?: boolean;\n  /** Disables the picker. Defaults to `false`. */\n  isDisabled?: boolean;\n  /** Shows the update button's loading state, e.g. while data refreshes. */\n  isLoading?: boolean;\n  /**\n   * Whether auto refresh is paused (with `@onRefreshChange`).\n   * Defaults to `true`.\n   */\n  isPaused?: boolean;\n  /**\n   * Sets the overall width by adding sensible min and max widths.\n   * - `auto`: fits width to internal content / time string.\n   * - `restricted`: static width that fits the longest possible time string.\n   * - `full`: expands to 100% of the container.\n   * Defaults to `'restricted'`.\n   */\n  width?: 'restricted' | 'full' | 'auto';\n  /**\n   * Reduces overall height to compressed form size\n   */\n  compressed?: boolean;\n  /**\n   * Used to localize e.g. month names, passed to `moment`\n   */\n  locale?: LocaleSpecifier;\n  /**\n   * Called every `@refreshInterval` ms while not `@isPaused` (and by the\n   * update button when the range has not changed), with `{ start, end,\n   * refreshInterval }`. If it returns a promise, the next call waits for\n   * it; if the promise rejects, refreshing stops.\n   */\n  onRefresh?: (props: {\n    start: string;\n    end: string;\n    refreshInterval: number;\n  }) => void | Promise<unknown>;\n  /**\n   * Adds the \"Refresh every\" section to the quick select popover; called\n   * with `{ refreshInterval, isPaused }` when the user changes them.\n   */\n  onRefreshChange?: ApplyRefreshInterval;\n  /**\n   * Callback for when the time changes.\n   */\n  onTimeChange: (props: {\n    start: string;\n    end: string;\n    isQuickSelection: boolean;\n    isInvalid: boolean;\n  }) => void;\n  // recentlyUsedRanges?: DurationRange[];\n  /**\n   * Refresh interval in milliseconds. Defaults to `1000`.\n   */\n  refreshInterval?: Milliseconds;\n  /**\n   * Start of the range, as date math (`'now-15m'`, `'now/d'`) or an ISO\n   * date. Defaults to `'now-15m'`.\n   */\n  start?: ShortDate;\n  /** End of the range, like `@start`. Defaults to `'now'`. */\n  end?: ShortDate;\n  /**\n   * moment format for times in the date picker. Defaults to `'HH:mm'`.\n   */\n  timeFormat?: string;\n  /** UTC offset in minutes for absolute dates, e.g. `-300`. */\n  utcOffset?: number;\n  /**\n   * Set showUpdateButton to false to immediately invoke onTimeChange for\n   * all start and end changes; `'iconOnly'` shows a compact button.\n   * Defaults to `true`.\n   */\n  showUpdateButton?: boolean | 'iconOnly';\n  /**\n   * Hides the actual input reducing to just the quick select button.\n   */\n  isQuickSelectOnly?: boolean;\n  /**\n   * Props passed to the update button #EuiSuperUpdateButtonProps\n   */\n  // updateButtonProps?: EuiSuperUpdateButtonProps;\n}\n\nexport default class EuiSuperDatePicker extends Component<EuiSuperDatePickerArgs> {\n  @argOrDefaultDecorator('MMM D, YYYY @ HH:mm:ss.SSS') dateFormat!: string;\n  @argOrDefaultDecorator('HH:mm') timeFormat!: string;\n  // @argOrDefaultDecorator('now-15m') start!: ShortDate;\n  // @argOrDefaultDecorator('now') end!: ShortDate;\n  @argOrDefaultDecorator(false) isAutoRefreshOnly!: boolean;\n  @argOrDefaultDecorator(false) isDisabled!: boolean;\n  @argOrDefaultDecorator(true) isPaused!: boolean;\n  @argOrDefaultDecorator(true) showUpdateButton!: boolean;\n  @argOrDefaultDecorator('restricted') width!: string;\n  // recentlyUsedRanges: [],\n  @argOrDefaultDecorator(1000) refreshInterval!: Milliseconds;\n\n  @service declare euiI18n: EuiI18n;\n\n  /**\n   * The range the user is editing, before it is applied with the update\n   * button. It remembers the @start/@end it was based on: when the parent\n   * passes a different range, the draft no longer applies and the picker\n   * shows the new arguments (like EUI React's getDerivedStateFromProps).\n   */\n  @tracked private draft?: {\n    start: ShortDate;\n    end: ShortDate;\n    hasChanged: boolean;\n    forStart: ShortDate | undefined;\n    forEnd: ShortDate | undefined;\n  };\n\n  private get currentDraft() {\n    const { draft } = this;\n\n    return draft &&\n      draft.forStart === this.args.start &&\n      draft.forEnd === this.args.end\n      ? draft\n      : undefined;\n  }\n\n  get start(): ShortDate {\n    return this.currentDraft?.start ?? this.args.start ?? 'now-15m';\n  }\n\n  get end(): ShortDate {\n    return this.currentDraft?.end ?? this.args.end ?? 'now';\n  }\n\n  get isInvalid(): boolean {\n    return isRangeInvalid(this.start, this.end);\n  }\n\n  get hasChanged(): boolean {\n    return this.currentDraft?.hasChanged ?? false;\n  }\n\n  private setDraft(start: ShortDate, end: ShortDate, hasChanged: boolean) {\n    this.draft = {\n      start,\n      end,\n      hasChanged,\n      forStart: this.args.start,\n      forEnd: this.args.end\n    };\n  }\n\n  get timeOptions() {\n    return useI18nTimeOptions(this.euiI18n);\n  }\n\n  setTime({ start, end }: DurationRange) {\n    this.setDraft(start, end, !(this.start === start && this.end === end));\n\n    if (!this.showUpdateButton) {\n      this.args.onTimeChange({\n        start,\n        end,\n        isQuickSelection: false,\n        isInvalid: isRangeInvalid(start, end)\n      });\n    }\n  }\n\n  applyTime() {\n    this.args.onTimeChange({\n      start: this.start,\n      end: this.end,\n      isQuickSelection: false,\n      isInvalid: false\n    });\n  }\n\n  @action\n  applyQuickTime({ start, end }: DurationRange) {\n    this.setDraft(start, end, false);\n\n    this.args.onTimeChange({\n      start,\n      end,\n      isQuickSelection: true,\n      isInvalid: false\n    });\n  }\n\n  @action\n  setStart(start: ShortDate) {\n    this.setTime({ start, end: this.end });\n  }\n\n  @action\n  setEnd(end: ShortDate) {\n    this.setTime({ start: this.start, end });\n  }\n\n  @action\n  handleClickUpdateButton() {\n    if (!this.hasChanged && this.args.onRefresh) {\n      void this.args.onRefresh({\n        start: this.start,\n        end: this.end,\n        refreshInterval: this.refreshInterval\n      });\n    } else {\n      this.applyTime();\n    }\n\n    if (this.currentDraft) {\n      this.draft = { ...this.currentDraft, hasChanged: false };\n    }\n  }\n\n  /**\n   * Calls `@onRefresh` every `@refreshInterval` ms while not `@isPaused`.\n   * A returned promise delays the next call until it settles; a rejected\n   * one stops the refreshing.\n   */\n  autoRefresh = modifier(\n    (\n      _element: Element,\n      [onRefresh, isPaused, refreshInterval]: [\n        EuiSuperDatePickerArgs['onRefresh'],\n        boolean,\n        number\n      ]\n    ) => {\n      if (!onRefresh || isPaused || !(refreshInterval > 0)) return;\n\n      let stopped = false;\n      let timer: ReturnType<typeof setTimeout>;\n\n      const tick = async () => {\n        try {\n          await onRefresh({ start: this.start, end: this.end, refreshInterval });\n        } catch {\n          stopped = true;\n        }\n\n        if (!stopped) timer = setTimeout(() => void tick(), refreshInterval);\n      };\n\n      timer = setTimeout(() => void tick(), refreshInterval);\n\n      return () => {\n        stopped = true;\n        clearTimeout(timer);\n      };\n    }\n  );\n\n  <template>\n    <EuiFlexGroup\n      {{this.autoRefresh @onRefresh this.isPaused this.refreshInterval}}\n      @gutterSize=\"s\"\n      @responsive={{false}}\n      class={{classNames\n        \"euiSuperDatePicker__flexWrapper\"\n        (unless\n          this.showUpdateButton\n          \"euiSuperDatePicker__flexWrapper--noUpdateButton\"\n        )\n        (if\n          this.isAutoRefreshOnly\n          \"euiSuperDatePicker__flexWrapper--isAutoRefreshOnly\"\n        )\n        (if\n          @isQuickSelectOnly\n          \"euiSuperDatePicker__flexWrapper--isQuickSelectOnly\"\n        )\n        (if (eq this.width \"full\") \"euiSuperDatePicker__flexWrapper--fullWidth\")\n        (if (eq this.width \"auto\") \"euiSuperDatePicker__flexWrapper--autoWidth\")\n      }}\n    >\n      <EuiFlexItem>\n        <EuiFormControlLayout\n          class=\"euiSuperDatePicker\"\n          @compressed={{@compressed}}\n          @isDisabled={{@isDisabled}}\n          @useGroup={{true}}\n        >\n          <:prepend>\n            <EuiQuickSelectPopover\n              @start={{this.start}}\n              @end={{this.end}}\n              @applyTime={{this.applyQuickTime}}\n              @timeOptions={{this.timeOptions}}\n              @isDisabled={{@isDisabled}}\n              @commonlyUsedRanges={{argOrDefault\n                @commonlyUsedRanges\n                this.timeOptions.commonDurationRanges\n              }}\n              @applyRefreshInterval={{@onRefreshChange}}\n              @isPaused={{this.isPaused}}\n              @refreshInterval={{this.refreshInterval}}\n            />\n          </:prepend>\n\n          <:field>\n            <EuiDatePickerRange\n              @className=\"euiDatePickerRange--inGroup\"\n              @isInvalid={{this.isInvalid}}\n              @disabled={{@isDisabled}}\n            >\n              <:startDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.start}}\n                  @compressed={{@compressed}}\n                  @position=\"start\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setStart}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:startDateControl>\n\n              <:endDateControl>\n                <EuiDatePopoverButton\n                  @className=\"euiSuperDatePicker__startPopoverButton\"\n                  @value={{this.end}}\n                  @compressed={{@compressed}}\n                  @position=\"end\"\n                  @isDisabled={{@isDisabled}}\n                  @dateFormat={{this.dateFormat}}\n                  @onChange={{this.setEnd}}\n                  @isInvalid={{this.isInvalid}}\n                  @timeOptions={{this.timeOptions}}\n                  @roundUp={{true}}\n                  @needsUpdating={{this.hasChanged}}\n                  @locale={{@locale}}\n                />\n              </:endDateControl>\n            </EuiDatePickerRange>\n          </:field>\n        </EuiFormControlLayout>\n      </EuiFlexItem>\n\n      {{#if this.showUpdateButton}}\n        <EuiFlexItem @grow={{false}}>\n          <EuiSuperUpdateButton\n            @size={{if @compressed \"s\" \"m\"}}\n            @onClick={{this.handleClickUpdateButton}}\n            @isLoading={{@isLoading}}\n            @isDisabled={{or @isDisabled this.isInvalid}}\n            @needsUpdate={{this.hasChanged}}\n            @fill={{true}}\n            @iconOnly={{eq this.showUpdateButton \"iconOnly\"}}\n          />\n        </EuiFlexItem>\n      {{/if}}\n    </EuiFlexGroup>\n  </template>\n}\n"],"names":["EuiSuperDatePicker","Component","g","prototype","argOrDefaultDecorator","i","service","tracked","currentDraft","draft","forStart","args","start","forEnd","end","undefined","isInvalid","isRangeInvalid","hasChanged","setDraft","timeOptions","useI18nTimeOptions","euiI18n","setTime","showUpdateButton","onTimeChange","isQuickSelection","applyTime","applyQuickTime","n","action","setStart","setEnd","handleClickUpdateButton","onRefresh","refreshInterval","autoRefresh","modifier","_element","isPaused","stopped","timer","tick","setTimeout","clearTimeout","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFlexGroup","classNames","eq","EuiFlexItem","EuiFormControlLayout","EuiQuickSelectPopover","argOrDefault","EuiDatePickerRange","EuiDatePopoverButton","EuiSuperUpdateButton","or"],"mappings":"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"}

package/dist/components/eui-super-select-control.js

@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { service } from '@ember/service';
+import EuiFormControlLayout from './eui-form-control-layout.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime-esm';
+
+class EuiSuperSelectControl extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  get selectedOption() {
+    return this.args.options?.find(option => option.value === this.args.value);
+  }
+  get announcement() {
+    return this.euiI18n.lookupToken('euiSuperSelectControl.selectAnOption', 'Select an option: {selectedValue}, is selected', {
+      selectedValue: this.selectedOption?.inputDisplay ?? ''
+    });
+  }
+  get hiddenValue() {
+    const value = this.args.value;
+    return value === undefined || value === null ? '' : String(value);
+  }
+  classes = hasGroup => ['euiSuperSelectControl', this.args.fullWidth && 'euiSuperSelectControl--fullWidth', this.args.compressed && 'euiSuperSelectControl--compressed', hasGroup && 'euiSuperSelectControl--inGroup', this.args.isLoading && 'euiSuperSelectControl-isLoading', this.args.isInvalid && 'euiSuperSelectControl-isInvalid'].filter(Boolean).join(' ');
+  static {
+    setComponentTemplate(precompileTemplate("<input type=\"hidden\" id={{@id}} name={{@name}} value={{this.hiddenValue}} />\n{{#if (or2 (has-block \"prepend\") (has-block \"append\"))}}\n  <EuiFormControlLayout @icon=\"arrowDown\" @iconSide=\"right\" @fullWidth={{@fullWidth}} @isLoading={{@isLoading}} @compressed={{@compressed}}>\n    <:prepend as |className|>{{yield className to=\"prepend\"}}</:prepend>\n    <:field>\n      <EuiScreenReaderOnly>\n        <span id={{@screenReaderId}}>{{this.announcement}}</span>\n      </EuiScreenReaderOnly>\n      <button type=\"button\" class={{this.classes true}} aria-haspopup=\"listbox\" ...attributes>\n        {{#if this.selectedOption}}\n          {{#if (has-block \"inputDisplay\")}}\n            {{yield this.selectedOption to=\"inputDisplay\"}}\n          {{else}}\n            {{this.selectedOption.inputDisplay}}\n          {{/if}}\n        {{/if}}\n      </button>\n    </:field>\n    <:append as |className|>{{yield className to=\"append\"}}</:append>\n  </EuiFormControlLayout>\n{{else}}\n  <EuiFormControlLayout @icon=\"arrowDown\" @iconSide=\"right\" @fullWidth={{@fullWidth}} @isLoading={{@isLoading}} @compressed={{@compressed}}>\n    <EuiScreenReaderOnly>\n      <span id={{@screenReaderId}}>{{this.announcement}}</span>\n    </EuiScreenReaderOnly>\n    <button type=\"button\" class={{this.classes false}} aria-haspopup=\"listbox\" ...attributes>\n      {{#if this.selectedOption}}\n        {{#if (has-block \"inputDisplay\")}}\n          {{yield this.selectedOption to=\"inputDisplay\"}}\n        {{else}}\n          {{this.selectedOption.inputDisplay}}\n        {{/if}}\n      {{/if}}\n    </button>\n  </EuiFormControlLayout>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        or2,
+        EuiFormControlLayout,
+        EuiScreenReaderOnly
+      })
+    }), this);
+  }
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+
+export { EuiSuperSelectControl as default };
+//# sourceMappingURL=eui-super-select-control.js.map

package/dist/components/eui-super-select-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-super-select-control.js","sources":["../../src/components/eui-super-select-control.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\n\nexport interface EuiSuperSelectOption<T = string> {\n  /** The value passed to `@onChange` when chosen. */\n  value: T;\n  /** Text shown in the control when selected. */\n  inputDisplay?: string;\n  /** Text shown in the list; defaults to `inputDisplay`. */\n  dropdownDisplay?: string;\n  /** Disables the option. */\n  disabled?: boolean;\n  [key: string]: unknown;\n}\n\n/**\n * The button of an `EuiSuperSelect`, showing the selected option, with a\n * hidden `<input>` holding its value for forms. Usually rendered for you\n * by `EuiSuperSelect`.\n */\nexport interface EuiSuperSelectControlSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** The options, to show the selected one. */\n    options?: EuiSuperSelectOption<unknown>[];\n    /** Value of the selected option. */\n    value?: unknown;\n    /** `id` of the hidden input. */\n    id?: string;\n    /** `name` of the hidden input, for forms. */\n    name?: string;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n    /** Smaller, for dense forms. */\n    compressed?: boolean;\n    /** Shows a spinner. */\n    isLoading?: boolean;\n    /** Invalid look. */\n    isInvalid?: boolean;\n    /** Id of the element announcing the selection to screen readers. */\n    screenReaderId?: string;\n  };\n  Blocks: {\n    /** Renders the selected option yourself; yields it. */\n    inputDisplay: [option: EuiSuperSelectOption<unknown>];\n    /** Content before the control; yields the class to put on it. */\n    prepend: [className: string];\n    /** Content after the control; yields the class to put on it. */\n    append: [className: string];\n  };\n}\n\nexport default class EuiSuperSelectControl extends Component<EuiSuperSelectControlSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get selectedOption(): EuiSuperSelectOption<unknown> | undefined {\n    return this.args.options?.find((option) => option.value === this.args.value);\n  }\n\n  get announcement(): string {\n    return this.euiI18n.lookupToken(\n      'euiSuperSelectControl.selectAnOption',\n      'Select an option: {selectedValue}, is selected',\n      { selectedValue: this.selectedOption?.inputDisplay ?? '' }\n    );\n  }\n\n  get hiddenValue(): string {\n    const value = this.args.value;\n\n    return value === undefined || value === null ? '' : String(value as string);\n  }\n\n  classes = (hasGroup: boolean): string =>\n    [\n      'euiSuperSelectControl',\n      this.args.fullWidth && 'euiSuperSelectControl--fullWidth',\n      this.args.compressed && 'euiSuperSelectControl--compressed',\n      hasGroup && 'euiSuperSelectControl--inGroup',\n      this.args.isLoading && 'euiSuperSelectControl-isLoading',\n      this.args.isInvalid && 'euiSuperSelectControl-isInvalid'\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n  <template>\n    <input type=\"hidden\" id={{@id}} name={{@name}} value={{this.hiddenValue}} />\n    {{#if (or2 (has-block \"prepend\") (has-block \"append\"))}}\n      <EuiFormControlLayout\n        @icon=\"arrowDown\"\n        @iconSide=\"right\"\n        @fullWidth={{@fullWidth}}\n        @isLoading={{@isLoading}}\n        @compressed={{@compressed}}\n      >\n        <:prepend as |className|>{{yield className to=\"prepend\"}}</:prepend>\n        <:field>\n          <EuiScreenReaderOnly>\n            <span id={{@screenReaderId}}>{{this.announcement}}</span>\n          </EuiScreenReaderOnly>\n          <button\n            type=\"button\"\n            class={{this.classes true}}\n            aria-haspopup=\"listbox\"\n            ...attributes\n          >\n            {{#if this.selectedOption}}\n              {{#if (has-block \"inputDisplay\")}}\n                {{yield this.selectedOption to=\"inputDisplay\"}}\n              {{else}}\n                {{this.selectedOption.inputDisplay}}\n              {{/if}}\n            {{/if}}\n          </button>\n        </:field>\n        <:append as |className|>{{yield className to=\"append\"}}</:append>\n      </EuiFormControlLayout>\n    {{else}}\n      <EuiFormControlLayout\n        @icon=\"arrowDown\"\n        @iconSide=\"right\"\n        @fullWidth={{@fullWidth}}\n        @isLoading={{@isLoading}}\n        @compressed={{@compressed}}\n      >\n        <EuiScreenReaderOnly>\n          <span id={{@screenReaderId}}>{{this.announcement}}</span>\n        </EuiScreenReaderOnly>\n        <button\n          type=\"button\"\n          class={{this.classes false}}\n          aria-haspopup=\"listbox\"\n          ...attributes\n        >\n          {{#if this.selectedOption}}\n            {{#if (has-block \"inputDisplay\")}}\n              {{yield this.selectedOption to=\"inputDisplay\"}}\n            {{else}}\n              {{this.selectedOption.inputDisplay}}\n            {{/if}}\n          {{/if}}\n        </button>\n      </EuiFormControlLayout>\n    {{/if}}\n  </template>\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n"],"names":["EuiSuperSelectControl","Component","g","prototype","service","i","selectedOption","args","options","find","option","value","announcement","euiI18n","lookupToken","selectedValue","inputDisplay","hiddenValue","undefined","String","classes","hasGroup","fullWidth","compressed","isLoading","isInvalid","filter","Boolean","join","setComponentTemplate","precompileTemplate","strictMode","scope","or2","EuiFormControlLayout","EuiScreenReaderOnly","a","b"],"mappings":";;;;;;;;AAyDe,MAAMA,8BAA8BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAC1DC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IAAIC,cAAAA,GAA4D;AAC9D,IAAA,OAAO,IAAI,CAACC,IAAI,CAACC,OAAO,EAAEC,IAAA,CAAMC,MAAA,IAAWA,MAAA,CAAOC,KAAK,KAAK,IAAI,CAACJ,IAAI,CAACI,KAAK,CAAA;AAC7E,EAAA;EAEA,IAAIC,YAAAA,GAAuB;IACzB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAC7B,wCACA,gDAAA,EACA;AAAEC,MAAAA,aAAA,EAAe,IAAI,CAACT,cAAc,EAAEU,YAAA,IAAgB;AAAG,KAAA,CAAA;AAE7D,EAAA;EAEA,IAAIC,WAAAA,GAAsB;AACxB,IAAA,MAAMN,KAAA,GAAQ,IAAI,CAACJ,IAAI,CAACI,KAAK;AAE7B,IAAA,OAAOA,UAAUO,SAAA,IAAaP,KAAA,KAAU,OAAO,EAAA,GAAKQ,MAAA,CAAOR,KAAe,CAAA;AAC5E,EAAA;EAEAS,OAAA,GAAWC,QAAiB,IAC1B,CACE,uBAAA,EACA,IAAI,CAACd,IAAI,CAACe,SAAS,IAAI,kCAAA,EACvB,IAAI,CAACf,IAAI,CAACgB,UAAU,IAAI,mCAAA,EACxBF,QAAA,IAAY,gCAAA,EACZ,IAAI,CAACd,IAAI,CAACiB,SAAS,IAAI,iCAAA,EACvB,IAAI,CAACjB,IAAI,CAACkB,SAAS,IAAI,iCAAA,CACxB,CACEC,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AAEV,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,wnDAAA,EA2DA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,GAAA;QAAAC,oBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASF,IAAIG,CAAU,EAAEC,CAAU,EAAU;AAC3C,EAAA,OAAOV,QAAQS,CAAA,IAAKC,CAAA,CAAA;AACtB;;"}

package/dist/components/eui-super-select.js

@@ -0,0 +1,139 @@
+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 { modifier } from 'ember-modifier';
+import { randomId } from '../-private/random-id.js';
+import EuiContextMenuItemComponent from './eui-context-menu-item.js';
+import EuiInputPopoverComponent from './eui-input-popover.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import EuiSuperSelectControl from './eui-super-select-control.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiSuperSelect extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "isPopoverOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isPopoverOpen = (i(this, "isPopoverOpen"), void 0);
+  labelledById = `euiSuperSelect_${randomId()}_screenreaderLabelId`;
+  describedById = `euiSuperSelect_${randomId()}_screenreaderDescribeId`;
+  itemNodes = [];
+  get isOpen() {
+    return Boolean(this.args.isOpen) || this.isPopoverOpen;
+  }
+  get announcement() {
+    return this.euiI18n.lookupToken('euiSuperSelect.screenReaderAnnouncement', 'You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.');
+  }
+  get itemClasses() {
+    return this.args.hasDividers ? 'euiSuperSelect__item euiSuperSelect__item--hasDividers' : 'euiSuperSelect__item';
+  }
+  isSelected = option => option.value === this.args.valueOfSelected;
+  optionId = index => `${this.labelledById}_option-${index}`;
+  get activeDescendant() {
+    const index = this.args.options.findIndex(this.isSelected);
+    return index === -1 ? undefined : this.optionId(index);
+  }
+  /**
+  * What the popover focuses once it is positioned: the selected option,
+  * or the first enabled one.
+  */
+  initialFocus = () => {
+    const selected = this.args.options.findIndex(this.isSelected);
+    const index = selected !== -1 ? selected : this.args.options.findIndex(option => !option.disabled);
+    return index === -1 ? null : document.getElementById(this.optionId(index));
+  };
+  openPopover() {
+    this.isPopoverOpen = true;
+    this.args.onFocus?.();
+  }
+  static {
+    n(this.prototype, "openPopover", [action]);
+  }
+  closePopover() {
+    this.isPopoverOpen = false;
+    this.args.onBlur?.();
+  }
+  static {
+    n(this.prototype, "closePopover", [action]);
+  }
+  toggle() {
+    if (this.isPopoverOpen) this.closePopover();else this.openPopover();
+  }
+  static {
+    n(this.prototype, "toggle", [action]);
+  }
+  itemClicked(value) {
+    this.closePopover();
+    this.args.onChange?.(value);
+  }
+  static {
+    n(this.prototype, "itemClicked", [action]);
+  }
+  onSelectKeyDown(event) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      event.stopPropagation();
+      this.openPopover();
+    }
+  }
+  static {
+    n(this.prototype, "onSelectKeyDown", [action]);
+  }
+  onItemKeyDown(event) {
+    switch (event.key) {
+      case 'Escape':
+        event.preventDefault();
+        event.stopPropagation();
+        this.closePopover();
+        break;
+      case 'Tab':
+        event.preventDefault();
+        event.stopPropagation();
+        break;
+      case 'ArrowUp':
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          event.stopPropagation();
+          const items = this.itemNodes.filter(node => node.isConnected);
+          const current = items.indexOf(document.activeElement);
+          const step = event.key === 'ArrowUp' ? -1 : 1;
+          const next = current === -1 ? 0 : (current + step + items.length) % items.length;
+          items[next]?.focus();
+          break;
+        }
+    }
+  }
+  static {
+    n(this.prototype, "onItemKeyDown", [action]);
+  }
+  registerItem = modifier((element, [index]) => {
+    this.itemNodes[index] = element;
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<EuiInputPopover class=\"euiSuperSelect\" @isOpen={{this.isOpen}} @closePopover={{this.closePopover}} @panelPaddingSize=\"none\" @fullWidth={{@fullWidth}} @disableFocusTrap={{true}} @initialFocus={{this.initialFocus}}>\n  <:input>\n    <EuiSuperSelectControl class={{if this.isPopoverOpen \"euiSuperSelect--isOpen__button\"}} @options={{@options}} @value={{@valueOfSelected}} @id={{@id}} @name={{@name}} @fullWidth={{@fullWidth}} @compressed={{@compressed}} @isLoading={{@isLoading}} @isInvalid={{@isInvalid}} @screenReaderId={{this.labelledById}} {{on \"click\" this.toggle}} {{on \"keydown\" this.onSelectKeyDown}} ...attributes>\n      <:inputDisplay as |option|>\n        {{#if (has-block \"inputDisplay\")}}\n          {{yield option to=\"inputDisplay\"}}\n        {{else}}\n          {{option.inputDisplay}}\n        {{/if}}\n      </:inputDisplay>\n    </EuiSuperSelectControl>\n  </:input>\n  <:content>\n    <EuiScreenReaderOnly>\n      <p id={{this.describedById}}>{{this.announcement}}</p>\n    </EuiScreenReaderOnly>\n    <div class=\"euiSuperSelect__listbox\" role=\"listbox\" aria-labelledby={{this.labelledById}} aria-describedby={{this.describedById}} aria-activedescendant={{this.activeDescendant}} tabindex=\"0\">\n      {{#each @options as |option index|}}\n        <EuiContextMenuItem class={{this.itemClasses}} id={{this.optionId index}} role=\"option\" aria-selected={{if (this.isSelected option) \"true\" \"false\"}} @icon={{if (this.isSelected option) \"check\" \"empty\"}} @layoutAlign={{@itemLayoutAlign}} @disabled={{option.disabled}} {{on \"click\" (fn this.itemClicked option.value)}} {{on \"keydown\" this.onItemKeyDown}} {{this.registerItem index}}>\n          {{#if (has-block \"dropdownDisplay\")}}\n            {{yield option to=\"dropdownDisplay\"}}\n          {{else if option.dropdownDisplay}}\n            {{option.dropdownDisplay}}\n          {{else}}\n            {{option.inputDisplay}}\n          {{/if}}\n        </EuiContextMenuItem>\n      {{/each}}\n    </div>\n  </:content>\n</EuiInputPopover>", {
+      strictMode: true,
+      scope: () => ({
+        EuiInputPopover: EuiInputPopoverComponent,
+        EuiSuperSelectControl,
+        on,
+        EuiScreenReaderOnly,
+        EuiContextMenuItem: EuiContextMenuItemComponent,
+        fn
+      })
+    }), this);
+  }
+}
+
+export { EuiSuperSelect as default };
+//# sourceMappingURL=eui-super-select.js.map

package/dist/components/eui-super-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-super-select.js","sources":["../../src/components/eui-super-select.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 { modifier } from 'ember-modifier';\n\nimport { randomId } from '../-private/random-id.ts';\nimport EuiContextMenuItem from './eui-context-menu-item.gts';\nimport EuiInputPopover from './eui-input-popover.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\nimport EuiSuperSelectControl from './eui-super-select-control.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiContextMenuItemSignature } from './eui-context-menu-item';\nimport type { EuiSuperSelectOption } from './eui-super-select-control';\n\nexport type { EuiSuperSelectOption };\n\n/**\n * A select whose options can show more than text: a title with a\n * description, an icon, a color. Pick it over `EuiSelect` when options\n * need that; for plain text options `EuiSelect` is simpler and native.\n */\nexport interface EuiSuperSelectSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /**\n     * The options: `{ value, inputDisplay, dropdownDisplay, disabled }`.\n     * Use the `<:inputDisplay>` / `<:dropdownDisplay>` blocks for markup.\n     */\n    options: EuiSuperSelectOption<any>[];\n    /** Value of the selected option. */\n    valueOfSelected?: unknown;\n    /** Called with the chosen option's value. */\n    onChange?: (value: any) => void;\n    /** Opens the list (e.g. on first render). */\n    isOpen?: boolean;\n    /** Invalid look. */\n    isInvalid?: boolean;\n    /** Shows a spinner. */\n    isLoading?: boolean;\n    /** Lines between the options, for options with several lines. */\n    hasDividers?: boolean;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n    /** Smaller, for dense forms. */\n    compressed?: boolean;\n    /** Aligns the check mark with the `'center'` or the `'top'` of each option. */\n    itemLayoutAlign?: EuiContextMenuItemSignature['Args']['layoutAlign'];\n    /** `name` of the hidden input, for forms. */\n    name?: string;\n    /** `id` of the hidden input. */\n    id?: string;\n    /** Called when the list opens. */\n    onFocus?: () => void;\n    /** Called when the list closes. */\n    onBlur?: () => void;\n  };\n  Blocks: {\n    /** Renders the selected option in the control; yields it. */\n    inputDisplay: [option: EuiSuperSelectOption<any>];\n    /** Renders an option in the list; yields it. */\n    dropdownDisplay: [option: EuiSuperSelectOption<any>];\n    /** Content before the control; yields the class to put on it. */\n    prepend: [className: string];\n    /** Content after the control; yields the class to put on it. */\n    append: [className: string];\n  };\n}\n\nexport default class EuiSuperSelect extends Component<EuiSuperSelectSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isPopoverOpen = false;\n\n  labelledById = `euiSuperSelect_${randomId()}_screenreaderLabelId`;\n  describedById = `euiSuperSelect_${randomId()}_screenreaderDescribeId`;\n\n  itemNodes: HTMLElement[] = [];\n\n  get isOpen(): boolean {\n    return Boolean(this.args.isOpen) || this.isPopoverOpen;\n  }\n\n  get announcement(): string {\n    return this.euiI18n.lookupToken(\n      'euiSuperSelect.screenReaderAnnouncement',\n      'You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.'\n    );\n  }\n\n  get itemClasses(): string {\n    return this.args.hasDividers\n      ? 'euiSuperSelect__item euiSuperSelect__item--hasDividers'\n      : 'euiSuperSelect__item';\n  }\n\n  isSelected = (option: EuiSuperSelectOption<unknown>): boolean =>\n    option.value === this.args.valueOfSelected;\n\n  optionId = (index: number): string => `${this.labelledById}_option-${index}`;\n\n  get activeDescendant(): string | undefined {\n    const index = this.args.options.findIndex(this.isSelected);\n\n    return index === -1 ? undefined : this.optionId(index);\n  }\n\n  /**\n   * What the popover focuses once it is positioned: the selected option,\n   * or the first enabled one.\n   */\n  initialFocus = (): HTMLElement | null => {\n    const selected = this.args.options.findIndex(this.isSelected);\n    const index =\n      selected !== -1 ? selected : this.args.options.findIndex((option) => !option.disabled);\n\n    return index === -1 ? null : document.getElementById(this.optionId(index));\n  };\n\n  @action\n  openPopover(): void {\n    this.isPopoverOpen = true;\n    this.args.onFocus?.();\n  }\n\n  @action\n  closePopover(): void {\n    this.isPopoverOpen = false;\n    this.args.onBlur?.();\n  }\n\n  @action\n  toggle(): void {\n    if (this.isPopoverOpen) this.closePopover();\n    else this.openPopover();\n  }\n\n  @action\n  itemClicked(value: unknown): void {\n    this.closePopover();\n    this.args.onChange?.(value);\n  }\n\n  @action\n  onSelectKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.openPopover();\n    }\n  }\n\n  @action\n  onItemKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Escape':\n        event.preventDefault();\n        event.stopPropagation();\n        this.closePopover();\n        break;\n      case 'Tab':\n        event.preventDefault();\n        event.stopPropagation();\n        break;\n      case 'ArrowUp':\n      case 'ArrowDown': {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const items = this.itemNodes.filter((node) => node.isConnected);\n        const current = items.indexOf(document.activeElement as HTMLElement);\n        const step = event.key === 'ArrowUp' ? -1 : 1;\n        const next = current === -1 ? 0 : (current + step + items.length) % items.length;\n\n        items[next]?.focus();\n        break;\n      }\n    }\n  }\n\n  registerItem = modifier((element: HTMLElement, [index]: [number]) => {\n    this.itemNodes[index] = element;\n  });\n\n  <template>\n    <EuiInputPopover\n      class=\"euiSuperSelect\"\n      @isOpen={{this.isOpen}}\n      @closePopover={{this.closePopover}}\n      @panelPaddingSize=\"none\"\n      @fullWidth={{@fullWidth}}\n      @disableFocusTrap={{true}}\n      @initialFocus={{this.initialFocus}}\n    >\n      <:input>\n        <EuiSuperSelectControl\n          class={{if this.isPopoverOpen \"euiSuperSelect--isOpen__button\"}}\n          @options={{@options}}\n          @value={{@valueOfSelected}}\n          @id={{@id}}\n          @name={{@name}}\n          @fullWidth={{@fullWidth}}\n          @compressed={{@compressed}}\n          @isLoading={{@isLoading}}\n          @isInvalid={{@isInvalid}}\n          @screenReaderId={{this.labelledById}}\n          {{on \"click\" this.toggle}}\n          {{on \"keydown\" this.onSelectKeyDown}}\n          ...attributes\n        >\n          <:inputDisplay as |option|>\n            {{#if (has-block \"inputDisplay\")}}\n              {{yield option to=\"inputDisplay\"}}\n            {{else}}\n              {{option.inputDisplay}}\n            {{/if}}\n          </:inputDisplay>\n        </EuiSuperSelectControl>\n      </:input>\n      <:content>\n        <EuiScreenReaderOnly>\n          <p id={{this.describedById}}>{{this.announcement}}</p>\n        </EuiScreenReaderOnly>\n        <div\n          class=\"euiSuperSelect__listbox\"\n          role=\"listbox\"\n          aria-labelledby={{this.labelledById}}\n          aria-describedby={{this.describedById}}\n          aria-activedescendant={{this.activeDescendant}}\n          tabindex=\"0\"\n        >\n          {{#each @options as |option index|}}\n            <EuiContextMenuItem\n              class={{this.itemClasses}}\n              id={{this.optionId index}}\n              role=\"option\"\n              aria-selected={{if (this.isSelected option) \"true\" \"false\"}}\n              @icon={{if (this.isSelected option) \"check\" \"empty\"}}\n              @layoutAlign={{@itemLayoutAlign}}\n              @disabled={{option.disabled}}\n              {{on \"click\" (fn this.itemClicked option.value)}}\n              {{on \"keydown\" this.onItemKeyDown}}\n              {{this.registerItem index}}\n            >\n              {{#if (has-block \"dropdownDisplay\")}}\n                {{yield option to=\"dropdownDisplay\"}}\n              {{else if option.dropdownDisplay}}\n                {{option.dropdownDisplay}}\n              {{else}}\n                {{option.inputDisplay}}\n              {{/if}}\n            </EuiContextMenuItem>\n          {{/each}}\n        </div>\n      </:content>\n    </EuiInputPopover>\n  </template>\n}\n"],"names":["EuiSuperSelect","Component","g","prototype","service","i","tracked","labelledById","randomId","describedById","itemNodes","isOpen","Boolean","args","isPopoverOpen","announcement","euiI18n","lookupToken","itemClasses","hasDividers","isSelected","option","value","valueOfSelected","optionId","index","activeDescendant","options","findIndex","undefined","initialFocus","selected","disabled","document","getElementById","openPopover","onFocus","n","action","closePopover","onBlur","toggle","itemClicked","onChange","onSelectKeyDown","event","key","preventDefault","stopPropagation","onItemKeyDown","items","filter","node","isConnected","current","indexOf","activeElement","step","next","length","focus","registerItem","modifier","element","setComponentTemplate","precompileTemplate","strictMode","scope","EuiInputPopover","EuiSuperSelectControl","on","EuiScreenReaderOnly","EuiContextMenuItem","fn"],"mappings":"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"}

package/dist/components/eui-switch.js

@@ -8,7 +8,7 @@ import classNames from '../helpers/class-names.js';
 import EuiIcon from './eui-icon.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { n } from 'decorator-transforms/runtime';
+import { n } from 'decorator-transforms/runtime-esm';
 
 class EuiSwitch extends Component {
   onClick(e) {
@@ -22,7 +22,7 @@ class EuiSwitch extends Component {
     n(this.prototype, "onClick", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#let (argOrDefault @type \"button\") (argOrDefault @showLabel true) (argOrDefault @id (randomId)) (randomId) (and (has-block \"label\") (not (argOrDefault @isFakeLabelBlock false))) as |type showLabel switchId labelId hasLabelBlock|}}\n      {{#let (classNames (if @compressed \"euiSwitch--compressed\") \"euiSwitch\" @containerClass) as |classes|}}\n        <div class={{classes}}>\n          <button type={{type}} id={{switchId}} aria-checked={{if @checked \"true\" \"false\"}} class=\"euiSwitch__button\" role=\"switch\" aria-label={{if (not showLabel) @label}} aria-labelledby={{if showLabel labelId undefined}} disabled={{@disabled}} ...attributes {{on \"click\" this.onClick}}>\n            <span class=\"euiSwitch__body\">\n              <span class=\"euiSwitch__thumb\"></span>\n              <span class=\"euiSwitch__track\">\n                {{#unless @compressed}}\n                  <EuiIcon @type=\"cross\" @size=\"m\" @iconClasses=\"euiSwitch__icon\" />\n                  <EuiIcon @type=\"check\" @size=\"m\" @iconClasses=\"euiSwitch__icon euiSwitch__icon--checked\" />\n                {{/unless}}\n              </span>\n            </span>\n          </button>\n          {{#if showLabel}}\n            {{!-- template-lint-disable--}}\n            <span class=\"euiSwitch__label\" id={{labelId}} {{on \"click\" this.onClick}}>\n              {{#if hasLabelBlock}}\n                {{yield to=\"label\"}}\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </span>\n            {{!-- template-lint-enable--}}\n          {{/if}}\n        </div>\n      {{/let}}\n    {{/let}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#let (argOrDefault @type \"button\") (argOrDefault @showLabel true) (argOrDefault @id (randomId)) (randomId) (and (has-block \"label\") (not (argOrDefault @isFakeLabelBlock false))) as |type showLabel switchId labelId hasLabelBlock|}}\n  {{#let (classNames (if @compressed \"euiSwitch--compressed\") \"euiSwitch\" @containerClass) as |classes|}}\n    <div class={{classes}}>\n      <button type={{type}} id={{switchId}} aria-checked={{if @checked \"true\" \"false\"}} class=\"euiSwitch__button\" role=\"switch\" aria-label={{if (not showLabel) @label}} aria-labelledby={{if showLabel labelId undefined}} disabled={{@disabled}} ...attributes {{on \"click\" this.onClick}}>\n        <span class=\"euiSwitch__body\">\n          <span class=\"euiSwitch__thumb\"></span>\n          <span class=\"euiSwitch__track\">\n            {{#unless @compressed}}\n              <EuiIcon @type=\"cross\" @size=\"m\" @iconClasses=\"euiSwitch__icon\" />\n              <EuiIcon @type=\"check\" @size=\"m\" @iconClasses=\"euiSwitch__icon euiSwitch__icon--checked\" />\n            {{/unless}}\n          </span>\n        </span>\n      </button>\n      {{#if showLabel}}\n        {{!-- template-lint-disable--}}\n        <span class=\"euiSwitch__label\" id={{labelId}} {{on \"click\" this.onClick}}>\n          {{#if hasLabelBlock}}\n            {{yield to=\"label\"}}\n          {{else}}\n            {{@label}}\n          {{/if}}\n        </span>\n        {{!-- template-lint-enable--}}\n      {{/if}}\n    </div>\n  {{/let}}\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         argOrDefault,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-switch.js","sources":["../../src/components/eui-switch.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport { and, not } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiIcon from './eui-icon.gts';\n\nexport interface EuiSwitchSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    id?: string;\n    /**\n     * Whether to render the render the text label\n     */\n    showLabel?: boolean;\n    /**\n     * Must be a string if `showLabel` prop is true\n     */\n    label?: string;\n    checked: boolean;\n    onChange?: (event: MouseEvent) => void;\n    disabled?: boolean;\n    compressed?: boolean;\n    type?: 'submit' | 'reset' | 'button';\n\n    containerClass?: string;\n    isFakeLabelBlock?: boolean;\n  };\n  Blocks: {\n    default: [];\n    label: [];\n  };\n}\n\nexport default class EuiSwitch extends Component<EuiSwitchSignature> {\n  @action\n  onClick(e: MouseEvent): void {\n    if (this.args.disabled) {\n      return;\n    }\n\n    (e.target as HTMLInputElement).checked = !this.args.checked;\n\n    this.args.onChange?.(e);\n  }\n\n  <template>\n    {{#let\n      (argOrDefault @type \"button\")\n      (argOrDefault @showLabel true)\n      (argOrDefault @id (randomId))\n      (randomId)\n      (and (has-block \"label\") (not (argOrDefault @isFakeLabelBlock false)))\n      as |type showLabel switchId labelId hasLabelBlock|\n    }}\n      {{#let\n        (classNames\n          (if @compressed \"euiSwitch--compressed\") \"euiSwitch\" @containerClass\n        )\n        as |classes|\n      }}\n        <div class={{classes}}>\n          <button\n            type={{type}}\n            id={{switchId}}\n            aria-checked={{if @checked \"true\" \"false\"}}\n            class=\"euiSwitch__button\"\n            role=\"switch\"\n            aria-label={{if (not showLabel) @label}}\n            aria-labelledby={{if showLabel labelId undefined}}\n            disabled={{@disabled}}\n            ...attributes\n            {{on \"click\" this.onClick}}\n          >\n            <span class=\"euiSwitch__body\">\n              <span class=\"euiSwitch__thumb\"></span>\n              <span class=\"euiSwitch__track\">\n                {{#unless @compressed}}\n                  <EuiIcon\n                    @type=\"cross\"\n                    @size=\"m\"\n                    @iconClasses=\"euiSwitch__icon\"\n                  />\n                  <EuiIcon\n                    @type=\"check\"\n                    @size=\"m\"\n                    @iconClasses=\"euiSwitch__icon euiSwitch__icon--checked\"\n                  />\n                {{/unless}}\n              </span>\n            </span>\n          </button>\n          {{#if showLabel}}\n            {{! template-lint-disable}}\n            <span\n              class=\"euiSwitch__label\"\n              id={{labelId}}\n              {{on \"click\" this.onClick}}\n            >\n              {{#if hasLabelBlock}}\n                {{yield to=\"label\"}}\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </span>\n            {{! template-lint-enable}}\n          {{/if}}\n        </div>\n      {{/let}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiSwitch","Component","onClick","e","args","disabled","target","checked","onChange","n","prototype","action","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","randomId","and","not","classNames","on","EuiIcon"],"mappings":";;;;;;;;;;;;AAsCe,MAAMA,kBAAkBC,SAAU,CAAA;EAE/CC,OAAAA,CAAQC,CAAa,EAAQ;AAC3B,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAE;AACtB,MAAA;AACF;IAECF,CAAE,CAAAG,MAAM,CAAsBC,OAAO,GAAG,CAAC,IAAI,CAACH,IAAI,CAACG,OAAO;AAE3D,IAAA,IAAI,CAACH,IAAI,CAACI,QAAQ,GAAGL,CAAA,CAAA;AACvB;AAAA,EAAA;IAAAM,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CATCC,MAAA,CAAA,CAAA;AAAA;AAWD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAgEA,wmDAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,YAAA;QAAAC,QAAA;QAAAC,GAAA;QAAAC,GAAA;QAAAC,UAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-switch.js","sources":["../../src/components/eui-switch.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport { and, not } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiIcon from './eui-icon.gts';\n\n/** An on/off toggle, for settings that apply immediately. */\nexport interface EuiSwitchSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** Id of the switch button. Defaults to a random id. */\n    id?: string;\n    /**\n     * Whether to render the text label. Without it `@label` becomes the\n     * accessible label. Defaults to `true`.\n     */\n    showLabel?: boolean;\n    /**\n     * Must be a string if `showLabel` prop is true\n     */\n    label?: string;\n    /** Whether it is on. */\n    checked: boolean;\n    /**\n     * Called on click; `event.target.checked` is the new state. Update\n     * `@checked` here.\n     */\n    onChange?: (event: MouseEvent) => void;\n    /** Disables the switch. */\n    disabled?: boolean;\n    /** Smaller switch, for dense forms. */\n    compressed?: boolean;\n    /** `type` of the button. Defaults to `'button'`. */\n    type?: 'submit' | 'reset' | 'button';\n\n    /** Extra classes for the wrapper. */\n    containerClass?: string;\n    /** @private Ignore the `<:label>` block. */\n    isFakeLabelBlock?: boolean;\n  };\n  Blocks: {\n    /** Unused. */\n    default: [];\n    /** The label, instead of `@label`. */\n    label: [];\n  };\n}\n\nexport default class EuiSwitch extends Component<EuiSwitchSignature> {\n  @action\n  onClick(e: MouseEvent): void {\n    if (this.args.disabled) {\n      return;\n    }\n\n    (e.target as HTMLInputElement).checked = !this.args.checked;\n\n    this.args.onChange?.(e);\n  }\n\n  <template>\n    {{#let\n      (argOrDefault @type \"button\")\n      (argOrDefault @showLabel true)\n      (argOrDefault @id (randomId))\n      (randomId)\n      (and (has-block \"label\") (not (argOrDefault @isFakeLabelBlock false)))\n      as |type showLabel switchId labelId hasLabelBlock|\n    }}\n      {{#let\n        (classNames\n          (if @compressed \"euiSwitch--compressed\") \"euiSwitch\" @containerClass\n        )\n        as |classes|\n      }}\n        <div class={{classes}}>\n          <button\n            type={{type}}\n            id={{switchId}}\n            aria-checked={{if @checked \"true\" \"false\"}}\n            class=\"euiSwitch__button\"\n            role=\"switch\"\n            aria-label={{if (not showLabel) @label}}\n            aria-labelledby={{if showLabel labelId undefined}}\n            disabled={{@disabled}}\n            ...attributes\n            {{on \"click\" this.onClick}}\n          >\n            <span class=\"euiSwitch__body\">\n              <span class=\"euiSwitch__thumb\"></span>\n              <span class=\"euiSwitch__track\">\n                {{#unless @compressed}}\n                  <EuiIcon\n                    @type=\"cross\"\n                    @size=\"m\"\n                    @iconClasses=\"euiSwitch__icon\"\n                  />\n                  <EuiIcon\n                    @type=\"check\"\n                    @size=\"m\"\n                    @iconClasses=\"euiSwitch__icon euiSwitch__icon--checked\"\n                  />\n                {{/unless}}\n              </span>\n            </span>\n          </button>\n          {{#if showLabel}}\n            {{! template-lint-disable}}\n            <span\n              class=\"euiSwitch__label\"\n              id={{labelId}}\n              {{on \"click\" this.onClick}}\n            >\n              {{#if hasLabelBlock}}\n                {{yield to=\"label\"}}\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </span>\n            {{! template-lint-enable}}\n          {{/if}}\n        </div>\n      {{/let}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiSwitch","Component","onClick","e","args","disabled","target","checked","onChange","n","prototype","action","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","randomId","and","not","classNames","on","EuiIcon"],"mappings":";;;;;;;;;;;;AAqDe,MAAMA,kBAAkBC,SAAA,CAAU;EAE/CC,OAAAA,CAAQC,CAAa,EAAQ;AAC3B,IAAA,IAAI,IAAI,CAACC,IAAI,CAACC,QAAQ,EAAE;AACtB,MAAA;AACF,IAAA;IAECF,CAAA,CAAEG,MAAM,CAAsBC,OAAO,GAAG,CAAC,IAAI,CAACH,IAAI,CAACG,OAAO;AAE3D,IAAA,IAAI,CAACH,IAAI,CAACI,QAAQ,GAAGL,CAAA,CAAA;AACvB,EAAA;AAAA,EAAA;IAAAM,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CATCC,MAAA,CAAA,CAAA;AAAA;AAWD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,k/CAAA,EAgEA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,YAAA;QAAAC,QAAA;QAAAC,GAAA;QAAAC,GAAA;QAAAC,UAAA;QAAAC,EAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-tab.js

@@ -6,7 +6,8 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiTab = setComponentTemplate(precompileTemplate("\n  {{#let (argOrDefault @id (randomId)) as |id|}}\n    {{#if (and @href (not @disabled))}}\n      <a id={{id}} role=\"tab\" aria-selected={{not (not @isSelected)}} class={{classNames \"euiTab\" (if @isSelected \"euiTab-isSelected\") (if @disabled \"euiTab-isDisabled\")}} href={{@href}} disabled={{@disabled}} ...attributes>\n        {{#if (has-block \"prepend\")}}\n          <span class=\"euiTab__prepend\">\n            {{yield to=\"prepend\"}}\n          </span>\n        {{/if}}\n\n        <span class=\"euiTab__content\">\n          {{yield}}\n        </span>\n\n        {{#if (has-block \"append\")}}\n          <span class=\"euiTab__append\">\n            {{yield to=\"append\"}}\n          </span>\n        {{/if}}\n      </a>\n    {{else}}\n      <button id={{id}} role=\"tab\" aria-selected={{not (not @isSelected)}} type=\"button\" class={{classNames \"euiTab\" (if @isSelected \"euiTab-isSelected\") (if @disabled \"euiTab-isDisabled\")}} disabled={{@disabled}} ...attributes>\n        {{#if (has-block \"prepend\")}}\n          <span class=\"euiTab__prepend\">\n            {{yield to=\"prepend\"}}\n          </span>\n        {{/if}}\n\n        <span class=\"euiTab__content\">\n          {{yield}}\n        </span>\n\n        {{#if (has-block \"append\")}}\n          <span class=\"euiTab__append\">\n            {{yield to=\"append\"}}\n          </span>\n        {{/if}}\n      </button>\n    {{/if}}\n  {{/let}}\n", {
+/** One tab of an EuiTabs. Add `{{on "click" …}}` to select it. */
+const EuiTab = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @id (randomId)) as |id|}}\n  {{#if (and @href (not @disabled))}}\n    <a id={{id}} role=\"tab\" aria-selected={{if @isSelected \"true\" \"false\"}} class={{classNames \"euiTab\" (if @isSelected \"euiTab-isSelected\") (if @disabled \"euiTab-isDisabled\")}} href={{@href}} disabled={{@disabled}} ...attributes>\n      {{#if (has-block \"prepend\")}}\n        <span class=\"euiTab__prepend\">\n          {{yield to=\"prepend\"}}\n        </span>\n      {{/if}}\n\n      <span class=\"euiTab__content\">\n        {{yield}}\n      </span>\n\n      {{#if (has-block \"append\")}}\n        <span class=\"euiTab__append\">\n          {{yield to=\"append\"}}\n        </span>\n      {{/if}}\n    </a>\n  {{else}}\n    <button id={{id}} role=\"tab\" aria-selected={{if @isSelected \"true\" \"false\"}} type=\"button\" class={{classNames \"euiTab\" (if @isSelected \"euiTab-isSelected\") (if @disabled \"euiTab-isDisabled\")}} disabled={{@disabled}} ...attributes>\n      {{#if (has-block \"prepend\")}}\n        <span class=\"euiTab__prepend\">\n          {{yield to=\"prepend\"}}\n        </span>\n      {{/if}}\n\n      <span class=\"euiTab__content\">\n        {{yield}}\n      </span>\n\n      {{#if (has-block \"append\")}}\n        <span class=\"euiTab__append\">\n          {{yield to=\"append\"}}\n        </span>\n      {{/if}}\n    </button>\n  {{/if}}\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     argOrDefault,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-tab.js","sources":["../../src/components/eui-tab.gts"],"sourcesContent":["import { and, not } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport type IEuiTab = {\n  id?: string;\n  href?: string;\n  isSelected?: boolean;\n  disabled?: boolean;\n};\n\nexport interface EuiTabSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement;\n  Args: {\n    [K in keyof IEuiTab]: IEuiTab[K];\n  };\n  Blocks: {\n    prepend: [];\n    default: [];\n    append: [];\n  };\n}\n\nconst EuiTab: TemplateOnlyComponent<EuiTabSignature> = <template>\n  {{#let (argOrDefault @id (randomId)) as |id|}}\n    {{#if (and @href (not @disabled))}}\n      <a\n        id={{id}}\n        role=\"tab\"\n        aria-selected={{not (not @isSelected)}}\n        class={{classNames\n          \"euiTab\"\n          (if @isSelected \"euiTab-isSelected\")\n          (if @disabled \"euiTab-isDisabled\")\n        }}\n        href={{@href}}\n        disabled={{@disabled}}\n        ...attributes\n      >\n        {{#if (has-block \"prepend\")}}\n          <span class=\"euiTab__prepend\">\n            {{yield to=\"prepend\"}}\n          </span>\n        {{/if}}\n\n        <span class=\"euiTab__content\">\n          {{yield}}\n        </span>\n\n        {{#if (has-block \"append\")}}\n          <span class=\"euiTab__append\">\n            {{yield to=\"append\"}}\n          </span>\n        {{/if}}\n      </a>\n    {{else}}\n      <button\n        id={{id}}\n        role=\"tab\"\n        aria-selected={{not (not @isSelected)}}\n        type=\"button\"\n        class={{classNames\n          \"euiTab\"\n          (if @isSelected \"euiTab-isSelected\")\n          (if @disabled \"euiTab-isDisabled\")\n        }}\n        disabled={{@disabled}}\n        ...attributes\n      >\n        {{#if (has-block \"prepend\")}}\n          <span class=\"euiTab__prepend\">\n            {{yield to=\"prepend\"}}\n          </span>\n        {{/if}}\n\n        <span class=\"euiTab__content\">\n          {{yield}}\n        </span>\n\n        {{#if (has-block \"append\")}}\n          <span class=\"euiTab__append\">\n            {{yield to=\"append\"}}\n          </span>\n        {{/if}}\n      </button>\n    {{/if}}\n  {{/let}}\n</template>;\n\nexport default EuiTab;\n"],"names":["EuiTab","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","randomId","and","not","classNames","templateOnly"],"mappings":";;;;;;;;AA2BA,MAAMA,MAAiD,GAAAC,oBAAA,CAAAC,kBAAA,CAgEvD,25CAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,GAAA;IAAAC,GAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-tab.js","sources":["../../src/components/eui-tab.gts"],"sourcesContent":["import { and, not } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport type IEuiTab = {\n  /** Id of the tab. Defaults to a random id. */\n  id?: string;\n  /** Makes the tab a link, e.g. to a route. */\n  href?: string;\n  /** Marks the tab as selected (`aria-selected`). */\n  isSelected?: boolean;\n  /** Disables the tab. */\n  disabled?: boolean;\n};\n\n/** One tab of an EuiTabs. Add `{{on \"click\" …}}` to select it. */\nexport interface EuiTabSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement;\n  Args: {\n    [K in keyof IEuiTab]: IEuiTab[K];\n  };\n  Blocks: {\n    /** Content before the label, e.g. an icon. */\n    prepend: [];\n    /** The tab's label. */\n    default: [];\n    /** Content after the label, e.g. a notification badge. */\n    append: [];\n  };\n}\n\nconst EuiTab: TemplateOnlyComponent<EuiTabSignature> = <template>\n  {{#let (argOrDefault @id (randomId)) as |id|}}\n    {{#if (and @href (not @disabled))}}\n      <a\n        id={{id}}\n        role=\"tab\"\n        aria-selected={{if @isSelected \"true\" \"false\"}}\n        class={{classNames\n          \"euiTab\"\n          (if @isSelected \"euiTab-isSelected\")\n          (if @disabled \"euiTab-isDisabled\")\n        }}\n        href={{@href}}\n        disabled={{@disabled}}\n        ...attributes\n      >\n        {{#if (has-block \"prepend\")}}\n          <span class=\"euiTab__prepend\">\n            {{yield to=\"prepend\"}}\n          </span>\n        {{/if}}\n\n        <span class=\"euiTab__content\">\n          {{yield}}\n        </span>\n\n        {{#if (has-block \"append\")}}\n          <span class=\"euiTab__append\">\n            {{yield to=\"append\"}}\n          </span>\n        {{/if}}\n      </a>\n    {{else}}\n      <button\n        id={{id}}\n        role=\"tab\"\n        aria-selected={{if @isSelected \"true\" \"false\"}}\n        type=\"button\"\n        class={{classNames\n          \"euiTab\"\n          (if @isSelected \"euiTab-isSelected\")\n          (if @disabled \"euiTab-isDisabled\")\n        }}\n        disabled={{@disabled}}\n        ...attributes\n      >\n        {{#if (has-block \"prepend\")}}\n          <span class=\"euiTab__prepend\">\n            {{yield to=\"prepend\"}}\n          </span>\n        {{/if}}\n\n        <span class=\"euiTab__content\">\n          {{yield}}\n        </span>\n\n        {{#if (has-block \"append\")}}\n          <span class=\"euiTab__append\">\n            {{yield to=\"append\"}}\n          </span>\n        {{/if}}\n      </button>\n    {{/if}}\n  {{/let}}\n</template>;\n\nexport default EuiTab;\n"],"names":["EuiTab","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","randomId","and","not","classNames","templateOnly"],"mappings":";;;;;;;;AAmBA;AAgBA,MAAMA,MAA8B,GAAAC,oBAAA,CAAmBC,kBAAA,CAAA,y2CAAA,EAgEvD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,GAAA;IAAAC,GAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}