@ember-eui/core 14.1.4 → 16.0.0

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":";;;;;;;;;;;;;;;;;;;;;;;;;AA4Je,MAAMA,0BAA0BC,SAAA,CAAU;AAAA,EAAA;AAAAC,IAAAA,CAAA,MAAAC,SAAA,EAAA,KAAA,EAAA,CAEtDC,qBAAA,CAAsB,CAAA,CAAA,CAAA,CAAA;AAAA;EAAA,IAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,KAAA,CAAA,EAAA,MAAA,EAAA;AADvB,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,KAAA,EAAA,CAECC,qBAAA,CAAsB,GAAA,CAAA,CAAA,CAAA;AAAA;EAAA,IAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,KAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,MAAA,EAAA,CACtBC,qBAAA,CAAsB,CAAA,CAAA,CAAA,CAAA;AAAA;EAAA,KAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,MAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,WAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,YAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,WAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,YAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,WAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,YAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,WAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,YAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,WAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,WAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,WAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,WAAA,EAAA,CACtBC,qBAAA,CAAsB,KAAA,CAAA,CAAA,CAAA;AAAA;EAAA,UAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,WAAA,CAAA,EAAA,MAAA;AAAA,EAAA;AAAAH,IAAAA,CAAA,MAAAC,SAAA,EAAA,QAAA,EAAA,CACtBC,sBAAsB,EAAE,CAAA,CAAA,CAAA;AAAA;EAAA,OAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,QAAA,CAAA,EAAA,MAAA;AAEzBC,EAAAA,mBAAA,GAAsB,KAAA;AAEtB;AAAA,EAAA;IAAAJ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,IAAA,EAAA,CACCI,OAAA,CAAA,EAAA,YAAA;MAAA,OAAqB,IAAI,CAACC,IAAI,CAACC,EAAE,IAAIC,OAAA,CAAQ,EAAC,CAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,GAAA,IAAAL,CAAA,CAAA,IAAA,EAAA,IAAA,CAAA,EAAA,MAAA;AAAA,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,eAAA,EAAA,CAC9CI,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAwB,KAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,cAAA,IAAAF,CAAA,CAAA,IAAA,EAAA,eAAA,CAAA,EAAA,MAAA;AACzB;EAGAM,cAAAA,CAAeC,CAAQ,EAAQ;AAC7B,IAAA,MAAMC,UAAUC,aAAA,CACd,IAAI,CAACC,GAAG,EACR,IAAI,CAACC,GAAG,EACPJ,CAAA,CAAEK,aAAa,CAAsBC,KAAK,CAAA;AAG7C,IAAA,IAAI,IAAI,CAACV,IAAI,CAACW,QAAQ,EAAE;MACtB,IAAI,CAACX,IAAI,CAACW,QAAQ,CAACP,CAAA,EAAGC,OAAA,CAAA;AACxB,IAAA;AACF,EAAA;AAAA,EAAA;IAAAO,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,gBAAA,EAAA,CAXCkB,MAAA,CAAA,CAAA;AAAA;EAaD,IAAIR,OAAAA,GAAmB;AACrB,IAAA,OAAOC,aAAA,CAAc,IAAI,CAACC,GAAG,EAAE,IAAI,CAACC,GAAG,EAAE,IAAI,CAACR,IAAI,CAACU,KAAK,IAAI,EAAA,CAAA;AAC9D,EAAA;EAEA,IAAII,cAAAA,GAAyB;IAC3B,OAAOC,IAAA,CAAKP,GAAG,CAACQ,MAAA,CAAO,IAAI,CAACT,GAAG,CAAA,CAAEU,MAAM,EAAED,MAAA,CAAO,IAAI,CAACR,GAAG,EAAES,MAAM,CAAA;AAClE,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACC,SAAS,KAAK,kBAAA;AAC5B,EAAA;EAEA,IAAIC,eAAAA,GAA2B;AAC7B,IAAA,OAAO,IAAI,CAACF,aAAa,IAAI,CAAC,IAAI,CAAClB,IAAI,CAACqB,QAAQ,IAAI,CAAC,IAAI,CAACrB,IAAI,CAACsB,QAAQ;AACzE,EAAA;EAEA,IAAIC,gBAAAA,GAA4B;IAC9B,OACE,IAAI,CAACC,SAAS,IACd,CAAC,CAACR,MAAA,CAAO,IAAI,CAAChB,IAAI,CAACU,KAAK,CAAA,CAAEO,MAAM,IAChC,IAAI,CAACjB,IAAI,CAACU,KAAK,KAAKe,SACtB;AACF,EAAA;EAGAC,YAAAA,CAAatB,CAAQ,EAAQ;AAC3B,IAAA,IAAI,IAAI,CAACJ,IAAI,CAAC2B,OAAO,EAAE;AACrB,MAAA,IAAI,CAAC3B,IAAI,CAAC2B,OAAO,CAACvB,CAAA,CAAA;AACpB,IAAA;IAEA,IAAI,CAACwB,aAAa,GAAG,IAAA;AACvB,EAAA;AAAA,EAAA;IAAAhB,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,cAAA,EAAA,CAPCkB,MAAA,CAAA,CAAA;AAAA;EAUDgB,WAAAA,CAAYzB,CAAQ,EAAQ;IAC1B0B,KAAA,CACE,IAAI,EACJ,MAAA;AACE;AACA;AACA;AACA;MACA,IAAI,IAAI,CAAChC,mBAAmB,EAAE;QAC5B,IAAI,CAACA,mBAAmB,GAAG,KAAA;AAE3B,QAAA;AACF,MAAA;AAEA,MAAA,IAAI,IAAI,CAACE,IAAI,CAAC+B,MAAM,EAAE;AACpB,QAAA,IAAI,CAAC/B,IAAI,CAAC+B,MAAM,CAAC3B,CAAA,CAAA;AACnB,MAAA;MAEA,IAAI,CAAC4B,YAAY,EAAA;IACnB,CAAA,EACA,GAAA,CAAA;AAEJ,EAAA;AAAA,EAAA;IAAApB,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,aAAA,EAAA,CAvBCkB,MAAA,CAAA,CAAA;AAAA;EA0BDoB,iBAAAA,CAAkBC,GAAY,EAAQ;IACpC,IAAI,CAACpC,mBAAmB,GAAGoC,GAAA;AAC7B,EAAA;AAAA,EAAA;IAAAtB,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,mBAAA,EAAA,CAHCkB,MAAA,CAAA,CAAA;AAAA;AAMDmB,EAAAA,YAAAA,GAAqB;IACnB,IAAI,CAAClC,mBAAmB,GAAG,KAAA;IAC3B,IAAI,CAAC8B,aAAa,GAAG,KAAA;AACvB,EAAA;AAAA,EAAA;IAAAhB,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,cAAA,EAAA,CAJCkB,MAAA,CAAA,CAAA;AAAA;EAODsB,sBAAAA,CAAuBC,IAAa,EAAQ;IAC1C,IAAI,CAACtC,mBAAmB,GAAGsC,IAAA;AAC7B,EAAA;AAAA,EAAA;IAAAxB,CAAA,CAAA,IAAA,CAAAjB,SAAA,EAAA,wBAAA,EAAA,CAHCkB,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAwB,oBAAA,CAAAC,kBAAA,CAAA,i1UAAA,EA0YA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,GAAA;QAAAC,YAAA;QAAAC,GAAA;yBAAAC,wBAAA;QAAAC,aAAA;QAAAC,EAAA;QAAAC,QAAA;QAAAC,eAAA;QAAAC,UAAA;QAAAC,aAAA;uBAAAC,sBAAA;QAAAC,EAAA;QAAAC,iBAAA;QAAAC,MAAA;QAAAC,cAAA;QAAAC,EAAA;AAAAC,yBAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}
+{"version":3,"file":"eui-range.js","sources":["../../src/components/eui-range.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, 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';\nimport { service } from '@ember/service';\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 { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { rangeAriaValueText } from '../utils/eui/range.ts';\nimport {\n  euiRangeStyles,\n  getLevelColor\n} from '../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.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 EuiI18n from '../services/eui-i18n';\nimport type { EuiInputPopoverArgs } from './eui-input-popover';\nimport type { EuiRangeLevel } from './eui-range-levels';\nimport type { EuiRangeTick } from './eui-range-ticks';\n\n/** Upstream `inputPopoverProps` of EuiRange and EuiDualRange. */\nexport type EuiRangeInputPopoverProps = Partial<\n  Omit<\n    EuiInputPopoverArgs,\n    | 'input'\n    | 'isOpen'\n    | 'closePopover'\n    | 'disableFocusTrap'\n    | 'ownFocus'\n    | 'popoverScreenReaderText'\n    | 'fullWidth'\n  >\n> & { className?: string };\n\nexport interface EuiRangeArgs {\n  /**\n   * Props of the EuiInputPopover used with `@showInput=\"inputWithPopover\"`\n   * (upstream `inputPopoverProps`): EuiInputPopover args except `isOpen`,\n   * `closePopover`, `disableFocusTrap`, `ownFocus`,\n   * `popoverScreenReaderText` and `fullWidth`, which the range controls.\n   * Its `className` is added to the popover root.\n   */\n  inputPopoverProps?: EuiRangeInputPopoverProps;\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  /**\n   * Shows a spinner in the number input (`@showInput=\"inputWithPopover\"`).\n   * Defaults to `false`.\n   */\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  @service declare euiI18n: EuiI18n;\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 numberValue(): number {\n    return Number(this.args.value);\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  get context() {\n    return getEuiThemeContext(this);\n  }\n\n  /** Upstream root styles (`euiRange` + `hasInput`) composed into the wrapper. */\n  @cached\n  get rootCss() {\n    const styles = useEuiBorealisStyles(this.context, euiRangeStyles);\n    return [styles.euiRange, this.showInput && styles.hasInput];\n  }\n\n  /** `euiRange__slimHorizontalSpacer` with ticks, else `euiRange__horizontalSpacer`. */\n  @cached\n  get spacerClass(): string {\n    const styles = useEuiBorealisStyles(this.context, euiRangeStyles);\n    const slim = this.showTicks || !!this.args.ticks;\n    return slim\n      ? `euiRange__slimHorizontalSpacer ${euiClass(this.context, styles.euiRange__slimHorizontalSpacer)}`\n      : `euiRange__horizontalSpacer ${euiClass(this.context, styles.euiRange__horizontalSpacer)}`;\n  }\n\n  /** The level color the value falls into, for the thumb. */\n  get thumbColor(): string | undefined {\n    return getLevelColor(this.levels ?? [], Number(this.args.value));\n  }\n\n  get ariaValueText(): string | undefined {\n    return this.args.ticks\n      ? rangeAriaValueText(this.args.ticks, this.args.value)\n      : undefined;\n  }\n\n  get screenReaderInstructions(): string {\n    return this.euiI18n.lookupToken(\n      'euiRange.sliderScreenReaderInstructions',\n      'You are in a custom range slider. Use the Up and Down arrow keys to change the value.'\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 {{@inputPopoverProps.className}}\"\n          @panelPaddingSize={{@inputPopoverProps.panelPaddingSize}}\n          @anchorPosition={{@inputPopoverProps.anchorPosition}}\n          @attachToAnchor={{@inputPopoverProps.attachToAnchor}}\n          @display={{@inputPopoverProps.display}}\n          @offset={{@inputPopoverProps.offset}}\n          @repositionToCrossAxis={{@inputPopoverProps.repositionToCrossAxis}}\n          @closeOnScroll={{@inputPopoverProps.closeOnScroll}}\n          @panelMinWidth={{@inputPopoverProps.panelMinWidth}}\n          @onPanelResize={{@inputPopoverProps.onPanelResize}}\n          @css={{@inputPopoverProps.css}}\n          @panelCss={{@inputPopoverProps.panelCss}}\n          @repositionOnScroll={{@inputPopoverProps.repositionOnScroll}}\n          @panelClassName={{@inputPopoverProps.panelClassName}}\n          @panelStyle={{@inputPopoverProps.panelStyle}}\n          @anchorClassName={{@inputPopoverProps.anchorClassName}}\n          @zIndex={{@inputPopoverProps.zIndex}}\n          @container={{@inputPopoverProps.container}}\n          @buffer={{@inputPopoverProps.buffer}}\n          @insert={{@inputPopoverProps.insert}}\n          @hasArrow={{@inputPopoverProps.hasArrow}}\n          @initialFocus={{@inputPopoverProps.initialFocus}}\n          @ariaLabel={{@inputPopoverProps.ariaLabel}}\n          @ariaLabelledBy={{@inputPopoverProps.ariaLabelledBy}}\n          @popoverRef={{@inputPopoverProps.popoverRef}}\n          @portalRef={{@inputPopoverProps.portalRef}}\n          @onTrapDeactivation={{@inputPopoverProps.onTrapDeactivation}}\n          @shouldAccountForOtherPopovers={{@inputPopoverProps.shouldAccountForOtherPopovers}}\n          @fullWidth={{@fullWidth}}\n          @isOpen={{this.isPopoverOpen}}\n          @closePopover={{this.closePopover}}\n          @disableFocusTrap={{true}}\n          @popoverScreenReaderText={{this.screenReaderInstructions}}\n        >\n          <:input>\n            <EuiRangeInput\n              id={{this.id}}\n              @min={{this.min}}\n              @max={{this.max}}\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 \"focus\" (if this.canShowDropdown this.onInputFocus (optional @onFocus))}}\n              {{on \"blur\" (if this.canShowDropdown this.onInputBlur (optional @onBlur))}}\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=\"euiRange\"\n              @css={{this.rootCss}}\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 this.showInput \"true\"}}\n                @disabled={{@disabled}}\n                @compressed={{@compressed}}\n                @max={{this.max}}\n                @min={{this.min}}\n                @step={{this.step}}\n                @showTicks={{this.showTicks}}\n                @showRange={{this.showRange}}\n                @tickInterval={{@tickInterval}}\n                @ticks={{@ticks}}\n                @levels={{this.levels}}\n                @onChange={{this.handleOnChange}}\n                @value={{@value}}\n                as |trackWidth|\n              >\n                <EuiRangeSlider\n                  aria-hidden={{if this.showInput \"true\"}}\n                  tabindex={{if this.showInput \"-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                  @showTicks={{this.showTicks}}\n                  @showRange={{this.showRange}}\n                  @thumbColor={{this.thumbColor}}\n                  @ariaValueText={{this.ariaValueText}}\n                  ...attributes\n                  {{on \"mousedown\" (if this.showInputOnly (fn this.setPreventPopoverClose true) (optional))}}\n                  {{on \"focus\" (if (eq this.showInput true) (optional) (optional @onFocus))}}\n                  {{on \"blur\" (if this.showInputOnly this.onInputBlur (optional @onBlur))}}\n                  {{on \"input\" this.handleOnChange}}\n                />\n                {{#if (and this.showRange this.isValid)}}\n                  <EuiRangeHighlight\n                    @showTicks={{this.showTicks}}\n                    @min={{this.min}}\n                    @max={{this.max}}\n                    @lowerValue={{this.min}}\n                    @upperValue={{this.numberValue}}\n                    @levels={{this.levels}}\n                    @trackWidth={{trackWidth}}\n                  />\n                {{/if}}\n                {{#if this.showRangeTooltip}}\n                  <EuiRangeTooltip\n                    @value={{@value}}\n                    @max={{this.max}}\n                    @min={{this.min}}\n                    @name={{@name}}\n                    @showTicks={{this.showTicks}}\n                  >\n                    <:valuePrepend>{{~#if hasValuePrependBlock~}}{{yield to=\"valuePrepend\"}}{{~else~}}{{@valuePrepend}}{{~/if~}}</:valuePrepend>\n                    <:value>{{~#if hasValueBlock~}}{{yield to=\"value\"}}{{~else~}}{{@value}}{{~/if~}}</:value>\n                    <:valueAppend>{{~#if hasValueAppendBlock~}}{{yield to=\"valueAppend\"}}{{~else~}}{{@valueAppend}}{{~/if~}}</: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={{this.spacerClass}}></div>\n                <EuiRangeInput\n                  id={{this.id}}\n                  @min={{this.min}}\n                  @max={{this.max}}\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 \"focus\" (if this.canShowDropdown this.onInputFocus (optional @onFocus))}}\n                  {{on \"blur\" (if this.canShowDropdown this.onInputBlur (optional @onBlur))}}\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            </EuiRangeWrapper>\n          </:content>\n        </EuiInputPopover>\n      {{else}}\n        <EuiRangeWrapper\n          class=\"euiRange\"\n          @css={{this.rootCss}}\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 this.showInput \"true\"}}\n            @disabled={{@disabled}}\n            @compressed={{@compressed}}\n            @max={{this.max}}\n            @min={{this.min}}\n            @step={{this.step}}\n            @showTicks={{this.showTicks}}\n            @showRange={{this.showRange}}\n            @tickInterval={{@tickInterval}}\n            @ticks={{@ticks}}\n            @levels={{this.levels}}\n            @onChange={{this.handleOnChange}}\n            @value={{@value}}\n            as |trackWidth|\n          >\n            <EuiRangeSlider\n              aria-hidden={{if this.showInput \"true\"}}\n              tabindex={{if this.showInput \"-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              @showTicks={{this.showTicks}}\n              @showRange={{this.showRange}}\n              @thumbColor={{this.thumbColor}}\n              @ariaValueText={{this.ariaValueText}}\n              ...attributes\n              {{on \"mousedown\" (if this.showInputOnly (fn this.setPreventPopoverClose true) (optional))}}\n              {{on \"focus\" (if (eq this.showInput true) (optional) (optional @onFocus))}}\n              {{on \"blur\" (if this.showInputOnly this.onInputBlur (optional @onBlur))}}\n              {{on \"input\" this.handleOnChange}}\n            />\n            {{#if (and this.showRange this.isValid)}}\n              <EuiRangeHighlight\n                @showTicks={{this.showTicks}}\n                @min={{this.min}}\n                @max={{this.max}}\n                @lowerValue={{this.min}}\n                @upperValue={{this.numberValue}}\n                @levels={{this.levels}}\n                @trackWidth={{trackWidth}}\n              />\n            {{/if}}\n            {{#if this.showRangeTooltip}}\n              <EuiRangeTooltip\n                @value={{@value}}\n                @max={{this.max}}\n                @min={{this.min}}\n                @name={{@name}}\n                @showTicks={{this.showTicks}}\n              >\n                <:valuePrepend>{{~#if hasValuePrependBlock~}}{{yield to=\"valuePrepend\"}}{{~else~}}{{@valuePrepend}}{{~/if~}}</:valuePrepend>\n                <:value>{{~#if hasValueBlock~}}{{yield to=\"value\"}}{{~else~}}{{@value}}{{~/if~}}</:value>\n                <:valueAppend>{{~#if hasValueAppendBlock~}}{{yield to=\"valueAppend\"}}{{~else~}}{{@valueAppend}}{{~/if~}}</: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={{this.spacerClass}}></div>\n            <EuiRangeInput\n              id={{this.id}}\n              @min={{this.min}}\n              @max={{this.max}}\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 \"focus\" (if this.canShowDropdown this.onInputFocus (optional @onFocus))}}\n              {{on \"blur\" (if this.canShowDropdown this.onInputBlur (optional @onBlur))}}\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        </EuiRangeWrapper>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiRangeComponent","Component","g","prototype","argOrDefaultDecorator","i","service","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","numberValue","Number","showRangeTooltip","showValue","undefined","context","getEuiThemeContext","rootCss","styles","useEuiBorealisStyles","euiRangeStyles","euiRange","hasInput","cached","spacerClass","slim","showTicks","ticks","euiClass","euiRange__slimHorizontalSpacer","euiRange__horizontalSpacer","thumbColor","getLevelColor","levels","ariaValueText","rangeAriaValueText","screenReaderInstructions","euiI18n","lookupToken","onInputFocus","onFocus","isPopoverOpen","onInputBlur","later","onBlur","closePopover","setPreventPopover","val","setPreventPopoverClose","bool","setComponentTemplate","precompileTemplate","strictMode","scope","and","argOrDefault","not","EuiInputPopover","EuiRangeInput","on","optional","EuiRangeWrapper","EuiRangeLabel","EuiRangeTrack","EuiRangeSlider","fn","eq","EuiRangeHighlight","EuiRangeTooltip"],"mappings":"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"}

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

@@ -5,14 +5,14 @@ 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';
 import EuiFlexGroup from './eui-flex-group.js';
 import EuiFlexItem from './eui-flex-item.js';
+import EuiFormLabel from './eui-form-label.js';
 import EuiScreenReaderOnly from './eui-screen-reader-only.js';
 import EuiSelect from './eui-select.js';
-import EuiSpacer from './eui-spacer.js';
-import EuiTitle from './eui-title.js';
+import EuiSwitch from './eui-switch.js';
+import EuiQuickSelectPanel from './eui-super-date-picker/eui-quick-select-popover/eui-quick-select-panel.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
@@ -20,13 +20,13 @@ import { g, i, n } from 'decorator-transforms/runtime-esm';
 const SECOND = 1000;
 const MINUTE = SECOND * 60;
 const HOUR = MINUTE * 60;
-function fromMilliseconds(ms) {
+function fromMilliseconds(ms, unit) {
   const round = value => parseFloat(value.toFixed(2));
-  if (ms > HOUR) return {
+  if (unit === 'h' || !unit && ms > HOUR) return {
     units: 'h',
     value: round(ms / HOUR)
   };
-  if (ms > MINUTE) return {
+  if (unit === 'm' || !unit && ms > MINUTE) return {
     units: 'm',
     value: round(ms / MINUTE)
   };
@@ -42,9 +42,15 @@ function toMilliseconds(units, value) {
     s: SECOND
   }[units]);
 }
+/** Upstream: the smallest whole number of `unit`s allowed by `minInterval`. */
+function getMinInterval(minInterval, unit) {
+  if (!minInterval) return 0;
+  return Math.floor(fromMilliseconds(minInterval, unit).value || 0);
+}
 /**
- * "Refresh every [5] [minutes] [Start / Stop]": sets how often data
- * refreshes. `EuiSuperDatePicker` shows it in its quick select popover
+ * "[switch] Refresh every [5] [minutes]": sets how often data refreshes.
+ * The switch turns refreshing on and off; the interval fields are
+ * disabled while it is off (upstream EUI). `EuiSuperDatePicker` shows it in its quick select popover
  * when given `@onRefreshChange`; it also works on its own.
  */
 
@@ -62,14 +68,13 @@ class EuiRefreshInterval extends Component {
   }
   #units = (i(this, "units"), void 0);
   lastAppliedInterval;
-  legendId = `euiRefreshInterval_${randomId()}`;
   descriptionId = `euiRefreshInterval_${randomId()}`;
   constructor(owner, args) {
     super(owner, args);
     const {
       value,
       units
-    } = fromMilliseconds(args.refreshInterval ?? 1000);
+    } = fromMilliseconds(args.refreshInterval ?? 1000, args.intervalUnits);
     this.value = value;
     this.units = units;
   }
@@ -84,7 +89,7 @@ class EuiRefreshInterval extends Component {
       const {
         value,
         units
-      } = fromMilliseconds(interval);
+      } = fromMilliseconds(interval, this.args.intervalUnits);
       this.value = value;
       this.units = units;
     }
@@ -107,19 +112,37 @@ class EuiRefreshInterval extends Component {
     }];
   }
   get description() {
-    return this.t('euiRefreshInterval.fullDescription', 'Refresh interval currently set to {optionValue} {optionText}.', {
+    const values = {
       optionValue: this.value,
       optionText: this.unitOptions.find(option => option.value === this.units)?.text ?? ''
-    });
+    };
+    return this.isPaused ? this.t('euiRefreshInterval.fullDescriptionOff', 'Refresh is off, interval set to {optionValue} {optionText}.', values) : this.t('euiRefreshInterval.fullDescriptionOn', 'Refresh is on, interval set to {optionValue} {optionText}.', values);
   }
   get isInvalid() {
     return this.value === '' || this.value <= 0;
   }
+  /** Upstream marks the value invalid only while refreshing. */
+  get showInvalid() {
+    return !this.isPaused && this.isInvalid;
+  }
+  get toggleLabel() {
+    return this.t('euiRefreshInterval.toggleLabel', 'Refresh every');
+  }
+  get min() {
+    return getMinInterval(this.args.minInterval, this.units);
+  }
+  emit(change) {
+    this.args.applyRefreshInterval?.(change);
+    this.args.onRefreshChange?.({
+      ...change,
+      intervalUnits: this.units
+    });
+  }
   apply() {
     if (this.value === '') return;
-    const refreshInterval = toMilliseconds(this.units, this.value);
+    const refreshInterval = Math.max(toMilliseconds(this.units, this.value), this.args.minInterval || 0);
     this.lastAppliedInterval = refreshInterval;
-    this.args.applyRefreshInterval({
+    this.emit({
       refreshInterval,
       isPaused: refreshInterval <= 0 ? true : this.isPaused
     });
@@ -142,17 +165,18 @@ class EuiRefreshInterval extends Component {
   onKeyDown(event) {
     // Enter starts refreshing
     if (event.key !== 'Enter' || this.isInvalid || this.value === '') return;
-    this.args.applyRefreshInterval({
+    this.emit({
       refreshInterval: toMilliseconds(this.units, this.value),
       isPaused: false
     });
   }
+  /** Upstream toggles even an invalid (≤ 0) interval; only an empty one is ignored. */
   static {
     n(this.prototype, "onKeyDown", [action]);
   }
   toggle() {
     if (this.value === '') return;
-    this.args.applyRefreshInterval({
+    this.emit({
       refreshInterval: toMilliseconds(this.units, this.value),
       isPaused: !this.isPaused
     });
@@ -161,18 +185,18 @@ class EuiRefreshInterval extends Component {
     n(this.prototype, "toggle", [action]);
   }
   static {
-    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>", {
+    setComponentTemplate(precompileTemplate("{{!-- A fieldset without a title (upstream renders a plain panel); the\n  switch label names the control. --}}\n<EuiQuickSelectPanel @tagName=\"fieldset\" class=\"euiRefreshInterval\" {{didUpdate this.syncInterval @refreshInterval}} ...attributes>\n  <EuiFlexGroup @alignItems=\"center\" @gutterSize=\"s\" @responsive={{false}} @wrap={{true}}>\n    <EuiFlexItem @grow={{false}}>\n      {{!-- The visible label's id is unused: the aria-label names the switch (upstream). --}}\n      <EuiSwitch @checked={{if this.isPaused false true}} @compressed={{true}} @label={{this.toggleLabel}} @onChange={{this.toggle}} aria-label={{this.t \"euiRefreshInterval.toggleAriaLabel\" \"Toggle refresh\"}} aria-labelledby={{undefined}} aria-describedby={{this.descriptionId}} data-test-subj=\"superDatePickerToggleRefreshButton\">\n        <:label>\n          <EuiFormLabel>{{this.toggleLabel}}</EuiFormLabel>\n        </:label>\n      </EuiSwitch>\n    </EuiFlexItem>\n    <EuiFlexItem style=\"min-width: 60px\">\n      <EuiFieldNumber @compressed={{true}} @fullWidth={{true}} @value={{this.value}} @isInvalid={{this.showInvalid}} @disabled={{this.isPaused}} @min={{this.min}} aria-label={{this.t \"euiRefreshInterval.valueAriaLabel\" \"Refresh interval value\"}} aria-describedby={{this.descriptionId}} data-test-subj=\"superDatePickerRefreshIntervalInput\" {{on \"input\" this.onValueInput}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{2}} style=\"min-width: 100px\">\n      <EuiSelect @compressed={{true}} @fullWidth={{true}} @value={{this.units}} @options={{this.unitOptions}} @disabled={{this.isPaused}} aria-label={{this.t \"euiRefreshInterval.unitsAriaLabel\" \"Refresh interval units\"}} aria-describedby={{this.descriptionId}} data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\" {{on \"change\" this.onUnitsChange}} {{on \"keydown\" this.onKeyDown}} />\n    </EuiFlexItem>\n  </EuiFlexGroup>\n  <EuiScreenReaderOnly><p id={{this.descriptionId}}>{{this.description}}</p></EuiScreenReaderOnly>\n</EuiQuickSelectPanel>", {
       strictMode: true,
       scope: () => ({
+        EuiQuickSelectPanel,
         didUpdate,
-        EuiTitle,
-        EuiSpacer,
         EuiFlexGroup,
         EuiFlexItem,
+        EuiSwitch,
+        EuiFormLabel,
         EuiFieldNumber,
         on,
         EuiSelect,
-        EuiButton,
         EuiScreenReaderOnly
       })
     }), this);

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';\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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"}
+{"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 EuiFieldNumber from './eui-field-number.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiFormLabel from './eui-form-label.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\nimport EuiSelect from './eui-select.gts';\nimport EuiSwitch from './eui-switch.gts';\nimport EuiQuickSelectPanel from './eui-super-date-picker/eui-quick-select-popover/eui-quick-select-panel.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(\n  ms: number,\n  unit?: Units\n): { value: number; units: Units } {\n  const round = (value: number) => parseFloat(value.toFixed(2));\n\n  if (unit === 'h' || (!unit && ms > HOUR))\n    return { units: 'h', value: round(ms / HOUR) };\n  if (unit === 'm' || (!unit && ms > MINUTE))\n    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/** Upstream: the smallest whole number of `unit`s allowed by `minInterval`. */\nfunction getMinInterval(minInterval: number | undefined, unit?: Units): number {\n  if (!minInterval) return 0;\n\n  return Math.floor(fromMilliseconds(minInterval, unit).value || 0);\n}\n\n/**\n * \"[switch] Refresh every [5] [minutes]\": sets how often data refreshes.\n * The switch turns refreshing on and off; the interval fields are\n * disabled while it is off (upstream EUI). `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    /**\n     * The smallest interval in milliseconds; edits are raised to it and the\n     * number field's `min` follows it. Defaults to `0`.\n     */\n    minInterval?: number;\n    /**\n     * Shows the interval in this unit (`'s'`, `'m'` or `'h'`) instead of the\n     * largest unit that fits (90 seconds becomes 2 minutes).\n     */\n    intervalUnits?: Units;\n    /** Called with `{ refreshInterval, isPaused }` after a change. */\n    applyRefreshInterval?: (args: { refreshInterval: number; isPaused: boolean }) => void;\n    /**\n     * Upstream's callback: called like `@applyRefreshInterval`, with the\n     * chosen `intervalUnits` as well.\n     */\n    onRefreshChange?: (args: {\n      refreshInterval: number;\n      isPaused: boolean;\n      intervalUnits: Units;\n    }) => 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  descriptionId = `euiRefreshInterval_${randomId()}`;\n\n  constructor(owner: Owner, args: EuiRefreshIntervalSignature['Args']) {\n    super(owner, args);\n\n    const { value, units } = fromMilliseconds(\n      args.refreshInterval ?? 1000,\n      args.intervalUnits\n    );\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(\n        interval,\n        this.args.intervalUnits\n      );\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    const values = {\n      optionValue: this.value,\n      optionText: this.unitOptions.find((option) => option.value === this.units)?.text ?? ''\n    };\n\n    return this.isPaused\n      ? this.t(\n          'euiRefreshInterval.fullDescriptionOff',\n          'Refresh is off, interval set to {optionValue} {optionText}.',\n          values\n        )\n      : this.t(\n          'euiRefreshInterval.fullDescriptionOn',\n          'Refresh is on, interval set to {optionValue} {optionText}.',\n          values\n        );\n  }\n\n  get isInvalid(): boolean {\n    return this.value === '' || this.value <= 0;\n  }\n\n  /** Upstream marks the value invalid only while refreshing. */\n  get showInvalid(): boolean {\n    return !this.isPaused && this.isInvalid;\n  }\n\n  get toggleLabel(): string {\n    return this.t('euiRefreshInterval.toggleLabel', 'Refresh every');\n  }\n\n  get min(): number {\n    return getMinInterval(this.args.minInterval, this.units);\n  }\n\n  private emit(change: { refreshInterval: number; isPaused: boolean }): void {\n    this.args.applyRefreshInterval?.(change);\n    this.args.onRefreshChange?.({ ...change, intervalUnits: this.units });\n  }\n\n  apply(): void {\n    if (this.value === '') return;\n\n    const refreshInterval = Math.max(\n      toMilliseconds(this.units, this.value),\n      this.args.minInterval || 0\n    );\n    this.lastAppliedInterval = refreshInterval;\n\n    this.emit({\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.emit({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: false\n    });\n  }\n\n  /** Upstream toggles even an invalid (≤ 0) interval; only an empty one is ignored. */\n  @action\n  toggle(): void {\n    if (this.value === '') return;\n\n    this.emit({\n      refreshInterval: toMilliseconds(this.units, this.value),\n      isPaused: !this.isPaused\n    });\n  }\n\n  <template>\n    {{! A fieldset without a title (upstream renders a plain panel); the\n      switch label names the control. }}\n    <EuiQuickSelectPanel\n      @tagName=\"fieldset\"\n      class=\"euiRefreshInterval\"\n      {{didUpdate this.syncInterval @refreshInterval}}\n      ...attributes\n    >\n      <EuiFlexGroup\n        @alignItems=\"center\"\n        @gutterSize=\"s\"\n        @responsive={{false}}\n        @wrap={{true}}\n      >\n        <EuiFlexItem @grow={{false}}>\n          {{! The visible label's id is unused: the aria-label names the switch (upstream). }}\n          <EuiSwitch\n            @checked={{if this.isPaused false true}}\n            @compressed={{true}}\n            @label={{this.toggleLabel}}\n            @onChange={{this.toggle}}\n            aria-label={{this.t\n              \"euiRefreshInterval.toggleAriaLabel\"\n              \"Toggle refresh\"\n            }}\n            aria-labelledby={{undefined}}\n            aria-describedby={{this.descriptionId}}\n            data-test-subj=\"superDatePickerToggleRefreshButton\"\n          >\n            <:label>\n              <EuiFormLabel>{{this.toggleLabel}}</EuiFormLabel>\n            </:label>\n          </EuiSwitch>\n        </EuiFlexItem>\n        <EuiFlexItem style=\"min-width: 60px\">\n          <EuiFieldNumber\n            @compressed={{true}}\n            @fullWidth={{true}}\n            @value={{this.value}}\n            @isInvalid={{this.showInvalid}}\n            @disabled={{this.isPaused}}\n            @min={{this.min}}\n            aria-label={{this.t\n              \"euiRefreshInterval.valueAriaLabel\"\n              \"Refresh interval value\"\n            }}\n            aria-describedby={{this.descriptionId}}\n            data-test-subj=\"superDatePickerRefreshIntervalInput\"\n            {{on \"input\" this.onValueInput}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{2}} style=\"min-width: 100px\">\n          <EuiSelect\n            @compressed={{true}}\n            @fullWidth={{true}}\n            @value={{this.units}}\n            @options={{this.unitOptions}}\n            @disabled={{this.isPaused}}\n            aria-label={{this.t\n              \"euiRefreshInterval.unitsAriaLabel\"\n              \"Refresh interval units\"\n            }}\n            aria-describedby={{this.descriptionId}}\n            data-test-subj=\"superDatePickerRefreshIntervalUnitsSelect\"\n            {{on \"change\" this.onUnitsChange}}\n            {{on \"keydown\" this.onKeyDown}}\n          />\n        </EuiFlexItem>\n      </EuiFlexGroup>\n      <EuiScreenReaderOnly><p\n          id={{this.descriptionId}}\n        >{{this.description}}</p></EuiScreenReaderOnly>\n    </EuiQuickSelectPanel>\n  </template>\n}\n"],"names":["SECOND","MINUTE","HOUR","fromMilliseconds","ms","unit","round","value","parseFloat","toFixed","units","toMilliseconds","Math","h","m","s","getMinInterval","minInterval","floor","EuiRefreshInterval","Component","g","prototype","service","i","tracked","lastAppliedInterval","descriptionId","randomId","constructor","owner","args","refreshInterval","intervalUnits","isPaused","syncInterval","interval","undefined","n","action","t","token","text","values","euiI18n","lookupToken","unitOptions","description","optionValue","optionText","find","option","isInvalid","showInvalid","toggleLabel","min","emit","change","applyRefreshInterval","onRefreshChange","apply","max","onValueInput","event","target","isNaN","onUnitsChange","onKeyDown","key","toggle","setComponentTemplate","precompileTemplate","strictMode","scope","EuiQuickSelectPanel","didUpdate","EuiFlexGroup","EuiFlexItem","EuiSwitch","EuiFormLabel","EuiFieldNumber","on","EuiSelect","EuiScreenReaderOnly"],"mappings":"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"}

package/dist/components/eui-resizable-container/button.js

@@ -1,14 +1,33 @@
 import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { schedule } from '@ember/runloop';
 import { service } from '@ember/service';
 import { modifier } from 'ember-modifier';
 import { randomId } from '../../-private/random-id.js';
+import { getEuiThemeContext } from '../../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../../utils/eui/styles.js';
+import { cP as euiResizableButtonStyles } from '../../styles.generated-SYAxYhey.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+/**
+ * React's global reset, scoped: the native button face, border, padding and
+ * margin would otherwise show (upstream's margins come after it).
+ */
+const BUTTON_RESET = {
+  boxSizing: 'border-box',
+  appearance: 'none',
+  margin: 0,
+  padding: 0,
+  border: 'none',
+  borderRadius: 0,
+  background: 'none',
+  color: 'inherit',
+  font: 'inherit'
+};
 class EuiResizableButton extends Component {
   static {
     g(this.prototype, "euiI18n", [service]);
@@ -21,14 +40,24 @@ class EuiResizableButton extends Component {
   get container() {
     return this.args.container;
   }
+  get isHorizontal() {
+    return this.container ? this.container.isHorizontal : Boolean(this.args.isHorizontal);
+  }
   get isDisabled() {
-    return Boolean(this.args.disabled || this.container.resizers[this.id]?.isDisabled);
+    return Boolean(this.args.disabled || this.container?.resizers[this.id]?.isDisabled);
   }
   get classes() {
-    return ['euiResizableButton', this.container.isHorizontal ? 'euiResizableButton--horizontal' : 'euiResizableButton--vertical', this.isDisabled && 'euiResizableButton--disabled'].filter(Boolean).join(' ');
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiResizableButtonStyles);
+    const direction = this.isHorizontal ? 'horizontal' : 'vertical';
+    const indicator = this.args.indicator ?? 'handle';
+    return `euiResizableButton ${euiClass(context, BUTTON_RESET, styles.euiResizableButton, styles[indicator], styles[`${indicator}Direction`][direction], styles[direction], indicator === 'handle' && styles.alignIndicator[this.args.alignIndicator ?? 'center'], styles.accountForScrollbars[direction][this.args.accountForScrollbars ?? 'none'])}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
   }
   get label() {
-    return this.container.isHorizontal ? this.euiI18n.lookupToken('euiResizableButton.horizontalResizerAriaLabel', 'Press left or right to adjust panels size') : this.euiI18n.lookupToken('euiResizableButton.verticalResizerAriaLabel', 'Press up or down to adjust panels size');
+    return this.isHorizontal ? this.euiI18n.lookupToken('euiResizableButton.horizontalResizerAriaLabel', 'Press the left or right arrow keys to adjust panels size') : this.euiI18n.lookupToken('euiResizableButton.verticalResizerAriaLabel', 'Press the up or down arrow keys to adjust panels size');
   }
   focusSelf(event) {
     event.currentTarget.focus();
@@ -37,23 +66,49 @@ class EuiResizableButton extends Component {
     n(this.prototype, "focusSelf", [action]);
   }
   onFocus() {
-    this.container.onResizerFocus(this.id);
+    this.container?.onResizerFocus(this.id);
   }
   static {
     n(this.prototype, "onFocus", [action]);
   }
+  onBlur() {
+    this.container?.onResizerBlur();
+  }
+  static {
+    n(this.prototype, "onBlur", [action]);
+  }
+  onMouseDown(event) {
+    this.container?.onResizerMouseDown(event);
+  }
+  static {
+    n(this.prototype, "onMouseDown", [action]);
+  }
+  onKeyDown(event) {
+    this.container?.onResizerKeyDown(event);
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  onKeyUp(event) {
+    this.container?.onResizerKeyUp(event);
+  }
+  static {
+    n(this.prototype, "onKeyUp", [action]);
+  }
   register = modifier(() => {
+    const container = this.container;
+    if (!container) return;
     const id = this.id;
     // after rendering: registering updates the container's state
-    schedule('afterRender', () => this.container.registerResizer({
+    schedule('afterRender', () => container.registerResizer({
       id,
       isFocused: false,
       isDisabled: this.args.disabled ?? false
     }));
-    return () => schedule('afterRender', () => this.container.deregisterResizer(id));
+    return () => schedule('afterRender', () => container.deregisterResizer(id));
   });
   static {
-    setComponentTemplate(precompileTemplate("<button id={{this.id}} type=\"button\" class={{this.classes}} aria-label={{this.label}} data-test-subj=\"euiResizableButton\" disabled={{this.isDisabled}} {{this.register}} {{on \"click\" this.focusSelf}} {{on \"focus\" this.onFocus}} {{on \"blur\" this.container.onResizerBlur}} {{on \"mousedown\" this.container.onResizerMouseDown}} {{on \"touchstart\" this.container.onResizerMouseDown}} {{on \"keydown\" this.container.onResizerKeyDown}} ...attributes></button>", {
+    setComponentTemplate(precompileTemplate("<button id={{this.id}} type=\"button\" class={{this.classes}} aria-label={{this.label}} data-test-subj=\"euiResizableButton\" disabled={{this.isDisabled}} {{this.register}} {{on \"click\" this.focusSelf}} {{on \"focus\" this.onFocus}} {{on \"blur\" this.onBlur}} {{on \"mousedown\" this.onMouseDown}} {{on \"touchstart\" this.onMouseDown}} {{on \"keydown\" this.onKeyDown}} {{on \"keyup\" this.onKeyUp}} ...attributes></button>", {
       strictMode: true,
       scope: () => ({
         on

package/dist/components/eui-resizable-container/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../src/components/eui-resizable-container/button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { schedule } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport { randomId } from '../../-private/random-id.ts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type EuiResizableContainer from '../eui-resizable-container.gts';\n\n/**\n * The draggable separator between two panels of an\n * `EuiResizableContainer` (yielded as `Button`). Drag it, or focus it and\n * use the arrow keys.\n */\nexport interface EuiResizableButtonSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** Id of the button. Defaults to a random id. */\n    id?: string;\n    /** Disables resizing at this button. */\n    disabled?: boolean;\n    /** @private The container, set by `EuiResizableContainer`. */\n    container: EuiResizableContainer;\n  };\n}\n\nexport default class EuiResizableButton extends Component<EuiResizableButtonSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  ownId = `resizable-button_${randomId()}`;\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get container(): EuiResizableContainer {\n    return this.args.container;\n  }\n\n  get isDisabled(): boolean {\n    return Boolean(this.args.disabled || this.container.resizers[this.id]?.isDisabled);\n  }\n\n  get classes(): string {\n    return [\n      'euiResizableButton',\n      this.container.isHorizontal ? 'euiResizableButton--horizontal' : 'euiResizableButton--vertical',\n      this.isDisabled && 'euiResizableButton--disabled'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get label(): string {\n    return this.container.isHorizontal\n      ? this.euiI18n.lookupToken(\n          'euiResizableButton.horizontalResizerAriaLabel',\n          'Press left or right to adjust panels size'\n        )\n      : this.euiI18n.lookupToken(\n          'euiResizableButton.verticalResizerAriaLabel',\n          'Press up or down to adjust panels size'\n        );\n  }\n\n  @action\n  focusSelf(event: MouseEvent): void {\n    (event.currentTarget as HTMLElement).focus();\n  }\n\n  @action\n  onFocus(): void {\n    this.container.onResizerFocus(this.id);\n  }\n\n  register = modifier(() => {\n    const id = this.id;\n\n    // after rendering: registering updates the container's state\n    schedule('afterRender', () =>\n      this.container.registerResizer({ id, isFocused: false, isDisabled: this.args.disabled ?? false })\n    );\n\n    return () => schedule('afterRender', () => this.container.deregisterResizer(id));\n  });\n\n  <template>\n    <button\n      id={{this.id}}\n      type=\"button\"\n      class={{this.classes}}\n      aria-label={{this.label}}\n      data-test-subj=\"euiResizableButton\"\n      disabled={{this.isDisabled}}\n      {{this.register}}\n      {{on \"click\" this.focusSelf}}\n      {{on \"focus\" this.onFocus}}\n      {{on \"blur\" this.container.onResizerBlur}}\n      {{on \"mousedown\" this.container.onResizerMouseDown}}\n      {{on \"touchstart\" this.container.onResizerMouseDown}}\n      {{on \"keydown\" this.container.onResizerKeyDown}}\n      ...attributes\n    ></button>\n  </template>\n}\n"],"names":["EuiResizableButton","Component","g","prototype","service","i","ownId","randomId","id","args","container","isDisabled","Boolean","disabled","resizers","classes","isHorizontal","filter","join","label","euiI18n","lookupToken","focusSelf","event","currentTarget","focus","n","action","onFocus","onResizerFocus","register","modifier","schedule","registerResizer","isFocused","deregisterResizer","setComponentTemplate","precompileTemplate","strictMode","scope","on"],"mappings":";;;;;;;;;;;AA8Be,MAAMA,2BAA2BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACvDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;AAEDC,EAAAA,KAAA,GAAQ,CAAA,iBAAA,EAAoBC,QAAA,EAAA,CAAA,CAAY;EAExC,IAAIC,EAAAA,GAAa;IACf,OAAO,IAAI,CAACC,IAAI,CAACD,EAAE,IAAI,IAAI,CAACF,KAAK;AACnC,EAAA;EAEA,IAAII,YAAmC;AACrC,IAAA,OAAO,IAAI,CAACD,IAAI,CAACC,SAAS;AAC5B,EAAA;EAEA,IAAIC,UAAAA,GAAsB;IACxB,OAAOC,QAAQ,IAAI,CAACH,IAAI,CAACI,QAAQ,IAAI,IAAI,CAACH,SAAS,CAACI,QAAQ,CAAC,IAAI,CAACN,EAAE,CAAC,EAAEG,UAAA,CAAA;AACzE,EAAA;EAEA,IAAII,OAAAA,GAAkB;AACpB,IAAA,OAAO,CACL,oBAAA,EACA,IAAI,CAACL,SAAS,CAACM,YAAY,GAAG,gCAAA,GAAmC,8BAAA,EACjE,IAAI,CAACL,UAAU,IAAI,8BAAA,CACpB,CACEM,MAAM,CAACL,OAAA,CAAA,CACPM,IAAI,CAAC,GAAA,CAAA;AACV,EAAA;EAEA,IAAIC,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACT,SAAS,CAACM,YAAY,GAC9B,IAAI,CAACI,OAAO,CAACC,WAAW,CACtB,+CAAA,EACA,+CAEF,IAAI,CAACD,OAAO,CAACC,WAAW,CACtB,6CAAA,EACA,wCAAA,CAAA;AAER,EAAA;EAGAC,SAAAA,CAAUC,KAAiB,EAAQ;AAChCA,IAAAA,KAAA,CAAMC,aAAa,CAAiBC,KAAK,EAAA;AAC5C,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAvB,SAAA,EAAA,WAAA,EAAA,CAHCwB,MAAA,CAAA,CAAA;AAAA;AAMDC,EAAAA,OAAAA,GAAgB;IACd,IAAI,CAAClB,SAAS,CAACmB,cAAc,CAAC,IAAI,CAACrB,EAAE,CAAA;AACvC,EAAA;AAAA,EAAA;IAAAkB,CAAA,CAAA,IAAA,CAAAvB,SAAA,EAAA,SAAA,EAAA,CAHCwB,MAAA,CAAA,CAAA;AAAA;EAKDG,QAAA,GAAWC,QAAA,CAAS,MAAA;AAClB,IAAA,MAAMvB,EAAA,GAAK,IAAI,CAACA,EAAE;AAElB;IACAwB,QAAA,CAAS,eAAe,MACtB,IAAI,CAACtB,SAAS,CAACuB,eAAe,CAAC;MAAEzB,EAAA;AAAI0B,MAAAA,SAAA,EAAW,KAAA;AAAOvB,MAAAA,UAAA,EAAY,IAAI,CAACF,IAAI,CAACI,QAAQ,IAAI;AAAM,KAAA,CAAA,CAAA;AAGjG,IAAA,OAAO,MAAMmB,SAAS,aAAA,EAAe,MAAM,IAAI,CAACtB,SAAS,CAACyB,iBAAiB,CAAC3B,EAAA,CAAA,CAAA;AAC9E,EAAA,CAAA,CAAA;AAEA,EAAA;IAAA4B,oBAAA,CAAAC,kBAAA,CAAA,mdAAA,EAiBA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}
+{"version":3,"file":"button.js","sources":["../../../src/components/eui-resizable-container/button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { schedule } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport { randomId } from '../../-private/random-id.ts';\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../utils/eui/styles.ts';\nimport { euiResizableButtonStyles } from '../../utils/eui/styles.generated.ts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type EuiResizableContainer from '../eui-resizable-container.gts';\n\n/**\n * The draggable separator between two panels of an\n * `EuiResizableContainer` (yielded as `Button`). Drag it, or focus it and\n * use the arrow keys.\n */\nexport interface EuiResizableButtonSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    /** Id of the button. Defaults to a random id. */\n    id?: string;\n    /** Disables resizing at this button (a disabled button is hidden, as upstream). */\n    disabled?: boolean;\n    /**\n     * The resize indicator: `'handle'` (two short grab lines that grow into\n     * one line on hover and focus) or `'border'` (a full-length 1px line).\n     * Defaults to `'handle'`.\n     */\n    indicator?: 'handle' | 'border';\n    /**\n     * Where the `'handle'` indicator sits along the button: `'center'`,\n     * `'start'` or `'end'`. Defaults to `'center'`.\n     */\n    alignIndicator?: 'center' | 'start' | 'end';\n    /**\n     * The button overlaps its neighbours by half its size on both sides by\n     * default, so it takes no room. When a panel shows a scrollbar next to\n     * it, `'before'`, `'after'` or `'both'` keep it from covering it.\n     */\n    accountForScrollbars?: 'before' | 'after' | 'both';\n    /**\n     * Standalone use (outside an `EuiResizableContainer`): `true` for a\n     * horizontal (x-axis) resizer, otherwise vertical. Inside a container\n     * its direction is used. Attach your own `{{on \"mousedown\" …}}`,\n     * `{{on \"touchstart\" …}}` and `{{on \"keydown\" …}}` modifiers (upstream's\n     * `onMouseDown`, `onTouchStart` and `onKeyDown` props).\n     */\n    isHorizontal?: boolean;\n    /** @private The container, set by `EuiResizableContainer`. */\n    container?: EuiResizableContainer;\n  };\n}\n\n/**\n * React's global reset, scoped: the native button face, border, padding and\n * margin would otherwise show (upstream's margins come after it).\n */\nconst BUTTON_RESET = {\n  boxSizing: 'border-box',\n  appearance: 'none',\n  margin: 0,\n  padding: 0,\n  border: 'none',\n  borderRadius: 0,\n  background: 'none',\n  color: 'inherit',\n  font: 'inherit'\n} as const;\n\nexport default class EuiResizableButton extends Component<EuiResizableButtonSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  ownId = `resizable-button_${randomId()}`;\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get container(): EuiResizableContainer | undefined {\n    return this.args.container;\n  }\n\n  get isHorizontal(): boolean {\n    return this.container\n      ? this.container.isHorizontal\n      : Boolean(this.args.isHorizontal);\n  }\n\n  get isDisabled(): boolean {\n    return Boolean(\n      this.args.disabled || this.container?.resizers[this.id]?.isDisabled\n    );\n  }\n\n  @cached\n  get classes(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiResizableButtonStyles);\n    const direction = this.isHorizontal ? 'horizontal' : 'vertical';\n    const indicator = this.args.indicator ?? 'handle';\n\n    return `euiResizableButton ${euiClass(\n      context,\n      BUTTON_RESET,\n      styles.euiResizableButton,\n      styles[indicator],\n      styles[`${indicator}Direction`][direction],\n      styles[direction],\n      indicator === 'handle' && styles.alignIndicator[this.args.alignIndicator ?? 'center'],\n      styles.accountForScrollbars[direction][this.args.accountForScrollbars ?? 'none']\n    )}`;\n  }\n\n  get label(): string {\n    return this.isHorizontal\n      ? this.euiI18n.lookupToken(\n          'euiResizableButton.horizontalResizerAriaLabel',\n          'Press the left or right arrow keys to adjust panels size'\n        )\n      : this.euiI18n.lookupToken(\n          'euiResizableButton.verticalResizerAriaLabel',\n          'Press the up or down arrow keys to adjust panels size'\n        );\n  }\n\n  @action\n  focusSelf(event: MouseEvent): void {\n    (event.currentTarget as HTMLElement).focus();\n  }\n\n  @action\n  onFocus(): void {\n    this.container?.onResizerFocus(this.id);\n  }\n\n  @action\n  onBlur(): void {\n    this.container?.onResizerBlur();\n  }\n\n  @action\n  onMouseDown(event: MouseEvent | TouchEvent): void {\n    this.container?.onResizerMouseDown(event);\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    this.container?.onResizerKeyDown(event);\n  }\n\n  @action\n  onKeyUp(event: KeyboardEvent): void {\n    this.container?.onResizerKeyUp(event);\n  }\n\n  register = modifier(() => {\n    const container = this.container;\n\n    if (!container) return;\n\n    const id = this.id;\n\n    // after rendering: registering updates the container's state\n    schedule('afterRender', () =>\n      container.registerResizer({ id, isFocused: false, isDisabled: this.args.disabled ?? false })\n    );\n\n    return () => schedule('afterRender', () => container.deregisterResizer(id));\n  });\n\n  <template>\n    <button\n      id={{this.id}}\n      type=\"button\"\n      class={{this.classes}}\n      aria-label={{this.label}}\n      data-test-subj=\"euiResizableButton\"\n      disabled={{this.isDisabled}}\n      {{this.register}}\n      {{on \"click\" this.focusSelf}}\n      {{on \"focus\" this.onFocus}}\n      {{on \"blur\" this.onBlur}}\n      {{on \"mousedown\" this.onMouseDown}}\n      {{on \"touchstart\" this.onMouseDown}}\n      {{on \"keydown\" this.onKeyDown}}\n      {{on \"keyup\" this.onKeyUp}}\n      ...attributes\n    ></button>\n  </template>\n}\n"],"names":["BUTTON_RESET","boxSizing","appearance","margin","padding","border","borderRadius","background","color","font","EuiResizableButton","Component","g","prototype","service","i","ownId","randomId","id","args","container","isHorizontal","Boolean","isDisabled","disabled","resizers","classes","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiResizableButtonStyles","direction","indicator","euiClass","euiResizableButton","alignIndicator","accountForScrollbars","n","cached","label","euiI18n","lookupToken","focusSelf","event","currentTarget","focus","action","onFocus","onResizerFocus","onBlur","onResizerBlur","onMouseDown","onResizerMouseDown","onKeyDown","onResizerKeyDown","onKeyUp","onResizerKeyUp","register","modifier","schedule","registerResizer","isFocused","deregisterResizer","setComponentTemplate","precompileTemplate","strictMode","scope","on"],"mappings":"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"}