@ember-eui/core 14.0.0 → 14.1.0

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

@@ -0,0 +1,371 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { next } from '@ember/runloop';
+import { service } from '@ember/service';
+import chroma from 'chroma-js';
+import { modifier } from 'ember-modifier';
+import { getChromaColor, HSV_FALLBACK, parseColor, HEX_FALLBACK, VISUALIZATION_COLORS, RGB_FALLBACK, RGB_JOIN } from '../-private/color.js';
+import cssStyle from '../-private/css-style.js';
+import { randomId } from '../-private/random-id.js';
+import EuiColorPickerSwatch from './eui-color-picker-swatch.js';
+import EuiFieldText from './eui-field-text.js';
+import EuiFormRow from './eui-form-row.js';
+import EuiHue from './eui-hue.js';
+import EuiPopoverComponent from './eui-popover.js';
+import EuiRangeComponent from './eui-range.js';
+import EuiSaturation from './eui-saturation.js';
+import EuiSpacer from './eui-spacer.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+function hsvOf(color, fallbackHue = 0) {
+  if (!color) return HSV_FALLBACK;
+  const [h, s, v] = color.hsv();
+  // black, white and grays have no hue
+  return [isNaN(h) ? fallbackHue : h, s, v];
+}
+class EuiColorPicker extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "isColorSelectorShown", [tracked], function () {
+      return false;
+    });
+  }
+  #isColorSelectorShown = (i(this, "isColorSelectorShown"), void 0);
+  static {
+    g(this.prototype, "colorAsHsv", [tracked]);
+  }
+  #colorAsHsv = (i(this, "colorAsHsv"), void 0);
+  static {
+    g(this.prototype, "alphaInput", [tracked]);
+  }
+  #alphaInput = (i(this, "alphaInput"), void 0);
+  ownId = `euiColorPicker_${randomId()}`;
+  prevColor;
+  input;
+  saturation;
+  firstSwatch;
+  constructor(owner, args) {
+    super(owner, args);
+    const color = getChromaColor(args.color, args.showAlpha);
+    this.prevColor = color ? color.rgba().join() : null;
+    this.colorAsHsv = color ? hsvOf(color) : HSV_FALLBACK;
+  }
+  get id() {
+    return this.args.id ?? this.ownId;
+  }
+  get mode() {
+    return this.args.mode ?? 'default';
+  }
+  get secondaryInputDisplay() {
+    return this.args.secondaryInputDisplay ?? 'none';
+  }
+  get chromaColor() {
+    return getChromaColor(this.args.color, this.args.showAlpha);
+  }
+  get preferredFormat() {
+    if (this.args.format) return this.args.format;
+    const parsed = parseColor(this.args.color);
+    return parsed !== null && typeof parsed === 'object' ? 'rgba' : 'hex';
+  }
+  get alphaChannel() {
+    return this.chromaColor ? this.chromaColor.alpha() : 1;
+  }
+  get alphaRangeValue() {
+    return Number(this.alphaInput ?? (this.alphaChannel * 100).toFixed());
+  }
+  /** The color as HSV; the hue is kept for colors without one. */
+  get usableHsv() {
+    const color = this.chromaColor;
+    if (color && color.rgba().join() !== this.prevColor) {
+      return hsvOf(color, this.colorAsHsv[0]);
+    }
+    return this.colorAsHsv;
+  }
+  get hex() {
+    return this.chromaColor?.hex();
+  }
+  get inputValue() {
+    return this.args.color ? this.args.color.toUpperCase() : HEX_FALLBACK;
+  }
+  get placeholder() {
+    if (this.args.color) return undefined;
+    return this.args.placeholder ?? this.euiI18n.lookupToken('euiColorPicker.transparent', 'Transparent');
+  }
+  get showPicker() {
+    return this.mode !== 'swatch' && this.mode !== 'secondaryInput';
+  }
+  get showSwatches() {
+    return this.mode !== 'picker' && this.mode !== 'secondaryInput';
+  }
+  get swatches() {
+    return this.args.swatches ?? VISUALIZATION_COLORS;
+  }
+  get canClear() {
+    return Boolean(this.args.isClearable && this.args.color && !this.args.readOnly && !this.args.disabled);
+  }
+  get panelClasses() {
+    return ['euiColorPicker__popoverPanel', this.mode === 'picker' && this.secondaryInputDisplay !== 'bottom' && 'euiColorPicker__popoverPanel--pickerOnly'].filter(Boolean).join(' ');
+  }
+  get labels() {
+    const t = (token, text) => this.euiI18n.lookupToken(`euiColorPicker.${token}`, text);
+    return {
+      popover: t('popoverLabel', 'Color selection dialog'),
+      color: t('colorLabel', 'Color value'),
+      error: t('colorErrorMessage', 'Invalid color value'),
+      alpha: t('alphaLabel', 'Alpha channel (opacity) value'),
+      open: t('openLabel', 'Press the escape key to close the popover'),
+      closed: t('closeLabel', 'Press the down key to open a popover containing color options')
+    };
+  }
+  output(text) {
+    const color = getChromaColor(text, true);
+    if (!color) return {
+      rgba: RGB_FALLBACK,
+      hex: HEX_FALLBACK,
+      isValid: false
+    };
+    // without @showAlpha a transparent color is returned but invalid
+    return {
+      rgba: color.rgba(),
+      hex: color.hex(),
+      isValid: this.args.showAlpha ? true : color.alpha() === 1
+    };
+  }
+  change(text) {
+    const output = this.output(text);
+    if (output.isValid) this.prevColor = output.rgba.join();
+    this.args.onChange(text, output);
+  }
+  updateColorAsHsv(hsv) {
+    this.colorAsHsv = [isNaN(hsv[0]) ? this.usableHsv[0] : hsv[0], hsv[1], hsv[2]];
+  }
+  updateWithHsv(hsv) {
+    const color = chroma.hsv(...hsv).alpha(this.alphaChannel);
+    const text = this.preferredFormat === 'rgba' ? (this.alphaChannel < 1 ? color.rgba() : color.rgb()).join(RGB_JOIN) : color.hex();
+    this.change(text);
+    this.updateColorAsHsv(hsv);
+  }
+  showColorSelector() {
+    if (this.isColorSelectorShown || this.args.readOnly) return;
+    this.args.onFocus?.();
+    this.isColorSelectorShown = true;
+  }
+  static {
+    n(this.prototype, "showColorSelector", [action]);
+  }
+  closeColorSelector() {
+    this.args.onBlur?.();
+    this.isColorSelectorShown = false;
+  }
+  static {
+    n(this.prototype, "closeColorSelector", [action]);
+  }
+  toggle() {
+    if (this.isColorSelectorShown) this.closeColorSelector();else this.showColorSelector();
+  }
+  /** Closes the popover and returns to the field, to keep adjusting. */
+  static {
+    n(this.prototype, "toggle", [action]);
+  }
+  finalSelection() {
+    this.input?.focus();
+    next(this, this.closeColorSelector);
+  }
+  static {
+    n(this.prototype, "finalSelection", [action]);
+  }
+  onInputClick() {
+    this.showColorSelector();
+  }
+  static {
+    n(this.prototype, "onInputClick", [action]);
+  }
+  onInputKeyDown(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+  static {
+    n(this.prototype, "onInputKeyDown", [action]);
+  }
+  onInputBlur() {
+    // closing the popover calls onBlur already
+    if (!this.isColorSelectorShown) this.args.onBlur?.();
+  }
+  /** Arrow down opens the popover, then moves into it. */
+  static {
+    n(this.prototype, "onInputBlur", [action]);
+  }
+  onLayoutKeyDown(event) {
+    if (event.key !== 'ArrowDown') return;
+    event.preventDefault();
+    if (!this.isColorSelectorShown) {
+      this.showColorSelector();
+      return;
+    }
+    (this.mode !== 'swatch' ? this.saturation : this.firstSwatch)?.focus();
+  }
+  /** Enter in the picker confirms the color. */
+  static {
+    n(this.prototype, "onLayoutKeyDown", [action]);
+  }
+  onPickerKeyDown(event) {
+    if (event.key !== 'Enter') return;
+    if (this.isColorSelectorShown) this.finalSelection();else this.showColorSelector();
+  }
+  static {
+    n(this.prototype, "onPickerKeyDown", [action]);
+  }
+  onColorInput(event) {
+    const text = event.target.value;
+    const color = getChromaColor(text, this.args.showAlpha);
+    this.change(text);
+    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));
+  }
+  static {
+    n(this.prototype, "onColorInput", [action]);
+  }
+  clear() {
+    this.change('');
+    if (this.secondaryInputDisplay === 'none' && this.isColorSelectorShown) {
+      this.closeColorSelector();
+    }
+  }
+  static {
+    n(this.prototype, "clear", [action]);
+  }
+  onSaturationChange([, s, v]) {
+    this.updateWithHsv([this.usableHsv[0], s, v]);
+  }
+  static {
+    n(this.prototype, "onSaturationChange", [action]);
+  }
+  onHueChange(hue) {
+    const [, s, v] = this.usableHsv;
+    this.updateWithHsv([hue, s, v]);
+  }
+  static {
+    n(this.prototype, "onHueChange", [action]);
+  }
+  onSwatchClick(swatch) {
+    const color = getChromaColor(swatch, this.args.showAlpha);
+    this.change(swatch);
+    if (color) this.updateColorAsHsv(hsvOf(color, this.usableHsv[0]));
+    this.finalSelection();
+  }
+  static {
+    n(this.prototype, "onSwatchClick", [action]);
+  }
+  onAlphaChange(event, isValid) {
+    const value = event.target.value;
+    this.alphaInput = value;
+    if (!isValid) return;
+    const alpha = parseInt(value, 10) / 100;
+    const color = this.chromaColor ? this.chromaColor.alpha(alpha) : null;
+    const hex = color ? color.hex() : HEX_FALLBACK;
+    const rgba = color ? color.rgba() : RGB_FALLBACK;
+    const text = this.preferredFormat === 'rgba' ? (alpha < 1 ? rgba : rgba.slice(0, 3)).join(RGB_JOIN) : hex;
+    this.alphaInput = undefined;
+    this.args.onChange(text, {
+      hex,
+      rgba,
+      isValid: Boolean(color)
+    });
+  }
+  static {
+    n(this.prototype, "onAlphaChange", [action]);
+  }
+  registerInput = element => {
+    this.input = element ?? undefined;
+  };
+  registerSaturation = modifier(element => {
+    this.saturation = element;
+  });
+  registerFirstSwatch = modifier((element, [index]) => {
+    if (index === 0) this.firstSwatch = element;
+  });
+  static {
+    setComponentTemplate(precompileTemplate("{{#if (isInline @display)}}\n  <div class=\"euiColorPicker\" ...attributes>\n    <Composite @picker={{this}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} @showAlpha={{@showAlpha}} />\n  </div>\n{{else}}\n  <EuiPopover class=\"euiColorPicker__popoverAnchor\" @isOpen={{this.isColorSelectorShown}} @closePopover={{this.finalSelection}} @panelClassName={{this.panelClasses}} @display={{if (has-block \"button\") \"inlineBlock\" \"block\"}} @attachToAnchor={{if (has-block \"button\") false true}} @anchorPosition=\"downLeft\" @panelPaddingSize=\"s\" @ownFocus={{false}} @initialFocus={{false}} @ariaLabel={{this.labels.popover}}>\n    <:button>\n      {{#if (has-block \"button\")}}\n        {{yield this.toggle to=\"button\"}}\n      {{else}}\n        {{!-- the chosen color reaches the swatch icon through currentColor --}}\n        <div style={{cssStyle (hash color=(cssColor this.chromaColor))}} {{on \"keydown\" this.onLayoutKeyDown}}>\n          {{#if (or2 (has-block \"prepend\") (has-block \"append\"))}}\n            <EuiFieldText class=\"euiColorPicker__input euiColorPicker__input--inGroup\" id={{this.id}} autocomplete=\"off\" aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}} @value={{this.inputValue}} @placeholder={{this.placeholder}} @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}} @clear={{if this.canClear this.clear}} @isInvalid={{@isInvalid}} @compressed={{@compressed}} @disabled={{@disabled}} @readOnly={{@readOnly}} @fullWidth={{@fullWidth}} @inputRef={{this.registerInput}} {{on \"click\" this.onInputClick}} {{on \"keydown\" this.onInputKeyDown}} {{on \"blur\" this.onInputBlur}} {{on \"input\" this.onColorInput}}>\n              <:prepend as |className inputId|>{{yield className inputId to=\"prepend\"}}</:prepend>\n              <:append as |className inputId|>{{yield className inputId to=\"append\"}}</:append>\n            </EuiFieldText>\n          {{else}}\n            <EuiFieldText class=\"euiColorPicker__input\" id={{this.id}} autocomplete=\"off\" aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}} @value={{this.inputValue}} @placeholder={{this.placeholder}} @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}} @clear={{if this.canClear this.clear}} @isInvalid={{@isInvalid}} @compressed={{@compressed}} @disabled={{@disabled}} @readOnly={{@readOnly}} @fullWidth={{@fullWidth}} @inputRef={{this.registerInput}} {{on \"click\" this.onInputClick}} {{on \"keydown\" this.onInputKeyDown}} {{on \"blur\" this.onInputBlur}} {{on \"input\" this.onColorInput}} />\n          {{/if}}\n        </div>\n      {{/if}}\n    </:button>\n    <:content>\n      <div class=\"euiColorPicker\" data-test-subj=\"euiColorPickerPopover\" ...attributes>\n        <Composite @picker={{this}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} @showAlpha={{@showAlpha}} />\n      </div>\n    </:content>\n  </EuiPopover>\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        isInline,
+        Composite,
+        EuiPopover: EuiPopoverComponent,
+        cssStyle,
+        hash,
+        cssColor,
+        on,
+        or2,
+        EuiFieldText
+      })
+    }), this);
+  }
+}
+/** The saturation square, hue slider, swatches and secondary input. */class Composite extends Component {
+  get picker() {
+    return this.args.picker;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if (eq2 this.picker.secondaryInputDisplay \"top\")}}\n  <SecondaryInput @picker={{this.picker}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} />\n  <EuiSpacer @size=\"s\" />\n{{/if}}\n{{#if this.picker.showPicker}}\n  <div {{on \"keydown\" this.picker.onPickerKeyDown}}>\n    <EuiSaturation @id={{this.picker.id}} @color={{this.picker.usableHsv}} @hex={{this.picker.hex}} @onChange={{this.picker.onSaturationChange}} {{this.picker.registerSaturation}} />\n    <EuiHue @id={{this.picker.id}} @hue={{hueOf this.picker.usableHsv}} @hex={{this.picker.hex}} @onChange={{this.picker.onHueChange}} />\n  </div>\n{{/if}}\n{{#if this.picker.showSwatches}}\n  <ul class=\"euiColorPicker__swatches\">\n    {{#each this.picker.swatches as |swatch index|}}\n      <li class=\"euiColorPicker__swatch-item\">\n        <EuiColorPickerSwatch class=\"euiColorPicker__swatchSelect\" @color={{swatch}} {{on \"click\" (fn this.picker.onSwatchClick swatch)}} {{this.picker.registerFirstSwatch index}} />\n      </li>\n    {{/each}}\n  </ul>\n{{/if}}\n{{#if (eq2 this.picker.secondaryInputDisplay \"bottom\")}}\n  {{#if (notEq2 this.picker.mode \"picker\")}}\n    <EuiSpacer @size=\"s\" />\n  {{/if}}\n  <SecondaryInput @picker={{this.picker}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} @compressed={{@compressed}} />\n{{/if}}\n{{#if @showAlpha}}\n  <EuiSpacer @size=\"s\" />\n  <EuiRange class=\"euiColorPicker__alphaRange\" data-test-subj=\"euiColorPickerAlpha\" aria-label={{this.picker.labels.alpha}} @compressed={{true}} @showInput={{true}} @min={{0}} @max={{100}} @value={{this.picker.alphaRangeValue}} @onChange={{this.picker.onAlphaChange}} />\n{{/if}}", {
+      strictMode: true,
+      scope: () => ({
+        eq2,
+        SecondaryInput,
+        EuiSpacer,
+        on,
+        EuiSaturation,
+        EuiHue,
+        hueOf,
+        EuiColorPickerSwatch,
+        fn,
+        notEq2,
+        EuiRange: EuiRangeComponent
+      })
+    }), this);
+  }
+}
+class SecondaryInput extends Component {
+  get picker() {
+    return this.args.picker;
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiFormRow @display=\"rowCompressed\" @isInvalid={{@isInvalid}} @error={{if @isInvalid this.picker.labels.error}}>\n  <EuiFieldText data-test-subj=\"euiColorPickerInput_{{this.picker.secondaryInputDisplay}}\" autocomplete=\"off\" aria-label={{this.picker.labels.color}} @compressed={{true}} @value={{this.picker.inputValue}} @placeholder={{this.picker.placeholder}} @clear={{if this.picker.canClear this.picker.clear}} @isInvalid={{@isInvalid}} @disabled={{@disabled}} @readOnly={{@readOnly}} {{on \"input\" this.picker.onColorInput}} />\n</EuiFormRow>", {
+      strictMode: true,
+      scope: () => ({
+        EuiFormRow,
+        EuiFieldText,
+        on
+      })
+    }), this);
+  }
+}
+function hueOf(hsv) {
+  return hsv[0];
+}
+function isInline(display) {
+  return display === 'inline';
+}
+function cssColor(color) {
+  return color ? color.css() : undefined;
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function eq2(a, b) {
+  return a === b;
+}
+function notEq2(a, b) {
+  return a !== b;
+}
+
+export { EuiColorPicker as default };
+//# sourceMappingURL=eui-color-picker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-color-picker.js","sources":["../../src/components/eui-color-picker.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { fn, hash } 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  VISUALIZATION_COLORS\n} from '../-private/color.ts';\nimport cssStyle from '../-private/css-style.ts';\nimport { randomId } from '../-private/random-id.ts';\nimport EuiColorPickerSwatch from './eui-color-picker-swatch.gts';\nimport EuiFieldText from './eui-field-text.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 EuiSpacer from './eui-spacer.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    /** 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  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 this.args.swatches ?? VISUALIZATION_COLORS;\n  }\n\n  get canClear(): boolean {\n    return Boolean(this.args.isClearable && this.args.color && !this.args.readOnly && !this.args.disabled);\n  }\n\n  get panelClasses(): string {\n    return [\n      'euiColorPicker__popoverPanel',\n      this.mode === 'picker' &&\n        this.secondaryInputDisplay !== 'bottom' &&\n        'euiColorPicker__popoverPanel--pickerOnly'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get labels(): {\n    popover: string;\n    color: string;\n    error: string;\n    alpha: string;\n    open: string;\n    closed: 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      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    };\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=\"euiColorPicker\" ...attributes>\n        <Composite\n          @picker={{this}}\n          @isInvalid={{@isInvalid}}\n          @disabled={{@disabled}}\n          @readOnly={{@readOnly}}\n          @compressed={{@compressed}}\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      >\n        <:button>\n          {{#if (has-block \"button\")}}\n            {{yield this.toggle to=\"button\"}}\n          {{else}}\n            {{! the chosen color reaches the swatch icon through currentColor }}\n            <div\n              style={{cssStyle (hash color=(cssColor this.chromaColor))}}\n              {{on \"keydown\" this.onLayoutKeyDown}}\n            >\n              {{#if (or2 (has-block \"prepend\") (has-block \"append\"))}}\n                <EuiFieldText\n                  class=\"euiColorPicker__input euiColorPicker__input--inGroup\"\n                  id={{this.id}}\n                  autocomplete=\"off\"\n                  aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}}\n                  @value={{this.inputValue}}\n                  @placeholder={{this.placeholder}}\n                  @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}}\n                  @clear={{if this.canClear this.clear}}\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                  <:prepend as |className inputId|>{{yield className inputId to=\"prepend\"}}</:prepend>\n                  <:append as |className inputId|>{{yield className inputId to=\"append\"}}</:append>\n                </EuiFieldText>\n              {{else}}\n                <EuiFieldText\n                  class=\"euiColorPicker__input\"\n                  id={{this.id}}\n                  autocomplete=\"off\"\n                  aria-label={{if this.isColorSelectorShown this.labels.open this.labels.closed}}\n                  @value={{this.inputValue}}\n                  @placeholder={{this.placeholder}}\n                  @icon={{if this.chromaColor \"swatchInput\" \"stopSlash\"}}\n                  @clear={{if this.canClear this.clear}}\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              {{/if}}\n            </div>\n          {{/if}}\n        </:button>\n        <:content>\n          <div class=\"euiColorPicker\" data-test-subj=\"euiColorPickerPopover\" ...attributes>\n            <Composite\n          @picker={{this}}\n          @isInvalid={{@isInvalid}}\n          @disabled={{@disabled}}\n          @readOnly={{@readOnly}}\n          @compressed={{@compressed}}\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    compressed?: boolean;\n    showAlpha?: boolean;\n  };\n}\n\n/** The saturation square, hue slider, swatches and secondary input. */\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        @compressed={{@compressed}}\n      />\n      <EuiSpacer @size=\"s\" />\n    {{/if}}\n    {{#if this.picker.showPicker}}\n      <div {{on \"keydown\" this.picker.onPickerKeyDown}}>\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        />\n        <EuiHue\n          @id={{this.picker.id}}\n          @hue={{hueOf this.picker.usableHsv}}\n          @hex={{this.picker.hex}}\n          @onChange={{this.picker.onHueChange}}\n        />\n      </div>\n    {{/if}}\n    {{#if this.picker.showSwatches}}\n      <ul class=\"euiColorPicker__swatches\">\n        {{#each this.picker.swatches as |swatch index|}}\n          <li class=\"euiColorPicker__swatch-item\">\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      {{#if (notEq2 this.picker.mode \"picker\")}}\n        <EuiSpacer @size=\"s\" />\n      {{/if}}\n      <SecondaryInput\n        @picker={{this.picker}}\n        @isInvalid={{@isInvalid}}\n        @disabled={{@disabled}}\n        @readOnly={{@readOnly}}\n        @compressed={{@compressed}}\n      />\n    {{/if}}\n    {{#if @showAlpha}}\n      <EuiSpacer @size=\"s\" />\n      <EuiRange\n        class=\"euiColorPicker__alphaRange\"\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    {{/if}}\n  </template>\n}\n\ninterface SecondaryInputSignature {\n  Args: {\n    picker: EuiColorPicker;\n    isInvalid?: boolean;\n    disabled?: boolean;\n    readOnly?: boolean;\n    compressed?: 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      @display=\"rowCompressed\"\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={{true}}\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 or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction eq2(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n\nfunction notEq2(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","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","VISUALIZATION_COLORS","canClear","Boolean","isClearable","readOnly","disabled","panelClasses","filter","labels","t","token","text","popover","error","open","closed","output","RGB_FALLBACK","isValid","change","onChange","updateColorAsHsv","updateWithHsv","chroma","rgb","RGB_JOIN","showColorSelector","isColorSelectorShown","onFocus","n","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","cssStyle","hash","cssColor","on","or2","EuiFieldText","picker","eq2","SecondaryInput","EuiSpacer","EuiSaturation","EuiHue","hueOf","EuiColorPickerSwatch","fn","notEq2","EuiRange","EuiFormRow","display","css","a","b"],"mappings":"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"}

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

@@ -0,0 +1,198 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import { getChromaColor, getPositionFromStop, isStopInvalid, isColorInvalid, getStopFromMouseLocation } from '../../-private/color.js';
+import cssStyle from '../../-private/css-style.js';
+import EuiButtonIcon from '../eui-button-icon.js';
+import EuiColorPicker from '../eui-color-picker.js';
+import EuiFieldNumber from '../eui-field-number.js';
+import EuiFlexGroup from '../eui-flex-group.js';
+import EuiFlexItem from '../eui-flex-item.js';
+import EuiFormRow from '../eui-form-row.js';
+import EuiPopoverComponent from '../eui-popover.js';
+import EuiRangeThumb from '../eui-range-thumb.js';
+import EuiScreenReaderOnly from '../eui-screen-reader-only.js';
+import EuiSpacer from '../eui-spacer.js';
+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 {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "hasFocus", [tracked], function () {
+      return false;
+    });
+  }
+  #hasFocus = (i(this, "hasFocus"), void 0);
+  get background() {
+    return getChromaColor(this.args.color, this.args.showAlpha)?.css();
+  }
+  get position() {
+    const {
+      stop,
+      trackWidth,
+      globalMin,
+      globalMax
+    } = this.args;
+    return `${getPositionFromStop(stop, trackWidth, globalMin, globalMax)}%`;
+  }
+  get stopIsInvalid() {
+    return isStopInvalid(this.args.stop);
+  }
+  get colorIsInvalid() {
+    return isColorInvalid(this.args.color, this.args.showAlpha);
+  }
+  get classes() {
+    return this.hasFocus || this.args.isPopoverOpen ? 'euiColorStopPopover euiColorStopPopover-hasFocus' : 'euiColorStopPopover';
+  }
+  t = (token, text) => this.euiI18n.lookupToken(`euiColorStopThumb.${token}`, text);
+  get valueText() {
+    return `Stop: ${this.args.stop}, Color: ${this.args.color} (${this.args.index + 1} of ${this.args.count})`;
+  }
+  /** Clamped to the neighbouring stops. */
+  changeStop(value) {
+    const {
+      localMin,
+      localMax
+    } = this.args;
+    this.args.onChange({
+      stop: Math.min(Math.max(value, localMin), localMax),
+      color: this.args.color
+    });
+  }
+  onStopInput(event) {
+    let value = parseFloat(event.target.value);
+    const {
+      globalMin,
+      globalMax,
+      min,
+      max
+    } = this.args;
+    if (value > globalMax && max !== undefined) value = globalMax;
+    if (value < globalMin && min !== undefined) value = globalMin;
+    this.args.onChange({
+      stop: value,
+      color: this.args.color
+    });
+  }
+  static {
+    n(this.prototype, "onStopInput", [action]);
+  }
+  onColorChange(color) {
+    this.args.onChange({
+      stop: this.args.stop,
+      color
+    });
+  }
+  static {
+    n(this.prototype, "onColorChange", [action]);
+  }
+  onMouseDown(event) {
+    this.args.openPopover();
+    if (this.args.readOnly) return;
+    const parent = this.args.parent;
+    const move = e => {
+      if (!parent) return;
+      this.changeStop(getStopFromMouseLocation({
+        x: e.clientX,
+        y: e.clientY
+      }, parent, this.args.globalMin, this.args.globalMax));
+    };
+    const up = () => {
+      document.removeEventListener('mousemove', move);
+      document.removeEventListener('mouseup', up);
+    };
+    event.preventDefault();
+    document.addEventListener('mousemove', move);
+    document.addEventListener('mouseup', up);
+  }
+  static {
+    n(this.prototype, "onMouseDown", [action]);
+  }
+  onKeyDown(event) {
+    switch (event.key) {
+      case 'Enter':
+        event.preventDefault();
+        this.args.openPopover();
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        if (!this.args.readOnly) this.changeStop(this.args.stop - 1);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        if (!this.args.readOnly) this.changeStop(this.args.stop + 1);
+        break;
+    }
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  remove() {
+    if (!this.args.onRemove) return;
+    this.args.closePopover();
+    this.args.onRemove();
+  }
+  static {
+    n(this.prototype, "remove", [action]);
+  }
+  onFocus() {
+    this.hasFocus = true;
+    this.args.onFocus();
+  }
+  static {
+    n(this.prototype, "onFocus", [action]);
+  }
+  setFocus(value) {
+    this.hasFocus = value;
+  }
+  static {
+    n(this.prototype, "setFocus", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<EuiPopover class={{this.classes}} style={{cssStyle (hash left=this.position)}} @anchorClassName=\"euiColorStopPopover__anchor\" @panelPaddingSize=\"s\" @isOpen={{@isPopoverOpen}} @closePopover={{@closePopover}} @ownFocus={{false}}>\n  <:button>\n    <EuiRangeThumb class=\"euiColorStopThumb\" data-test-subj=\"euiColorStopThumb\" data-index=\"euiColorStop_{{@index}}\" aria-valuetext={{this.valueText}} aria-label={{this.t \"buttonAriaLabel\" \"Press the Enter key to modify this stop. Press Escape to focus the group\"}} title={{this.t \"buttonTitle\" \"Click to edit, drag to reposition\"}} style={{cssStyle (hash background=this.background)}} @min={{@localMin}} @max={{@localMax}} @value={{@stop}} @tabIndex={{-1}} @disabled={{@disabled}} {{on \"focus\" this.onFocus}} {{on \"blur\" (fnSet this.setFocus false)}} {{on \"mouseover\" (fnSet this.setFocus true)}} {{on \"mouseout\" (fnSet this.setFocus false)}} {{on \"keydown\" this.onKeyDown}} {{on \"mousedown\" this.onMouseDown}} />\n  </:button>\n  <:content>\n    <div class=\"euiColorStop\" data-test-subj=\"euiColorStopPopover\">\n      <EuiScreenReaderOnly>\n        <p aria-live=\"polite\">{{this.t \"screenReaderAnnouncement\" \"A popup with a color stop edit form opened. Tab forward to cycle through form controls or press escape to close this popup.\"}}</p>\n      </EuiScreenReaderOnly>\n      <EuiFlexGroup @gutterSize=\"s\" @responsive={{false}}>\n        <EuiFlexItem>\n          <EuiFormRow @label={{this.t \"stopLabel\" \"Stop value\"}} @display=\"rowCompressed\" @isInvalid={{this.stopIsInvalid}} @error={{if this.stopIsInvalid (this.t \"stopErrorMessage\" \"Value is out of range\")}}>\n            <EuiFieldNumber @compressed={{true}} @readOnly={{@readOnly}} @isInvalid={{this.stopIsInvalid}} @value={{unless this.stopIsInvalid @stop}} @min={{unless (or2 @isRangeMin (isUndefined @min)) @localMin}} @max={{unless (or2 @isRangeMax (isUndefined @max)) @localMax}} {{on \"input\" this.onStopInput}} />\n          </EuiFormRow>\n        </EuiFlexItem>\n        {{#unless @readOnly}}\n          <EuiFlexItem @grow={{false}}>\n            <EuiFormRow @display=\"rowCompressed\" @hasEmptyLabelSpace={{true}}>\n              <EuiButtonIcon @iconType=\"trash\" @color=\"danger\" @isDisabled={{isUndefined @onRemove}} aria-label={{this.t \"removeLabel\" \"Remove this stop\"}} title={{this.t \"removeLabel\" \"Remove this stop\"}} {{on \"click\" this.remove}} />\n            </EuiFormRow>\n          </EuiFlexItem>\n        {{/unless}}\n      </EuiFlexGroup>\n      {{#unless @readOnly}}\n        <EuiSpacer @size=\"s\" />\n      {{/unless}}\n      <EuiColorPicker @color={{@color}} @onChange={{this.onColorChange}} @readOnly={{@readOnly}} @mode={{if @readOnly \"secondaryInput\" @mode}} @swatches={{@swatches}} @display=\"inline\" @showAlpha={{@showAlpha}} @isInvalid={{this.colorIsInvalid}} @secondaryInputDisplay={{if (isSwatch @mode) \"none\" \"bottom\"}} />\n    </div>\n  </:content>\n</EuiPopover>", {
+      strictMode: true,
+      scope: () => ({
+        EuiPopover: EuiPopoverComponent,
+        cssStyle,
+        hash,
+        EuiRangeThumb,
+        on,
+        fnSet,
+        EuiScreenReaderOnly,
+        EuiFlexGroup,
+        EuiFlexItem,
+        EuiFormRow,
+        EuiFieldNumber,
+        or2,
+        isUndefined,
+        EuiButtonIcon,
+        EuiSpacer,
+        EuiColorPicker,
+        isSwatch
+      })
+    }), this);
+  }
+}
+function fnSet(setter, value) {
+  return () => setter(value);
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function isUndefined(value) {
+  return value === undefined;
+}
+function isSwatch(mode) {
+  return mode === 'swatch';
+}
+
+export { EuiColorStopThumb as default };
+//# sourceMappingURL=thumb.js.map