@ember-eui/core 16.0.1 → 16.0.3

package/dist/components/eui-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-color-picker.js","sources":["../../src/components/eui-color-picker.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 { next } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport chroma from 'chroma-js';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  getChromaColor,\n  HEX_FALLBACK,\n  HSV_FALLBACK,\n  parseColor,\n  RGB_FALLBACK,\n  RGB_JOIN\n} from '../-private/color.ts';\nimport { randomId } from '../-private/random-id.ts';\nimport { useEuiPaletteColorBlind } from '../utils/color/eui_palettes.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { boxReset, listReset } from '../utils/eui/color-picker.ts';\nimport { euiColorPickerStyles } from '../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport EuiColorPickerSwatch from './eui-color-picker-swatch.gts';\nimport EuiFieldText from './eui-field-text.gts';\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiFormLabel from './eui-form-label.gts';\nimport EuiFormRow from './eui-form-row.gts';\nimport EuiHue from './eui-hue.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiRange from './eui-range.gts';\nimport EuiSaturation from './eui-saturation.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { HSV, RGBA } from '../-private/color.ts';\nimport type Owner from '@ember/owner';\n\nexport interface EuiColorPickerOutput {\n  /** The color as `[r, g, b, a]` (`NaN`s when invalid). */\n  rgba: RGBA;\n  /** The color as hex (`''` when invalid). */\n  hex: string;\n  /** Whether the text is a valid color (opaque, unless `@showAlpha`). */\n  isValid: boolean;\n}\n\n/**\n * A color field: a text input showing the color (hex or `r, g, b`) that\n * opens a popover to pick it from a saturation square and a hue slider,\n * and from swatches. You keep the color: `@onChange` gets the new text and\n * `{ hex, rgba, isValid }`.\n */\nexport interface EuiColorPickerSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The color: a hex string (`'#D36086'`), `'r, g, b'`, or `''`. */\n    color?: string;\n    /** Called with the new color text and `{ hex, rgba, isValid }`. */\n    onChange: (text: string, output: EuiColorPickerOutput) => void;\n    /**\n     * `'default'` (square, hue and swatches), `'picker'` (no swatches),\n     * `'swatch'` (only swatches) or `'secondaryInput'` (only the text\n     * field set by `@secondaryInputDisplay`). Defaults to `'default'`.\n     */\n    mode?: 'default' | 'picker' | 'swatch' | 'secondaryInput';\n    /** `'default'` (a field opening a popover) or `'inline'` (the picker itself). */\n    display?: 'default' | 'inline';\n    /** The swatches. Defaults to EUI's color-blind safe palette. */\n    swatches?: string[];\n    /** Adds an opacity slider; the color can then have an alpha channel. */\n    showAlpha?: boolean;\n    /** `'hex'` or `'rgba'` output. Defaults to the format of `@color`. */\n    format?: 'hex' | 'rgba';\n    /**\n     * A text field inside the popover: `'top'`, `'bottom'` or `'none'`.\n     * Defaults to `'none'`.\n     */\n    secondaryInputDisplay?: 'top' | 'bottom' | 'none';\n    /** Adds a button clearing the color. */\n    isClearable?: boolean;\n    /** Placeholder while empty. Defaults to \"Transparent\". */\n    placeholder?: string;\n    /** Smaller field. */\n    compressed?: boolean;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n    /** Disables it. */\n    disabled?: boolean;\n    /**\n     * z-index of the color selector popover. Defaults to the anchor's\n     * z-index + 2000, as in EuiPopover.\n     */\n    popoverZIndex?: number;\n    /** Read-only: the popover does not open. */\n    readOnly?: boolean;\n    /** Invalid look. */\n    isInvalid?: boolean;\n    /** `id` of the input. */\n    id?: string;\n    /** Called when the popover opens. */\n    onFocus?: () => void;\n    /** Called when the field loses focus or the popover closes. */\n    onBlur?: () => void;\n  };\n  Blocks: {\n    /**\n     * A custom trigger instead of the field (e.g. a swatch button); yields\n     * the function toggling the popover.\n     */\n    button: [toggle: () => void];\n    /** Content before the field; yields the class to put on it. */\n    prepend: [className: string, inputId: string];\n    /** Content after the field; yields the class to put on it. */\n    append: [className: string, inputId: string];\n  };\n}\n\nfunction hsvOf(color: ReturnType<typeof getChromaColor>, fallbackHue = 0): HSV {\n  if (!color) return HSV_FALLBACK;\n\n  const [h, s, v] = color.hsv();\n\n  // black, white and grays have no hue\n  return [isNaN(h) ? fallbackHue : h, s, v];\n}\n\nexport default class EuiColorPicker extends Component<EuiColorPickerSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isColorSelectorShown = false;\n  @tracked colorAsHsv: HSV;\n  @tracked alphaInput?: string;\n\n  ownId = `euiColorPicker_${randomId()}`;\n  openLabelId = `${this.ownId}-openLabel`;\n  closeLabelId = `${this.ownId}-closeLabel`;\n  prevColor: string | null;\n  input?: HTMLInputElement;\n  saturation?: HTMLElement;\n  firstSwatch?: HTMLElement;\n\n  constructor(owner: Owner, args: EuiColorPickerSignature['Args']) {\n    super(owner, args);\n\n    const color = getChromaColor(args.color, args.showAlpha);\n\n    this.prevColor = color ? color.rgba().join() : null;\n    this.colorAsHsv = color ? hsvOf(color) : HSV_FALLBACK;\n  }\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get mode(): string {\n    return this.args.mode ?? 'default';\n  }\n\n  get secondaryInputDisplay(): string {\n    return this.args.secondaryInputDisplay ?? 'none';\n  }\n\n  get chromaColor(): ReturnType<typeof getChromaColor> {\n    return getChromaColor(this.args.color, this.args.showAlpha);\n  }\n\n  get preferredFormat(): 'hex' | 'rgba' {\n    if (this.args.format) return this.args.format;\n\n    const parsed = parseColor(this.args.color);\n\n    return parsed !== null && typeof parsed === 'object' ? 'rgba' : 'hex';\n  }\n\n  get alphaChannel(): number {\n    return this.chromaColor ? this.chromaColor.alpha() : 1;\n  }\n\n  get alphaRangeValue(): number {\n    return Number(this.alphaInput ?? (this.alphaChannel * 100).toFixed());\n  }\n\n  /** The color as HSV; the hue is kept for colors without one. */\n  get usableHsv(): HSV {\n    const color = this.chromaColor;\n\n    if (color && color.rgba().join() !== this.prevColor) {\n      return hsvOf(color, this.colorAsHsv[0]);\n    }\n\n    return this.colorAsHsv;\n  }\n\n  get hex(): string | undefined {\n    return this.chromaColor?.hex();\n  }\n\n  get inputValue(): string {\n    return this.args.color ? this.args.color.toUpperCase() : HEX_FALLBACK;\n  }\n\n  get placeholder(): string | undefined {\n    if (this.args.color) return undefined;\n\n    return this.args.placeholder ?? this.euiI18n.lookupToken('euiColorPicker.transparent', 'Transparent');\n  }\n\n  get showPicker(): boolean {\n    return this.mode !== 'swatch' && this.mode !== 'secondaryInput';\n  }\n\n  get showSwatches(): boolean {\n    return this.mode !== 'picker' && this.mode !== 'secondaryInput';\n  }\n\n  get swatches(): string[] {\n    return (\n      this.args.swatches ??\n      useEuiPaletteColorBlind(getEuiThemeContext(this).upstream)\n    );\n  }\n\n  get canClear(): boolean {\n    return Boolean(this.args.isClearable && this.args.color && !this.args.readOnly && !this.args.disabled);\n  }\n\n  /** The popover / inline root: upstream `euiColorPickerStyles.euiColorPicker`. */\n  @cached\n  get rootClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    return `euiColorPicker ${euiClass(context, boxReset, styles.euiColorPicker)}`;\n  }\n\n  @cached\n  get swatchesClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    return `euiColorPicker__swatches ${euiClass(context, listReset, styles.euiColorPicker__swatches)}`;\n  }\n\n  @cached\n  get alphaRangeClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    // upstream puts these on the EuiRange root; here they sit on a wrapper\n    // around it, so the direct-child rule is restated from the range wrapper\n    return `euiColorPicker__alphaRange ${euiClass(context, styles.euiColorPicker__alphaRange, {\n      '.euiRangeWrapper > .euiFormControlLayout': { flexShrink: 0 }\n    })}`;\n  }\n\n  /**\n   * Upstream's `icon={{ color, css }}`: the field icon takes the chosen\n   * color (`subdued` for the empty `stopSlash` icon), and the swatch icon's\n   * stroke uses the swatch border color.\n   */\n  get iconColor(): string {\n    return cssColor(this.chromaColor) ?? 'subdued';\n  }\n\n  @cached\n  get iconCss(): EuiCss {\n    const context = getEuiThemeContext(this);\n    return useEuiBorealisStyles(context, euiColorPickerStyles)\n      .euiColorPicker__swatchInputIcon;\n  }\n\n  get panelClasses(): string {\n    return 'euiColorPicker__popoverPanel';\n  }\n\n  get hexLabel(): string {\n    return this.chromaColor ? this.chromaColor.hex().toUpperCase() : '';\n  }\n\n  get secondaryInputCompressed(): boolean {\n    return this.args.display === 'inline' ? Boolean(this.args.compressed) : true;\n  }\n\n  get labels(): {\n    popover: string;\n    color: string;\n    selected: string;\n    error: string;\n    alpha: string;\n    open: string;\n    closed: string;\n    select: string;\n  } {\n    const t = (token: string, text: string) => this.euiI18n.lookupToken(`euiColorPicker.${token}`, text);\n\n    return {\n      popover: t('popoverLabel', 'Color selection dialog'),\n      color: t('colorLabel', 'Color value'),\n      selected: t('selectedColorLabel', 'Selected color'),\n      error: t('colorErrorMessage', 'Invalid color value'),\n      alpha: t('alphaLabel', 'Alpha channel (opacity) value'),\n      open: t('openLabel', 'Press the escape key to close the popover'),\n      closed: t('closeLabel', 'Press the down key to open a popover containing color options'),\n      select: t('ariaLabel', 'Select a color')\n    };\n  }\n\n  output(text: string): EuiColorPickerOutput {\n    const color = getChromaColor(text, true);\n\n    if (!color) return { rgba: RGB_FALLBACK, hex: HEX_FALLBACK, isValid: false };\n\n    // without @showAlpha a transparent color is returned but invalid\n    return {\n      rgba: color.rgba() as RGBA,\n      hex: color.hex(),\n      isValid: this.args.showAlpha ? true : color.alpha() === 1\n    };\n  }\n\n  change(text: string): void {\n    const output = this.output(text);\n\n    if (output.isValid) this.prevColor = output.rgba.join();\n    this.args.onChange(text, output);\n  }\n\n  updateColorAsHsv(hsv: HSV): void {\n    this.colorAsHsv = [isNaN(hsv[0]) ? this.usableHsv[0] : hsv[0], hsv[1], hsv[2]];\n  }\n\n  updateWithHsv(hsv: HSV): void {\n    const color = chroma.hsv(...hsv).alpha(this.alphaChannel);\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (this.alphaChannel < 1 ? color.rgba() : color.rgb()).join(RGB_JOIN)\n        : color.hex();\n\n    this.change(text);\n    this.updateColorAsHsv(hsv);\n  }\n\n  @action\n  showColorSelector(): void {\n    if (this.isColorSelectorShown || this.args.readOnly) return;\n\n    this.args.onFocus?.();\n    this.isColorSelectorShown = true;\n  }\n\n  @action\n  closeColorSelector(): void {\n    this.args.onBlur?.();\n    this.isColorSelectorShown = false;\n  }\n\n  @action\n  toggle(): void {\n    if (this.isColorSelectorShown) this.closeColorSelector();\n    else this.showColorSelector();\n  }\n\n  /** Closes the popover and returns to the field, to keep adjusting. */\n  @action\n  finalSelection(): void {\n    this.input?.focus();\n    next(this, this.closeColorSelector);\n  }\n\n  @action\n  onInputClick(): void {\n    this.showColorSelector();\n  }\n\n  @action\n  onInputKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  @action\n  onInputBlur(): void {\n    // closing the popover calls onBlur already\n    if (!this.isColorSelectorShown) this.args.onBlur?.();\n  }\n\n  /** Arrow down opens the popover, then moves into it. */\n  @action\n  onLayoutKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'ArrowDown') return;\n\n    event.preventDefault();\n\n    if (!this.isColorSelectorShown) {\n      this.showColorSelector();\n\n      return;\n    }\n\n    (this.mode !== 'swatch' ? this.saturation : this.firstSwatch)?.focus();\n  }\n\n  /** Enter in the picker confirms the color. */\n  @action\n  onPickerKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter') return;\n\n    if (this.isColorSelectorShown) this.finalSelection();\n    else this.showColorSelector();\n  }\n\n  @action\n  onColorInput(event: Event): void {\n    const text = (event.target as HTMLInputElement).value;\n    const color = getChromaColor(text, this.args.showAlpha);\n\n    this.change(text);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n  }\n\n  @action\n  clear(): void {\n    this.change('');\n\n    if (this.secondaryInputDisplay === 'none' && this.isColorSelectorShown) {\n      this.closeColorSelector();\n    }\n  }\n\n  @action\n  onSaturationChange([, s, v]: HSV): void {\n    this.updateWithHsv([this.usableHsv[0], s, v]);\n  }\n\n  @action\n  onHueChange(hue: number): void {\n    const [, s, v] = this.usableHsv;\n\n    this.updateWithHsv([hue, s, v]);\n  }\n\n  @action\n  onSwatchClick(swatch: string): void {\n    const color = getChromaColor(swatch, this.args.showAlpha);\n\n    this.change(swatch);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n    this.finalSelection();\n  }\n\n  @action\n  onAlphaChange(event: Event, isValid: boolean): void {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.alphaInput = value;\n\n    if (!isValid) return;\n\n    const alpha = parseInt(value, 10) / 100;\n    const color = this.chromaColor ? this.chromaColor.alpha(alpha) : null;\n    const hex = color ? color.hex() : HEX_FALLBACK;\n    const rgba = (color ? color.rgba() : RGB_FALLBACK) as RGBA;\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (alpha < 1 ? rgba : rgba.slice(0, 3)).join(RGB_JOIN)\n        : hex;\n\n    this.alphaInput = undefined;\n    this.args.onChange(text, { hex, rgba, isValid: Boolean(color) });\n  }\n\n  registerInput = (element: HTMLInputElement | null): void => {\n    this.input = element ?? undefined;\n  };\n\n  registerSaturation = modifier((element: HTMLElement) => {\n    this.saturation = element;\n  });\n\n  registerFirstSwatch = modifier((element: HTMLElement, [index]: [number]) => {\n    if (index === 0) this.firstSwatch = element;\n  });\n\n  <template>\n    {{#if (isInline @display)}}\n      <div class={{this.rootClasses}} ...attributes>\n        <Composite\n          @picker={{this}}\n          @isInvalid={{@isInvalid}}\n          @disabled={{@disabled}}\n          @readOnly={{@readOnly}}\n          @showAlpha={{@showAlpha}}\n        />\n      </div>\n    {{else}}\n      <EuiPopover\n        class=\"euiColorPicker__popoverAnchor\"\n        @isOpen={{this.isColorSelectorShown}}\n        @closePopover={{this.finalSelection}}\n        @panelClassName={{this.panelClasses}}\n        @display={{if (has-block \"button\") \"inlineBlock\" \"block\"}}\n        @attachToAnchor={{if (has-block \"button\") false true}}\n        @anchorPosition=\"downLeft\"\n        @panelPaddingSize=\"s\"\n        @ownFocus={{false}}\n        @initialFocus={{false}}\n        @ariaLabel={{this.labels.popover}}\n        @zIndex={{@popoverZIndex}}\n      >\n        <:button>\n          {{#if (has-block \"button\")}}\n            {{yield this.toggle to=\"button\"}}\n          {{else}}\n              <EuiFormControlLayout\n                @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}}\n                @clear={{if this.canClear this.clear}}\n                @readOnly={{@readOnly}}\n                @fullWidth={{@fullWidth}}\n                @compressed={{@compressed}}\n                @isInvalid={{@isInvalid}}\n                @isDisabled={{@disabled}}\n                @isDropdown={{true}}\n                @isPrependProvided={{has-block \"prepend\"}}\n                @isAppendProvided={{has-block \"append\"}}\n                @iconColor={{this.iconColor}}\n                @iconCss={{this.iconCss}}\n                {{on \"keydown\" this.onLayoutKeyDown}}\n              >\n                <:prepend as |className|>{{yield className this.id to=\"prepend\"}}</:prepend>\n                <:field>\n                  <EuiFieldText\n                    class=\"euiColorPicker__input\"\n                    data-test-subj=\"euiColorPickerAnchor\"\n                    id={{this.id}}\n                    autocomplete=\"off\"\n                    aria-label={{unless @id this.labels.select}}\n                    aria-describedby={{if this.isColorSelectorShown this.openLabelId this.closeLabelId}}\n                    @controlOnly={{true}}\n                    @value={{this.inputValue}}\n                    @placeholder={{this.placeholder}}\n                    @isInvalid={{@isInvalid}}\n                    @compressed={{@compressed}}\n                    @disabled={{@disabled}}\n                    @readOnly={{@readOnly}}\n                    @fullWidth={{@fullWidth}}\n                    @inputRef={{this.registerInput}}\n                    {{on \"click\" this.onInputClick}}\n                    {{on \"keydown\" this.onInputKeyDown}}\n                    {{on \"blur\" this.onInputBlur}}\n                    {{on \"input\" this.onColorInput}}\n                  />\n                  <EuiScreenReaderOnly>\n                    <span>\n                      <span\n                        id={{this.openLabelId}}\n                        aria-hidden={{if this.isColorSelectorShown \"false\" \"true\"}}\n                      >{{this.labels.open}}</span>\n                      <span\n                        id={{this.closeLabelId}}\n                        aria-hidden={{if this.isColorSelectorShown \"true\" \"false\"}}\n                      >{{this.labels.closed}}</span>\n                    </span>\n                  </EuiScreenReaderOnly>\n                </:field>\n                <:append as |className|>{{yield className this.id to=\"append\"}}</:append>\n              </EuiFormControlLayout>\n          {{/if}}\n        </:button>\n        <:content>\n          <div\n            class={{this.rootClasses}}\n            data-test-subj=\"euiColorPickerPopover\"\n            ...attributes\n          >\n            <Composite\n              @picker={{this}}\n              @isInvalid={{@isInvalid}}\n              @disabled={{@disabled}}\n              @readOnly={{@readOnly}}\n              @showAlpha={{@showAlpha}}\n            />\n          </div>\n        </:content>\n      </EuiPopover>\n    {{/if}}\n  </template>\n}\n\ninterface CompositeSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    showAlpha?: boolean;\n  };\n}\n\n/**\n * The saturation square, hue slider, swatches and secondary input: the\n * flex column children of the root (upstream spaces them with `gap`).\n */\nclass Composite extends Component<CompositeSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    {{#if (eq2 this.picker.secondaryInputDisplay \"top\")}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n      />\n    {{/if}}\n    {{#if this.picker.showPicker}}\n      <EuiSaturation\n        @id={{this.picker.id}}\n        @color={{this.picker.usableHsv}}\n        @hex={{this.picker.hex}}\n        @onChange={{this.picker.onSaturationChange}}\n        {{this.picker.registerSaturation}}\n        {{on \"keydown\" this.picker.onPickerKeyDown}}\n      />\n      <EuiHue\n        @id={{this.picker.id}}\n        @hue={{hueOf this.picker.usableHsv}}\n        @hex={{this.picker.hex}}\n        @onChange={{this.picker.onHueChange}}\n        {{on \"keydown\" this.picker.onPickerKeyDown}}\n      />\n      <EuiScreenReaderOnly>\n        <p aria-live=\"polite\" aria-atomic=\"true\">{{this.picker.labels.selected}}: {{this.picker.hexLabel}}</p>\n      </EuiScreenReaderOnly>\n    {{/if}}\n    {{#if this.picker.showSwatches}}\n      <ul class={{this.picker.swatchesClasses}}>\n        {{#each this.picker.swatches as |swatch index|}}\n          <li>\n            <EuiColorPickerSwatch\n              class=\"euiColorPicker__swatchSelect\"\n              @color={{swatch}}\n              {{on \"click\" (fn this.picker.onSwatchClick swatch)}}\n              {{this.picker.registerFirstSwatch index}}\n            />\n          </li>\n        {{/each}}\n      </ul>\n    {{/if}}\n    {{#if (eq2 this.picker.secondaryInputDisplay \"bottom\")}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n      />\n    {{/if}}\n    {{#if @showAlpha}}\n      <div class={{this.picker.alphaRangeClasses}}>\n        <EuiRange\n          data-test-subj=\"euiColorPickerAlpha\"\n          aria-label={{this.picker.labels.alpha}}\n          @compressed={{true}}\n          @showInput={{true}}\n          @min={{0}}\n          @max={{100}}\n          @value={{this.picker.alphaRangeValue}}\n          @onChange={{this.picker.onAlphaChange}}\n        >\n          <:append><EuiFormLabel>%</EuiFormLabel></:append>\n        </EuiRange>\n      </div>\n    {{/if}}\n  </template>\n}\n\ninterface SecondaryInputSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n  };\n}\n\nclass SecondaryInput extends Component<SecondaryInputSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    <EuiFormRow\n      @isInvalid={{@isInvalid}}\n      @error={{if @isInvalid this.picker.labels.error}}\n    >\n      <EuiFieldText\n        data-test-subj=\"euiColorPickerInput_{{this.picker.secondaryInputDisplay}}\"\n        autocomplete=\"off\"\n        aria-label={{this.picker.labels.color}}\n        @compressed={{this.picker.secondaryInputCompressed}}\n        @value={{this.picker.inputValue}}\n        @placeholder={{this.picker.placeholder}}\n        @clear={{if this.picker.canClear this.picker.clear}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n        {{on \"input\" this.picker.onColorInput}}\n      />\n    </EuiFormRow>\n  </template>\n}\n\nfunction hueOf(hsv: HSV): number {\n  return hsv[0];\n}\n\nfunction isInline(display?: string): boolean {\n  return display === 'inline';\n}\n\nfunction cssColor(color: ReturnType<typeof getChromaColor>): string | undefined {\n  return color ? color.css() : undefined;\n}\n\nfunction eq2(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n"],"names":["hsvOf","color","fallbackHue","HSV_FALLBACK","h","s","v","hsv","isNaN","EuiColorPicker","Component","g","prototype","service","i","tracked","ownId","randomId","openLabelId","closeLabelId","prevColor","input","saturation","firstSwatch","constructor","owner","args","getChromaColor","showAlpha","rgba","join","colorAsHsv","id","mode","secondaryInputDisplay","chromaColor","preferredFormat","format","parsed","parseColor","alphaChannel","alpha","alphaRangeValue","Number","alphaInput","toFixed","usableHsv","hex","inputValue","toUpperCase","HEX_FALLBACK","placeholder","undefined","euiI18n","lookupToken","showPicker","showSwatches","swatches","useEuiPaletteColorBlind","getEuiThemeContext","upstream","canClear","Boolean","isClearable","readOnly","disabled","rootClasses","context","styles","useEuiBorealisStyles","euiColorPickerStyles","euiClass","boxReset","euiColorPicker","n","cached","swatchesClasses","listReset","euiColorPicker__swatches","alphaRangeClasses","euiColorPicker__alphaRange","flexShrink","iconColor","cssColor","iconCss","euiColorPicker__swatchInputIcon","panelClasses","hexLabel","secondaryInputCompressed","display","compressed","labels","t","token","text","popover","selected","error","open","closed","select","output","RGB_FALLBACK","isValid","change","onChange","updateColorAsHsv","updateWithHsv","chroma","rgb","RGB_JOIN","showColorSelector","isColorSelectorShown","onFocus","action","closeColorSelector","onBlur","toggle","finalSelection","focus","next","onInputClick","onInputKeyDown","event","key","preventDefault","onInputBlur","onLayoutKeyDown","onPickerKeyDown","onColorInput","target","value","clear","onSaturationChange","onHueChange","hue","onSwatchClick","swatch","onAlphaChange","parseInt","slice","registerInput","element","registerSaturation","modifier","registerFirstSwatch","index","setComponentTemplate","precompileTemplate","strictMode","scope","isInline","Composite","EuiPopover","EuiFormControlLayout","on","EuiFieldText","EuiScreenReaderOnly","picker","eq2","SecondaryInput","EuiSaturation","EuiHue","hueOf","EuiColorPickerSwatch","fn","EuiRange","EuiFormLabel","EuiFormRow","css","a","b"],"mappings":"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"}
+{"version":3,"file":"eui-color-picker.js","sources":["../../src/components/eui-color-picker.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 { cancel, next } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport chroma from 'chroma-js';\nimport { modifier } from 'ember-modifier';\n\nimport {\n  getChromaColor,\n  HEX_FALLBACK,\n  HSV_FALLBACK,\n  parseColor,\n  RGB_FALLBACK,\n  RGB_JOIN\n} from '../-private/color.ts';\nimport { randomId } from '../-private/random-id.ts';\nimport { useEuiPaletteColorBlind } from '../utils/color/eui_palettes.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { boxReset, listReset } from '../utils/eui/color-picker.ts';\nimport { euiColorPickerStyles } from '../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport EuiColorPickerSwatch from './eui-color-picker-swatch.gts';\nimport EuiFieldText from './eui-field-text.gts';\nimport EuiFormControlLayout from './eui-form-control-layout.gts';\nimport EuiFormLabel from './eui-form-label.gts';\nimport EuiFormRow from './eui-form-row.gts';\nimport EuiHue from './eui-hue.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiRange from './eui-range.gts';\nimport EuiSaturation from './eui-saturation.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { HSV, RGBA } from '../-private/color.ts';\nimport type Owner from '@ember/owner';\n\nexport interface EuiColorPickerOutput {\n  /** The color as `[r, g, b, a]` (`NaN`s when invalid). */\n  rgba: RGBA;\n  /** The color as hex (`''` when invalid). */\n  hex: string;\n  /** Whether the text is a valid color (opaque, unless `@showAlpha`). */\n  isValid: boolean;\n}\n\n/**\n * A color field: a text input showing the color (hex or `r, g, b`) that\n * opens a popover to pick it from a saturation square and a hue slider,\n * and from swatches. You keep the color: `@onChange` gets the new text and\n * `{ hex, rgba, isValid }`.\n */\nexport interface EuiColorPickerSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The color: a hex string (`'#D36086'`), `'r, g, b'`, or `''`. */\n    color?: string;\n    /** Called with the new color text and `{ hex, rgba, isValid }`. */\n    onChange: (text: string, output: EuiColorPickerOutput) => void;\n    /**\n     * `'default'` (square, hue and swatches), `'picker'` (no swatches),\n     * `'swatch'` (only swatches) or `'secondaryInput'` (only the text\n     * field set by `@secondaryInputDisplay`). Defaults to `'default'`.\n     */\n    mode?: 'default' | 'picker' | 'swatch' | 'secondaryInput';\n    /** `'default'` (a field opening a popover) or `'inline'` (the picker itself). */\n    display?: 'default' | 'inline';\n    /** The swatches. Defaults to EUI's color-blind safe palette. */\n    swatches?: string[];\n    /** Adds an opacity slider; the color can then have an alpha channel. */\n    showAlpha?: boolean;\n    /** `'hex'` or `'rgba'` output. Defaults to the format of `@color`. */\n    format?: 'hex' | 'rgba';\n    /**\n     * A text field inside the popover: `'top'`, `'bottom'` or `'none'`.\n     * Defaults to `'none'`.\n     */\n    secondaryInputDisplay?: 'top' | 'bottom' | 'none';\n    /** Adds a button clearing the color. */\n    isClearable?: boolean;\n    /** Placeholder while empty. Defaults to \"Transparent\". */\n    placeholder?: string;\n    /** Smaller field. */\n    compressed?: boolean;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n    /** Disables it. */\n    disabled?: boolean;\n    /**\n     * z-index of the color selector popover. Defaults to the anchor's\n     * z-index + 2000, as in EuiPopover.\n     */\n    popoverZIndex?: number;\n    /** Read-only: the popover does not open. */\n    readOnly?: boolean;\n    /** Invalid look. */\n    isInvalid?: boolean;\n    /** `id` of the input. */\n    id?: string;\n    /** Called when the popover opens. */\n    onFocus?: () => void;\n    /** Called when the field loses focus or the popover closes. */\n    onBlur?: () => void;\n  };\n  Blocks: {\n    /**\n     * A custom trigger instead of the field (e.g. a swatch button); yields\n     * the function toggling the popover.\n     */\n    button: [toggle: () => void];\n    /** Content before the field; yields the class to put on it. */\n    prepend: [className: string, inputId: string];\n    /** Content after the field; yields the class to put on it. */\n    append: [className: string, inputId: string];\n  };\n}\n\nfunction hsvOf(color: ReturnType<typeof getChromaColor>, fallbackHue = 0): HSV {\n  if (!color) return HSV_FALLBACK;\n\n  const [h, s, v] = color.hsv();\n\n  // black, white and grays have no hue\n  return [isNaN(h) ? fallbackHue : h, s, v];\n}\n\nexport default class EuiColorPicker extends Component<EuiColorPickerSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isColorSelectorShown = false;\n  @tracked colorAsHsv: HSV;\n  @tracked alphaInput?: string;\n\n  ownId = `euiColorPicker_${randomId()}`;\n  openLabelId = `${this.ownId}-openLabel`;\n  closeLabelId = `${this.ownId}-closeLabel`;\n  prevColor: string | null;\n  input?: HTMLInputElement;\n  saturation?: HTMLElement;\n  firstSwatch?: HTMLElement;\n\n  constructor(owner: Owner, args: EuiColorPickerSignature['Args']) {\n    super(owner, args);\n\n    const color = getChromaColor(args.color, args.showAlpha);\n\n    this.prevColor = color ? color.rgba().join() : null;\n    this.colorAsHsv = color ? hsvOf(color) : HSV_FALLBACK;\n  }\n\n  closeTimer: ReturnType<typeof next> | undefined;\n\n  willDestroy(): void {\n    super.willDestroy();\n    cancel(this.closeTimer);\n  }\n\n  get id(): string {\n    return this.args.id ?? this.ownId;\n  }\n\n  get mode(): string {\n    return this.args.mode ?? 'default';\n  }\n\n  get secondaryInputDisplay(): string {\n    return this.args.secondaryInputDisplay ?? 'none';\n  }\n\n  get chromaColor(): ReturnType<typeof getChromaColor> {\n    return getChromaColor(this.args.color, this.args.showAlpha);\n  }\n\n  get preferredFormat(): 'hex' | 'rgba' {\n    if (this.args.format) return this.args.format;\n\n    const parsed = parseColor(this.args.color);\n\n    return parsed !== null && typeof parsed === 'object' ? 'rgba' : 'hex';\n  }\n\n  get alphaChannel(): number {\n    return this.chromaColor ? this.chromaColor.alpha() : 1;\n  }\n\n  get alphaRangeValue(): number {\n    return Number(this.alphaInput ?? (this.alphaChannel * 100).toFixed());\n  }\n\n  /** The color as HSV; the hue is kept for colors without one. */\n  get usableHsv(): HSV {\n    const color = this.chromaColor;\n\n    if (color && color.rgba().join() !== this.prevColor) {\n      return hsvOf(color, this.colorAsHsv[0]);\n    }\n\n    return this.colorAsHsv;\n  }\n\n  get hex(): string | undefined {\n    return this.chromaColor?.hex();\n  }\n\n  get inputValue(): string {\n    return this.args.color ? this.args.color.toUpperCase() : HEX_FALLBACK;\n  }\n\n  get placeholder(): string | undefined {\n    if (this.args.color) return undefined;\n\n    return this.args.placeholder ?? this.euiI18n.lookupToken('euiColorPicker.transparent', 'Transparent');\n  }\n\n  get showPicker(): boolean {\n    return this.mode !== 'swatch' && this.mode !== 'secondaryInput';\n  }\n\n  get showSwatches(): boolean {\n    return this.mode !== 'picker' && this.mode !== 'secondaryInput';\n  }\n\n  get swatches(): string[] {\n    return (\n      this.args.swatches ??\n      useEuiPaletteColorBlind(getEuiThemeContext(this).upstream)\n    );\n  }\n\n  get canClear(): boolean {\n    return Boolean(this.args.isClearable && this.args.color && !this.args.readOnly && !this.args.disabled);\n  }\n\n  /** The popover / inline root: upstream `euiColorPickerStyles.euiColorPicker`. */\n  @cached\n  get rootClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    return `euiColorPicker ${euiClass(context, boxReset, styles.euiColorPicker)}`;\n  }\n\n  @cached\n  get swatchesClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    return `euiColorPicker__swatches ${euiClass(context, listReset, styles.euiColorPicker__swatches)}`;\n  }\n\n  @cached\n  get alphaRangeClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorPickerStyles);\n\n    // upstream puts these on the EuiRange root; here they sit on a wrapper\n    // around it, so the direct-child rule is restated from the range wrapper\n    return `euiColorPicker__alphaRange ${euiClass(context, styles.euiColorPicker__alphaRange, {\n      '.euiRangeWrapper > .euiFormControlLayout': { flexShrink: 0 }\n    })}`;\n  }\n\n  /**\n   * Upstream's `icon={{ color, css }}`: the field icon takes the chosen\n   * color (`subdued` for the empty `stopSlash` icon), and the swatch icon's\n   * stroke uses the swatch border color.\n   */\n  get iconColor(): string {\n    return cssColor(this.chromaColor) ?? 'subdued';\n  }\n\n  @cached\n  get iconCss(): EuiCss {\n    const context = getEuiThemeContext(this);\n    return useEuiBorealisStyles(context, euiColorPickerStyles)\n      .euiColorPicker__swatchInputIcon;\n  }\n\n  get panelClasses(): string {\n    return 'euiColorPicker__popoverPanel';\n  }\n\n  get hexLabel(): string {\n    return this.chromaColor ? this.chromaColor.hex().toUpperCase() : '';\n  }\n\n  get secondaryInputCompressed(): boolean {\n    return this.args.display === 'inline' ? Boolean(this.args.compressed) : true;\n  }\n\n  get labels(): {\n    popover: string;\n    color: string;\n    selected: string;\n    error: string;\n    alpha: string;\n    open: string;\n    closed: string;\n    select: string;\n  } {\n    const t = (token: string, text: string) => this.euiI18n.lookupToken(`euiColorPicker.${token}`, text);\n\n    return {\n      popover: t('popoverLabel', 'Color selection dialog'),\n      color: t('colorLabel', 'Color value'),\n      selected: t('selectedColorLabel', 'Selected color'),\n      error: t('colorErrorMessage', 'Invalid color value'),\n      alpha: t('alphaLabel', 'Alpha channel (opacity) value'),\n      open: t('openLabel', 'Press the escape key to close the popover'),\n      closed: t('closeLabel', 'Press the down key to open a popover containing color options'),\n      select: t('ariaLabel', 'Select a color')\n    };\n  }\n\n  output(text: string): EuiColorPickerOutput {\n    const color = getChromaColor(text, true);\n\n    if (!color) return { rgba: RGB_FALLBACK, hex: HEX_FALLBACK, isValid: false };\n\n    // without @showAlpha a transparent color is returned but invalid\n    return {\n      rgba: color.rgba() as RGBA,\n      hex: color.hex(),\n      isValid: this.args.showAlpha ? true : color.alpha() === 1\n    };\n  }\n\n  change(text: string): void {\n    const output = this.output(text);\n\n    if (output.isValid) this.prevColor = output.rgba.join();\n    this.args.onChange(text, output);\n  }\n\n  updateColorAsHsv(hsv: HSV): void {\n    this.colorAsHsv = [isNaN(hsv[0]) ? this.usableHsv[0] : hsv[0], hsv[1], hsv[2]];\n  }\n\n  updateWithHsv(hsv: HSV): void {\n    const color = chroma.hsv(...hsv).alpha(this.alphaChannel);\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (this.alphaChannel < 1 ? color.rgba() : color.rgb()).join(RGB_JOIN)\n        : color.hex();\n\n    this.change(text);\n    this.updateColorAsHsv(hsv);\n  }\n\n  @action\n  showColorSelector(): void {\n    if (this.isColorSelectorShown || this.args.readOnly) return;\n\n    this.args.onFocus?.();\n    this.isColorSelectorShown = true;\n  }\n\n  @action\n  closeColorSelector(): void {\n    this.args.onBlur?.();\n    this.isColorSelectorShown = false;\n  }\n\n  @action\n  toggle(): void {\n    if (this.isColorSelectorShown) this.closeColorSelector();\n    else this.showColorSelector();\n  }\n\n  /** Closes the popover and returns to the field, to keep adjusting. */\n  @action\n  finalSelection(): void {\n    this.input?.focus();\n    cancel(this.closeTimer);\n    this.closeTimer = next(this, this.closeColorSelector);\n  }\n\n  @action\n  onInputClick(): void {\n    this.showColorSelector();\n  }\n\n  @action\n  onInputKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.toggle();\n    }\n  }\n\n  @action\n  onInputBlur(): void {\n    // closing the popover calls onBlur already\n    if (!this.isColorSelectorShown) this.args.onBlur?.();\n  }\n\n  /** Arrow down opens the popover, then moves into it. */\n  @action\n  onLayoutKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'ArrowDown') return;\n\n    event.preventDefault();\n\n    if (!this.isColorSelectorShown) {\n      this.showColorSelector();\n\n      return;\n    }\n\n    (this.mode !== 'swatch' ? this.saturation : this.firstSwatch)?.focus();\n  }\n\n  /** Enter in the picker confirms the color. */\n  @action\n  onPickerKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter') return;\n\n    if (this.isColorSelectorShown) this.finalSelection();\n    else this.showColorSelector();\n  }\n\n  @action\n  onColorInput(event: Event): void {\n    const text = (event.target as HTMLInputElement).value;\n    const color = getChromaColor(text, this.args.showAlpha);\n\n    this.change(text);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n  }\n\n  @action\n  clear(): void {\n    this.change('');\n\n    if (this.secondaryInputDisplay === 'none' && this.isColorSelectorShown) {\n      this.closeColorSelector();\n    }\n  }\n\n  @action\n  onSaturationChange([, s, v]: HSV): void {\n    this.updateWithHsv([this.usableHsv[0], s, v]);\n  }\n\n  @action\n  onHueChange(hue: number): void {\n    const [, s, v] = this.usableHsv;\n\n    this.updateWithHsv([hue, s, v]);\n  }\n\n  @action\n  onSwatchClick(swatch: string): void {\n    const color = getChromaColor(swatch, this.args.showAlpha);\n\n    this.change(swatch);\n    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));\n    this.finalSelection();\n  }\n\n  @action\n  onAlphaChange(event: Event, isValid: boolean): void {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.alphaInput = value;\n\n    if (!isValid) return;\n\n    const alpha = parseInt(value, 10) / 100;\n    const color = this.chromaColor ? this.chromaColor.alpha(alpha) : null;\n    const hex = color ? color.hex() : HEX_FALLBACK;\n    const rgba = (color ? color.rgba() : RGB_FALLBACK) as RGBA;\n    const text =\n      this.preferredFormat === 'rgba'\n        ? (alpha < 1 ? rgba : rgba.slice(0, 3)).join(RGB_JOIN)\n        : hex;\n\n    this.alphaInput = undefined;\n    this.args.onChange(text, { hex, rgba, isValid: Boolean(color) });\n  }\n\n  registerInput = (element: HTMLInputElement | null): void => {\n    this.input = element ?? undefined;\n  };\n\n  registerSaturation = modifier((element: HTMLElement) => {\n    this.saturation = element;\n  });\n\n  registerFirstSwatch = modifier((element: HTMLElement, [index]: [number]) => {\n    if (index === 0) this.firstSwatch = element;\n  });\n\n  <template>\n    {{#if (isInline @display)}}\n      <div class={{this.rootClasses}} ...attributes>\n        <Composite\n          @picker={{this}}\n          @isInvalid={{@isInvalid}}\n          @disabled={{@disabled}}\n          @readOnly={{@readOnly}}\n          @showAlpha={{@showAlpha}}\n        />\n      </div>\n    {{else}}\n      <EuiPopover\n        class=\"euiColorPicker__popoverAnchor\"\n        @isOpen={{this.isColorSelectorShown}}\n        @closePopover={{this.finalSelection}}\n        @panelClassName={{this.panelClasses}}\n        @display={{if (has-block \"button\") \"inlineBlock\" \"block\"}}\n        @attachToAnchor={{if (has-block \"button\") false true}}\n        @anchorPosition=\"downLeft\"\n        @panelPaddingSize=\"s\"\n        @ownFocus={{false}}\n        @initialFocus={{false}}\n        @ariaLabel={{this.labels.popover}}\n        @zIndex={{@popoverZIndex}}\n      >\n        <:button>\n          {{#if (has-block \"button\")}}\n            {{yield this.toggle to=\"button\"}}\n          {{else}}\n              <EuiFormControlLayout\n                @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}}\n                @clear={{if this.canClear this.clear}}\n                @readOnly={{@readOnly}}\n                @fullWidth={{@fullWidth}}\n                @compressed={{@compressed}}\n                @isInvalid={{@isInvalid}}\n                @isDisabled={{@disabled}}\n                @isDropdown={{true}}\n                @isPrependProvided={{has-block \"prepend\"}}\n                @isAppendProvided={{has-block \"append\"}}\n                @iconColor={{this.iconColor}}\n                @iconCss={{this.iconCss}}\n                {{on \"keydown\" this.onLayoutKeyDown}}\n              >\n                <:prepend as |className|>{{yield className this.id to=\"prepend\"}}</:prepend>\n                <:field>\n                  <EuiFieldText\n                    class=\"euiColorPicker__input\"\n                    data-test-subj=\"euiColorPickerAnchor\"\n                    id={{this.id}}\n                    autocomplete=\"off\"\n                    aria-label={{unless @id this.labels.select}}\n                    aria-describedby={{if this.isColorSelectorShown this.openLabelId this.closeLabelId}}\n                    @controlOnly={{true}}\n                    @value={{this.inputValue}}\n                    @placeholder={{this.placeholder}}\n                    @isInvalid={{@isInvalid}}\n                    @compressed={{@compressed}}\n                    @disabled={{@disabled}}\n                    @readOnly={{@readOnly}}\n                    @fullWidth={{@fullWidth}}\n                    @inputRef={{this.registerInput}}\n                    {{on \"click\" this.onInputClick}}\n                    {{on \"keydown\" this.onInputKeyDown}}\n                    {{on \"blur\" this.onInputBlur}}\n                    {{on \"input\" this.onColorInput}}\n                  />\n                  <EuiScreenReaderOnly>\n                    <span>\n                      <span\n                        id={{this.openLabelId}}\n                        aria-hidden={{if this.isColorSelectorShown \"false\" \"true\"}}\n                      >{{this.labels.open}}</span>\n                      <span\n                        id={{this.closeLabelId}}\n                        aria-hidden={{if this.isColorSelectorShown \"true\" \"false\"}}\n                      >{{this.labels.closed}}</span>\n                    </span>\n                  </EuiScreenReaderOnly>\n                </:field>\n                <:append as |className|>{{yield className this.id to=\"append\"}}</:append>\n              </EuiFormControlLayout>\n          {{/if}}\n        </:button>\n        <:content>\n          <div\n            class={{this.rootClasses}}\n            data-test-subj=\"euiColorPickerPopover\"\n            ...attributes\n          >\n            <Composite\n              @picker={{this}}\n              @isInvalid={{@isInvalid}}\n              @disabled={{@disabled}}\n              @readOnly={{@readOnly}}\n              @showAlpha={{@showAlpha}}\n            />\n          </div>\n        </:content>\n      </EuiPopover>\n    {{/if}}\n  </template>\n}\n\ninterface CompositeSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    showAlpha?: boolean;\n  };\n}\n\n/**\n * The saturation square, hue slider, swatches and secondary input: the\n * flex column children of the root (upstream spaces them with `gap`).\n */\nclass Composite extends Component<CompositeSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    {{#if (eq2 this.picker.secondaryInputDisplay \"top\")}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n      />\n    {{/if}}\n    {{#if this.picker.showPicker}}\n      <EuiSaturation\n        @id={{this.picker.id}}\n        @color={{this.picker.usableHsv}}\n        @hex={{this.picker.hex}}\n        @onChange={{this.picker.onSaturationChange}}\n        {{this.picker.registerSaturation}}\n        {{on \"keydown\" this.picker.onPickerKeyDown}}\n      />\n      <EuiHue\n        @id={{this.picker.id}}\n        @hue={{hueOf this.picker.usableHsv}}\n        @hex={{this.picker.hex}}\n        @onChange={{this.picker.onHueChange}}\n        {{on \"keydown\" this.picker.onPickerKeyDown}}\n      />\n      <EuiScreenReaderOnly>\n        <p aria-live=\"polite\" aria-atomic=\"true\">{{this.picker.labels.selected}}: {{this.picker.hexLabel}}</p>\n      </EuiScreenReaderOnly>\n    {{/if}}\n    {{#if this.picker.showSwatches}}\n      <ul class={{this.picker.swatchesClasses}}>\n        {{#each this.picker.swatches as |swatch index|}}\n          <li>\n            <EuiColorPickerSwatch\n              class=\"euiColorPicker__swatchSelect\"\n              @color={{swatch}}\n              {{on \"click\" (fn this.picker.onSwatchClick swatch)}}\n              {{this.picker.registerFirstSwatch index}}\n            />\n          </li>\n        {{/each}}\n      </ul>\n    {{/if}}\n    {{#if (eq2 this.picker.secondaryInputDisplay \"bottom\")}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n      />\n    {{/if}}\n    {{#if @showAlpha}}\n      <div class={{this.picker.alphaRangeClasses}}>\n        <EuiRange\n          data-test-subj=\"euiColorPickerAlpha\"\n          aria-label={{this.picker.labels.alpha}}\n          @compressed={{true}}\n          @showInput={{true}}\n          @min={{0}}\n          @max={{100}}\n          @value={{this.picker.alphaRangeValue}}\n          @onChange={{this.picker.onAlphaChange}}\n        >\n          <:append><EuiFormLabel>%</EuiFormLabel></:append>\n        </EuiRange>\n      </div>\n    {{/if}}\n  </template>\n}\n\ninterface SecondaryInputSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n  };\n}\n\nclass SecondaryInput extends Component<SecondaryInputSignature> {\n  get picker(): EuiColorPicker {\n    return this.args.picker;\n  }\n\n  <template>\n    <EuiFormRow\n      @isInvalid={{@isInvalid}}\n      @error={{if @isInvalid this.picker.labels.error}}\n    >\n      <EuiFieldText\n        data-test-subj=\"euiColorPickerInput_{{this.picker.secondaryInputDisplay}}\"\n        autocomplete=\"off\"\n        aria-label={{this.picker.labels.color}}\n        @compressed={{this.picker.secondaryInputCompressed}}\n        @value={{this.picker.inputValue}}\n        @placeholder={{this.picker.placeholder}}\n        @clear={{if this.picker.canClear this.picker.clear}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n        {{on \"input\" this.picker.onColorInput}}\n      />\n    </EuiFormRow>\n  </template>\n}\n\nfunction hueOf(hsv: HSV): number {\n  return hsv[0];\n}\n\nfunction isInline(display?: string): boolean {\n  return display === 'inline';\n}\n\nfunction cssColor(color: ReturnType<typeof getChromaColor>): string | undefined {\n  return color ? color.css() : undefined;\n}\n\nfunction eq2(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n"],"names":["hsvOf","color","fallbackHue","HSV_FALLBACK","h","s","v","hsv","isNaN","EuiColorPicker","Component","g","prototype","service","i","tracked","ownId","randomId","openLabelId","closeLabelId","prevColor","input","saturation","firstSwatch","constructor","owner","args","getChromaColor","showAlpha","rgba","join","colorAsHsv","closeTimer","willDestroy","cancel","id","mode","secondaryInputDisplay","chromaColor","preferredFormat","format","parsed","parseColor","alphaChannel","alpha","alphaRangeValue","Number","alphaInput","toFixed","usableHsv","hex","inputValue","toUpperCase","HEX_FALLBACK","placeholder","undefined","euiI18n","lookupToken","showPicker","showSwatches","swatches","useEuiPaletteColorBlind","getEuiThemeContext","upstream","canClear","Boolean","isClearable","readOnly","disabled","rootClasses","context","styles","useEuiBorealisStyles","euiColorPickerStyles","euiClass","boxReset","euiColorPicker","n","cached","swatchesClasses","listReset","euiColorPicker__swatches","alphaRangeClasses","euiColorPicker__alphaRange","flexShrink","iconColor","cssColor","iconCss","euiColorPicker__swatchInputIcon","panelClasses","hexLabel","secondaryInputCompressed","display","compressed","labels","t","token","text","popover","selected","error","open","closed","select","output","RGB_FALLBACK","isValid","change","onChange","updateColorAsHsv","updateWithHsv","chroma","rgb","RGB_JOIN","showColorSelector","isColorSelectorShown","onFocus","action","closeColorSelector","onBlur","toggle","finalSelection","focus","next","onInputClick","onInputKeyDown","event","key","preventDefault","onInputBlur","onLayoutKeyDown","onPickerKeyDown","onColorInput","target","value","clear","onSaturationChange","onHueChange","hue","onSwatchClick","swatch","onAlphaChange","parseInt","slice","registerInput","element","registerSaturation","modifier","registerFirstSwatch","index","setComponentTemplate","precompileTemplate","strictMode","scope","isInline","Composite","EuiPopover","EuiFormControlLayout","on","EuiFieldText","EuiScreenReaderOnly","picker","eq2","SecondaryInput","EuiSaturation","EuiHue","hueOf","EuiColorPickerSwatch","fn","EuiRange","EuiFormLabel","EuiFormRow","css","a","b"],"mappings":"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"}

package/dist/components/eui-color-stops/thumb.js

@@ -24,7 +24,8 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
-/** @private One stop of EuiColorStops: a thumb opening an edit popover. */class EuiColorStopThumb extends Component {
+/** @private One stop of EuiColorStops: a thumb opening an edit popover. */const noop = () => {};
+class EuiColorStopThumb extends Component {
   constructor(owner, args) {
     super(owner, args);
     deprecateRemovedUpstream('eui-color-stops-thumb', 'EuiColorStopThumb', 'There is no direct upstream replacement; for predefined gradients use EuiColorPalettePicker.');
@@ -140,17 +141,28 @@ import { g, i, n } from 'decorator-transforms/runtime-esm';
         y: e.clientY
       }, parent, this.args.globalMin, this.args.globalMax));
     };
-    const up = () => {
-      document.removeEventListener('mousemove', move);
-      document.removeEventListener('mouseup', up);
-    };
+    const up = () => this.stopDrag();
     event.preventDefault();
+    this.stopDrag();
     document.addEventListener('mousemove', move);
     document.addEventListener('mouseup', up);
+    window.addEventListener('blur', up);
+    this.stopDrag = () => {
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', up);
+      window.removeEventListener('blur', up);
+      this.stopDrag = noop;
+    };
   }
+  /** Removes the document drag listeners (also on teardown mid-drag). */
   static {
     n(this.prototype, "onMouseDown", [action]);
   }
+  stopDrag = noop;
+  willDestroy() {
+    super.willDestroy();
+    this.stopDrag();
+  }
   onKeyDown(event) {
     switch (event.key) {
       case 'Enter':

package/dist/components/eui-color-stops/thumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumb.js","sources":["../../../src/components/eui-color-stops/thumb.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport {\n  getChromaColor,\n  getPositionFromStop,\n  getStopFromMouseLocation,\n  isColorInvalid,\n  isStopInvalid\n} from '../../-private/color.ts';\nimport { deprecateRemovedUpstream } from '../../-private/removed-upstream.ts';\nimport cssStyle from '../../-private/css-style.ts';\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport {\n  buttonReset,\n  euiColorStopStyles,\n  euiColorStopThumbPopoverStyles,\n  euiColorStopThumbStyles\n} from '../../utils/eui/color-picker.ts';\nimport { euiRangeThumbStyles } from '../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../utils/eui/styles.ts';\nimport EuiButtonIcon from '../eui-button-icon.gts';\nimport EuiColorPicker from '../eui-color-picker.gts';\nimport EuiFieldNumber from '../eui-field-number.gts';\nimport EuiFlexGroup from '../eui-flex-group.gts';\nimport EuiFlexItem from '../eui-flex-item.gts';\nimport EuiFormRow from '../eui-form-row.gts';\nimport EuiPopover from '../eui-popover.gts';\nimport EuiScreenReaderOnly from '../eui-screen-reader-only.gts';\nimport EuiSpacer from '../eui-spacer.gts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type { ColorStop } from '../../-private/color.ts';\nimport type { CSSInterpolation } from '@emotion/css/create-instance';\nimport type Owner from '@ember/owner';\n\ninterface ThumbSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    stop: number;\n    color: string;\n    index: number;\n    count: number;\n    onChange: (colorStop: ColorStop) => void;\n    onFocus: () => void;\n    onRemove?: () => void;\n    globalMin: number;\n    globalMax: number;\n    localMin: number;\n    localMax: number;\n    min?: number;\n    max?: number;\n    isRangeMin: boolean;\n    isRangeMax: boolean;\n    trackWidth: number;\n    parent?: HTMLElement;\n    mode?: 'default' | 'swatch' | 'picker';\n    showAlpha?: boolean;\n    swatches?: string[];\n    disabled?: boolean;\n    readOnly?: boolean;\n    isPopoverOpen: boolean;\n    openPopover: () => void;\n    closePopover: () => void;\n  };\n}\n\n/** @private One stop of EuiColorStops: a thumb opening an edit popover. */\nexport default class EuiColorStopThumb extends Component<ThumbSignature> {\n  constructor(owner: Owner, args: ThumbSignature['Args']) {\n    super(owner, args);\n    deprecateRemovedUpstream(\n      'eui-color-stops-thumb',\n      'EuiColorStopThumb',\n      'There is no direct upstream replacement; for predefined gradients use EuiColorPalettePicker.'\n    );\n  }\n\n  @service declare euiI18n: EuiI18n;\n\n  @tracked hasFocus = false;\n\n  get background(): string | undefined {\n    return getChromaColor(this.args.color, this.args.showAlpha)?.css();\n  }\n\n  get position(): string {\n    const { stop, trackWidth, globalMin, globalMax } = this.args;\n\n    return `${getPositionFromStop(stop, trackWidth, globalMin, globalMax)}%`;\n  }\n\n  get stopIsInvalid(): boolean {\n    return isStopInvalid(this.args.stop);\n  }\n\n  get colorIsInvalid(): boolean {\n    return isColorInvalid(this.args.color, this.args.showAlpha);\n  }\n\n  get hasFocusStyle(): boolean {\n    return this.hasFocus || this.args.isPopoverOpen;\n  }\n\n  /** The popover root: EUI 88.5.4 `euiColorStopThumbPopoverStyles`. */\n  @cached\n  get popoverCss(): CSSInterpolation {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorStopThumbPopoverStyles);\n\n    return [styles.euiColorStopThumbPopover, this.hasFocusStyle && styles.hasFocus];\n  }\n\n  /** Upstream EuiRangeThumb styles with the color stop thumb styles last. */\n  @cached\n  get thumbClasses(): string {\n    const context = getEuiThemeContext(this);\n    const range = useEuiBorealisStyles(context, euiRangeThumbStyles);\n    const styles = useEuiBorealisStyles(context, euiColorStopThumbStyles);\n\n    return `euiRangeThumb euiColorStopThumb ${euiClass(\n      context,\n      buttonReset,\n      range.euiRangeThumb,\n      styles.euiColorStopThumb,\n      this.args.isPopoverOpen && styles.isPopoverOpen\n    )}`;\n  }\n\n  @cached\n  get formClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorStopStyles);\n\n    return `euiColorStop ${euiClass(context, styles.euiColorStop)}`;\n  }\n\n  t = (token: string, text: string): string => this.euiI18n.lookupToken(`euiColorStopThumb.${token}`, text);\n\n  get valueText(): string {\n    return `Stop: ${this.args.stop}, Color: ${this.args.color} (${this.args.index + 1} of ${this.args.count})`;\n  }\n\n  /** Clamped to the neighbouring stops. */\n  changeStop(value: number): void {\n    const { localMin, localMax } = this.args;\n\n    this.args.onChange({ stop: Math.min(Math.max(value, localMin), localMax), color: this.args.color });\n  }\n\n  @action\n  onStopInput(event: Event): void {\n    let value = parseFloat((event.target as HTMLInputElement).value);\n    const { globalMin, globalMax, min, max } = this.args;\n\n    if (value > globalMax && max !== undefined) value = globalMax;\n    if (value < globalMin && min !== undefined) value = globalMin;\n\n    this.args.onChange({ stop: value, color: this.args.color });\n  }\n\n  @action\n  onColorChange(color: string): void {\n    this.args.onChange({ stop: this.args.stop, color });\n  }\n\n  @action\n  onMouseDown(event: MouseEvent): void {\n    this.args.openPopover();\n\n    if (this.args.readOnly) return;\n\n    const parent = this.args.parent;\n    const move = (e: MouseEvent) => {\n      if (!parent) return;\n      this.changeStop(\n        getStopFromMouseLocation(\n          { x: e.clientX, y: e.clientY },\n          parent,\n          this.args.globalMin,\n          this.args.globalMax\n        )\n      );\n    };\n    const up = () => {\n      document.removeEventListener('mousemove', move);\n      document.removeEventListener('mouseup', up);\n    };\n\n    event.preventDefault();\n    document.addEventListener('mousemove', move);\n    document.addEventListener('mouseup', up);\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        this.args.openPopover();\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop - 1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop + 1);\n        break;\n    }\n  }\n\n  @action\n  remove(): void {\n    if (!this.args.onRemove) return;\n\n    this.args.closePopover();\n    this.args.onRemove();\n  }\n\n  @action\n  onFocus(): void {\n    this.hasFocus = true;\n    this.args.onFocus();\n  }\n\n  @action\n  setFocus(value: boolean): void {\n    this.hasFocus = value;\n  }\n\n  <template>\n    <EuiPopover\n      class=\"euiColorStopPopover\"\n      style={{cssStyle (hash left=this.position)}}\n      @rootCss={{this.popoverCss}}\n      @anchorClassName=\"euiColorStopThumbPopover__anchor\"\n      @panelPaddingSize=\"s\"\n      @isOpen={{@isPopoverOpen}}\n      @closePopover={{@closePopover}}\n      @ownFocus={{false}}\n    >\n      <:button>\n        {{! upstream EuiRangeThumb: a button with the slider role }}\n        <button\n          type=\"button\"\n          role=\"slider\"\n          class={{this.thumbClasses}}\n          data-test-subj=\"euiColorStopThumb\"\n          data-index=\"euiColorStop_{{@index}}\"\n          aria-valuemin={{@localMin}}\n          aria-valuemax={{@localMax}}\n          aria-valuenow={{@stop}}\n          aria-disabled={{if @disabled \"true\" \"false\"}}\n          aria-valuetext={{this.valueText}}\n          aria-label={{this.t\n            \"buttonAriaLabel\"\n            \"Press the Enter key to modify this stop. Press Escape to focus the group\"\n          }}\n          title={{this.t \"buttonTitle\" \"Click to edit, drag to reposition\"}}\n          tabindex=\"-1\"\n          disabled={{@disabled}}\n          style={{cssStyle (hash background=this.background)}}\n          {{on \"focus\" this.onFocus}}\n          {{on \"blur\" (fnSet this.setFocus false)}}\n          {{on \"mouseover\" (fnSet this.setFocus true)}}\n          {{on \"mouseout\" (fnSet this.setFocus false)}}\n          {{on \"keydown\" this.onKeyDown}}\n          {{on \"mousedown\" this.onMouseDown}}\n        ></button>\n      </:button>\n      <:content>\n        <div class={{this.formClasses}} data-test-subj=\"euiColorStopPopover\">\n          <EuiScreenReaderOnly>\n            <p aria-live=\"polite\">{{this.t\n                \"screenReaderAnnouncement\"\n                \"A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup.\"\n              }}</p>\n          </EuiScreenReaderOnly>\n          <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n            <EuiFlexItem>\n              <EuiFormRow\n                @label={{this.t \"stopLabel\" \"Stop value\"}}\n                @display=\"rowCompressed\"\n                @isInvalid={{this.stopIsInvalid}}\n                @error={{if this.stopIsInvalid (this.t \"stopErrorMessage\" \"Value is out of range\")}}\n              >\n                <EuiFieldNumber\n                  @compressed={{true}}\n                  @readOnly={{@readOnly}}\n                  @isInvalid={{this.stopIsInvalid}}\n                  @value={{unless this.stopIsInvalid @stop}}\n                  @min={{unless (or2 @isRangeMin (isUndefined @min)) @localMin}}\n                  @max={{unless (or2 @isRangeMax (isUndefined @max)) @localMax}}\n                  {{on \"input\" this.onStopInput}}\n                />\n              </EuiFormRow>\n            </EuiFlexItem>\n            {{#unless @readOnly}}\n              <EuiFlexItem @grow={{false}}>\n                <EuiFormRow @display=\"rowCompressed\" @hasEmptyLabelSpace={{true}}>\n                  <EuiButtonIcon\n                    @iconType=\"trash\"\n                    @color=\"danger\"\n                    @isDisabled={{isUndefined @onRemove}}\n                    aria-label={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    title={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    {{on \"click\" this.remove}}\n                  />\n                </EuiFormRow>\n              </EuiFlexItem>\n            {{/unless}}\n          </EuiFlexGroup>\n          {{#unless @readOnly}}\n            <EuiSpacer @size=\"s\" />\n          {{/unless}}\n          <EuiColorPicker\n            @color={{@color}}\n            @onChange={{this.onColorChange}}\n            @readOnly={{@readOnly}}\n            @mode={{if @readOnly \"secondaryInput\" @mode}}\n            @swatches={{@swatches}}\n            @display=\"inline\"\n            @showAlpha={{@showAlpha}}\n            @isInvalid={{this.colorIsInvalid}}\n            @secondaryInputDisplay={{if (isSwatch @mode) \"none\" \"bottom\"}}\n          />\n        </div>\n      </:content>\n    </EuiPopover>\n  </template>\n}\n\nfunction fnSet(setter: (value: boolean) => void, value: boolean): () => void {\n  return () => setter(value);\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction isUndefined(value: unknown): boolean {\n  return value === undefined;\n}\n\nfunction isSwatch(mode?: string): boolean {\n  return mode === 'swatch';\n}\n"],"names":["EuiColorStopThumb","Component","constructor","owner","args","deprecateRemovedUpstream","g","prototype","service","i","tracked","background","getChromaColor","color","showAlpha","css","position","stop","trackWidth","globalMin","globalMax","getPositionFromStop","stopIsInvalid","isStopInvalid","colorIsInvalid","isColorInvalid","hasFocusStyle","hasFocus","isPopoverOpen","popoverCss","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiColorStopThumbPopoverStyles","euiColorStopThumbPopover","n","cached","thumbClasses","range","euiRangeThumbStyles","euiColorStopThumbStyles","euiClass","buttonReset","euiRangeThumb","euiColorStopThumb","formClasses","euiColorStopStyles","euiColorStop","t","token","text","euiI18n","lookupToken","valueText","index","count","changeStop","value","localMin","localMax","onChange","Math","min","max","onStopInput","event","parseFloat","target","undefined","action","onColorChange","onMouseDown","openPopover","readOnly","parent","move","e","getStopFromMouseLocation","x","clientX","y","clientY","up","document","removeEventListener","preventDefault","addEventListener","onKeyDown","key","remove","onRemove","closePopover","onFocus","setFocus","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","cssStyle","hash","on","fnSet","EuiScreenReaderOnly","EuiFlexGroup","EuiFlexItem","EuiFormRow","EuiFieldNumber","or2","isUndefined","EuiButtonIcon","EuiSpacer","EuiColorPicker","isSwatch","setter","a","b","Boolean","mode"],"mappings":"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"}
+{"version":3,"file":"thumb.js","sources":["../../../src/components/eui-color-stops/thumb.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport {\n  getChromaColor,\n  getPositionFromStop,\n  getStopFromMouseLocation,\n  isColorInvalid,\n  isStopInvalid\n} from '../../-private/color.ts';\nimport { deprecateRemovedUpstream } from '../../-private/removed-upstream.ts';\nimport cssStyle from '../../-private/css-style.ts';\nimport { getEuiThemeContext } from '../../utils/emotion/consume.ts';\nimport {\n  buttonReset,\n  euiColorStopStyles,\n  euiColorStopThumbPopoverStyles,\n  euiColorStopThumbStyles\n} from '../../utils/eui/color-picker.ts';\nimport { euiRangeThumbStyles } from '../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../utils/eui/styles.ts';\nimport EuiButtonIcon from '../eui-button-icon.gts';\nimport EuiColorPicker from '../eui-color-picker.gts';\nimport EuiFieldNumber from '../eui-field-number.gts';\nimport EuiFlexGroup from '../eui-flex-group.gts';\nimport EuiFlexItem from '../eui-flex-item.gts';\nimport EuiFormRow from '../eui-form-row.gts';\nimport EuiPopover from '../eui-popover.gts';\nimport EuiScreenReaderOnly from '../eui-screen-reader-only.gts';\nimport EuiSpacer from '../eui-spacer.gts';\n\nimport type EuiI18n from '../../services/eui-i18n';\nimport type { ColorStop } from '../../-private/color.ts';\nimport type { CSSInterpolation } from '@emotion/css/create-instance';\nimport type Owner from '@ember/owner';\n\ninterface ThumbSignature {\n  Element: HTMLButtonElement;\n  Args: {\n    stop: number;\n    color: string;\n    index: number;\n    count: number;\n    onChange: (colorStop: ColorStop) => void;\n    onFocus: () => void;\n    onRemove?: () => void;\n    globalMin: number;\n    globalMax: number;\n    localMin: number;\n    localMax: number;\n    min?: number;\n    max?: number;\n    isRangeMin: boolean;\n    isRangeMax: boolean;\n    trackWidth: number;\n    parent?: HTMLElement;\n    mode?: 'default' | 'swatch' | 'picker';\n    showAlpha?: boolean;\n    swatches?: string[];\n    disabled?: boolean;\n    readOnly?: boolean;\n    isPopoverOpen: boolean;\n    openPopover: () => void;\n    closePopover: () => void;\n  };\n}\n\n/** @private One stop of EuiColorStops: a thumb opening an edit popover. */\nconst noop = (): void => {};\n\nexport default class EuiColorStopThumb extends Component<ThumbSignature> {\n  constructor(owner: Owner, args: ThumbSignature['Args']) {\n    super(owner, args);\n    deprecateRemovedUpstream(\n      'eui-color-stops-thumb',\n      'EuiColorStopThumb',\n      'There is no direct upstream replacement; for predefined gradients use EuiColorPalettePicker.'\n    );\n  }\n\n  @service declare euiI18n: EuiI18n;\n\n  @tracked hasFocus = false;\n\n  get background(): string | undefined {\n    return getChromaColor(this.args.color, this.args.showAlpha)?.css();\n  }\n\n  get position(): string {\n    const { stop, trackWidth, globalMin, globalMax } = this.args;\n\n    return `${getPositionFromStop(stop, trackWidth, globalMin, globalMax)}%`;\n  }\n\n  get stopIsInvalid(): boolean {\n    return isStopInvalid(this.args.stop);\n  }\n\n  get colorIsInvalid(): boolean {\n    return isColorInvalid(this.args.color, this.args.showAlpha);\n  }\n\n  get hasFocusStyle(): boolean {\n    return this.hasFocus || this.args.isPopoverOpen;\n  }\n\n  /** The popover root: EUI 88.5.4 `euiColorStopThumbPopoverStyles`. */\n  @cached\n  get popoverCss(): CSSInterpolation {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorStopThumbPopoverStyles);\n\n    return [styles.euiColorStopThumbPopover, this.hasFocusStyle && styles.hasFocus];\n  }\n\n  /** Upstream EuiRangeThumb styles with the color stop thumb styles last. */\n  @cached\n  get thumbClasses(): string {\n    const context = getEuiThemeContext(this);\n    const range = useEuiBorealisStyles(context, euiRangeThumbStyles);\n    const styles = useEuiBorealisStyles(context, euiColorStopThumbStyles);\n\n    return `euiRangeThumb euiColorStopThumb ${euiClass(\n      context,\n      buttonReset,\n      range.euiRangeThumb,\n      styles.euiColorStopThumb,\n      this.args.isPopoverOpen && styles.isPopoverOpen\n    )}`;\n  }\n\n  @cached\n  get formClasses(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiColorStopStyles);\n\n    return `euiColorStop ${euiClass(context, styles.euiColorStop)}`;\n  }\n\n  t = (token: string, text: string): string => this.euiI18n.lookupToken(`euiColorStopThumb.${token}`, text);\n\n  get valueText(): string {\n    return `Stop: ${this.args.stop}, Color: ${this.args.color} (${this.args.index + 1} of ${this.args.count})`;\n  }\n\n  /** Clamped to the neighbouring stops. */\n  changeStop(value: number): void {\n    const { localMin, localMax } = this.args;\n\n    this.args.onChange({ stop: Math.min(Math.max(value, localMin), localMax), color: this.args.color });\n  }\n\n  @action\n  onStopInput(event: Event): void {\n    let value = parseFloat((event.target as HTMLInputElement).value);\n    const { globalMin, globalMax, min, max } = this.args;\n\n    if (value > globalMax && max !== undefined) value = globalMax;\n    if (value < globalMin && min !== undefined) value = globalMin;\n\n    this.args.onChange({ stop: value, color: this.args.color });\n  }\n\n  @action\n  onColorChange(color: string): void {\n    this.args.onChange({ stop: this.args.stop, color });\n  }\n\n  @action\n  onMouseDown(event: MouseEvent): void {\n    this.args.openPopover();\n\n    if (this.args.readOnly) return;\n\n    const parent = this.args.parent;\n    const move = (e: MouseEvent) => {\n      if (!parent) return;\n      this.changeStop(\n        getStopFromMouseLocation(\n          { x: e.clientX, y: e.clientY },\n          parent,\n          this.args.globalMin,\n          this.args.globalMax\n        )\n      );\n    };\n    const up = () => this.stopDrag();\n\n    event.preventDefault();\n    this.stopDrag();\n    document.addEventListener('mousemove', move);\n    document.addEventListener('mouseup', up);\n    window.addEventListener('blur', up);\n    this.stopDrag = () => {\n      document.removeEventListener('mousemove', move);\n      document.removeEventListener('mouseup', up);\n      window.removeEventListener('blur', up);\n      this.stopDrag = noop;\n    };\n  }\n\n  /** Removes the document drag listeners (also on teardown mid-drag). */\n  stopDrag: () => void = noop;\n\n  willDestroy(): void {\n    super.willDestroy();\n    this.stopDrag();\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    switch (event.key) {\n      case 'Enter':\n        event.preventDefault();\n        this.args.openPopover();\n        break;\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop - 1);\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (!this.args.readOnly) this.changeStop(this.args.stop + 1);\n        break;\n    }\n  }\n\n  @action\n  remove(): void {\n    if (!this.args.onRemove) return;\n\n    this.args.closePopover();\n    this.args.onRemove();\n  }\n\n  @action\n  onFocus(): void {\n    this.hasFocus = true;\n    this.args.onFocus();\n  }\n\n  @action\n  setFocus(value: boolean): void {\n    this.hasFocus = value;\n  }\n\n  <template>\n    <EuiPopover\n      class=\"euiColorStopPopover\"\n      style={{cssStyle (hash left=this.position)}}\n      @rootCss={{this.popoverCss}}\n      @anchorClassName=\"euiColorStopThumbPopover__anchor\"\n      @panelPaddingSize=\"s\"\n      @isOpen={{@isPopoverOpen}}\n      @closePopover={{@closePopover}}\n      @ownFocus={{false}}\n    >\n      <:button>\n        {{! upstream EuiRangeThumb: a button with the slider role }}\n        <button\n          type=\"button\"\n          role=\"slider\"\n          class={{this.thumbClasses}}\n          data-test-subj=\"euiColorStopThumb\"\n          data-index=\"euiColorStop_{{@index}}\"\n          aria-valuemin={{@localMin}}\n          aria-valuemax={{@localMax}}\n          aria-valuenow={{@stop}}\n          aria-disabled={{if @disabled \"true\" \"false\"}}\n          aria-valuetext={{this.valueText}}\n          aria-label={{this.t\n            \"buttonAriaLabel\"\n            \"Press the Enter key to modify this stop. Press Escape to focus the group\"\n          }}\n          title={{this.t \"buttonTitle\" \"Click to edit, drag to reposition\"}}\n          tabindex=\"-1\"\n          disabled={{@disabled}}\n          style={{cssStyle (hash background=this.background)}}\n          {{on \"focus\" this.onFocus}}\n          {{on \"blur\" (fnSet this.setFocus false)}}\n          {{on \"mouseover\" (fnSet this.setFocus true)}}\n          {{on \"mouseout\" (fnSet this.setFocus false)}}\n          {{on \"keydown\" this.onKeyDown}}\n          {{on \"mousedown\" this.onMouseDown}}\n        ></button>\n      </:button>\n      <:content>\n        <div class={{this.formClasses}} data-test-subj=\"euiColorStopPopover\">\n          <EuiScreenReaderOnly>\n            <p aria-live=\"polite\">{{this.t\n                \"screenReaderAnnouncement\"\n                \"A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup.\"\n              }}</p>\n          </EuiScreenReaderOnly>\n          <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n            <EuiFlexItem>\n              <EuiFormRow\n                @label={{this.t \"stopLabel\" \"Stop value\"}}\n                @display=\"rowCompressed\"\n                @isInvalid={{this.stopIsInvalid}}\n                @error={{if this.stopIsInvalid (this.t \"stopErrorMessage\" \"Value is out of range\")}}\n              >\n                <EuiFieldNumber\n                  @compressed={{true}}\n                  @readOnly={{@readOnly}}\n                  @isInvalid={{this.stopIsInvalid}}\n                  @value={{unless this.stopIsInvalid @stop}}\n                  @min={{unless (or2 @isRangeMin (isUndefined @min)) @localMin}}\n                  @max={{unless (or2 @isRangeMax (isUndefined @max)) @localMax}}\n                  {{on \"input\" this.onStopInput}}\n                />\n              </EuiFormRow>\n            </EuiFlexItem>\n            {{#unless @readOnly}}\n              <EuiFlexItem @grow={{false}}>\n                <EuiFormRow @display=\"rowCompressed\" @hasEmptyLabelSpace={{true}}>\n                  <EuiButtonIcon\n                    @iconType=\"trash\"\n                    @color=\"danger\"\n                    @isDisabled={{isUndefined @onRemove}}\n                    aria-label={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    title={{this.t \"removeLabel\" \"Remove this stop\"}}\n                    {{on \"click\" this.remove}}\n                  />\n                </EuiFormRow>\n              </EuiFlexItem>\n            {{/unless}}\n          </EuiFlexGroup>\n          {{#unless @readOnly}}\n            <EuiSpacer @size=\"s\" />\n          {{/unless}}\n          <EuiColorPicker\n            @color={{@color}}\n            @onChange={{this.onColorChange}}\n            @readOnly={{@readOnly}}\n            @mode={{if @readOnly \"secondaryInput\" @mode}}\n            @swatches={{@swatches}}\n            @display=\"inline\"\n            @showAlpha={{@showAlpha}}\n            @isInvalid={{this.colorIsInvalid}}\n            @secondaryInputDisplay={{if (isSwatch @mode) \"none\" \"bottom\"}}\n          />\n        </div>\n      </:content>\n    </EuiPopover>\n  </template>\n}\n\nfunction fnSet(setter: (value: boolean) => void, value: boolean): () => void {\n  return () => setter(value);\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction isUndefined(value: unknown): boolean {\n  return value === undefined;\n}\n\nfunction isSwatch(mode?: string): boolean {\n  return mode === 'swatch';\n}\n"],"names":["noop","EuiColorStopThumb","Component","constructor","owner","args","deprecateRemovedUpstream","g","prototype","service","i","tracked","background","getChromaColor","color","showAlpha","css","position","stop","trackWidth","globalMin","globalMax","getPositionFromStop","stopIsInvalid","isStopInvalid","colorIsInvalid","isColorInvalid","hasFocusStyle","hasFocus","isPopoverOpen","popoverCss","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiColorStopThumbPopoverStyles","euiColorStopThumbPopover","n","cached","thumbClasses","range","euiRangeThumbStyles","euiColorStopThumbStyles","euiClass","buttonReset","euiRangeThumb","euiColorStopThumb","formClasses","euiColorStopStyles","euiColorStop","t","token","text","euiI18n","lookupToken","valueText","index","count","changeStop","value","localMin","localMax","onChange","Math","min","max","onStopInput","event","parseFloat","target","undefined","action","onColorChange","onMouseDown","openPopover","readOnly","parent","move","e","getStopFromMouseLocation","x","clientX","y","clientY","up","stopDrag","preventDefault","document","addEventListener","window","removeEventListener","willDestroy","onKeyDown","key","remove","onRemove","closePopover","onFocus","setFocus","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","cssStyle","hash","on","fnSet","EuiScreenReaderOnly","EuiFlexGroup","EuiFlexItem","EuiFormRow","EuiFieldNumber","or2","isUndefined","EuiButtonIcon","EuiSpacer","EuiColorPicker","isSwatch","setter","a","b","Boolean","mode"],"mappings":"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"}

package/dist/components/eui-combo-box/trigger/input.js

@@ -46,6 +46,10 @@ class EuiComboBoxTriggerInputComponent extends PowerSelectInput {
   * input sizes to its content (`field-sizing`) and fills the rest of the
   * row, so it wraps below the pills like upstream's. With a placeholder or
   * plain text selection it takes the whole row.
+  *
+  * Not upstream: under a plain text selection rendered with EuiComboBox's
+  * block (`@hidesValue`), the text is transparent but the caret is not.
+  * The value stays the label (screen readers, typing over it).
   */
   get inputClass() {
     const context = getEuiThemeContext(this);
@@ -59,6 +63,13 @@ class EuiComboBoxTriggerInputComponent extends PowerSelectInput {
       fieldSizing: 'content',
       // @ts-expect-error `fillWidth` is passed by EuiComboBoxTrigger
       inlineSize: this.args.fillWidth ? '100%' : undefined
+    },
+    // @ts-expect-error `hidesValue` is passed by EuiComboBoxTrigger
+    this.args.hidesValue && {
+      '&, &:disabled': {
+        color: 'transparent',
+        caretColor: context.upstream.euiTheme.colors.textParagraph
+      }
     });
   }
   /** An option is highlighted in the open list (`aria-activedescendant`). */
@@ -119,16 +130,26 @@ class EuiComboBoxTriggerInputComponent extends PowerSelectInput {
     const onClick = this.args.onPlainTextClick;
     // @ts-expect-error `asPlainText` is passed by EuiComboBoxTrigger
     if (this.args.asPlainText) onClick?.(event);
+    this.selectHiddenValue(event);
   }
-  /** The id of the options list while it is open (upstream `aria-controls`). */
+  /**
+  * Not upstream: under a selection's block the value's text is hidden, so
+  * typing replaces it (as a new search) instead of adding to it.
+  */
   static {
     n(this.prototype, "handleClick", [action]);
   }
+  selectHiddenValue = event => {
+    // @ts-expect-error `hidesValue` is passed by EuiComboBoxTrigger
+    if (!this.args.hidesValue) return;
+    event.target?.select?.();
+  };
+  /** The id of the options list while it is open (upstream `aria-controls`). */
   get ariaControls() {
     return this.args.select.isOpen ? this.args.listboxId : undefined;
   }
   static {
-    setComponentTemplate(precompileTemplate("<div class={{this.containerClass}}>\n  <input tabindex=\"-1\" aria-hidden=\"true\" style=\"opacity: 0; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important; padding: 0; pointer-events: none;\" class=\"fake-input-for-html-form-validity\" {{!--@glint-expect-error--}} {{validatableControl @isInvalid}} />\n  <input class=\"ember-power-select-trigger-multiple-input euiComboBox__input\n      {{this.inputClass}}\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" {{!--@glint-expect-error--}} autofocus={{@autoFocus}} spellcheck={{false}} id=\"ember-power-select-trigger-multiple-input-{{@select.uniqueId}}\" data-test-subj=\"comboBoxSearchInput\" value={{this.value}} role={{if @role @role \"combobox\"}} aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded={{if @select.isOpen \"true\" \"false\"}} aria-controls={{this.ariaControls}} {{!-- @glint-expect-error `required` is passed by EuiComboBoxTrigger --}} aria-required={{if @required \"true\"}} aria-activedescendant={{if this.hasActiveOption @ariaActiveDescendant}} aria-label={{@ariaLabel}} aria-labelledby={{@ariaLabelledBy}} aria-describedby={{@ariaDescribedBy}} {{!-- @glint-expect-error `isInvalid` is passed by EuiComboBoxTrigger --}} aria-invalid={{if @isInvalid \"true\"}} placeholder={{this.maybePlaceholder}} disabled={{@select.disabled}} tabindex={{@tabindex}} form=\"power-select-fake-form\" {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{on \"input\" this.handleInput}} {{on \"keydown\" this.handleKeydown}} {{on \"click\" this.handleClick}} {{this.registerInput}} />\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class={{this.containerClass}}>\n  <input tabindex=\"-1\" aria-hidden=\"true\" style=\"opacity: 0; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important; padding: 0; pointer-events: none;\" class=\"fake-input-for-html-form-validity\" {{!--@glint-expect-error--}} {{validatableControl @isInvalid}} />\n  <input class=\"ember-power-select-trigger-multiple-input euiComboBox__input\n      {{this.inputClass}}\" autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" {{!--@glint-expect-error--}} autofocus={{@autoFocus}} spellcheck={{false}} id=\"ember-power-select-trigger-multiple-input-{{@select.uniqueId}}\" data-test-subj=\"comboBoxSearchInput\" value={{this.value}} role={{if @role @role \"combobox\"}} aria-autocomplete=\"list\" aria-haspopup=\"listbox\" aria-expanded={{if @select.isOpen \"true\" \"false\"}} aria-controls={{this.ariaControls}} {{!-- @glint-expect-error `required` is passed by EuiComboBoxTrigger --}} aria-required={{if @required \"true\"}} aria-activedescendant={{if this.hasActiveOption @ariaActiveDescendant}} aria-label={{@ariaLabel}} aria-labelledby={{@ariaLabelledBy}} aria-describedby={{@ariaDescribedBy}} {{!-- @glint-expect-error `isInvalid` is passed by EuiComboBoxTrigger --}} aria-invalid={{if @isInvalid \"true\"}} placeholder={{this.maybePlaceholder}} disabled={{@select.disabled}} tabindex={{@tabindex}} form=\"power-select-fake-form\" {{on \"focus\" this.handleFocus}} {{on \"focus\" this.selectHiddenValue}} {{on \"blur\" this.handleBlur}} {{on \"input\" this.handleInput}} {{on \"keydown\" this.handleKeydown}} {{on \"click\" this.handleClick}} {{this.registerInput}} />\n</div>", {
       strictMode: true,
       scope: () => ({
         validatableControl,

package/dist/components/eui-combo-box/trigger/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../src/components/eui-combo-box/trigger/input.gts"],"sourcesContent":["import { cached } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport { modifier } from 'ember-modifier';\nimport PowerSelectInput from 'ember-power-select/components/power-select/input';\n\nimport validatableControl from '../../../modifiers/validatable-control.ts';\nimport { getEuiThemeContext } from '../../../utils/emotion/consume.ts';\nimport { euiComboBoxInputStyles } from '../../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../../utils/eui/styles.ts';\n\n/** Holds the search input and the hidden validity input. */\nconst INPUT_CONTAINER = {\n  position: 'relative',\n  display: 'flex',\n  flexGrow: 1,\n  minInlineSize: '2px',\n  maxInlineSize: '100%'\n} as const;\n\n/** @private The search input inside EuiComboBox's trigger. */\nexport default class EuiComboBoxTriggerInputComponent extends PowerSelectInput {\n  /** Upstream `inputRef`: the search input, or `null` when it goes away. */\n  registerInput = modifier((element: HTMLInputElement) => {\n    // @ts-expect-error `inputRef` is passed by EuiComboBoxTrigger\n    const inputRef = this.args.inputRef as\n      | ((element: HTMLInputElement | null) => void)\n      | undefined;\n\n    inputRef?.(element);\n\n    return () => inputRef?.(null);\n  });\n\n  /**\n   * Shows @placeholder while nothing is selected (power-select 9's own\n   * `placeholder` getter uses @searchPlaceholder instead).\n   */\n  get maybePlaceholder(): string | undefined {\n    if (!this.args.isDefaultPlaceholder) {\n      return undefined;\n    }\n\n    const selected = this.args.select.selected as unknown[] | undefined;\n\n    // upstream: no placeholder while searching\n    if (this.args.select.searchText) return '';\n\n    // @ts-expect-error `placeholder` is passed by EuiComboBoxTrigger\n    return !selected || selected.length === 0 ? this.args.placeholder || '' : '';\n  }\n\n  /**\n   * Upstream `euiComboBoxInput`: transparent, borderless, the form control\n   * text. Upstream measures the typed text for the input's width; here the\n   * input sizes to its content (`field-sizing`) and fills the rest of the\n   * row, so it wraps below the pills like upstream's. With a placeholder or\n   * plain text selection it takes the whole row.\n   */\n  @cached\n  get inputClass(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiComboBoxInputStyles);\n\n    return euiClass(\n      context,\n      { boxSizing: 'border-box', margin: 0, padding: 0 },\n      styles.euiComboBoxInput,\n      {\n        flexGrow: 1,\n        fieldSizing: 'content',\n        // @ts-expect-error `fillWidth` is passed by EuiComboBoxTrigger\n        inlineSize: this.args.fillWidth ? '100%' : undefined\n      }\n    );\n  }\n\n  /** An option is highlighted in the open list (`aria-activedescendant`). */\n  get hasActiveOption(): boolean {\n    const select = this.args.select;\n\n    return Boolean(select.isOpen && select.highlighted != null);\n  }\n\n  @cached\n  get containerClass(): string {\n    const context = getEuiThemeContext(this);\n\n    return euiClass(context, INPUT_CONTAINER);\n  }\n\n  /**\n   * Keys go to EuiComboBox first (through ember-power-select's keydown\n   * handler): it handles Enter, Escape, Tab, the arrows and Backspace\n   * like upstream.\n   */\n  @action\n  handleKeydown(e: KeyboardEvent): false | void {\n    if (e.target === null) return;\n\n    if (this.args.onKeydown && this.args.onKeydown(e) === false) {\n      e.stopPropagation();\n\n      return false;\n    }\n\n    if (\n      e.key === 'Backspace' ||\n      (e.key?.length === 1 && /[a-z0-9 ]/i.test(e.key))\n    ) {\n      // Backspace, keys 0-9, a-z or SPACE edit the text\n      e.stopPropagation();\n    }\n  }\n\n  /** Upstream keeps the typed text on blur (EuiComboBox decides). */\n  @action\n  handleBlur(event: FocusEvent): void {\n    this.args.onBlur?.(event);\n  }\n\n  /**\n   * Upstream `searchValue`: plain text single selection shows the search\n   * text, else the selected option's label, as the input's value.\n   */\n  get value(): string {\n    const search = this.args.select.searchText;\n    // @ts-expect-error `plainTextValue` is passed by EuiComboBoxTrigger\n    const plainText = this.args.plainTextValue as string | undefined;\n\n    if (plainText === undefined) return search;\n\n    return search || plainText;\n  }\n\n  /** Upstream re-opens the list on every click of a plain text input. */\n  @action\n  handleClick(event: MouseEvent): void {\n    // @ts-expect-error `onPlainTextClick` is passed by EuiComboBoxTrigger\n    const onClick = this.args.onPlainTextClick as\n      | ((event: MouseEvent) => void)\n      | undefined;\n\n    // @ts-expect-error `asPlainText` is passed by EuiComboBoxTrigger\n    if (this.args.asPlainText) onClick?.(event);\n  }\n\n  /** The id of the options list while it is open (upstream `aria-controls`). */\n  get ariaControls(): string | undefined {\n    return this.args.select.isOpen ? this.args.listboxId : undefined;\n  }\n\n  <template>\n    <div class={{this.containerClass}}>\n      <input\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        style=\"opacity: 0; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important; padding: 0; pointer-events: none;\"\n        class=\"fake-input-for-html-form-validity\"\n        {{!@glint-expect-error}}\n        {{validatableControl @isInvalid}}\n      />\n      <input\n        class=\"ember-power-select-trigger-multiple-input euiComboBox__input\n          {{this.inputClass}}\"\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        autocapitalize=\"off\"\n        {{!@glint-expect-error}}\n        autofocus={{@autoFocus}}\n        spellcheck={{false}}\n        id=\"ember-power-select-trigger-multiple-input-{{@select.uniqueId}}\"\n        data-test-subj=\"comboBoxSearchInput\"\n        value={{this.value}}\n        role={{if @role @role \"combobox\"}}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={{if @select.isOpen \"true\" \"false\"}}\n        aria-controls={{this.ariaControls}}\n        {{! @glint-expect-error `required` is passed by EuiComboBoxTrigger }}\n        aria-required={{if @required \"true\"}}\n        aria-activedescendant={{if this.hasActiveOption @ariaActiveDescendant}}\n        aria-label={{@ariaLabel}}\n        aria-labelledby={{@ariaLabelledBy}}\n        aria-describedby={{@ariaDescribedBy}}\n        {{! @glint-expect-error `isInvalid` is passed by EuiComboBoxTrigger }}\n        aria-invalid={{if @isInvalid \"true\"}}\n        placeholder={{this.maybePlaceholder}}\n        disabled={{@select.disabled}}\n        tabindex={{@tabindex}}\n        form=\"power-select-fake-form\"\n        {{on \"focus\" this.handleFocus}}\n        {{on \"blur\" this.handleBlur}}\n        {{on \"input\" this.handleInput}}\n        {{on \"keydown\" this.handleKeydown}}\n        {{on \"click\" this.handleClick}}\n        {{this.registerInput}}\n      />\n    </div>\n  </template>\n}\n"],"names":["INPUT_CONTAINER","position","display","flexGrow","minInlineSize","maxInlineSize","EuiComboBoxTriggerInputComponent","PowerSelectInput","registerInput","modifier","element","inputRef","args","maybePlaceholder","isDefaultPlaceholder","undefined","selected","select","searchText","length","placeholder","inputClass","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiComboBoxInputStyles","euiClass","boxSizing","margin","padding","euiComboBoxInput","fieldSizing","inlineSize","fillWidth","n","prototype","cached","hasActiveOption","Boolean","isOpen","highlighted","containerClass","handleKeydown","e","target","onKeydown","stopPropagation","key","test","action","handleBlur","event","onBlur","value","search","plainText","plainTextValue","handleClick","onClick","onPlainTextClick","asPlainText","ariaControls","listboxId","setComponentTemplate","precompileTemplate","strictMode","scope","validatableControl","on"],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../../src/components/eui-combo-box/trigger/input.gts"],"sourcesContent":["import { cached } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\n\nimport { modifier } from 'ember-modifier';\nimport PowerSelectInput from 'ember-power-select/components/power-select/input';\n\nimport validatableControl from '../../../modifiers/validatable-control.ts';\nimport { getEuiThemeContext } from '../../../utils/emotion/consume.ts';\nimport { euiComboBoxInputStyles } from '../../../utils/eui/styles.generated.ts';\nimport { euiClass, useEuiBorealisStyles } from '../../../utils/eui/styles.ts';\n\n/** Holds the search input and the hidden validity input. */\nconst INPUT_CONTAINER = {\n  position: 'relative',\n  display: 'flex',\n  flexGrow: 1,\n  minInlineSize: '2px',\n  maxInlineSize: '100%'\n} as const;\n\n/** @private The search input inside EuiComboBox's trigger. */\nexport default class EuiComboBoxTriggerInputComponent extends PowerSelectInput {\n  /** Upstream `inputRef`: the search input, or `null` when it goes away. */\n  registerInput = modifier((element: HTMLInputElement) => {\n    // @ts-expect-error `inputRef` is passed by EuiComboBoxTrigger\n    const inputRef = this.args.inputRef as\n      | ((element: HTMLInputElement | null) => void)\n      | undefined;\n\n    inputRef?.(element);\n\n    return () => inputRef?.(null);\n  });\n\n  /**\n   * Shows @placeholder while nothing is selected (power-select 9's own\n   * `placeholder` getter uses @searchPlaceholder instead).\n   */\n  get maybePlaceholder(): string | undefined {\n    if (!this.args.isDefaultPlaceholder) {\n      return undefined;\n    }\n\n    const selected = this.args.select.selected as unknown[] | undefined;\n\n    // upstream: no placeholder while searching\n    if (this.args.select.searchText) return '';\n\n    // @ts-expect-error `placeholder` is passed by EuiComboBoxTrigger\n    return !selected || selected.length === 0 ? this.args.placeholder || '' : '';\n  }\n\n  /**\n   * Upstream `euiComboBoxInput`: transparent, borderless, the form control\n   * text. Upstream measures the typed text for the input's width; here the\n   * input sizes to its content (`field-sizing`) and fills the rest of the\n   * row, so it wraps below the pills like upstream's. With a placeholder or\n   * plain text selection it takes the whole row.\n   *\n   * Not upstream: under a plain text selection rendered with EuiComboBox's\n   * block (`@hidesValue`), the text is transparent but the caret is not.\n   * The value stays the label (screen readers, typing over it).\n   */\n  @cached\n  get inputClass(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiComboBoxInputStyles);\n\n    return euiClass(\n      context,\n      { boxSizing: 'border-box', margin: 0, padding: 0 },\n      styles.euiComboBoxInput,\n      {\n        flexGrow: 1,\n        fieldSizing: 'content',\n        // @ts-expect-error `fillWidth` is passed by EuiComboBoxTrigger\n        inlineSize: this.args.fillWidth ? '100%' : undefined\n      },\n      // @ts-expect-error `hidesValue` is passed by EuiComboBoxTrigger\n      this.args.hidesValue && {\n        '&, &:disabled': {\n          color: 'transparent',\n          caretColor: context.upstream.euiTheme.colors.textParagraph\n        }\n      }\n    );\n  }\n\n  /** An option is highlighted in the open list (`aria-activedescendant`). */\n  get hasActiveOption(): boolean {\n    const select = this.args.select;\n\n    return Boolean(select.isOpen && select.highlighted != null);\n  }\n\n  @cached\n  get containerClass(): string {\n    const context = getEuiThemeContext(this);\n\n    return euiClass(context, INPUT_CONTAINER);\n  }\n\n  /**\n   * Keys go to EuiComboBox first (through ember-power-select's keydown\n   * handler): it handles Enter, Escape, Tab, the arrows and Backspace\n   * like upstream.\n   */\n  @action\n  handleKeydown(e: KeyboardEvent): false | void {\n    if (e.target === null) return;\n\n    if (this.args.onKeydown && this.args.onKeydown(e) === false) {\n      e.stopPropagation();\n\n      return false;\n    }\n\n    if (\n      e.key === 'Backspace' ||\n      (e.key?.length === 1 && /[a-z0-9 ]/i.test(e.key))\n    ) {\n      // Backspace, keys 0-9, a-z or SPACE edit the text\n      e.stopPropagation();\n    }\n  }\n\n  /** Upstream keeps the typed text on blur (EuiComboBox decides). */\n  @action\n  handleBlur(event: FocusEvent): void {\n    this.args.onBlur?.(event);\n  }\n\n  /**\n   * Upstream `searchValue`: plain text single selection shows the search\n   * text, else the selected option's label, as the input's value.\n   */\n  get value(): string {\n    const search = this.args.select.searchText;\n    // @ts-expect-error `plainTextValue` is passed by EuiComboBoxTrigger\n    const plainText = this.args.plainTextValue as string | undefined;\n\n    if (plainText === undefined) return search;\n\n    return search || plainText;\n  }\n\n  /** Upstream re-opens the list on every click of a plain text input. */\n  @action\n  handleClick(event: MouseEvent): void {\n    // @ts-expect-error `onPlainTextClick` is passed by EuiComboBoxTrigger\n    const onClick = this.args.onPlainTextClick as\n      | ((event: MouseEvent) => void)\n      | undefined;\n\n    // @ts-expect-error `asPlainText` is passed by EuiComboBoxTrigger\n    if (this.args.asPlainText) onClick?.(event);\n\n    this.selectHiddenValue(event);\n  }\n\n  /**\n   * Not upstream: under a selection's block the value's text is hidden, so\n   * typing replaces it (as a new search) instead of adding to it.\n   */\n  selectHiddenValue = (event: Event): void => {\n    // @ts-expect-error `hidesValue` is passed by EuiComboBoxTrigger\n    if (!this.args.hidesValue) return;\n\n    (event.target as HTMLInputElement | null)?.select?.();\n  };\n\n  /** The id of the options list while it is open (upstream `aria-controls`). */\n  get ariaControls(): string | undefined {\n    return this.args.select.isOpen ? this.args.listboxId : undefined;\n  }\n\n  <template>\n    <div class={{this.containerClass}}>\n      <input\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        style=\"opacity: 0; width:0px; height:0px; position: absolute; top: 40%; border:solid 1px transparent !important; margin:0px !important; padding: 0; pointer-events: none;\"\n        class=\"fake-input-for-html-form-validity\"\n        {{!@glint-expect-error}}\n        {{validatableControl @isInvalid}}\n      />\n      <input\n        class=\"ember-power-select-trigger-multiple-input euiComboBox__input\n          {{this.inputClass}}\"\n        autocomplete=\"off\"\n        autocorrect=\"off\"\n        autocapitalize=\"off\"\n        {{!@glint-expect-error}}\n        autofocus={{@autoFocus}}\n        spellcheck={{false}}\n        id=\"ember-power-select-trigger-multiple-input-{{@select.uniqueId}}\"\n        data-test-subj=\"comboBoxSearchInput\"\n        value={{this.value}}\n        role={{if @role @role \"combobox\"}}\n        aria-autocomplete=\"list\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={{if @select.isOpen \"true\" \"false\"}}\n        aria-controls={{this.ariaControls}}\n        {{! @glint-expect-error `required` is passed by EuiComboBoxTrigger }}\n        aria-required={{if @required \"true\"}}\n        aria-activedescendant={{if this.hasActiveOption @ariaActiveDescendant}}\n        aria-label={{@ariaLabel}}\n        aria-labelledby={{@ariaLabelledBy}}\n        aria-describedby={{@ariaDescribedBy}}\n        {{! @glint-expect-error `isInvalid` is passed by EuiComboBoxTrigger }}\n        aria-invalid={{if @isInvalid \"true\"}}\n        placeholder={{this.maybePlaceholder}}\n        disabled={{@select.disabled}}\n        tabindex={{@tabindex}}\n        form=\"power-select-fake-form\"\n        {{on \"focus\" this.handleFocus}}\n        {{on \"focus\" this.selectHiddenValue}}\n        {{on \"blur\" this.handleBlur}}\n        {{on \"input\" this.handleInput}}\n        {{on \"keydown\" this.handleKeydown}}\n        {{on \"click\" this.handleClick}}\n        {{this.registerInput}}\n      />\n    </div>\n  </template>\n}\n"],"names":["INPUT_CONTAINER","position","display","flexGrow","minInlineSize","maxInlineSize","EuiComboBoxTriggerInputComponent","PowerSelectInput","registerInput","modifier","element","inputRef","args","maybePlaceholder","isDefaultPlaceholder","undefined","selected","select","searchText","length","placeholder","inputClass","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiComboBoxInputStyles","euiClass","boxSizing","margin","padding","euiComboBoxInput","fieldSizing","inlineSize","fillWidth","hidesValue","color","caretColor","upstream","euiTheme","colors","textParagraph","n","prototype","cached","hasActiveOption","Boolean","isOpen","highlighted","containerClass","handleKeydown","e","target","onKeydown","stopPropagation","key","test","action","handleBlur","event","onBlur","value","search","plainText","plainTextValue","handleClick","onClick","onPlainTextClick","asPlainText","selectHiddenValue","ariaControls","listboxId","setComponentTemplate","precompileTemplate","strictMode","scope","validatableControl","on"],"mappings":"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"}

package/dist/components/eui-combo-box/trigger.js

@@ -103,7 +103,35 @@ class EuiComboBoxTriggerComponent extends PowerSelectTrigger {
     if (option === undefined) return undefined;
     return comboBoxOptionLabel(option, this.comboArgs.searchField) ?? '';
   }
+  /**
+  * Not upstream: with a caller's block, the plain text selection is
+  * rendered with it (as ember-eui 14 did) while nothing is typed; the
+  * input's text is hidden under it.
+  */
+  get showsPlainTextBlock() {
+    return Boolean(this.comboArgs.hasOptionBlock && this.plainTextOption !== undefined && !this.comboArgs.select.searchText);
+  }
+  /**
+  * The block over the input wrap, inside its padding, centered like the
+  * input's text; clicks go through to the input.
+  */
+  get plainTextBlockClass() {
+    const context = getEuiThemeContext(this);
+    return euiClass(context, {
+      position: 'absolute',
+      inset: 0,
+      padding: 'inherit',
+      display: 'flex',
+      alignItems: 'center',
+      minWidth: 0,
+      overflow: 'hidden',
+      pointerEvents: 'none'
+    });
+  }
   /** Plain text selection's option prepend/append: upstream `xxs` spacing. */
+  static {
+    n(this.prototype, "plainTextBlockClass", [cached]);
+  }
   get plainTextSideClasses() {
     const context = getEuiThemeContext(this);
     const styles = comboBoxAppendPrependStyles(String(context.upstream.euiTheme.size.xxs));
@@ -174,7 +202,9 @@ class EuiComboBoxTriggerComponent extends PowerSelectTrigger {
     {
       margin: 0,
       listStyle: 'none'
-    }, styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed, ...(plainText ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), select.disabled ? styles.disabled : stateCss, Boolean(this.prepend || this.append) && styles.inGroup);
+    }, styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed, ...(plainText ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), select.disabled ? styles.disabled : stateCss, Boolean(this.prepend || this.append) && styles.inGroup, this.showsPlainTextBlock && {
+      position: 'relative'
+    });
   }
   /**
   * Placeholder shown when searching is disabled: the form control
@@ -210,7 +240,7 @@ class EuiComboBoxTriggerComponent extends PowerSelectTrigger {
     n(this.prototype, "spacerClass", [cached]);
   }
   static {
-    setComponentTemplate(precompileTemplate("{{!-- @glint-nocheck: not typesafe yet --}}\n<EuiFormControlLayout @icon={{this.icon}} @inputId={{this.inputId}} @isPrependProvided={{if this.prepend true false}} @isAppendProvided={{if this.append true false}} @iconSide=\"right\" {{on \"mousedown\" this.keepToggle capture=true}} {{on \"touchstart\" this.keepToggle capture=true}} {{on \"touchend\" this.keepToggle capture=true}} {{on \"focusout\" this.toggleBlur}} {{on \"keydown\" this.toggleKeydown}} @fullWidth={{@fullWidth}} @compressed={{@compressed}} @readOnly={{@readOnly}} @isInvalid={{@isInvalid}} @clear={{this.clearProps}} @isLoading={{@isLoading}} @disabled={{@select.disabled}} @css={{this.layoutCss}}>\n  <:prepend>\n    {{#if (isSingleText this.prepend)}}\n      <EuiFormPrepend @label={{this.prepend}} @inputId={{this.inputId}} @compressed={{@compressed}} />\n    {{else}}\n      {{#each (nodeList this.prepend) as |node|}}\n        {{#if (isTextNode node)}}\n          <EuiFormLabel @for={{this.inputId}}>{{node}}</EuiFormLabel>\n        {{else}}\n          <EuiComboBoxNode @node={{node}} />\n        {{/if}}\n      {{/each}}\n    {{/if}}\n  </:prepend>\n  <:field>\n    {{!-- template-lint-disable --}}\n    <div id=\"ember-power-select-multiple-options-{{@select.uniqueId}}\" class=\"euiComboBox__inputWrap ember-power-select-multiple-options\n        {{if this.asPlainText \"euiComboBox__inputWrap--plainText\"}}\n        {{this.wrapClass}}\" data-test-subj=\"comboBoxInput\" ...attributes {{!-- no ember-power-select openChange: upstream keeps the search\n        text when the list closes (leftover text marks it invalid) --}} {{on \"touchstart\" this.chooseOption}} {{on \"mousedown\" this.chooseOption}}>\n      {{!-- template-lint-enable --}}\n      {{!-- upstream: no pill for plain text (the input shows it), and\n        no single selection pill while searching --}}\n      {{#if (and (not this.asPlainText) (or (and @singleSelection (not @select.searchText)) (not @singleSelection)))}}\n        {{#each @select.selected as |opt idx|}}\n          {{#if @selectedItemComponent}}\n            {{#let (component @selectedItemComponent extra=@extra option=opt select=@select) as |SelectedItemComponent|}}\n              <SelectedItemComponent />\n            {{/let}}\n          {{else}}\n            <EuiComboBoxPill class=\"ember-power-select-multiple-option\n                {{if opt.disabled \"ember-power-select-multiple-option--disabled\"}}\" @option={{opt}} @searchField={{@searchField}} @onClose={{if (or @select.disabled @singleSelection) false (if @onClose (fn (optional @onClose) opt) true)}} @dataSelectedIconIndex={{idx}} @color={{opt.color}} @asPlainText={{this.asPlainText}}>\n              {{yield opt @select}}\n            </EuiComboBoxPill>\n          {{/if}}\n        {{else}}{{#if (and @placeholder (not @searchEnabled))}}\n            <span class=\"ember-power-select-placeholder {{this.placeholderClass}}\">\n              {{@placeholder}}\n            </span>\n          {{/if}}{{/each}}\n      {{/if}}\n      {{#let (optionNode this.plainTextOption \"prepend\") (optionNode this.plainTextOption \"append\") as |plainPrepend plainAppend|}}\n      {{#if plainPrepend}}\n        <span class=\"euiComboBoxPlainTextSelection__prepend\n            {{this.plainTextSideClasses.prepend}}\"><EuiComboBoxNode @node={{plainPrepend}} @option={{this.plainTextOption}} /></span>\n      {{/if}}\n      {{#if @searchEnabled}}\n        {{#let (component EuiComboBoxTriggerInput select=@select ariaActiveDescendant=@ariaActiveDescendant ariaLabelledBy=(or @inputAriaLabelledBy @ariaLabelledBy) ariaDescribedBy=@ariaDescribedBy ariaLabel=(or @inputAriaLabel @ariaLabel) listboxId=@listboxId tabindex=@inputTabindex inputRef=@inputRef role=@inputRole required=@inputRequired buildSelection=@buildSelection placeholder=@placeholder placeholderComponent=@placeholderComponent searchField=@searchField onFocus=@onFocus isInvalid=@isInvalid fillWidth=(or this.asPlainText this.showPlaceholder) onBlur=@onBlur onKeydown=@onKeydown onInput=@onInput noSuggestions=@noSuggestions plainTextValue=this.plainTextValue asPlainText=this.asPlainText onPlainTextClick=@onPlainTextClick) as |InputComponent|}}\n          {{#let (component @placeholderComponent select=@select placeholder=@placeholder isMultipleWithSearch=true inputComponent=InputComponent displayPlaceholder=(and (not @select.searchText) (not @select.selected))) as |PlaceholderComponent|}}\n            <PlaceholderComponent />\n          {{/let}}\n        {{/let}}\n      {{else}}\n        {{#if this.asPlainText}}\n          {{#each @select.selected as |opt|}}\n            <EuiComboBoxPill @option={{opt}} @searchField={{@searchField}} @asPlainText={{true}}>{{yield opt @select}}</EuiComboBoxPill>\n          {{/each}}\n        {{/if}}\n        <div class=\"euiComboBox__input {{this.spacerClass}}\"></div>\n      {{/if}}\n      {{#if plainAppend}}\n        <span class=\"euiComboBoxPlainTextSelection__append\n            {{this.plainTextSideClasses.append}}\"><EuiComboBoxNode @node={{plainAppend}} @option={{this.plainTextOption}} /></span>\n      {{/if}}\n      {{/let}}\n      {{#if @screenReaderInstructions}}\n        {{!-- upstream: read when the input gets focus --}}\n        <EuiScreenReaderOnly>\n          <span aria-live=\"polite\" id=\"{{@select.uniqueId}}_removeOptionMessage\">{{@screenReaderInstructions}}</span>\n        </EuiScreenReaderOnly>\n      {{/if}}\n    </div>\n  </:field>\n  <:append>\n    {{#if (isSingleText this.append)}}\n      <EuiFormAppend @label={{this.append}} @inputId={{this.inputId}} @compressed={{@compressed}} />\n    {{else}}\n      {{#each (nodeList this.append) as |node|}}\n        {{#if (isTextNode node)}}\n          <EuiFormLabel @for={{this.inputId}}>{{node}}</EuiFormLabel>\n        {{else}}\n          <EuiComboBoxNode @node={{node}} />\n        {{/if}}\n      {{/each}}\n    {{/if}}\n  </:append>\n</EuiFormControlLayout>", {
+    setComponentTemplate(precompileTemplate("{{!-- @glint-nocheck: not typesafe yet --}}\n<EuiFormControlLayout @icon={{this.icon}} @inputId={{this.inputId}} @isPrependProvided={{if this.prepend true false}} @isAppendProvided={{if this.append true false}} @iconSide=\"right\" {{on \"mousedown\" this.keepToggle capture=true}} {{on \"touchstart\" this.keepToggle capture=true}} {{on \"touchend\" this.keepToggle capture=true}} {{on \"focusout\" this.toggleBlur}} {{on \"keydown\" this.toggleKeydown}} @fullWidth={{@fullWidth}} @compressed={{@compressed}} @readOnly={{@readOnly}} @isInvalid={{@isInvalid}} @clear={{this.clearProps}} @isLoading={{@isLoading}} @disabled={{@select.disabled}} @css={{this.layoutCss}}>\n  <:prepend>\n    {{#if (isSingleText this.prepend)}}\n      <EuiFormPrepend @label={{this.prepend}} @inputId={{this.inputId}} @compressed={{@compressed}} />\n    {{else}}\n      {{#each (nodeList this.prepend) as |node|}}\n        {{#if (isTextNode node)}}\n          <EuiFormLabel @for={{this.inputId}}>{{node}}</EuiFormLabel>\n        {{else}}\n          <EuiComboBoxNode @node={{node}} />\n        {{/if}}\n      {{/each}}\n    {{/if}}\n  </:prepend>\n  <:field>\n    {{!-- template-lint-disable --}}\n    <div id=\"ember-power-select-multiple-options-{{@select.uniqueId}}\" class=\"euiComboBox__inputWrap ember-power-select-multiple-options\n        {{if this.asPlainText \"euiComboBox__inputWrap--plainText\"}}\n        {{this.wrapClass}}\" data-test-subj=\"comboBoxInput\" ...attributes {{!-- no ember-power-select openChange: upstream keeps the search\n        text when the list closes (leftover text marks it invalid) --}} {{on \"touchstart\" this.chooseOption}} {{on \"mousedown\" this.chooseOption}}>\n      {{!-- template-lint-enable --}}\n      {{!-- upstream: no pill for plain text (the input shows it), and\n        no single selection pill while searching --}}\n      {{#if (and (not this.asPlainText) (or (and @singleSelection (not @select.searchText)) (not @singleSelection)))}}\n        {{#each @select.selected as |opt idx|}}\n          {{#if @selectedItemComponent}}\n            {{#let (component @selectedItemComponent extra=@extra option=opt select=@select) as |SelectedItemComponent|}}\n              <SelectedItemComponent />\n            {{/let}}\n          {{else}}\n            <EuiComboBoxPill class=\"ember-power-select-multiple-option\n                {{if opt.disabled \"ember-power-select-multiple-option--disabled\"}}\" @option={{opt}} @searchField={{@searchField}} @onClose={{if (or @select.disabled @singleSelection) false (if @onClose (fn (optional @onClose) opt) true)}} @dataSelectedIconIndex={{idx}} @color={{opt.color}} @asPlainText={{this.asPlainText}}>\n              {{yield opt @select}}\n            </EuiComboBoxPill>\n          {{/if}}\n        {{else}}{{#if (and @placeholder (not @searchEnabled))}}\n            <span class=\"ember-power-select-placeholder {{this.placeholderClass}}\">\n              {{@placeholder}}\n            </span>\n          {{/if}}{{/each}}\n      {{/if}}\n      {{#let (optionNode this.plainTextOption \"prepend\") (optionNode this.plainTextOption \"append\") as |plainPrepend plainAppend|}}\n      {{#if plainPrepend}}\n        <span class=\"euiComboBoxPlainTextSelection__prepend\n            {{this.plainTextSideClasses.prepend}}\"><EuiComboBoxNode @node={{plainPrepend}} @option={{this.plainTextOption}} /></span>\n      {{/if}}\n      {{#if @searchEnabled}}\n        {{#if this.showsPlainTextBlock}}\n          <span class=\"euiComboBoxPlainTextSelection__block\n              {{this.plainTextBlockClass}}\" aria-hidden=\"true\">{{yield this.plainTextOption @select}}</span>\n        {{/if}}\n        {{#let (component EuiComboBoxTriggerInput select=@select ariaActiveDescendant=@ariaActiveDescendant ariaLabelledBy=(or @inputAriaLabelledBy @ariaLabelledBy) ariaDescribedBy=@ariaDescribedBy ariaLabel=(or @inputAriaLabel @ariaLabel) listboxId=@listboxId tabindex=@inputTabindex inputRef=@inputRef role=@inputRole required=@inputRequired buildSelection=@buildSelection placeholder=@placeholder placeholderComponent=@placeholderComponent searchField=@searchField onFocus=@onFocus isInvalid=@isInvalid fillWidth=(or this.asPlainText this.showPlaceholder) onBlur=@onBlur onKeydown=@onKeydown onInput=@onInput noSuggestions=@noSuggestions plainTextValue=this.plainTextValue asPlainText=this.asPlainText hidesValue=this.showsPlainTextBlock onPlainTextClick=@onPlainTextClick) as |InputComponent|}}\n          {{#let (component @placeholderComponent select=@select placeholder=@placeholder isMultipleWithSearch=true inputComponent=InputComponent displayPlaceholder=(and (not @select.searchText) (not @select.selected))) as |PlaceholderComponent|}}\n            <PlaceholderComponent />\n          {{/let}}\n        {{/let}}\n      {{else}}\n        {{#if this.asPlainText}}\n          {{#each @select.selected as |opt|}}\n            <EuiComboBoxPill @option={{opt}} @searchField={{@searchField}} @asPlainText={{true}}>{{yield opt @select}}</EuiComboBoxPill>\n          {{/each}}\n        {{/if}}\n        <div class=\"euiComboBox__input {{this.spacerClass}}\"></div>\n      {{/if}}\n      {{#if plainAppend}}\n        <span class=\"euiComboBoxPlainTextSelection__append\n            {{this.plainTextSideClasses.append}}\"><EuiComboBoxNode @node={{plainAppend}} @option={{this.plainTextOption}} /></span>\n      {{/if}}\n      {{/let}}\n      {{#if @screenReaderInstructions}}\n        {{!-- upstream: read when the input gets focus --}}\n        <EuiScreenReaderOnly>\n          <span aria-live=\"polite\" id=\"{{@select.uniqueId}}_removeOptionMessage\">{{@screenReaderInstructions}}</span>\n        </EuiScreenReaderOnly>\n      {{/if}}\n    </div>\n  </:field>\n  <:append>\n    {{#if (isSingleText this.append)}}\n      <EuiFormAppend @label={{this.append}} @inputId={{this.inputId}} @compressed={{@compressed}} />\n    {{else}}\n      {{#each (nodeList this.append) as |node|}}\n        {{#if (isTextNode node)}}\n          <EuiFormLabel @for={{this.inputId}}>{{node}}</EuiFormLabel>\n        {{else}}\n          <EuiComboBoxNode @node={{node}} />\n        {{/if}}\n      {{/each}}\n    {{/if}}\n  </:append>\n</EuiFormControlLayout>", {
       strictMode: true,
       scope: () => ({
         EuiFormControlLayout,