@ember-eui/core 14.1.2 → 14.1.4

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

@@ -1 +1 @@
-{"version":3,"file":"eui-range.js","sources":["../../src/components/eui-range.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 { guidFor } from '@ember/object/internals';\nimport { later } from '@ember/runloop';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { and, eq, not } from 'ember-truth-helpers';\n\nimport argOrDefault, {\n  argOrDefaultDecorator\n} from '../helpers/arg-or-default.ts';\nimport castTo from '../helpers/cast-to.ts';\nimport classNames from '../helpers/class-names.ts';\nimport { isWithinRange } from '../utils/number/index.ts';\nimport EuiInputPopover from './eui-input-popover.gts';\nimport EuiRangeHighlight from './eui-range-highlight.gts';\nimport EuiRangeInput from './eui-range-input.gts';\nimport EuiRangeLabel from './eui-range-label.gts';\nimport EuiRangeSlider from './eui-range-slider.gts';\nimport EuiRangeTooltip from './eui-range-tooltip.gts';\nimport EuiRangeTrack from './eui-range-track.gts';\nimport EuiRangeWrapper from './eui-range-wrapper.gts';\n\nimport type { EuiRangeLevel } from './eui-range-levels';\nimport type { EuiRangeTick } from './eui-range-ticks';\n\nexport interface EuiRangeArgs {\n  /** Smaller slider, for dense forms. Defaults to `false`. */\n  compressed?: boolean;\n  /** Makes the number input read-only. */\n  readOnly?: boolean;\n  /** Stretches the slider to its container's width. Defaults to `false`. */\n  fullWidth?: boolean;\n  /** Id of the slider. Defaults to a generated id. */\n  id?: string;\n  /**\n   * Create colored indicators for certain intervals\n   */\n  levels?: EuiRangeLevel[];\n  /** Increment between values. Defaults to `1`. */\n  step?: number;\n  /**\n   * Pass `true` to displays an extra input control for direct manipulation.\n   * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.\n   */\n  showInput?: boolean | 'inputWithPopover';\n  /**\n   * Shows static min/max labels on the sides of the range slider.\n   * Defaults to `false`.\n   */\n  showLabels?: boolean;\n  /**\n   * Shows a thick line from min to value. Defaults to `false`.\n   */\n  showRange?: boolean;\n  /**\n   * Shows clickable tick marks and labels at the given interval\n   * (`step`/`tickInterval`). Defaults to `false`.\n   */\n  showTicks?: boolean;\n\n  /** Lowest selectable value. Defaults to `0`. */\n  min?: number;\n  /** Highest selectable value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Shows the value in a tooltip above the thumb. Defaults to `false`.\n   */\n  showValue?: boolean;\n  /**\n   * Specified ticks at specified values\n   */\n  ticks?: EuiRangeTick[];\n  /**\n   * Modifies the number of tick marks and at what interval\n   */\n  tickInterval?: number;\n  /**\n   * Appends to the tooltip\n   */\n  valueAppend?: any;\n  /**\n   * Prepends to the tooltip\n   */\n  valuePrepend?: any;\n\n  /**\n   * Called with the event (read `event.target.value`, a string) and whether\n   * the value is within `@min`/`@max`. Update `@value` here.\n   */\n  onChange?: (event: Event, isValid: boolean) => void;\n  /** Called when the slider or input loses focus. */\n  onBlur?: (event: Event) => void;\n  /** Called when the slider or input gets focus. */\n  onFocus?: (event: Event) => void;\n\n  /** The value. */\n  value?: number;\n\n  /** Disables the slider and input. */\n  disabled?: boolean;\n\n  /** @private Show the `<:prepend>` block. Defaults to `true`. */\n  isPrependProvided?: boolean;\n  /** @private Show the `<:append>` block. Defaults to `true`. */\n  isAppendProvided?: boolean;\n  /** @private Ignore the `<:max>` block. */\n  isFakeMaxBlock?: boolean;\n  /** @private Ignore the `<:min>` block. */\n  isFakeMinBlock?: boolean;\n  /** @private Ignore the `<:value>` block. */\n  isFakeValueBlock?: boolean;\n  /** @private Ignore the `<:valueAppend>` block. */\n  isFakeValueAppendBlock?: boolean;\n  /** @private Ignore the `<:valuePrepend>` block. */\n  isFakeValuePrependBlock?: boolean;\n  /** Shows the invalid state. */\n  isInvalid?: boolean;\n  /** `name` of the inputs, for forms. */\n  name?: string;\n  /** Shows a spinner in the number input. Defaults to `false`. */\n  isLoading?: boolean;\n}\n\n/**\n * A slider to pick a number, optionally with a number input, ticks,\n * levels and a value tooltip. For a range of two values use EuiDualRange.\n */\nexport interface EuiRangeSignature {\n  Element: HTMLInputElement;\n  Args: EuiRangeArgs;\n  Blocks: {\n    /** Custom min label (`@showLabels`); yields `@min`. */\n    min: [min: number];\n    /** Custom max label (`@showLabels`); yields `@max`. */\n    max: [max: number];\n    /** Custom value tooltip content (`@showValue`). */\n    value: [];\n    /** Content after the value in the tooltip, e.g. a unit. */\n    valueAppend: [];\n    /** Content before the value in the tooltip, e.g. a currency sign. */\n    valuePrepend: [];\n    /** Content before the number input (`@showInput`); yields its class. */\n    prepend: [classes: string];\n    /** Content after the number input (`@showInput`); yields its class. */\n    append: [classes: string];\n    /** Unused. */\n    input: [];\n    /** Unused. */\n    content: [];\n  };\n}\n\nexport default class EuiRangeComponent extends Component<EuiRangeSignature> {\n  // Defaults\n  @argOrDefaultDecorator(0) min!: number;\n  @argOrDefaultDecorator(100) max!: number;\n  @argOrDefaultDecorator(1) step!: number;\n  @argOrDefaultDecorator(false) fullWidth!: boolean;\n  @argOrDefaultDecorator(false) compressed!: boolean;\n  @argOrDefaultDecorator(false) isLoading!: boolean;\n  @argOrDefaultDecorator(false) showLabels!: boolean;\n  @argOrDefaultDecorator(false) showInput!: boolean | string;\n  @argOrDefaultDecorator(false) showRange!: boolean;\n  @argOrDefaultDecorator(false) showTicks!: boolean;\n  @argOrDefaultDecorator(false) showValue!: boolean;\n  @argOrDefaultDecorator([]) levels!: EuiRangeLevel[];\n\n  preventPopoverClose = false;\n\n  //State\n  @tracked id: string = this.args.id || guidFor({});\n  @tracked isPopoverOpen = false;\n  ///\n\n  @action\n  handleOnChange(e: Event): void {\n    const isValid = isWithinRange(\n      this.min,\n      this.max,\n      (e.currentTarget as HTMLInputElement).value\n    );\n\n    if (this.args.onChange) {\n      this.args.onChange(e, isValid);\n    }\n  }\n\n  get isValid(): boolean {\n    return isWithinRange(this.min, this.max, this.args.value || '');\n  }\n\n  get digitTolerance(): number {\n    return Math.max(String(this.min).length, String(this.max).length);\n  }\n\n  get showInputOnly(): boolean {\n    return this.showInput === 'inputWithPopover';\n  }\n\n  get canShowDropdown(): boolean {\n    return this.showInputOnly && !this.args.readOnly && !this.args.disabled;\n  }\n\n  get showRangeTooltip(): boolean {\n    return (\n      this.showValue &&\n      !!String(this.args.value).length &&\n      this.args.value !== undefined\n    );\n  }\n\n  @action\n  onInputFocus(e: Event): void {\n    if (this.args.onFocus) {\n      this.args.onFocus(e);\n    }\n\n    this.isPopoverOpen = true;\n  }\n\n  @action\n  onInputBlur(e: Event): void {\n    later(\n      this,\n      () => {\n        // Safari does not recognize any focus-related eventing for input[type=range]\n        // making it impossible to capture its state using active/focus/relatedTarget\n        // Instead, a prevention flag is set on mousedown, with a waiting period here.\n        // Mousedown is viable because in the popover case, it is inaccessible via keyboard (intentionally)\n        if (this.preventPopoverClose) {\n          this.preventPopoverClose = false;\n\n          return;\n        }\n\n        if (this.args.onBlur) {\n          this.args.onBlur(e);\n        }\n\n        this.closePopover();\n      },\n      200\n    );\n  }\n\n  @action\n  setPreventPopover(val: boolean): void {\n    this.preventPopoverClose = val;\n  }\n\n  @action\n  closePopover(): void {\n    this.preventPopoverClose = false;\n    this.isPopoverOpen = false;\n  }\n\n  @action\n  setPreventPopoverClose(bool: boolean): void {\n    this.preventPopoverClose = bool;\n  }\n\n  <template>\n    {{#let\n      (and (argOrDefault @isPrependProvided true) (has-block \"prepend\"))\n      (and (argOrDefault @isAppendProvided true) (has-block \"append\"))\n      (and (not (argOrDefault @isFakeMaxBlock false)) (has-block \"max\"))\n      (and (not (argOrDefault @isFakeMinBlock false)) (has-block \"min\"))\n      (and (not (argOrDefault @isFakeValueBlock false)) (has-block \"value\"))\n      (and\n        (not (argOrDefault @isFakeValueAppendBlock false))\n        (has-block \"valueAppend\")\n      )\n      (and\n        (not (argOrDefault @isFakeValuePrependBlock false))\n        (has-block \"valuePrepend\")\n      )\n      as |hasPrepend hasAppend hasMaxBlock hasMinBlock hasValueBlock hasValueAppendBlock hasValuePrependBlock|\n    }}\n      {{#if this.showInputOnly}}\n        <EuiInputPopover\n          class=\"euiRange__popover\"\n          @fullWidth={{@fullWidth}}\n          @isOpen={{this.isPopoverOpen}}\n          @closePopover={{this.closePopover}}\n          @disableFocusTrap={{true}}\n        >\n          <:input>\n            <EuiRangeInput\n              id={{this.id}}\n              @min={{this.min}}\n              @max={{this.max}}\n              @digitTolerance={{this.digitTolerance}}\n              @readOnly={{@readOnly}}\n              @step={{this.step}}\n              @value={{@value}}\n              @disabled={{@disabled}}\n              @compressed={{@compressed}}\n              @name={{@name}}\n              @fullWidth={{and this.showInputOnly this.fullWidth}}\n              @isLoading={{and this.showInputOnly @isLoading}}\n              @isInvalid={{@isInvalid}}\n              @autoSize={{not this.showInputOnly}}\n              @isPrependProvided={{hasPrepend}}\n              @isAppendProvided={{hasAppend}}\n              ...attributes\n              {{on\n                \"focus\"\n                (if this.canShowDropdown this.onInputFocus (optional @onFocus))\n              }}\n              {{on\n                \"blur\"\n                (if this.canShowDropdown this.onInputBlur (optional @onBlur))\n              }}\n              {{on \"input\" this.handleOnChange}}\n            >\n              <:prepend as |classes|>\n                {{yield classes to=\"prepend\"}}\n              </:prepend>\n              <:append as |classes|>\n                {{yield classes to=\"append\"}}\n              </:append>\n            </EuiRangeInput>\n          </:input>\n          <:content>\n            <EuiRangeWrapper\n              class={{classNames\n                \"euiRange\"\n                (if this.showInput \"euiRange--hasInput\")\n              }}\n              @fullWidth={{@fullWidth}}\n              @compressed={{@compressed}}\n            >\n              {{#if this.showLabels}}\n                <EuiRangeLabel @side=\"min\" @disabled={{@disabled}}>\n                  {{#if hasMinBlock}}\n                    {{yield this.min to=\"min\"}}\n                  {{else}}\n                    {{this.min}}\n                  {{/if}}\n                </EuiRangeLabel>\n              {{/if}}\n              <EuiRangeTrack\n                aria-hidden={{if (eq this.showInput true) \"true\"}}\n                @disabled={{@disabled}}\n                @compressed={{@compressed}}\n                @max={{this.max}}\n                @min={{this.min}}\n                @step={{this.step}}\n                @showTicks={{this.showTicks}}\n                @tickInterval={{@tickInterval}}\n                @ticks={{@ticks}}\n                @levels={{this.levels}}\n                @onChange={{this.handleOnChange}}\n                @value={{@value}}\n              >\n                {{#if (and this.showRange this.isValid)}}\n                  <EuiRangeHighlight\n                    @compressed={{@compressed}}\n                    @showTicks={{this.showTicks}}\n                    {{!@glint-expect-error}}\n                    @min={{castTo this.min to=\"number\"}}\n                    {{!@glint-expect-error}}\n                    @max={{castTo this.max to=\"number\"}}\n                    {{!@glint-expect-error}}\n                    @lowerValue={{castTo this.min to=\"number\"}}\n                    {{!@glint-expect-error}}\n                    @upperValue={{castTo @value to=\"number\"}}\n                  />\n                {{/if}}\n                <EuiRangeSlider\n                  aria-hidden={{if (eq this.showInput true) \"true\"}}\n                  tabindex={{if (eq this.showInput true) \"-1\"}}\n                  @id={{if this.showInput undefined this.id}}\n                  @name={{@name}}\n                  @min={{this.min}}\n                  @max={{this.max}}\n                  @step={{this.step}}\n                  @value={{@value}}\n                  @disabled={{@disabled}}\n                  @compressed={{@compressed}}\n                  @showTicks={{this.showTicks}}\n                  @showRange={{this.showRange}}\n                  ...attributes\n                  {{on\n                    \"mousedown\"\n                    (if\n                      this.showInputOnly\n                      (fn this.setPreventPopoverClose true)\n                      (optional)\n                    )\n                  }}\n                  {{on\n                    \"focus\"\n                    (if (eq this.showInput true) (optional) (optional @onFocus))\n                  }}\n                  {{on\n                    \"blur\"\n                    (if this.showInputOnly this.onInputBlur (optional @onBlur))\n                  }}\n                  {{on \"input\" this.handleOnChange}}\n                />\n                {{#if this.showRangeTooltip}}\n                  <EuiRangeTooltip\n                    @compressed={{@compressed}}\n                    @value={{@value}}\n                    @max={{this.max}}\n                    @min={{this.min}}\n                    @name={{@name}}\n                    @showTicks={{this.showTicks}}\n                  >\n                    <:valuePrepend>\n                      {{#if hasValuePrependBlock}}\n                        {{yield to=\"valuePrepend\"}}\n                      {{else}}\n                        {{@valuePrepend}}\n                      {{/if}}\n                    </:valuePrepend>\n                    <:value>\n                      {{#if hasValueBlock}}\n                        {{yield to=\"value\"}}\n                      {{else}}\n                        {{@value}}\n                      {{/if}}\n                    </:value>\n                    <:valueAppend>\n                      {{#if hasValueAppendBlock}}\n                        {{yield to=\"valueAppend\"}}\n                      {{else}}\n                        {{@valueAppend}}\n                      {{/if}}\n                    </:valueAppend>\n                  </EuiRangeTooltip>\n                {{/if}}\n              </EuiRangeTrack>\n              {{#if this.showLabels}}\n                <EuiRangeLabel @side=\"max\" @disabled={{@disabled}}>\n                  {{#if hasMaxBlock}}\n                    {{yield this.max to=\"max\"}}\n                  {{else}}\n                    {{this.max}}\n                  {{/if}}\n                </EuiRangeLabel>\n              {{/if}}\n              {{#if (and this.showInput (not this.showInputOnly))}}\n                <div class=\"euiRange__horizontalSpacer\"></div>\n                {{#if this.showInput}}\n                  <EuiRangeInput\n                    id={{this.id}}\n                    @min={{this.min}}\n                    @max={{this.max}}\n                    @digitTolerance={{this.digitTolerance}}\n                    @readOnly={{@readOnly}}\n                    @step={{this.step}}\n                    @value={{@value}}\n                    @disabled={{@disabled}}\n                    @compressed={{@compressed}}\n                    @name={{@name}}\n                    @fullWidth={{and this.showInputOnly this.fullWidth}}\n                    @isLoading={{and this.showInputOnly @isLoading}}\n                    @isInvalid={{@isInvalid}}\n                    @autoSize={{not this.showInputOnly}}\n                    @isPrependProvided={{hasPrepend}}\n                    @isAppendProvided={{hasAppend}}\n                    ...attributes\n                    {{on\n                      \"focus\"\n                      (if\n                        this.canShowDropdown\n                        this.onInputFocus\n                        (optional @onFocus)\n                      )\n                    }}\n                    {{on\n                      \"blur\"\n                      (if\n                        this.canShowDropdown this.onInputBlur (optional @onBlur)\n                      )\n                    }}\n                    {{on \"input\" this.handleOnChange}}\n                  >\n                    <:prepend as |classes|>\n                      {{yield classes to=\"prepend\"}}\n                    </:prepend>\n                    <:append as |classes|>\n                      {{yield classes to=\"append\"}}\n                    </:append>\n                  </EuiRangeInput>\n                {{/if}}\n              {{/if}}\n            </EuiRangeWrapper>\n          </:content>\n        </EuiInputPopover>\n      {{else}}\n        <EuiRangeWrapper\n          class={{classNames\n            \"euiRange\"\n            (if this.showInput \"euiRange--hasInput\")\n          }}\n          @fullWidth={{@fullWidth}}\n          @compressed={{@compressed}}\n        >\n          {{#if this.showLabels}}\n            <EuiRangeLabel @side=\"min\" @disabled={{@disabled}}>\n              {{#if hasMinBlock}}\n                {{yield this.min to=\"min\"}}\n              {{else}}\n                {{this.min}}\n              {{/if}}\n            </EuiRangeLabel>\n          {{/if}}\n          <EuiRangeTrack\n            aria-hidden={{if (eq this.showInput true) \"true\"}}\n            @disabled={{@disabled}}\n            @compressed={{@compressed}}\n            @max={{this.max}}\n            @min={{this.min}}\n            @step={{this.step}}\n            @showTicks={{this.showTicks}}\n            @tickInterval={{@tickInterval}}\n            @ticks={{@ticks}}\n            @levels={{this.levels}}\n            @onChange={{this.handleOnChange}}\n            @value={{@value}}\n          >\n            {{#if (and this.showRange this.isValid)}}\n              <EuiRangeHighlight\n                @compressed={{@compressed}}\n                @showTicks={{this.showTicks}}\n                {{!@glint-expect-error}}\n                @min={{castTo this.min to=\"number\"}}\n                {{!@glint-expect-error}}\n                @max={{castTo this.max to=\"number\"}}\n                {{!@glint-expect-error}}\n                @lowerValue={{castTo this.min to=\"number\"}}\n                {{!@glint-expect-error}}\n                @upperValue={{castTo @value to=\"number\"}}\n              />\n            {{/if}}\n            <EuiRangeSlider\n              aria-hidden={{if (eq this.showInput true) \"true\"}}\n              tabindex={{if (eq this.showInput true) \"-1\"}}\n              @id={{if this.showInput undefined this.id}}\n              @name={{@name}}\n              @min={{this.min}}\n              @max={{this.max}}\n              @step={{this.step}}\n              @value={{@value}}\n              @disabled={{@disabled}}\n              @compressed={{@compressed}}\n              @showTicks={{this.showTicks}}\n              @showRange={{this.showRange}}\n              ...attributes\n              {{on\n                \"mousedown\"\n                (if\n                  this.showInputOnly (fn this.setPreventPopover true) (optional)\n                )\n              }}\n              {{on\n                \"focus\"\n                (if (eq this.showInput true) (optional) (optional @onFocus))\n              }}\n              {{on\n                \"blur\"\n                (if this.showInputOnly this.onInputBlur (optional @onBlur))\n              }}\n              {{on \"input\" this.handleOnChange}}\n            />\n            {{#if this.showRangeTooltip}}\n              <EuiRangeTooltip\n                @compressed={{@compressed}}\n                @value={{@value}}\n                @max={{this.max}}\n                @min={{this.min}}\n                @name={{@name}}\n                @showTicks={{this.showTicks}}\n              >\n                <:valuePrepend>\n                  {{#if hasValuePrependBlock}}\n                    {{yield to=\"valuePrepend\"}}\n                  {{else}}\n                    {{@valuePrepend}}\n                  {{/if}}\n                </:valuePrepend>\n                <:value>\n                  {{#if hasValueBlock}}\n                    {{yield to=\"value\"}}\n                  {{else}}\n                    {{@value}}\n                  {{/if}}\n                </:value>\n                <:valueAppend>\n                  {{#if hasValueAppendBlock}}\n                    {{yield to=\"valueAppend\"}}\n                  {{else}}\n                    {{@valueAppend}}\n                  {{/if}}\n                </:valueAppend>\n              </EuiRangeTooltip>\n            {{/if}}\n          </EuiRangeTrack>\n          {{#if this.showLabels}}\n            <EuiRangeLabel @side=\"max\" @disabled={{@disabled}}>\n              {{#if hasMaxBlock}}\n                {{yield this.max to=\"max\"}}\n              {{else}}\n                {{this.max}}\n              {{/if}}\n            </EuiRangeLabel>\n          {{/if}}\n          {{#if (and this.showInput (not this.showInputOnly))}}\n            <div class=\"euiRange__horizontalSpacer\"></div>\n            {{#if this.showInput}}\n              <EuiRangeInput\n                id={{this.id}}\n                @min={{this.min}}\n                @max={{this.max}}\n                @digitTolerance={{this.digitTolerance}}\n                @readOnly={{@readOnly}}\n                @step={{this.step}}\n                @value={{@value}}\n                @disabled={{@disabled}}\n                @compressed={{@compressed}}\n                @name={{@name}}\n                @fullWidth={{and this.showInputOnly this.fullWidth}}\n                @isLoading={{and this.showInputOnly @isLoading}}\n                @isInvalid={{@isInvalid}}\n                @autoSize={{not this.showInputOnly}}\n                @isPrependProvided={{hasPrepend}}\n                @isAppendProvided={{hasAppend}}\n                ...attributes\n                {{on\n                  \"focus\"\n                  (if\n                    this.canShowDropdown this.onInputFocus (optional @onFocus)\n                  )\n                }}\n                {{on\n                  \"blur\"\n                  (if this.canShowDropdown this.onInputBlur (optional @onBlur))\n                }}\n                {{on \"input\" this.handleOnChange}}\n              >\n                <:prepend as |classes|>\n                  {{yield classes to=\"prepend\"}}\n                </:prepend>\n                <:append as |classes|>\n                  {{yield classes to=\"append\"}}\n                </:append>\n              </EuiRangeInput>\n            {{/if}}\n          {{/if}}\n        </EuiRangeWrapper>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiRangeComponent","Component","g","prototype","argOrDefaultDecorator","i","preventPopoverClose","tracked","args","id","guidFor","handleOnChange","e","isValid","isWithinRange","min","max","currentTarget","value","onChange","n","action","digitTolerance","Math","String","length","showInputOnly","showInput","canShowDropdown","readOnly","disabled","showRangeTooltip","showValue","undefined","onInputFocus","onFocus","isPopoverOpen","onInputBlur","later","onBlur","closePopover","setPreventPopover","val","setPreventPopoverClose","bool","setComponentTemplate","precompileTemplate","strictMode","scope","and","argOrDefault","not","EuiInputPopover","EuiRangeInput","on","optional","EuiRangeWrapper","classNames","EuiRangeLabel","EuiRangeTrack","eq","EuiRangeHighlight","castTo","EuiRangeSlider","fn","EuiRangeTooltip"],"mappings":"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"}
+{"version":3,"file":"eui-range.js","sources":["../../src/components/eui-range.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 { guidFor } from '@ember/object/internals';\nimport { later } from '@ember/runloop';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { and, eq, not } from 'ember-truth-helpers';\n\nimport argOrDefault, {\n  argOrDefaultDecorator\n} from '../helpers/arg-or-default.ts';\nimport castTo from '../helpers/cast-to.ts';\nimport classNames from '../helpers/class-names.ts';\nimport { isWithinRange } from '../utils/number/index.ts';\nimport EuiInputPopover from './eui-input-popover.gts';\nimport EuiRangeHighlight from './eui-range-highlight.gts';\nimport EuiRangeInput from './eui-range-input.gts';\nimport EuiRangeLabel from './eui-range-label.gts';\nimport EuiRangeSlider from './eui-range-slider.gts';\nimport EuiRangeTooltip from './eui-range-tooltip.gts';\nimport EuiRangeTrack from './eui-range-track.gts';\nimport EuiRangeWrapper from './eui-range-wrapper.gts';\n\nimport type { EuiRangeLevel } from './eui-range-levels';\nimport type { EuiRangeTick } from './eui-range-ticks';\n\nexport interface EuiRangeArgs {\n  /** Smaller slider, for dense forms. Defaults to `false`. */\n  compressed?: boolean;\n  /** Makes the number input read-only. */\n  readOnly?: boolean;\n  /** Stretches the slider to its container's width. Defaults to `false`. */\n  fullWidth?: boolean;\n  /** Id of the slider. Defaults to a generated id. */\n  id?: string;\n  /**\n   * Create colored indicators for certain intervals\n   */\n  levels?: EuiRangeLevel[];\n  /** Increment between values. Defaults to `1`. */\n  step?: number;\n  /**\n   * Pass `true` to displays an extra input control for direct manipulation.\n   * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.\n   */\n  showInput?: boolean | 'inputWithPopover';\n  /**\n   * Shows static min/max labels on the sides of the range slider.\n   * Defaults to `false`.\n   */\n  showLabels?: boolean;\n  /**\n   * Shows a thick line from min to value. Defaults to `false`.\n   */\n  showRange?: boolean;\n  /**\n   * Shows clickable tick marks and labels at the given interval\n   * (`step`/`tickInterval`). Defaults to `false`.\n   */\n  showTicks?: boolean;\n\n  /** Lowest selectable value. Defaults to `0`. */\n  min?: number;\n  /** Highest selectable value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Shows the value in a tooltip above the thumb. Defaults to `false`.\n   */\n  showValue?: boolean;\n  /**\n   * Specified ticks at specified values\n   */\n  ticks?: EuiRangeTick[];\n  /**\n   * Modifies the number of tick marks and at what interval\n   */\n  tickInterval?: number;\n  /**\n   * Appends to the tooltip\n   */\n  valueAppend?: any;\n  /**\n   * Prepends to the tooltip\n   */\n  valuePrepend?: any;\n\n  /**\n   * Called with the event (read `event.target.value`, a string) and whether\n   * the value is within `@min`/`@max`. Update `@value` here.\n   */\n  onChange?: (event: Event, isValid: boolean) => void;\n  /** Called when the slider or input loses focus. */\n  onBlur?: (event: Event) => void;\n  /** Called when the slider or input gets focus. */\n  onFocus?: (event: Event) => void;\n\n  /** The value. */\n  value?: number;\n\n  /** Disables the slider and input. */\n  disabled?: boolean;\n\n  /** @private Show the `<:prepend>` block. Defaults to `true`. */\n  isPrependProvided?: boolean;\n  /** @private Show the `<:append>` block. Defaults to `true`. */\n  isAppendProvided?: boolean;\n  /** @private Ignore the `<:max>` block. */\n  isFakeMaxBlock?: boolean;\n  /** @private Ignore the `<:min>` block. */\n  isFakeMinBlock?: boolean;\n  /** @private Ignore the `<:value>` block. */\n  isFakeValueBlock?: boolean;\n  /** @private Ignore the `<:valueAppend>` block. */\n  isFakeValueAppendBlock?: boolean;\n  /** @private Ignore the `<:valuePrepend>` block. */\n  isFakeValuePrependBlock?: boolean;\n  /** Shows the invalid state. */\n  isInvalid?: boolean;\n  /** `name` of the inputs, for forms. */\n  name?: string;\n  /** Shows a spinner in the number input. Defaults to `false`. */\n  isLoading?: boolean;\n}\n\n/**\n * A slider to pick a number, optionally with a number input, ticks,\n * levels and a value tooltip. For a range of two values use EuiDualRange.\n */\nexport interface EuiRangeSignature {\n  Element: HTMLInputElement;\n  Args: EuiRangeArgs;\n  Blocks: {\n    /** Custom min label (`@showLabels`); yields `@min`. */\n    min: [min: number];\n    /** Custom max label (`@showLabels`); yields `@max`. */\n    max: [max: number];\n    /** Custom value tooltip content (`@showValue`). */\n    value: [];\n    /** Content after the value in the tooltip, e.g. a unit. */\n    valueAppend: [];\n    /** Content before the value in the tooltip, e.g. a currency sign. */\n    valuePrepend: [];\n    /** Content before the number input (`@showInput`); yields its class. */\n    prepend: [classes: string];\n    /** Content after the number input (`@showInput`); yields its class. */\n    append: [classes: string];\n    /** Unused. */\n    input: [];\n    /** Unused. */\n    content: [];\n  };\n}\n\nexport default class EuiRangeComponent extends Component<EuiRangeSignature> {\n  // Defaults\n  @argOrDefaultDecorator(0) min!: number;\n  @argOrDefaultDecorator(100) max!: number;\n  @argOrDefaultDecorator(1) step!: number;\n  @argOrDefaultDecorator(false) fullWidth!: boolean;\n  @argOrDefaultDecorator(false) compressed!: boolean;\n  @argOrDefaultDecorator(false) isLoading!: boolean;\n  @argOrDefaultDecorator(false) showLabels!: boolean;\n  @argOrDefaultDecorator(false) showInput!: boolean | string;\n  @argOrDefaultDecorator(false) showRange!: boolean;\n  @argOrDefaultDecorator(false) showTicks!: boolean;\n  @argOrDefaultDecorator(false) showValue!: boolean;\n  @argOrDefaultDecorator([]) levels!: EuiRangeLevel[];\n\n  preventPopoverClose = false;\n\n  //State\n  @tracked id: string = this.args.id || guidFor({});\n  @tracked isPopoverOpen = false;\n  ///\n\n  @action\n  handleOnChange(e: Event): void {\n    const isValid = isWithinRange(\n      this.min,\n      this.max,\n      (e.currentTarget as HTMLInputElement).value\n    );\n\n    if (this.args.onChange) {\n      this.args.onChange(e, isValid);\n    }\n  }\n\n  get isValid(): boolean {\n    return isWithinRange(this.min, this.max, this.args.value ?? '');\n  }\n\n  get digitTolerance(): number {\n    return Math.max(String(this.min).length, String(this.max).length);\n  }\n\n  get showInputOnly(): boolean {\n    return this.showInput === 'inputWithPopover';\n  }\n\n  get canShowDropdown(): boolean {\n    return this.showInputOnly && !this.args.readOnly && !this.args.disabled;\n  }\n\n  get showRangeTooltip(): boolean {\n    return (\n      this.showValue &&\n      !!String(this.args.value).length &&\n      this.args.value !== undefined\n    );\n  }\n\n  @action\n  onInputFocus(e: Event): void {\n    if (this.args.onFocus) {\n      this.args.onFocus(e);\n    }\n\n    this.isPopoverOpen = true;\n  }\n\n  @action\n  onInputBlur(e: Event): void {\n    later(\n      this,\n      () => {\n        // Safari does not recognize any focus-related eventing for input[type=range]\n        // making it impossible to capture its state using active/focus/relatedTarget\n        // Instead, a prevention flag is set on mousedown, with a waiting period here.\n        // Mousedown is viable because in the popover case, it is inaccessible via keyboard (intentionally)\n        if (this.preventPopoverClose) {\n          this.preventPopoverClose = false;\n\n          return;\n        }\n\n        if (this.args.onBlur) {\n          this.args.onBlur(e);\n        }\n\n        this.closePopover();\n      },\n      200\n    );\n  }\n\n  @action\n  setPreventPopover(val: boolean): void {\n    this.preventPopoverClose = val;\n  }\n\n  @action\n  closePopover(): void {\n    this.preventPopoverClose = false;\n    this.isPopoverOpen = false;\n  }\n\n  @action\n  setPreventPopoverClose(bool: boolean): void {\n    this.preventPopoverClose = bool;\n  }\n\n  <template>\n    {{#let\n      (and (argOrDefault @isPrependProvided true) (has-block \"prepend\"))\n      (and (argOrDefault @isAppendProvided true) (has-block \"append\"))\n      (and (not (argOrDefault @isFakeMaxBlock false)) (has-block \"max\"))\n      (and (not (argOrDefault @isFakeMinBlock false)) (has-block \"min\"))\n      (and (not (argOrDefault @isFakeValueBlock false)) (has-block \"value\"))\n      (and\n        (not (argOrDefault @isFakeValueAppendBlock false))\n        (has-block \"valueAppend\")\n      )\n      (and\n        (not (argOrDefault @isFakeValuePrependBlock false))\n        (has-block \"valuePrepend\")\n      )\n      as |hasPrepend hasAppend hasMaxBlock hasMinBlock hasValueBlock hasValueAppendBlock hasValuePrependBlock|\n    }}\n      {{#if this.showInputOnly}}\n        <EuiInputPopover\n          class=\"euiRange__popover\"\n          @fullWidth={{@fullWidth}}\n          @isOpen={{this.isPopoverOpen}}\n          @closePopover={{this.closePopover}}\n          @disableFocusTrap={{true}}\n        >\n          <:input>\n            <EuiRangeInput\n              id={{this.id}}\n              @min={{this.min}}\n              @max={{this.max}}\n              @digitTolerance={{this.digitTolerance}}\n              @readOnly={{@readOnly}}\n              @step={{this.step}}\n              @value={{@value}}\n              @disabled={{@disabled}}\n              @compressed={{@compressed}}\n              @name={{@name}}\n              @fullWidth={{and this.showInputOnly this.fullWidth}}\n              @isLoading={{and this.showInputOnly @isLoading}}\n              @isInvalid={{@isInvalid}}\n              @autoSize={{not this.showInputOnly}}\n              @isPrependProvided={{hasPrepend}}\n              @isAppendProvided={{hasAppend}}\n              ...attributes\n              {{on\n                \"focus\"\n                (if this.canShowDropdown this.onInputFocus (optional @onFocus))\n              }}\n              {{on\n                \"blur\"\n                (if this.canShowDropdown this.onInputBlur (optional @onBlur))\n              }}\n              {{on \"input\" this.handleOnChange}}\n            >\n              <:prepend as |classes|>\n                {{yield classes to=\"prepend\"}}\n              </:prepend>\n              <:append as |classes|>\n                {{yield classes to=\"append\"}}\n              </:append>\n            </EuiRangeInput>\n          </:input>\n          <:content>\n            <EuiRangeWrapper\n              class={{classNames\n                \"euiRange\"\n                (if this.showInput \"euiRange--hasInput\")\n              }}\n              @fullWidth={{@fullWidth}}\n              @compressed={{@compressed}}\n            >\n              {{#if this.showLabels}}\n                <EuiRangeLabel @side=\"min\" @disabled={{@disabled}}>\n                  {{#if hasMinBlock}}\n                    {{yield this.min to=\"min\"}}\n                  {{else}}\n                    {{this.min}}\n                  {{/if}}\n                </EuiRangeLabel>\n              {{/if}}\n              <EuiRangeTrack\n                aria-hidden={{if (eq this.showInput true) \"true\"}}\n                @disabled={{@disabled}}\n                @compressed={{@compressed}}\n                @max={{this.max}}\n                @min={{this.min}}\n                @step={{this.step}}\n                @showTicks={{this.showTicks}}\n                @tickInterval={{@tickInterval}}\n                @ticks={{@ticks}}\n                @levels={{this.levels}}\n                @onChange={{this.handleOnChange}}\n                @value={{@value}}\n              >\n                {{#if (and this.showRange this.isValid)}}\n                  <EuiRangeHighlight\n                    @compressed={{@compressed}}\n                    @showTicks={{this.showTicks}}\n                    {{!@glint-expect-error}}\n                    @min={{castTo this.min to=\"number\"}}\n                    {{!@glint-expect-error}}\n                    @max={{castTo this.max to=\"number\"}}\n                    {{!@glint-expect-error}}\n                    @lowerValue={{castTo this.min to=\"number\"}}\n                    {{!@glint-expect-error}}\n                    @upperValue={{castTo @value to=\"number\"}}\n                  />\n                {{/if}}\n                <EuiRangeSlider\n                  aria-hidden={{if (eq this.showInput true) \"true\"}}\n                  tabindex={{if (eq this.showInput true) \"-1\"}}\n                  @id={{if this.showInput undefined this.id}}\n                  @name={{@name}}\n                  @min={{this.min}}\n                  @max={{this.max}}\n                  @step={{this.step}}\n                  @value={{@value}}\n                  @disabled={{@disabled}}\n                  @compressed={{@compressed}}\n                  @showTicks={{this.showTicks}}\n                  @showRange={{this.showRange}}\n                  ...attributes\n                  {{on\n                    \"mousedown\"\n                    (if\n                      this.showInputOnly\n                      (fn this.setPreventPopoverClose true)\n                      (optional)\n                    )\n                  }}\n                  {{on\n                    \"focus\"\n                    (if (eq this.showInput true) (optional) (optional @onFocus))\n                  }}\n                  {{on\n                    \"blur\"\n                    (if this.showInputOnly this.onInputBlur (optional @onBlur))\n                  }}\n                  {{on \"input\" this.handleOnChange}}\n                />\n                {{#if this.showRangeTooltip}}\n                  <EuiRangeTooltip\n                    @compressed={{@compressed}}\n                    @value={{@value}}\n                    @max={{this.max}}\n                    @min={{this.min}}\n                    @name={{@name}}\n                    @showTicks={{this.showTicks}}\n                  >\n                    <:valuePrepend>\n                      {{#if hasValuePrependBlock}}\n                        {{yield to=\"valuePrepend\"}}\n                      {{else}}\n                        {{@valuePrepend}}\n                      {{/if}}\n                    </:valuePrepend>\n                    <:value>\n                      {{#if hasValueBlock}}\n                        {{yield to=\"value\"}}\n                      {{else}}\n                        {{@value}}\n                      {{/if}}\n                    </:value>\n                    <:valueAppend>\n                      {{#if hasValueAppendBlock}}\n                        {{yield to=\"valueAppend\"}}\n                      {{else}}\n                        {{@valueAppend}}\n                      {{/if}}\n                    </:valueAppend>\n                  </EuiRangeTooltip>\n                {{/if}}\n              </EuiRangeTrack>\n              {{#if this.showLabels}}\n                <EuiRangeLabel @side=\"max\" @disabled={{@disabled}}>\n                  {{#if hasMaxBlock}}\n                    {{yield this.max to=\"max\"}}\n                  {{else}}\n                    {{this.max}}\n                  {{/if}}\n                </EuiRangeLabel>\n              {{/if}}\n              {{#if (and this.showInput (not this.showInputOnly))}}\n                <div class=\"euiRange__horizontalSpacer\"></div>\n                {{#if this.showInput}}\n                  <EuiRangeInput\n                    id={{this.id}}\n                    @min={{this.min}}\n                    @max={{this.max}}\n                    @digitTolerance={{this.digitTolerance}}\n                    @readOnly={{@readOnly}}\n                    @step={{this.step}}\n                    @value={{@value}}\n                    @disabled={{@disabled}}\n                    @compressed={{@compressed}}\n                    @name={{@name}}\n                    @fullWidth={{and this.showInputOnly this.fullWidth}}\n                    @isLoading={{and this.showInputOnly @isLoading}}\n                    @isInvalid={{@isInvalid}}\n                    @autoSize={{not this.showInputOnly}}\n                    @isPrependProvided={{hasPrepend}}\n                    @isAppendProvided={{hasAppend}}\n                    ...attributes\n                    {{on\n                      \"focus\"\n                      (if\n                        this.canShowDropdown\n                        this.onInputFocus\n                        (optional @onFocus)\n                      )\n                    }}\n                    {{on\n                      \"blur\"\n                      (if\n                        this.canShowDropdown this.onInputBlur (optional @onBlur)\n                      )\n                    }}\n                    {{on \"input\" this.handleOnChange}}\n                  >\n                    <:prepend as |classes|>\n                      {{yield classes to=\"prepend\"}}\n                    </:prepend>\n                    <:append as |classes|>\n                      {{yield classes to=\"append\"}}\n                    </:append>\n                  </EuiRangeInput>\n                {{/if}}\n              {{/if}}\n            </EuiRangeWrapper>\n          </:content>\n        </EuiInputPopover>\n      {{else}}\n        <EuiRangeWrapper\n          class={{classNames\n            \"euiRange\"\n            (if this.showInput \"euiRange--hasInput\")\n          }}\n          @fullWidth={{@fullWidth}}\n          @compressed={{@compressed}}\n        >\n          {{#if this.showLabels}}\n            <EuiRangeLabel @side=\"min\" @disabled={{@disabled}}>\n              {{#if hasMinBlock}}\n                {{yield this.min to=\"min\"}}\n              {{else}}\n                {{this.min}}\n              {{/if}}\n            </EuiRangeLabel>\n          {{/if}}\n          <EuiRangeTrack\n            aria-hidden={{if (eq this.showInput true) \"true\"}}\n            @disabled={{@disabled}}\n            @compressed={{@compressed}}\n            @max={{this.max}}\n            @min={{this.min}}\n            @step={{this.step}}\n            @showTicks={{this.showTicks}}\n            @tickInterval={{@tickInterval}}\n            @ticks={{@ticks}}\n            @levels={{this.levels}}\n            @onChange={{this.handleOnChange}}\n            @value={{@value}}\n          >\n            {{#if (and this.showRange this.isValid)}}\n              <EuiRangeHighlight\n                @compressed={{@compressed}}\n                @showTicks={{this.showTicks}}\n                {{!@glint-expect-error}}\n                @min={{castTo this.min to=\"number\"}}\n                {{!@glint-expect-error}}\n                @max={{castTo this.max to=\"number\"}}\n                {{!@glint-expect-error}}\n                @lowerValue={{castTo this.min to=\"number\"}}\n                {{!@glint-expect-error}}\n                @upperValue={{castTo @value to=\"number\"}}\n              />\n            {{/if}}\n            <EuiRangeSlider\n              aria-hidden={{if (eq this.showInput true) \"true\"}}\n              tabindex={{if (eq this.showInput true) \"-1\"}}\n              @id={{if this.showInput undefined this.id}}\n              @name={{@name}}\n              @min={{this.min}}\n              @max={{this.max}}\n              @step={{this.step}}\n              @value={{@value}}\n              @disabled={{@disabled}}\n              @compressed={{@compressed}}\n              @showTicks={{this.showTicks}}\n              @showRange={{this.showRange}}\n              ...attributes\n              {{on\n                \"mousedown\"\n                (if\n                  this.showInputOnly (fn this.setPreventPopover true) (optional)\n                )\n              }}\n              {{on\n                \"focus\"\n                (if (eq this.showInput true) (optional) (optional @onFocus))\n              }}\n              {{on\n                \"blur\"\n                (if this.showInputOnly this.onInputBlur (optional @onBlur))\n              }}\n              {{on \"input\" this.handleOnChange}}\n            />\n            {{#if this.showRangeTooltip}}\n              <EuiRangeTooltip\n                @compressed={{@compressed}}\n                @value={{@value}}\n                @max={{this.max}}\n                @min={{this.min}}\n                @name={{@name}}\n                @showTicks={{this.showTicks}}\n              >\n                <:valuePrepend>\n                  {{#if hasValuePrependBlock}}\n                    {{yield to=\"valuePrepend\"}}\n                  {{else}}\n                    {{@valuePrepend}}\n                  {{/if}}\n                </:valuePrepend>\n                <:value>\n                  {{#if hasValueBlock}}\n                    {{yield to=\"value\"}}\n                  {{else}}\n                    {{@value}}\n                  {{/if}}\n                </:value>\n                <:valueAppend>\n                  {{#if hasValueAppendBlock}}\n                    {{yield to=\"valueAppend\"}}\n                  {{else}}\n                    {{@valueAppend}}\n                  {{/if}}\n                </:valueAppend>\n              </EuiRangeTooltip>\n            {{/if}}\n          </EuiRangeTrack>\n          {{#if this.showLabels}}\n            <EuiRangeLabel @side=\"max\" @disabled={{@disabled}}>\n              {{#if hasMaxBlock}}\n                {{yield this.max to=\"max\"}}\n              {{else}}\n                {{this.max}}\n              {{/if}}\n            </EuiRangeLabel>\n          {{/if}}\n          {{#if (and this.showInput (not this.showInputOnly))}}\n            <div class=\"euiRange__horizontalSpacer\"></div>\n            {{#if this.showInput}}\n              <EuiRangeInput\n                id={{this.id}}\n                @min={{this.min}}\n                @max={{this.max}}\n                @digitTolerance={{this.digitTolerance}}\n                @readOnly={{@readOnly}}\n                @step={{this.step}}\n                @value={{@value}}\n                @disabled={{@disabled}}\n                @compressed={{@compressed}}\n                @name={{@name}}\n                @fullWidth={{and this.showInputOnly this.fullWidth}}\n                @isLoading={{and this.showInputOnly @isLoading}}\n                @isInvalid={{@isInvalid}}\n                @autoSize={{not this.showInputOnly}}\n                @isPrependProvided={{hasPrepend}}\n                @isAppendProvided={{hasAppend}}\n                ...attributes\n                {{on\n                  \"focus\"\n                  (if\n                    this.canShowDropdown this.onInputFocus (optional @onFocus)\n                  )\n                }}\n                {{on\n                  \"blur\"\n                  (if this.canShowDropdown this.onInputBlur (optional @onBlur))\n                }}\n                {{on \"input\" this.handleOnChange}}\n              >\n                <:prepend as |classes|>\n                  {{yield classes to=\"prepend\"}}\n                </:prepend>\n                <:append as |classes|>\n                  {{yield classes to=\"append\"}}\n                </:append>\n              </EuiRangeInput>\n            {{/if}}\n          {{/if}}\n        </EuiRangeWrapper>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiRangeComponent","Component","g","prototype","argOrDefaultDecorator","i","preventPopoverClose","tracked","args","id","guidFor","handleOnChange","e","isValid","isWithinRange","min","max","currentTarget","value","onChange","n","action","digitTolerance","Math","String","length","showInputOnly","showInput","canShowDropdown","readOnly","disabled","showRangeTooltip","showValue","undefined","onInputFocus","onFocus","isPopoverOpen","onInputBlur","later","onBlur","closePopover","setPreventPopover","val","setPreventPopoverClose","bool","setComponentTemplate","precompileTemplate","strictMode","scope","and","argOrDefault","not","EuiInputPopover","EuiRangeInput","on","optional","EuiRangeWrapper","classNames","EuiRangeLabel","EuiRangeTrack","eq","EuiRangeHighlight","castTo","EuiRangeSlider","fn","EuiRangeTooltip"],"mappings":"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"}

package/dist/components/eui-refresh-interval.js

@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
+import didUpdate from '@ember/render-modifiers/modifiers/did-update';
 import { randomId } from '../-private/random-id.js';
 import EuiButton from './eui-button.js';
 import EuiFieldNumber from './eui-field-number.js';
@@ -60,6 +61,7 @@ class EuiRefreshInterval extends Component {
     g(this.prototype, "units", [tracked]);
   }
   #units = (i(this, "units"), void 0);
+  lastAppliedInterval;
   legendId = `euiRefreshInterval_${randomId()}`;
   descriptionId = `euiRefreshInterval_${randomId()}`;
   constructor(owner, args) {
@@ -74,6 +76,23 @@ class EuiRefreshInterval extends Component {
   get isPaused() {
     return this.args.isPaused ?? true;
   }
+  syncInterval() {
+    const interval = this.args.refreshInterval ?? 1000;
+    // Preserve the user's units when the owner accepts an edit. Independent
+    // argument changes replace the local draft, including invalid/empty input.
+    if (interval !== this.lastAppliedInterval || this.value === '') {
+      const {
+        value,
+        units
+      } = fromMilliseconds(interval);
+      this.value = value;
+      this.units = units;
+    }
+    this.lastAppliedInterval = undefined;
+  }
+  static {
+    n(this.prototype, "syncInterval", [action]);
+  }
   t = (token, text, values) => this.euiI18n.lookupToken(token, text, values);
   get unitOptions() {
     return [{
@@ -99,6 +118,7 @@ class EuiRefreshInterval extends Component {
   apply() {
     if (this.value === '') return;
     const refreshInterval = toMilliseconds(this.units, this.value);
+    this.lastAppliedInterval = refreshInterval;
     this.args.applyRefreshInterval({
       refreshInterval,
       isPaused: refreshInterval <= 0 ? true : this.isPaused
@@ -141,9 +161,10 @@ class EuiRefreshInterval extends Component {
     n(this.prototype, "toggle", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<fieldset ...attributes>\n  <EuiTitle @size=\"xxxs\" @tagName=\"legend\" id={{this.legendId}}>\n    {{this.t \"euiRefreshInterval.legend\" \"Refresh every\"}}\n  </EuiTitle>\n  <EuiSpacer @size=\"s\" />\n  <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n    <EuiFlexItem>\n      <EuiFieldNumber @compressed={{true}} @value={{this.value}} aria-label=\"Refresh interval value\" aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\" data-test-subj=\"superDatePickerRefreshIntervalInput\" {{on \"input\" this.onValueInput}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n    <EuiFlexItem>\n      <EuiSelect @compressed={{true}} @value={{this.units}} @options={{this.unitOptions}} aria-label=\"Refresh interval units\" aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\" data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\" {{on \"change\" this.onUnitsChange}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      <EuiButton class=\"euiRefreshInterval__startButton\" @iconType={{if this.isPaused \"play\" \"stop\"}} @size=\"s\" @isDisabled={{this.isInvalid}} data-test-subj=\"superDatePickerToggleRefreshButton\" aria-describedby={{this.descriptionId}} {{on \"click\" this.toggle}}>\n        {{#if this.isPaused}}\n          {{this.t \"euiRefreshInterval.start\" \"Start\"}}\n        {{else}}\n          {{this.t \"euiRefreshInterval.stop\" \"Stop\"}}\n        {{/if}}\n      </EuiButton>\n    </EuiFlexItem>\n  </EuiFlexGroup>\n  <EuiScreenReaderOnly><p id={{this.descriptionId}}>{{this.description}}</p></EuiScreenReaderOnly>\n</fieldset>", {
+    setComponentTemplate(precompileTemplate("<fieldset {{didUpdate this.syncInterval @refreshInterval}} ...attributes>\n  <EuiTitle @size=\"xxxs\" @tagName=\"legend\" id={{this.legendId}}>\n    {{this.t \"euiRefreshInterval.legend\" \"Refresh every\"}}\n  </EuiTitle>\n  <EuiSpacer @size=\"s\" />\n  <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n    <EuiFlexItem>\n      <EuiFieldNumber @compressed={{true}} @value={{this.value}} aria-label=\"Refresh interval value\" aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\" data-test-subj=\"superDatePickerRefreshIntervalInput\" {{on \"input\" this.onValueInput}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n    <EuiFlexItem>\n      <EuiSelect @compressed={{true}} @value={{this.units}} @options={{this.unitOptions}} aria-label=\"Refresh interval units\" aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\" data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\" {{on \"change\" this.onUnitsChange}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      <EuiButton class=\"euiRefreshInterval__startButton\" @iconType={{if this.isPaused \"play\" \"stop\"}} @size=\"s\" @isDisabled={{this.isInvalid}} data-test-subj=\"superDatePickerToggleRefreshButton\" aria-describedby={{this.descriptionId}} {{on \"click\" this.toggle}}>\n        {{#if this.isPaused}}\n          {{this.t \"euiRefreshInterval.start\" \"Start\"}}\n        {{else}}\n          {{this.t \"euiRefreshInterval.stop\" \"Stop\"}}\n        {{/if}}\n      </EuiButton>\n    </EuiFlexItem>\n  </EuiFlexGroup>\n  <EuiScreenReaderOnly><p id={{this.descriptionId}}>{{this.description}}</p></EuiScreenReaderOnly>\n</fieldset>", {
       strictMode: true,
       scope: () => ({
+        didUpdate,
         EuiTitle,
         EuiSpacer,
         EuiFlexGroup,

package/dist/components/eui-refresh-interval.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-refresh-interval.js","sources":["../../src/components/eui-refresh-interval.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport { randomId } from '../-private/random-id.ts';\nimport EuiButton from './eui-button.gts';\nimport EuiFieldNumber from './eui-field-number.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\nimport EuiSelect from './eui-select.gts';\nimport EuiSpacer from './eui-spacer.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type Owner from '@ember/owner';\n\ntype Units = 's' | 'm' | 'h';\n\nconst SECOND = 1000;\nconst MINUTE = SECOND * 60;\nconst HOUR = MINUTE * 60;\n\nfunction fromMilliseconds(ms: number): { value: number; units: Units } {\n  const round = (value: number) => parseFloat(value.toFixed(2));\n\n  if (ms > HOUR) return { units: 'h', value: round(ms / HOUR) };\n  if (ms > MINUTE) return { units: 'm', value: round(ms / MINUTE) };\n\n  return { units: 's', value: round(ms / SECOND) };\n}\n\nfunction toMilliseconds(units: Units, value: number): number {\n  return Math.round(value * { h: HOUR, m: MINUTE, s: SECOND }[units]);\n}\n\n/**\n * \"Refresh every [5] [minutes] [Start / Stop]\": sets how often data\n * refreshes. `EuiSuperDatePicker` shows it in its quick select popover\n * when given `@onRefreshChange`; it also works on its own.\n */\nexport interface EuiRefreshIntervalSignature {\n  Element: HTMLFieldSetElement;\n  Args: {\n    /** Whether refreshing is stopped. Defaults to `true`. */\n    isPaused?: boolean;\n    /** The interval in milliseconds. Defaults to `1000`. */\n    refreshInterval?: number;\n    /** Called with `{ refreshInterval, isPaused }` after a change. */\n    applyRefreshInterval: (args: { refreshInterval: number; isPaused: boolean }) => void;\n  };\n}\n\nexport default class EuiRefreshInterval extends Component<EuiRefreshIntervalSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  // the fields, which may be empty or invalid while typing\n  @tracked value: number | '';\n  @tracked units: Units;\n\n  legendId = `euiRefreshInterval_${randomId()}`;\n  descriptionId = `euiRefreshInterval_${randomId()}`;\n\n  constructor(owner: Owner, args: EuiRefreshIntervalSignature['Args']) {\n    super(owner, args);\n\n    const { value, units } = fromMilliseconds(args.refreshInterval ?? 1000);\n\n    this.value = value;\n    this.units = units;\n  }\n\n  get isPaused(): boolean {\n    return this.args.isPaused ?? true;\n  }\n\n  t = (token: string, text: string, values?: Record<string, unknown>): string =>\n    this.euiI18n.lookupToken(token, text, values);\n\n  get unitOptions(): { value: Units; text: string }[] {\n    return [\n      { value: 's', text: this.t('euiTimeOptions.seconds', 'Seconds') },\n      { value: 'm', text: this.t('euiTimeOptions.minutes', 'Minutes') },\n      { value: 'h', text: this.t('euiTimeOptions.hours', 'Hours') }\n    ];\n  }\n\n  get description(): string {\n    return this.t(\n      'euiRefreshInterval.fullDescription',\n      'Refresh interval currently set to {optionValue} {optionText}.',\n      {\n        optionValue: this.value,\n        optionText: this.unitOptions.find((option) => option.value === this.units)?.text ?? ''\n      }\n    );\n  }\n\n  get isInvalid(): boolean {\n    return this.value === '' || this.value <= 0;\n  }\n\n  apply(): void {\n    if (this.value === '') return;\n\n    const refreshInterval = toMilliseconds(this.units, this.value);\n\n    this.args.applyRefreshInterval({\n      refreshInterval,\n      isPaused: refreshInterval <= 0 ? true : this.isPaused\n    });\n  }\n\n  @action\n  onValueInput(event: Event): void {\n    const value = parseFloat((event.target as HTMLInputElement).value);\n\n    this.value = isNaN(value) ? '' : value;\n    this.apply();\n  }\n\n  @action\n  onUnitsChange(event: Event): void {\n    this.units = (event.target as HTMLSelectElement).value as Units;\n    this.apply();\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    // Enter starts refreshing\n    if (event.key !== 'Enter' || this.isInvalid || this.value === '') return;\n\n    this.args.applyRefreshInterval({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: false\n    });\n  }\n\n  @action\n  toggle(): void {\n    if (this.value === '') return;\n\n    this.args.applyRefreshInterval({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: !this.isPaused\n    });\n  }\n\n  <template>\n    <fieldset ...attributes>\n      <EuiTitle @size=\"xxxs\" @tagName=\"legend\" id={{this.legendId}}>\n        {{this.t \"euiRefreshInterval.legend\" \"Refresh every\"}}\n      </EuiTitle>\n      <EuiSpacer @size=\"s\" />\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiFieldNumber\n            @compressed={{true}}\n            @value={{this.value}}\n            aria-label=\"Refresh interval value\"\n            aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\"\n            data-test-subj=\"superDatePickerRefreshIntervalInput\"\n            {{on \"input\" this.onValueInput}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem>\n          <EuiSelect\n            @compressed={{true}}\n            @value={{this.units}}\n            @options={{this.unitOptions}}\n            aria-label=\"Refresh interval units\"\n            aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\"\n            data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\"\n            {{on \"change\" this.onUnitsChange}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiButton\n            class=\"euiRefreshInterval__startButton\"\n            @iconType={{if this.isPaused \"play\" \"stop\"}}\n            @size=\"s\"\n            @isDisabled={{this.isInvalid}}\n            data-test-subj=\"superDatePickerToggleRefreshButton\"\n            aria-describedby={{this.descriptionId}}\n            {{on \"click\" this.toggle}}\n          >\n            {{#if this.isPaused}}\n              {{this.t \"euiRefreshInterval.start\" \"Start\"}}\n            {{else}}\n              {{this.t \"euiRefreshInterval.stop\" \"Stop\"}}\n            {{/if}}\n          </EuiButton>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <EuiScreenReaderOnly><p id={{this.descriptionId}}>{{this.description}}</p></EuiScreenReaderOnly>\n    </fieldset>\n  </template>\n}\n"],"names":["SECOND","MINUTE","HOUR","fromMilliseconds","ms","round","value","parseFloat","toFixed","units","toMilliseconds","Math","h","m","s","EuiRefreshInterval","Component","g","prototype","service","i","tracked","legendId","randomId","descriptionId","constructor","owner","args","refreshInterval","isPaused","t","token","text","values","euiI18n","lookupToken","unitOptions","description","optionValue","optionText","find","option","isInvalid","apply","applyRefreshInterval","onValueInput","event","target","isNaN","n","action","onUnitsChange","onKeyDown","key","toggle","setComponentTemplate","precompileTemplate","strictMode","scope","EuiTitle","EuiSpacer","EuiFlexGroup","EuiFlexItem","EuiFieldNumber","on","EuiSelect","EuiButton","EuiScreenReaderOnly"],"mappings":"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"}
+{"version":3,"file":"eui-refresh-interval.js","sources":["../../src/components/eui-refresh-interval.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\nimport didUpdate from '@ember/render-modifiers/modifiers/did-update';\n\nimport { randomId } from '../-private/random-id.ts';\nimport EuiButton from './eui-button.gts';\nimport EuiFieldNumber from './eui-field-number.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\nimport EuiSelect from './eui-select.gts';\nimport EuiSpacer from './eui-spacer.gts';\nimport EuiTitle from './eui-title.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type Owner from '@ember/owner';\n\ntype Units = 's' | 'm' | 'h';\n\nconst SECOND = 1000;\nconst MINUTE = SECOND * 60;\nconst HOUR = MINUTE * 60;\n\nfunction fromMilliseconds(ms: number): { value: number; units: Units } {\n  const round = (value: number) => parseFloat(value.toFixed(2));\n\n  if (ms > HOUR) return { units: 'h', value: round(ms / HOUR) };\n  if (ms > MINUTE) return { units: 'm', value: round(ms / MINUTE) };\n\n  return { units: 's', value: round(ms / SECOND) };\n}\n\nfunction toMilliseconds(units: Units, value: number): number {\n  return Math.round(value * { h: HOUR, m: MINUTE, s: SECOND }[units]);\n}\n\n/**\n * \"Refresh every [5] [minutes] [Start / Stop]\": sets how often data\n * refreshes. `EuiSuperDatePicker` shows it in its quick select popover\n * when given `@onRefreshChange`; it also works on its own.\n */\nexport interface EuiRefreshIntervalSignature {\n  Element: HTMLFieldSetElement;\n  Args: {\n    /** Whether refreshing is stopped. Defaults to `true`. */\n    isPaused?: boolean;\n    /** The interval in milliseconds. Defaults to `1000`. */\n    refreshInterval?: number;\n    /** Called with `{ refreshInterval, isPaused }` after a change. */\n    applyRefreshInterval: (args: { refreshInterval: number; isPaused: boolean }) => void;\n  };\n}\n\nexport default class EuiRefreshInterval extends Component<EuiRefreshIntervalSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  // the fields, which may be empty or invalid while typing\n  @tracked value: number | '';\n  @tracked units: Units;\n  private lastAppliedInterval?: number;\n\n  legendId = `euiRefreshInterval_${randomId()}`;\n  descriptionId = `euiRefreshInterval_${randomId()}`;\n\n  constructor(owner: Owner, args: EuiRefreshIntervalSignature['Args']) {\n    super(owner, args);\n\n    const { value, units } = fromMilliseconds(args.refreshInterval ?? 1000);\n\n    this.value = value;\n    this.units = units;\n  }\n\n  get isPaused(): boolean {\n    return this.args.isPaused ?? true;\n  }\n\n  @action\n  syncInterval(): void {\n    const interval = this.args.refreshInterval ?? 1000;\n\n    // Preserve the user's units when the owner accepts an edit. Independent\n    // argument changes replace the local draft, including invalid/empty input.\n    if (interval !== this.lastAppliedInterval || this.value === '') {\n      const { value, units } = fromMilliseconds(interval);\n      this.value = value;\n      this.units = units;\n    }\n\n    this.lastAppliedInterval = undefined;\n  }\n\n  t = (token: string, text: string, values?: Record<string, unknown>): string =>\n    this.euiI18n.lookupToken(token, text, values);\n\n  get unitOptions(): { value: Units; text: string }[] {\n    return [\n      { value: 's', text: this.t('euiTimeOptions.seconds', 'Seconds') },\n      { value: 'm', text: this.t('euiTimeOptions.minutes', 'Minutes') },\n      { value: 'h', text: this.t('euiTimeOptions.hours', 'Hours') }\n    ];\n  }\n\n  get description(): string {\n    return this.t(\n      'euiRefreshInterval.fullDescription',\n      'Refresh interval currently set to {optionValue} {optionText}.',\n      {\n        optionValue: this.value,\n        optionText: this.unitOptions.find((option) => option.value === this.units)?.text ?? ''\n      }\n    );\n  }\n\n  get isInvalid(): boolean {\n    return this.value === '' || this.value <= 0;\n  }\n\n  apply(): void {\n    if (this.value === '') return;\n\n    const refreshInterval = toMilliseconds(this.units, this.value);\n    this.lastAppliedInterval = refreshInterval;\n\n    this.args.applyRefreshInterval({\n      refreshInterval,\n      isPaused: refreshInterval <= 0 ? true : this.isPaused\n    });\n  }\n\n  @action\n  onValueInput(event: Event): void {\n    const value = parseFloat((event.target as HTMLInputElement).value);\n\n    this.value = isNaN(value) ? '' : value;\n    this.apply();\n  }\n\n  @action\n  onUnitsChange(event: Event): void {\n    this.units = (event.target as HTMLSelectElement).value as Units;\n    this.apply();\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    // Enter starts refreshing\n    if (event.key !== 'Enter' || this.isInvalid || this.value === '') return;\n\n    this.args.applyRefreshInterval({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: false\n    });\n  }\n\n  @action\n  toggle(): void {\n    if (this.value === '') return;\n\n    this.args.applyRefreshInterval({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: !this.isPaused\n    });\n  }\n\n  <template>\n    <fieldset {{didUpdate this.syncInterval @refreshInterval}} ...attributes>\n      <EuiTitle @size=\"xxxs\" @tagName=\"legend\" id={{this.legendId}}>\n        {{this.t \"euiRefreshInterval.legend\" \"Refresh every\"}}\n      </EuiTitle>\n      <EuiSpacer @size=\"s\" />\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiFieldNumber\n            @compressed={{true}}\n            @value={{this.value}}\n            aria-label=\"Refresh interval value\"\n            aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\"\n            data-test-subj=\"superDatePickerRefreshIntervalInput\"\n            {{on \"input\" this.onValueInput}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem>\n          <EuiSelect\n            @compressed={{true}}\n            @value={{this.units}}\n            @options={{this.unitOptions}}\n            aria-label=\"Refresh interval units\"\n            aria-describedby=\"{{this.descriptionId}} {{this.legendId}}\"\n            data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\"\n            {{on \"change\" this.onUnitsChange}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          <EuiButton\n            class=\"euiRefreshInterval__startButton\"\n            @iconType={{if this.isPaused \"play\" \"stop\"}}\n            @size=\"s\"\n            @isDisabled={{this.isInvalid}}\n            data-test-subj=\"superDatePickerToggleRefreshButton\"\n            aria-describedby={{this.descriptionId}}\n            {{on \"click\" this.toggle}}\n          >\n            {{#if this.isPaused}}\n              {{this.t \"euiRefreshInterval.start\" \"Start\"}}\n            {{else}}\n              {{this.t \"euiRefreshInterval.stop\" \"Stop\"}}\n            {{/if}}\n          </EuiButton>\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <EuiScreenReaderOnly><p id={{this.descriptionId}}>{{this.description}}</p></EuiScreenReaderOnly>\n    </fieldset>\n  </template>\n}\n"],"names":["SECOND","MINUTE","HOUR","fromMilliseconds","ms","round","value","parseFloat","toFixed","units","toMilliseconds","Math","h","m","s","EuiRefreshInterval","Component","g","prototype","service","i","tracked","lastAppliedInterval","legendId","randomId","descriptionId","constructor","owner","args","refreshInterval","isPaused","syncInterval","interval","undefined","n","action","t","token","text","values","euiI18n","lookupToken","unitOptions","description","optionValue","optionText","find","option","isInvalid","apply","applyRefreshInterval","onValueInput","event","target","isNaN","onUnitsChange","onKeyDown","key","toggle","setComponentTemplate","precompileTemplate","strictMode","scope","didUpdate","EuiTitle","EuiSpacer","EuiFlexGroup","EuiFlexItem","EuiFieldNumber","on","EuiSelect","EuiButton","EuiScreenReaderOnly"],"mappings":"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"}

package/dist/components/eui-tabbed-content.js

@@ -66,7 +66,7 @@ class EuiTabbedContentComponent extends Component {
     const currentTarget = blurEvent.currentTarget;
     const relatedTarget = blurEvent.relatedTarget;
     if (currentTarget.contains(relatedTarget) === false) {
-      this.inFocus = true;
+      this.inFocus = false;
     }
   };
   onTabClick = selectedTab => {
@@ -87,9 +87,10 @@ class EuiTabbedContentComponent extends Component {
     }
   };
   focusTab = () => {
-    if (this.tabsRef) {
-      const targetTab = this.tabsRef.querySelector(`#${this.selectedTabId}`);
-      targetTab.focus();
+    const selectedTab = this.selectedTab;
+    if (this.tabsRef && selectedTab) {
+      const targetTab = this.tabsRef.querySelector(`#${CSS.escape(selectedTab.id)}`);
+      targetTab?.focus();
     }
   };
   initializeFocus = () => {
@@ -104,7 +105,7 @@ class EuiTabbedContentComponent extends Component {
     }
   };
   static {
-    setComponentTemplate(precompileTemplate("{{#let (randomId) as |rootId|}}\n  <div class={{@className}} ...attributes>\n    <EuiTabs @expand={{@expand}} @display={{@display}} @size={{@size}} {{on \"focus\" this.initializeFocus}} {{didInsert this.setTabsRef}}>\n      {{#each @tabs as |tab|}}\n        <EuiTab @id={{tab.id}} aria-controls={{rootId}} @isSelected={{eq tab.id this.selectedTab.id}} @disabled={{tab.disabled}} {{on \"click\" (fn this.onTabClick tab)}}>\n          {{tab.name}}\n        </EuiTab>\n      {{/each}}\n    </EuiTabs>\n\n    {{#let (findBy \"id\" (if this.selectedTabId this.selectedTabId \"\") @tabs) as |currentTab|}}\n      {{#if currentTab}}\n        <div role=\"tabpanel\" id={{rootId}} aria-labelledby={{currentTab.id}}>\n          {{#if (has-block \"selectedTabContent\")}}\n            {{yield currentTab to=\"selectedTabContent\"}}\n          {{else}}\n            {{currentTab.content}}\n          {{/if}}\n        </div>\n      {{/if}}\n    {{/let}}\n  </div>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("{{#let (randomId) as |rootId|}}\n  <div class={{@className}} ...attributes>\n    <EuiTabs @expand={{@expand}} @display={{@display}} @size={{@size}} {{on \"focusin\" this.initializeFocus}} {{didInsert this.setTabsRef}}>\n      {{#each @tabs as |tab|}}\n        <EuiTab @id={{tab.id}} aria-controls={{rootId}} @isSelected={{eq tab.id this.selectedTab.id}} @disabled={{tab.disabled}} {{on \"click\" (fn this.onTabClick tab)}}>\n          {{tab.name}}\n        </EuiTab>\n      {{/each}}\n    </EuiTabs>\n\n    {{#let (findBy \"id\" (if this.selectedTab this.selectedTab.id \"\") @tabs) as |currentTab|}}\n      {{#if currentTab}}\n        <div role=\"tabpanel\" id={{rootId}} aria-labelledby={{currentTab.id}}>\n          {{#if (has-block \"selectedTabContent\")}}\n            {{yield currentTab to=\"selectedTabContent\"}}\n          {{else}}\n            {{currentTab.content}}\n          {{/if}}\n        </div>\n      {{/if}}\n    {{/let}}\n  </div>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         randomId,

package/dist/components/eui-tabbed-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-tabbed-content.js","sources":["../../src/components/eui-tabbed-content.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport { scheduleOnce } from '@ember/runloop';\nimport type Owner from '@ember/owner';\n\nimport findBy from '@nullvoxpopuli/ember-composable-helpers/helpers/find-by';\nimport { eq } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiTab from './eui-tab.gts';\nimport EuiTabs from './eui-tabs.gts';\n\nimport type { CommonArgs } from './common.ts';\nimport type { EuiTabsSignature } from './eui-tabs';\nimport type { ComponentLike } from '@glint/template';\n\n/** A tab of EuiTabbedContent. */\nexport interface EuiTabbedContentTab {\n  /** Unique id. */\n  id: string;\n  /** The tab's label. */\n  name: string;\n  /**\n   * The panel shown while the tab is selected (a component). Or render\n   * panels with the `<:selectedTabContent>` block.\n   */\n  content?: ComponentLike;\n  /** Disables the tab. */\n  disabled?: boolean;\n}\n\nexport type EuiTabbedContentArgs = CommonArgs & {\n  /**\n   * When tabbing into the tabs, set the focus on `initial` for the first tab,\n   * or `selected` for the currently selected tab. Best use case is for inside of\n   * overlay content like popovers or flyouts.\n   */\n  autoFocus?: 'initial' | 'selected';\n  /**\n   * Choose `default` or alternative `condensed` display styles\n   */\n  display?: EuiTabsSignature['Args']['display'];\n  /**\n   * Evenly stretches each tab to fill the horizontal space\n   */\n  expand?: boolean;\n  /**\n   * Use this prop to set the initially selected tab while letting the tabbed content component\n   * control selection state internally\n   */\n  initialSelectedTab?: EuiTabbedContentTab;\n  /** Called with the clicked tab. */\n  onTabClick?: (selectedTab: EuiTabbedContentTab) => void;\n  /**\n   * Use this prop if you want to control selection state within the owner component\n   */\n  selectedTab?: EuiTabbedContentTab;\n  /** Size of the tabs: `'s'`, `'m'`, `'l'` or `'xl'`. Defaults to `'m'`. */\n  size?: EuiTabsSignature['Args']['size'];\n  /**\n   * Each tab needs id and content properties, so we can associate it with its panel for accessibility.\n   * The name property (a node) is also required to display to the user.\n   */\n  tabs: EuiTabbedContentTab[];\n};\n\n/** Tabs with their panels, managing the selected tab for you. For custom layouts use EuiTabs. */\nexport interface EuiTabbedContentSignature {\n  Element: HTMLDivElement;\n  Args: EuiTabbedContentArgs;\n  Blocks: {\n    /** Unused. */\n    default: [EuiTabbedContentTab];\n    /**\n     * Renders the selected tab's panel (instead of its `content`); yields\n     * the tab: `<:selectedTabContent as |tab|>{{#if (eq tab.id \"a\")}}…`.\n     */\n    selectedTabContent: [EuiTabbedContentTab];\n  };\n}\n\nexport default class EuiTabbedContentComponent extends Component<EuiTabbedContentSignature> {\n  @tracked selectedTabId;\n  @tracked inFocus: boolean = false;\n  tabsRef?: Element;\n\n  get autoFocus() {\n    return this.args.autoFocus || 'initial';\n  }\n\n  constructor(owner: Owner, args: EuiTabbedContentArgs) {\n    super(owner, args);\n\n    const { initialSelectedTab, selectedTab, tabs } = this.args;\n\n    // Only track selection state if it's not controlled externally.\n    if (!selectedTab) {\n      this.selectedTabId =\n        (initialSelectedTab && initialSelectedTab.id) || tabs[0]?.id;\n    }\n  }\n\n  get selectedTab() {\n    const { selectedTab: externalSelectedTab, tabs } = this.args;\n\n    return (\n      externalSelectedTab ||\n      tabs.find((tab: EuiTabbedContentTab) => tab.id === this.selectedTabId)\n    );\n  }\n\n  setTabsRef = (element: Element) => {\n    this.tabsRef = element;\n    // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)\n    //@ts-expect-error\n    this.tabsRef.addEventListener('focusout', this.removeFocus);\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    if (this.tabsRef) {\n      //@ts-expect-error\n      this.tabsRef.removeEventListener('focusout', this.removeFocus);\n    }\n\n    this.tabsRef = undefined;\n  }\n\n  removeFocus = (blurEvent: FocusEvent) => {\n    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element\n    const currentTarget = blurEvent.currentTarget! as HTMLElement;\n    const relatedTarget = blurEvent.relatedTarget! as HTMLElement;\n\n    if (currentTarget.contains(relatedTarget) === false) {\n      this.inFocus = true;\n    }\n  };\n\n  onTabClick = (selectedTab: EuiTabbedContentTab) => {\n    const { onTabClick, selectedTab: externalSelectedTab } = this.args;\n\n    if (onTabClick) {\n      onTabClick(selectedTab);\n    }\n\n    // Only track selection state if it's not controlled externally.\n    if (!externalSelectedTab) {\n      this.selectedTabId = selectedTab.id;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  focusTab = () => {\n    if (this.tabsRef) {\n      const targetTab: HTMLDivElement | null = this.tabsRef.querySelector(\n        `#${this.selectedTabId}`\n      );\n\n      targetTab!.focus();\n    }\n  };\n\n  initializeFocus = () => {\n    if (!this.inFocus && this.autoFocus === 'selected') {\n      // Must wait for setState to finish before calling `.focus()`\n      // as the focus call triggers a blur on the first tab\n      this.inFocus = true;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  <template>\n    {{#let (randomId) as |rootId|}}\n      <div class={{@className}} ...attributes>\n        <EuiTabs\n          @expand={{@expand}}\n          @display={{@display}}\n          @size={{@size}}\n          {{on \"focus\" this.initializeFocus}}\n          {{didInsert this.setTabsRef}}\n        >\n          {{#each @tabs as |tab|}}\n            <EuiTab\n              @id={{tab.id}}\n              aria-controls={{rootId}}\n              @isSelected={{eq tab.id this.selectedTab.id}}\n              @disabled={{tab.disabled}}\n              {{on \"click\" (fn this.onTabClick tab)}}\n            >\n              {{tab.name}}\n            </EuiTab>\n          {{/each}}\n        </EuiTabs>\n\n        {{#let\n          (findBy \"id\" (if this.selectedTabId this.selectedTabId \"\") @tabs)\n          as |currentTab|\n        }}\n          {{#if currentTab}}\n            <div\n              role=\"tabpanel\"\n              id={{rootId}}\n              aria-labelledby={{currentTab.id}}\n            >\n              {{#if (has-block \"selectedTabContent\")}}\n                {{yield currentTab to=\"selectedTabContent\"}}\n              {{else}}\n                {{currentTab.content}}\n              {{/if}}\n            </div>\n          {{/if}}\n        {{/let}}\n      </div>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiTabbedContentComponent","Component","g","prototype","tracked","i","tabsRef","autoFocus","args","constructor","owner","initialSelectedTab","selectedTab","tabs","selectedTabId","id","externalSelectedTab","find","tab","setTabsRef","element","addEventListener","removeFocus","willDestroy","removeEventListener","undefined","blurEvent","currentTarget","relatedTarget","contains","inFocus","onTabClick","focusTab","scheduleOnce","targetTab","querySelector","focus","initializeFocus","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","EuiTabs","on","didInsert","EuiTab","eq","fn","findBy"],"mappings":"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"}
+{"version":3,"file":"eui-tabbed-content.js","sources":["../../src/components/eui-tabbed-content.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport { scheduleOnce } from '@ember/runloop';\nimport type Owner from '@ember/owner';\n\nimport findBy from '@nullvoxpopuli/ember-composable-helpers/helpers/find-by';\nimport { eq } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport EuiTab from './eui-tab.gts';\nimport EuiTabs from './eui-tabs.gts';\n\nimport type { CommonArgs } from './common.ts';\nimport type { EuiTabsSignature } from './eui-tabs';\nimport type { ComponentLike } from '@glint/template';\n\n/** A tab of EuiTabbedContent. */\nexport interface EuiTabbedContentTab {\n  /** Unique id. */\n  id: string;\n  /** The tab's label. */\n  name: string;\n  /**\n   * The panel shown while the tab is selected (a component). Or render\n   * panels with the `<:selectedTabContent>` block.\n   */\n  content?: ComponentLike;\n  /** Disables the tab. */\n  disabled?: boolean;\n}\n\nexport type EuiTabbedContentArgs = CommonArgs & {\n  /**\n   * When tabbing into the tabs, set the focus on `initial` for the first tab,\n   * or `selected` for the currently selected tab. Best use case is for inside of\n   * overlay content like popovers or flyouts.\n   */\n  autoFocus?: 'initial' | 'selected';\n  /**\n   * Choose `default` or alternative `condensed` display styles\n   */\n  display?: EuiTabsSignature['Args']['display'];\n  /**\n   * Evenly stretches each tab to fill the horizontal space\n   */\n  expand?: boolean;\n  /**\n   * Use this prop to set the initially selected tab while letting the tabbed content component\n   * control selection state internally\n   */\n  initialSelectedTab?: EuiTabbedContentTab;\n  /** Called with the clicked tab. */\n  onTabClick?: (selectedTab: EuiTabbedContentTab) => void;\n  /**\n   * Use this prop if you want to control selection state within the owner component\n   */\n  selectedTab?: EuiTabbedContentTab;\n  /** Size of the tabs: `'s'`, `'m'`, `'l'` or `'xl'`. Defaults to `'m'`. */\n  size?: EuiTabsSignature['Args']['size'];\n  /**\n   * Each tab needs id and content properties, so we can associate it with its panel for accessibility.\n   * The name property (a node) is also required to display to the user.\n   */\n  tabs: EuiTabbedContentTab[];\n};\n\n/** Tabs with their panels, managing the selected tab for you. For custom layouts use EuiTabs. */\nexport interface EuiTabbedContentSignature {\n  Element: HTMLDivElement;\n  Args: EuiTabbedContentArgs;\n  Blocks: {\n    /** Unused. */\n    default: [EuiTabbedContentTab];\n    /**\n     * Renders the selected tab's panel (instead of its `content`); yields\n     * the tab: `<:selectedTabContent as |tab|>{{#if (eq tab.id \"a\")}}…`.\n     */\n    selectedTabContent: [EuiTabbedContentTab];\n  };\n}\n\nexport default class EuiTabbedContentComponent extends Component<EuiTabbedContentSignature> {\n  @tracked selectedTabId;\n  @tracked inFocus: boolean = false;\n  tabsRef?: Element;\n\n  get autoFocus() {\n    return this.args.autoFocus || 'initial';\n  }\n\n  constructor(owner: Owner, args: EuiTabbedContentArgs) {\n    super(owner, args);\n\n    const { initialSelectedTab, selectedTab, tabs } = this.args;\n\n    // Only track selection state if it's not controlled externally.\n    if (!selectedTab) {\n      this.selectedTabId =\n        (initialSelectedTab && initialSelectedTab.id) || tabs[0]?.id;\n    }\n  }\n\n  get selectedTab() {\n    const { selectedTab: externalSelectedTab, tabs } = this.args;\n\n    return (\n      externalSelectedTab ||\n      tabs.find((tab: EuiTabbedContentTab) => tab.id === this.selectedTabId)\n    );\n  }\n\n  setTabsRef = (element: Element) => {\n    this.tabsRef = element;\n    // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)\n    //@ts-expect-error\n    this.tabsRef.addEventListener('focusout', this.removeFocus);\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    if (this.tabsRef) {\n      //@ts-expect-error\n      this.tabsRef.removeEventListener('focusout', this.removeFocus);\n    }\n\n    this.tabsRef = undefined;\n  }\n\n  removeFocus = (blurEvent: FocusEvent) => {\n    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element\n    const currentTarget = blurEvent.currentTarget! as HTMLElement;\n    const relatedTarget = blurEvent.relatedTarget! as HTMLElement;\n\n    if (currentTarget.contains(relatedTarget) === false) {\n      this.inFocus = false;\n    }\n  };\n\n  onTabClick = (selectedTab: EuiTabbedContentTab) => {\n    const { onTabClick, selectedTab: externalSelectedTab } = this.args;\n\n    if (onTabClick) {\n      onTabClick(selectedTab);\n    }\n\n    // Only track selection state if it's not controlled externally.\n    if (!externalSelectedTab) {\n      this.selectedTabId = selectedTab.id;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  focusTab = () => {\n    const selectedTab = this.selectedTab;\n\n    if (this.tabsRef && selectedTab) {\n      const targetTab = this.tabsRef.querySelector<HTMLElement>(\n        `#${CSS.escape(selectedTab.id)}`\n      );\n\n      targetTab?.focus();\n    }\n  };\n\n  initializeFocus = () => {\n    if (!this.inFocus && this.autoFocus === 'selected') {\n      // Must wait for setState to finish before calling `.focus()`\n      // as the focus call triggers a blur on the first tab\n      this.inFocus = true;\n\n      const focusTab = () => {\n        this.focusTab();\n      };\n\n      scheduleOnce('afterRender', this, focusTab);\n    }\n  };\n\n  <template>\n    {{#let (randomId) as |rootId|}}\n      <div class={{@className}} ...attributes>\n        <EuiTabs\n          @expand={{@expand}}\n          @display={{@display}}\n          @size={{@size}}\n          {{on \"focusin\" this.initializeFocus}}\n          {{didInsert this.setTabsRef}}\n        >\n          {{#each @tabs as |tab|}}\n            <EuiTab\n              @id={{tab.id}}\n              aria-controls={{rootId}}\n              @isSelected={{eq tab.id this.selectedTab.id}}\n              @disabled={{tab.disabled}}\n              {{on \"click\" (fn this.onTabClick tab)}}\n            >\n              {{tab.name}}\n            </EuiTab>\n          {{/each}}\n        </EuiTabs>\n\n        {{#let\n          (findBy \"id\" (if this.selectedTab this.selectedTab.id \"\") @tabs)\n          as |currentTab|\n        }}\n          {{#if currentTab}}\n            <div\n              role=\"tabpanel\"\n              id={{rootId}}\n              aria-labelledby={{currentTab.id}}\n            >\n              {{#if (has-block \"selectedTabContent\")}}\n                {{yield currentTab to=\"selectedTabContent\"}}\n              {{else}}\n                {{currentTab.content}}\n              {{/if}}\n            </div>\n          {{/if}}\n        {{/let}}\n      </div>\n    {{/let}}\n  </template>\n}\n"],"names":["EuiTabbedContentComponent","Component","g","prototype","tracked","i","tabsRef","autoFocus","args","constructor","owner","initialSelectedTab","selectedTab","tabs","selectedTabId","id","externalSelectedTab","find","tab","setTabsRef","element","addEventListener","removeFocus","willDestroy","removeEventListener","undefined","blurEvent","currentTarget","relatedTarget","contains","inFocus","onTabClick","focusTab","scheduleOnce","targetTab","querySelector","CSS","escape","focus","initializeFocus","setComponentTemplate","precompileTemplate","strictMode","scope","randomId","EuiTabs","on","didInsert","EuiTab","eq","fn","findBy"],"mappings":"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"}

package/dist/helpers/eui-page-restrict-width.js

@@ -11,7 +11,7 @@ function restrictWidth(restrictWidth, style) {
     widthClassName = 'restrictWidth-custom';
     newStyle = {
       ...newStyle,
-      maxWidth: restrictWidth
+      maxWidth: typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth
     };
   }
   return {

package/dist/helpers/eui-page-restrict-width.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-page-restrict-width.js","sources":["../../src/helpers/eui-page-restrict-width.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nexport type _EuiPageRestrictWidth = {\n  /**\n   * Sets the max-width of the page,\n   * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,\n   * set to `false` to not restrict the width,\n   * set to a number for a custom width in px,\n   * set to a string for a custom width in custom measurement.\n   */\n  restrictWidth?: boolean | number | string;\n};\n\nexport function restrictWidth(\n  restrictWidth: _EuiPageRestrictWidth['restrictWidth'],\n  style?: Record<string, unknown>\n) {\n  let widthClassName;\n  let newStyle = {\n    ...(style || {})\n  };\n\n  if (restrictWidth === true) {\n    widthClassName = 'restrictWidth-default';\n  } else if (restrictWidth !== false) {\n    widthClassName = 'restrictWidth-custom';\n    newStyle = { ...newStyle, maxWidth: restrictWidth };\n  }\n\n  return { widthClassName, newStyle };\n}\n\nexport default helper(function ([restrict, style]: [\n  _EuiPageRestrictWidth['restrictWidth'],\n  Record<string, unknown> | undefined\n]) {\n  return restrictWidth(restrict, style);\n});\n"],"names":["restrictWidth","style","widthClassName","newStyle","maxWidth","helper","restrict"],"mappings":";;AAaO,SAASA,aAAaA,CAC3BA,aAAqD,EACrDC,KAA+B,EAC/B;AACA,EAAA,IAAIC,cAAc;AAClB,EAAA,IAAIC,QAAQ,GAAG;IACb,IAAIF,KAAK,IAAI,EAAE;GAChB;EAED,IAAID,aAAa,KAAK,IAAI,EAAE;AAC1BE,IAAAA,cAAc,GAAG,uBAAuB;AAC1C,EAAA,CAAC,MAAM,IAAIF,aAAa,KAAK,KAAK,EAAE;AAClCE,IAAAA,cAAc,GAAG,sBAAsB;AACvCC,IAAAA,QAAQ,GAAG;AAAE,MAAA,GAAGA,QAAQ;AAAEC,MAAAA,QAAQ,EAAEJ;KAAe;AACrD,EAAA;EAEA,OAAO;IAAEE,cAAc;AAAEC,IAAAA;GAAU;AACrC;AAEA,2BAAeE,MAAM,CAAC,UAAU,CAACC,QAAQ,EAAEL,KAAK,CAG/C,EAAE;AACD,EAAA,OAAOD,aAAa,CAACM,QAAQ,EAAEL,KAAK,CAAC;AACvC,CAAC,CAAC;;"}
+{"version":3,"file":"eui-page-restrict-width.js","sources":["../../src/helpers/eui-page-restrict-width.ts"],"sourcesContent":["import { helper } from '@ember/component/helper';\n\nexport type _EuiPageRestrictWidth = {\n  /**\n   * Sets the max-width of the page,\n   * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,\n   * set to `false` to not restrict the width,\n   * set to a number for a custom width in px,\n   * set to a string for a custom width in custom measurement.\n   */\n  restrictWidth?: boolean | number | string;\n};\n\nexport function restrictWidth(\n  restrictWidth: _EuiPageRestrictWidth['restrictWidth'],\n  style?: Record<string, unknown>\n) {\n  let widthClassName;\n  let newStyle = {\n    ...(style || {})\n  };\n\n  if (restrictWidth === true) {\n    widthClassName = 'restrictWidth-default';\n  } else if (restrictWidth !== false) {\n    widthClassName = 'restrictWidth-custom';\n    newStyle = {\n      ...newStyle,\n      maxWidth:\n        typeof restrictWidth === 'number' ? `${restrictWidth}px` : restrictWidth\n    };\n  }\n\n  return { widthClassName, newStyle };\n}\n\nexport default helper(function ([restrict, style]: [\n  _EuiPageRestrictWidth['restrictWidth'],\n  Record<string, unknown> | undefined\n]) {\n  return restrictWidth(restrict, style);\n});\n"],"names":["restrictWidth","style","widthClassName","newStyle","maxWidth","helper","restrict"],"mappings":";;AAaO,SAASA,aAAaA,CAC3BA,aAAqD,EACrDC,KAA+B,EAC/B;AACA,EAAA,IAAIC,cAAc;AAClB,EAAA,IAAIC,QAAQ,GAAG;IACb,IAAIF,KAAK,IAAI,EAAE;GAChB;EAED,IAAID,aAAa,KAAK,IAAI,EAAE;AAC1BE,IAAAA,cAAc,GAAG,uBAAuB;AAC1C,EAAA,CAAC,MAAM,IAAIF,aAAa,KAAK,KAAK,EAAE;AAClCE,IAAAA,cAAc,GAAG,sBAAsB;AACvCC,IAAAA,QAAQ,GAAG;AACT,MAAA,GAAGA,QAAQ;MACXC,QAAQ,EACN,OAAOJ,aAAa,KAAK,QAAQ,GAAG,CAAA,EAAGA,aAAa,CAAA,EAAA,CAAI,GAAGA;KAC9D;AACH,EAAA;EAEA,OAAO;IAAEE,cAAc;AAAEC,IAAAA;GAAU;AACrC;AAEA,2BAAeE,MAAM,CAAC,UAAU,CAACC,QAAQ,EAAEL,KAAK,CAG/C,EAAE;AACD,EAAA,OAAOD,aAAa,CAACM,QAAQ,EAAEL,KAAK,CAAC;AACvC,CAAC,CAAC;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "14.1.2",
+  "version": "14.1.4",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",