@ember-eui/core 13.0.5 → 14.1.0

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

@@ -0,0 +1,347 @@
+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 { schedule } from '@ember/runloop';
+import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
+import { getPositionFromStop, getSteppedGradient, isStopsInvalid, addStop, DEFAULT_VISUALIZATION_COLOR, removeStop, getStopFromMouseLocation, addDefinedStop, getChromaColor } from '../-private/color.js';
+import cssStyle from '../-private/css-style.js';
+import EuiColorStopThumb from './eui-color-stops/thumb.js';
+import EuiRangeWrapper from './eui-range-wrapper.js';
+import EuiScreenReaderOnly from './eui-screen-reader-only.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+const DEFAULT_MIN = 0;
+const DEFAULT_MAX = 100;
+const STOP_ATTR = 'euiColorStop_';
+
+/**
+ * An editable gradient: a track with color stops (a value and a color
+ * each) to drag, click to edit, add (click the track) and remove, e.g. to
+ * color a map or a chart by value. You keep the stops: `@onChange` gets
+ * the new ones and whether any is invalid.
+ */
+
+function sortStops(colorStops) {
+  return colorStops.map((el, index) => ({
+    ...el,
+    id: index
+  })).sort((a, b) => a.stop - b.stop);
+}
+function validStops(colorStops) {
+  return colorStops.map(el => el.stop).filter(stop => !isNaN(stop));
+}
+class EuiColorStops extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "wrapper", [tracked]);
+  }
+  #wrapper = (i(this, "wrapper"), void 0);
+  static {
+    g(this.prototype, "trackWidth", [tracked], function () {
+      return 0;
+    });
+  }
+  #trackWidth = (i(this, "trackWidth"), void 0);
+  static {
+    g(this.prototype, "hasFocus", [tracked], function () {
+      return false;
+    });
+  }
+  #hasFocus = (i(this, "hasFocus"), void 0);
+  static {
+    g(this.prototype, "focusedStopIndex", [tracked], function () {
+      return null;
+    });
+  }
+  #focusedStopIndex = (i(this, "focusedStopIndex"), void 0);
+  static {
+    g(this.prototype, "openedStopId", [tracked], function () {
+      return null;
+    });
+  }
+  #openedStopId = (i(this, "openedStopId"), void 0);
+  static {
+    g(this.prototype, "addTargetPosition", [tracked], function () {
+      return 0;
+    });
+  }
+  #addTargetPosition = (i(this, "addTargetPosition"), void 0);
+  static {
+    g(this.prototype, "isHoverDisabled", [tracked], function () {
+      return false;
+    });
+  }
+  #isHoverDisabled = (i(this, "isHoverDisabled"), void 0);
+  // after adding a stop, focus it and open it once rendered
+  focusStopOnUpdate = null;
+  get sortedStops() {
+    return sortStops(this.args.colorStops);
+  }
+  get rangeMax() {
+    const {
+      max,
+      colorStops
+    } = this.args;
+    if (max !== undefined) return max;
+    const stops = validStops(colorStops);
+    const last = Math.max(...stops);
+    let result = DEFAULT_MAX;
+    if (last > DEFAULT_MAX) result = stops.length === 1 ? last + DEFAULT_MAX : last;
+    return isNaN(result) ? DEFAULT_MAX : result + Math.round(result * 0.05);
+  }
+  get rangeMin() {
+    const {
+      min,
+      colorStops
+    } = this.args;
+    if (min !== undefined) return min;
+    const stops = validStops(colorStops);
+    const first = Math.min(...stops);
+    let result = DEFAULT_MIN;
+    if (first < DEFAULT_MIN) result = stops.length === 1 ? first - DEFAULT_MIN : first;
+    return isNaN(result) ? DEFAULT_MIN : result - Math.round(this.rangeMax * 0.05);
+  }
+  get globalMin() {
+    return this.args.min ?? this.rangeMin;
+  }
+  get globalMax() {
+    return this.args.max ?? this.rangeMax;
+  }
+  get isNotInteractive() {
+    return Boolean(this.args.disabled || this.args.readOnly);
+  }
+  get classes() {
+    return ['euiColorStops', this.isHoverDisabled && 'euiColorStops-isDragging', this.args.disabled && 'euiColorStops-isDisabled', this.args.readOnly && 'euiColorStops-isReadOnly'].filter(Boolean).join(' ');
+  }
+  get announcement() {
+    return this.euiI18n.lookupToken('euiColorStops.screenReaderAnnouncement', '{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.', {
+      label: this.args.label,
+      disabled: this.args.disabled ? 'Disabled.' : '',
+      readOnly: this.args.readOnly ? 'Read-only.' : ''
+    });
+  }
+  positionOf = stop => getPositionFromStop(stop, this.trackWidth, this.globalMin, this.globalMax);
+  get gradient() {
+    const stops = this.sortedStops;
+    const positions = stops.map(stop => this.positionOf(stop.stop));
+    const colorAt = index => getChromaColor(stops[index].color, this.args.showAlpha)?.css() ?? 'currentColor';
+    const gradientStop = index => index === 0 ? `currentColor, currentColor ${positions[0]}%, ${colorAt(0)} ${positions[0]}%` : `${colorAt(index)} ${positions[index]}%`;
+    if (this.args.stopType === 'stepped' && positions.length > 0) {
+      const start = positions[0];
+      const end = positions[positions.length - 1];
+      const colors = getSteppedGradient(this.args.colorStops, this.args.stepNumber ?? 10);
+      const width = (end - start) / colors.length;
+      const steps = colors.map((color, i) => `${color} ${start + width * i}% ${start + width * (i + 1)}%`).join(', ');
+      return `linear-gradient(to right, currentColor ${start}%, ${steps})`;
+    }
+    const parts = stops.map((_, index) => this.args.stopType === 'fixed' && index < stops.length - 1 ? `${gradientStop(index)}, ${gradientStop(index + 1)}` : gradientStop(index));
+    return `linear-gradient(to right,${parts.join(',')})`;
+  }
+  change(colorStops) {
+    this.args.onChange(colorStops, isStopsInvalid(colorStops, this.args.showAlpha));
+  }
+  focusStop(index) {
+    if (this.args.disabled || !this.wrapper) return;
+    const thumb = this.wrapper.querySelector(`[data-index="${STOP_ATTR}${index}"]`);
+    if (thumb) {
+      this.hasFocus = false;
+      this.focusedStopIndex = index;
+      thumb.focus();
+    }
+  }
+  focusWrapper() {
+    this.focusedStopIndex = null;
+    this.wrapper?.focus();
+  }
+  static {
+    n(this.prototype, "focusWrapper", [action]);
+  }
+  onAdd() {
+    const stops = this.sortedStops.map(({
+      color,
+      stop
+    }) => ({
+      color,
+      stop
+    }));
+    const newStops = addStop(stops, this.args.addColor ?? DEFAULT_VISUALIZATION_COLOR, this.globalMax);
+    this.focusStopOnUpdate = newStops[this.args.colorStops.length].stop;
+    this.change(newStops);
+  }
+  static {
+    n(this.prototype, "onAdd", [action]);
+  }
+  onRemove(id) {
+    this.focusWrapper();
+    this.change(removeStop(this.args.colorStops, id));
+  }
+  static {
+    n(this.prototype, "onRemove", [action]);
+  }
+  onStopChange(id, colorStop) {
+    const colorStops = [...this.args.colorStops];
+    colorStops.splice(id, 1, colorStop);
+    this.change(colorStops);
+  }
+  static {
+    n(this.prototype, "onStopChange", [action]);
+  }
+  onAddHover(event) {
+    if (this.isNotInteractive || !this.wrapper) return;
+    const stop = getStopFromMouseLocation({
+      x: event.clientX,
+      y: event.clientY
+    }, this.wrapper, this.globalMin, this.globalMax);
+    this.addTargetPosition = this.positionOf(stop);
+  }
+  static {
+    n(this.prototype, "onAddHover", [action]);
+  }
+  onAddClick(event) {
+    const target = event.target;
+    if (this.isNotInteractive || !this.wrapper || target.closest('.euiColorStopThumb')) return;
+    const stop = getStopFromMouseLocation({
+      x: event.clientX,
+      y: event.clientY
+    }, this.wrapper, this.globalMin, this.globalMax);
+    this.focusStopOnUpdate = stop;
+    this.change(addDefinedStop(this.args.colorStops, stop, this.args.addColor ?? DEFAULT_VISUALIZATION_COLOR));
+  }
+  static {
+    n(this.prototype, "onAddClick", [action]);
+  }
+  onKeyDown(event) {
+    if (this.args.disabled) return;
+    const target = event.target;
+    const isThumb = (target.getAttribute('data-index') ?? '').startsWith(STOP_ATTR);
+    const index = this.focusedStopIndex;
+    switch (event.key) {
+      case 'Escape':
+        this.focusWrapper();
+        break;
+      case 'Enter':
+        if (this.args.readOnly || !this.hasFocus) return;
+        this.onAdd();
+        break;
+      case 'Backspace':
+        {
+          if (this.args.readOnly || this.hasFocus || index === null || !isThumb) return;
+          const isFirst = this.args.min === undefined && index === 0;
+          const isLast = this.args.max === undefined && index === this.sortedStops.length - 1;
+          if (!isFirst && !isLast) this.onRemove(this.sortedStops[index].id);
+          break;
+        }
+      case 'ArrowDown':
+      case 'ArrowUp':
+        if (target !== this.wrapper && !isThumb) return;
+        event.preventDefault();
+        if (index === null) {
+          this.focusStop(0);
+        } else if (event.key === 'ArrowDown') {
+          this.focusStop(Math.min(index + 1, this.sortedStops.length - 1));
+        } else {
+          this.focusStop(Math.max(index - 1, 0));
+        }
+        break;
+    }
+  }
+  static {
+    n(this.prototype, "onKeyDown", [action]);
+  }
+  onWrapperFocus(event) {
+    if (event.target === this.wrapper) this.hasFocus = true;
+  }
+  static {
+    n(this.prototype, "onWrapperFocus", [action]);
+  }
+  onWrapperBlur() {
+    this.hasFocus = false;
+  }
+  static {
+    n(this.prototype, "onWrapperBlur", [action]);
+  }
+  setHoverDisabled(value) {
+    if (!this.args.disabled) this.isHoverDisabled = value;
+  }
+  static {
+    n(this.prototype, "setHoverDisabled", [action]);
+  }
+  setFocusedStop(index) {
+    this.focusedStopIndex = index;
+  }
+  static {
+    n(this.prototype, "setFocusedStop", [action]);
+  }
+  openStop(id) {
+    this.openedStopId = id;
+  }
+  static {
+    n(this.prototype, "openStop", [action]);
+  }
+  closeStop() {
+    this.openedStopId = null;
+  }
+  static {
+    n(this.prototype, "closeStop", [action]);
+  }
+  isRangeMin = stop => this.args.min === undefined && stop === this.rangeMin;
+  isRangeMax = stop => this.args.max === undefined && stop === this.rangeMax;
+  localMin = index => index === 0 ? this.globalMin : this.sortedStops[index - 1].stop + 1;
+  localMax = index => index === this.sortedStops.length - 1 ? this.globalMax : this.sortedStops[index + 1].stop - 1;
+  registerWrapper = modifier((element, [colorStops]) => {
+    schedule('afterRender', () => {
+      this.wrapper = element;
+      if (element.clientWidth !== this.trackWidth) this.trackWidth = element.clientWidth;
+      // a stop was just added: focus it and open its popover
+      if (this.focusStopOnUpdate !== null) {
+        const index = this.sortedStops.map(el => el.stop).indexOf(this.focusStopOnUpdate);
+        this.focusStopOnUpdate = null;
+        if (index > -1) {
+          this.focusStop(index);
+          this.openedStopId = this.sortedStops[index].id;
+        }
+      }
+    });
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<EuiRangeWrapper class={{this.classes}} data-test-subj=\"euiColorStops\" tabindex={{if @disabled \"-1\" \"0\"}} @fullWidth={{@fullWidth}} @compressed={{@compressed}} {{this.registerWrapper @colorStops}} {{on \"mousedown\" (fn this.setHoverDisabled true)}} {{on \"mouseup\" (fn this.setHoverDisabled false)}} {{on \"mouseleave\" (fn this.setHoverDisabled false)}} {{on \"keydown\" this.onKeyDown}} {{on \"focus\" this.onWrapperFocus}} {{on \"blur\" this.onWrapperBlur}} ...attributes>\n  <EuiScreenReaderOnly><p aria-live=\"polite\">{{this.announcement}}</p></EuiScreenReaderOnly>\n  <div class=\"euiRangeTrack {{if @disabled \"euiRangeTrack--disabled\"}}\">\n    <div class=\"euiRangeHighlight euiColorStops__highlight\n        {{if @compressed \"euiRangeHighlight--compressed\"}}\">\n      <div class=\"euiRangeHighlight__progress\" style={{cssStyle (hash marginLeft=\"0%\" width=\"100%\" background=this.gradient)}}></div>\n    </div>\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"euiColorStops__addContainer\n        {{if (or2 this.isHoverDisabled this.isNotInteractive) \"euiColorStops__addContainer-isDisabled\"}}\" data-test-subj=\"euiColorStopsAdd\" {{on \"click\" this.onAddClick}} {{on \"mousemove\" this.onAddHover}}>\n      <div class=\"euiColorStops__addTarget\" style={{cssStyle (hash left=(percent this.addTargetPosition))}}></div>\n    </div>\n    {{#each this.sortedStops key=\"id\" as |colorStop index|}}\n      <EuiColorStopThumb @stop={{colorStop.stop}} @color={{colorStop.color}} @index={{index}} @count={{@colorStops.length}} @onChange={{fn this.onStopChange colorStop.id}} @onFocus={{fn this.setFocusedStop index}} @onRemove={{if (gt1 this.sortedStops.length) (fn this.onRemove colorStop.id)}} @globalMin={{this.globalMin}} @globalMax={{this.globalMax}} @localMin={{this.localMin index}} @localMax={{this.localMax index}} @min={{@min}} @max={{@max}} @isRangeMin={{this.isRangeMin colorStop.stop}} @isRangeMax={{this.isRangeMax colorStop.stop}} @trackWidth={{this.trackWidth}} @parent={{this.wrapper}} @mode={{@mode}} @showAlpha={{@showAlpha}} @swatches={{@swatches}} @disabled={{@disabled}} @readOnly={{@readOnly}} @isPopoverOpen={{isEqual colorStop.id this.openedStopId}} @openPopover={{fn this.openStop colorStop.id}} @closePopover={{this.closeStop}} />\n    {{/each}}\n  </div>\n</EuiRangeWrapper>", {
+      strictMode: true,
+      scope: () => ({
+        EuiRangeWrapper,
+        on,
+        fn,
+        EuiScreenReaderOnly,
+        cssStyle,
+        hash,
+        or2,
+        percent,
+        EuiColorStopThumb,
+        gt1,
+        isEqual
+      })
+    }), this);
+  }
+}
+function or2(a, b) {
+  return Boolean(a || b);
+}
+function gt1(n) {
+  return n > 1;
+}
+function isEqual(a, b) {
+  return a === b;
+}
+function percent(value) {
+  return `${value}%`;
+}
+
+export { EuiColorStops as default };
+//# sourceMappingURL=eui-color-stops.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-color-stops.js","sources":["../../src/components/eui-color-stops.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 { schedule } from '@ember/runloop';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport {\n  addDefinedStop,\n  addStop,\n  DEFAULT_VISUALIZATION_COLOR,\n  getChromaColor,\n  getPositionFromStop,\n  getSteppedGradient,\n  getStopFromMouseLocation,\n  isStopsInvalid,\n  removeStop\n} from '../-private/color.ts';\nimport cssStyle from '../-private/css-style.ts';\nimport EuiColorStopThumb from './eui-color-stops/thumb.gts';\nimport EuiRangeWrapper from './eui-range-wrapper.gts';\nimport EuiScreenReaderOnly from './eui-screen-reader-only.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { ColorStop } from '../-private/color.ts';\n\nexport type { ColorStop };\n\nconst DEFAULT_MIN = 0;\nconst DEFAULT_MAX = 100;\nconst STOP_ATTR = 'euiColorStop_';\n\ntype IndexedStop = ColorStop & { id: number };\n\n/**\n * An editable gradient: a track with color stops (a value and a color\n * each) to drag, click to edit, add (click the track) and remove, e.g. to\n * color a map or a chart by value. You keep the stops: `@onChange` gets\n * the new ones and whether any is invalid.\n */\nexport interface EuiColorStopsSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The stops: `[{ stop: 0, color: '#54B399' }, …]`. */\n    colorStops: ColorStop[];\n    /** Called with the new stops and whether any stop is invalid. */\n    onChange: (colorStops: ColorStop[], isInvalid: boolean) => void;\n    /** Accessible name, e.g. \"Map colors\". */\n    label: string;\n    /** Lowest stop value; by default the track follows the stops. */\n    min?: number;\n    /** Highest stop value; by default the track follows the stops. */\n    max?: number;\n    /**\n     * `'gradient'` (colors blend), `'fixed'` (each color until the next\n     * stop) or `'stepped'` (`@stepNumber` blended steps). Defaults to\n     * `'gradient'`.\n     */\n    stopType?: 'gradient' | 'fixed' | 'stepped';\n    /** Number of steps with `@stopType=\"stepped\"`. Defaults to `10`. */\n    stepNumber?: number;\n    /** Color of new stops. Defaults to EUI's second visualization color. */\n    addColor?: string;\n    /** Color picker of each stop: `'default'`, `'swatch'` or `'picker'`. */\n    mode?: 'default' | 'swatch' | 'picker';\n    /** Swatches of the stops' color pickers. */\n    swatches?: string[];\n    /** Colors may have an alpha channel. */\n    showAlpha?: boolean;\n    /** Disables it. */\n    disabled?: boolean;\n    /** Stops can be inspected but not changed. */\n    readOnly?: boolean;\n    /** Smaller track. */\n    compressed?: boolean;\n    /** Takes the container's full width. */\n    fullWidth?: boolean;\n  };\n}\n\nfunction sortStops(colorStops: ColorStop[]): IndexedStop[] {\n  return colorStops.map((el, index) => ({ ...el, id: index })).sort((a, b) => a.stop - b.stop);\n}\n\nfunction validStops(colorStops: ColorStop[]): number[] {\n  return colorStops.map((el) => el.stop).filter((stop) => !isNaN(stop));\n}\n\nexport default class EuiColorStops extends Component<EuiColorStopsSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked wrapper?: HTMLElement;\n  @tracked trackWidth = 0;\n  @tracked hasFocus = false;\n  @tracked focusedStopIndex: number | null = null;\n  @tracked openedStopId: number | null = null;\n  @tracked addTargetPosition = 0;\n  @tracked isHoverDisabled = false;\n\n  // after adding a stop, focus it and open it once rendered\n  focusStopOnUpdate: number | null = null;\n\n  get sortedStops(): IndexedStop[] {\n    return sortStops(this.args.colorStops);\n  }\n\n  get rangeMax(): number {\n    const { max, colorStops } = this.args;\n\n    if (max !== undefined) return max;\n\n    const stops = validStops(colorStops);\n    const last = Math.max(...stops);\n    let result = DEFAULT_MAX;\n\n    if (last > DEFAULT_MAX) result = stops.length === 1 ? last + DEFAULT_MAX : last;\n\n    return isNaN(result) ? DEFAULT_MAX : result + Math.round(result * 0.05);\n  }\n\n  get rangeMin(): number {\n    const { min, colorStops } = this.args;\n\n    if (min !== undefined) return min;\n\n    const stops = validStops(colorStops);\n    const first = Math.min(...stops);\n    let result = DEFAULT_MIN;\n\n    if (first < DEFAULT_MIN) result = stops.length === 1 ? first - DEFAULT_MIN : first;\n\n    return isNaN(result) ? DEFAULT_MIN : result - Math.round(this.rangeMax * 0.05);\n  }\n\n  get globalMin(): number {\n    return this.args.min ?? this.rangeMin;\n  }\n\n  get globalMax(): number {\n    return this.args.max ?? this.rangeMax;\n  }\n\n  get isNotInteractive(): boolean {\n    return Boolean(this.args.disabled || this.args.readOnly);\n  }\n\n  get classes(): string {\n    return [\n      'euiColorStops',\n      this.isHoverDisabled && 'euiColorStops-isDragging',\n      this.args.disabled && 'euiColorStops-isDisabled',\n      this.args.readOnly && 'euiColorStops-isReadOnly'\n    ]\n      .filter(Boolean)\n      .join(' ');\n  }\n\n  get announcement(): string {\n    return this.euiI18n.lookupToken(\n      'euiColorStops.screenReaderAnnouncement',\n      '{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.',\n      {\n        label: this.args.label,\n        disabled: this.args.disabled ? 'Disabled.' : '',\n        readOnly: this.args.readOnly ? 'Read-only.' : ''\n      }\n    );\n  }\n\n  positionOf = (stop: number): number =>\n    getPositionFromStop(stop, this.trackWidth, this.globalMin, this.globalMax);\n\n  get gradient(): string {\n    const stops = this.sortedStops;\n    const positions = stops.map((stop) => this.positionOf(stop.stop));\n    const colorAt = (index: number) =>\n      getChromaColor(stops[index]!.color, this.args.showAlpha)?.css() ?? 'currentColor';\n    const gradientStop = (index: number) =>\n      index === 0\n        ? `currentColor, currentColor ${positions[0]}%, ${colorAt(0)} ${positions[0]}%`\n        : `${colorAt(index)} ${positions[index]}%`;\n\n    if (this.args.stopType === 'stepped' && positions.length > 0) {\n      const start = positions[0]!;\n      const end = positions[positions.length - 1]!;\n      const colors = getSteppedGradient(this.args.colorStops, this.args.stepNumber ?? 10);\n      const width = (end - start) / colors.length;\n      const steps = colors\n        .map((color, i) => `${color} ${start + width * i}% ${start + width * (i + 1)}%`)\n        .join(', ');\n\n      return `linear-gradient(to right, currentColor ${start}%, ${steps})`;\n    }\n\n    const parts = stops.map((_, index) =>\n      this.args.stopType === 'fixed' && index < stops.length - 1\n        ? `${gradientStop(index)}, ${gradientStop(index + 1)}`\n        : gradientStop(index)\n    );\n\n    return `linear-gradient(to right,${parts.join(',')})`;\n  }\n\n  change(colorStops: ColorStop[]): void {\n    this.args.onChange(colorStops, isStopsInvalid(colorStops, this.args.showAlpha));\n  }\n\n  focusStop(index: number): void {\n    if (this.args.disabled || !this.wrapper) return;\n\n    const thumb = this.wrapper.querySelector<HTMLElement>(`[data-index=\"${STOP_ATTR}${index}\"]`);\n\n    if (thumb) {\n      this.hasFocus = false;\n      this.focusedStopIndex = index;\n      thumb.focus();\n    }\n  }\n\n  @action\n  focusWrapper(): void {\n    this.focusedStopIndex = null;\n    this.wrapper?.focus();\n  }\n\n  @action\n  onAdd(): void {\n    const stops = this.sortedStops.map(({ color, stop }) => ({ color, stop }));\n    const newStops = addStop(stops, this.args.addColor ?? DEFAULT_VISUALIZATION_COLOR, this.globalMax);\n\n    this.focusStopOnUpdate = newStops[this.args.colorStops.length]!.stop;\n    this.change(newStops);\n  }\n\n  @action\n  onRemove(id: number): void {\n    this.focusWrapper();\n    this.change(removeStop(this.args.colorStops, id));\n  }\n\n  @action\n  onStopChange(id: number, colorStop: ColorStop): void {\n    const colorStops = [...this.args.colorStops];\n\n    colorStops.splice(id, 1, colorStop);\n    this.change(colorStops);\n  }\n\n  @action\n  onAddHover(event: MouseEvent): void {\n    if (this.isNotInteractive || !this.wrapper) return;\n\n    const stop = getStopFromMouseLocation(\n      { x: event.clientX, y: event.clientY },\n      this.wrapper,\n      this.globalMin,\n      this.globalMax\n    );\n\n    this.addTargetPosition = this.positionOf(stop);\n  }\n\n  @action\n  onAddClick(event: MouseEvent): void {\n    const target = event.target as HTMLElement;\n\n    if (this.isNotInteractive || !this.wrapper || target.closest('.euiColorStopThumb')) return;\n\n    const stop = getStopFromMouseLocation(\n      { x: event.clientX, y: event.clientY },\n      this.wrapper,\n      this.globalMin,\n      this.globalMax\n    );\n\n    this.focusStopOnUpdate = stop;\n    this.change(addDefinedStop(this.args.colorStops, stop, this.args.addColor ?? DEFAULT_VISUALIZATION_COLOR));\n  }\n\n  @action\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.args.disabled) return;\n\n    const target = event.target as HTMLElement;\n    const isThumb = (target.getAttribute('data-index') ?? '').startsWith(STOP_ATTR);\n    const index = this.focusedStopIndex;\n\n    switch (event.key) {\n      case 'Escape':\n        this.focusWrapper();\n        break;\n      case 'Enter':\n        if (this.args.readOnly || !this.hasFocus) return;\n        this.onAdd();\n        break;\n      case 'Backspace': {\n        if (this.args.readOnly || this.hasFocus || index === null || !isThumb) return;\n\n        const isFirst = this.args.min === undefined && index === 0;\n        const isLast = this.args.max === undefined && index === this.sortedStops.length - 1;\n\n        if (!isFirst && !isLast) this.onRemove(this.sortedStops[index]!.id);\n        break;\n      }\n      case 'ArrowDown':\n      case 'ArrowUp':\n        if (target !== this.wrapper && !isThumb) return;\n\n        event.preventDefault();\n\n        if (index === null) {\n          this.focusStop(0);\n        } else if (event.key === 'ArrowDown') {\n          this.focusStop(Math.min(index + 1, this.sortedStops.length - 1));\n        } else {\n          this.focusStop(Math.max(index - 1, 0));\n        }\n        break;\n    }\n  }\n\n  @action\n  onWrapperFocus(event: FocusEvent): void {\n    if (event.target === this.wrapper) this.hasFocus = true;\n  }\n\n  @action\n  onWrapperBlur(): void {\n    this.hasFocus = false;\n  }\n\n  @action\n  setHoverDisabled(value: boolean): void {\n    if (!this.args.disabled) this.isHoverDisabled = value;\n  }\n\n  @action\n  setFocusedStop(index: number): void {\n    this.focusedStopIndex = index;\n  }\n\n  @action\n  openStop(id: number): void {\n    this.openedStopId = id;\n  }\n\n  @action\n  closeStop(): void {\n    this.openedStopId = null;\n  }\n\n  isRangeMin = (stop: number): boolean => this.args.min === undefined && stop === this.rangeMin;\n\n  isRangeMax = (stop: number): boolean => this.args.max === undefined && stop === this.rangeMax;\n\n  localMin = (index: number): number =>\n    index === 0 ? this.globalMin : this.sortedStops[index - 1]!.stop + 1;\n\n  localMax = (index: number): number =>\n    index === this.sortedStops.length - 1 ? this.globalMax : this.sortedStops[index + 1]!.stop - 1;\n\n  registerWrapper = modifier((element: HTMLElement, [colorStops]: [ColorStop[]]) => {\n    schedule('afterRender', () => {\n      this.wrapper = element;\n\n      if (element.clientWidth !== this.trackWidth) this.trackWidth = element.clientWidth;\n\n      // a stop was just added: focus it and open its popover\n      if (this.focusStopOnUpdate !== null) {\n        const index = this.sortedStops.map((el) => el.stop).indexOf(this.focusStopOnUpdate);\n\n        this.focusStopOnUpdate = null;\n\n        if (index > -1) {\n          this.focusStop(index);\n          this.openedStopId = this.sortedStops[index]!.id;\n        }\n      }\n    });\n\n    void colorStops;\n  });\n\n  <template>\n    <EuiRangeWrapper\n      class={{this.classes}}\n      data-test-subj=\"euiColorStops\"\n      tabindex={{if @disabled \"-1\" \"0\"}}\n      @fullWidth={{@fullWidth}}\n      @compressed={{@compressed}}\n      {{this.registerWrapper @colorStops}}\n      {{on \"mousedown\" (fn this.setHoverDisabled true)}}\n      {{on \"mouseup\" (fn this.setHoverDisabled false)}}\n      {{on \"mouseleave\" (fn this.setHoverDisabled false)}}\n      {{on \"keydown\" this.onKeyDown}}\n      {{on \"focus\" this.onWrapperFocus}}\n      {{on \"blur\" this.onWrapperBlur}}\n      ...attributes\n    >\n      <EuiScreenReaderOnly><p aria-live=\"polite\">{{this.announcement}}</p></EuiScreenReaderOnly>\n      <div class=\"euiRangeTrack {{if @disabled 'euiRangeTrack--disabled'}}\">\n        <div\n          class=\"euiRangeHighlight euiColorStops__highlight\n            {{if @compressed 'euiRangeHighlight--compressed'}}\"\n        >\n          <div\n            class=\"euiRangeHighlight__progress\"\n            style={{cssStyle\n              (hash marginLeft=\"0%\" width=\"100%\" background=this.gradient)\n            }}\n          ></div>\n        </div>\n        {{! template-lint-disable no-invalid-interactive }}\n        <div\n          class=\"euiColorStops__addContainer\n            {{if\n              (or2 this.isHoverDisabled this.isNotInteractive)\n              'euiColorStops__addContainer-isDisabled'\n            }}\"\n          data-test-subj=\"euiColorStopsAdd\"\n          {{on \"click\" this.onAddClick}}\n          {{on \"mousemove\" this.onAddHover}}\n        >\n          <div\n            class=\"euiColorStops__addTarget\"\n            style={{cssStyle (hash left=(percent this.addTargetPosition))}}\n          ></div>\n        </div>\n        {{#each this.sortedStops key=\"id\" as |colorStop index|}}\n          <EuiColorStopThumb\n            @stop={{colorStop.stop}}\n            @color={{colorStop.color}}\n            @index={{index}}\n            @count={{@colorStops.length}}\n            @onChange={{fn this.onStopChange colorStop.id}}\n            @onFocus={{fn this.setFocusedStop index}}\n            @onRemove={{if\n              (gt1 this.sortedStops.length)\n              (fn this.onRemove colorStop.id)\n            }}\n            @globalMin={{this.globalMin}}\n            @globalMax={{this.globalMax}}\n            @localMin={{this.localMin index}}\n            @localMax={{this.localMax index}}\n            @min={{@min}}\n            @max={{@max}}\n            @isRangeMin={{this.isRangeMin colorStop.stop}}\n            @isRangeMax={{this.isRangeMax colorStop.stop}}\n            @trackWidth={{this.trackWidth}}\n            @parent={{this.wrapper}}\n            @mode={{@mode}}\n            @showAlpha={{@showAlpha}}\n            @swatches={{@swatches}}\n            @disabled={{@disabled}}\n            @readOnly={{@readOnly}}\n            @isPopoverOpen={{isEqual colorStop.id this.openedStopId}}\n            @openPopover={{fn this.openStop colorStop.id}}\n            @closePopover={{this.closeStop}}\n          />\n        {{/each}}\n      </div>\n    </EuiRangeWrapper>\n  </template>\n}\n\nfunction or2(a: unknown, b: unknown): boolean {\n  return Boolean(a || b);\n}\n\nfunction gt1(n: number): boolean {\n  return n > 1;\n}\n\nfunction isEqual(a: unknown, b: unknown): boolean {\n  return a === b;\n}\n\nfunction percent(value: number): string {\n  return `${value}%`;\n}\n"],"names":["DEFAULT_MIN","DEFAULT_MAX","STOP_ATTR","sortStops","colorStops","map","el","index","id","sort","a","b","stop","validStops","filter","isNaN","EuiColorStops","Component","g","prototype","service","i","tracked","focusStopOnUpdate","sortedStops","args","rangeMax","max","undefined","stops","last","Math","result","length","round","rangeMin","min","first","globalMin","globalMax","isNotInteractive","Boolean","disabled","readOnly","classes","isHoverDisabled","join","announcement","euiI18n","lookupToken","label","positionOf","getPositionFromStop","trackWidth","gradient","positions","colorAt","getChromaColor","color","showAlpha","css","gradientStop","stopType","start","end","colors","getSteppedGradient","stepNumber","width","steps","parts","_","change","onChange","isStopsInvalid","focusStop","wrapper","thumb","querySelector","hasFocus","focusedStopIndex","focus","focusWrapper","n","action","onAdd","newStops","addStop","addColor","DEFAULT_VISUALIZATION_COLOR","onRemove","removeStop","onStopChange","colorStop","splice","onAddHover","event","getStopFromMouseLocation","x","clientX","y","clientY","addTargetPosition","onAddClick","target","closest","addDefinedStop","onKeyDown","isThumb","getAttribute","startsWith","key","isFirst","isLast","preventDefault","onWrapperFocus","onWrapperBlur","setHoverDisabled","value","setFocusedStop","openStop","openedStopId","closeStop","isRangeMin","isRangeMax","localMin","localMax","registerWrapper","modifier","element","schedule","clientWidth","indexOf","setComponentTemplate","precompileTemplate","strictMode","scope","EuiRangeWrapper","on","fn","EuiScreenReaderOnly","cssStyle","hash","or2","percent","EuiColorStopThumb","gt1","isEqual"],"mappings":"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"}

package/dist/components/eui-combo-box/create-option.js

@@ -1,24 +1,29 @@
 import Component from '@glimmer/component';
 import { on } from '@ember/modifier';
 import { get } from '@ember/object';
-import { inject } from '@ember/service';
+import { service } from '@ember/service';
 import { htmlSafe, isHTMLSafe } from '@ember/template';
 import style from 'ember-style-modifier/modifiers/style';
 import EuiBadge from '../eui-badge.js';
 import EuiTextComponent from '../eui-text.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime';
+import { g, i } from 'decorator-transforms/runtime-esm';
 
+function escapeHtml(text) {
+  return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
 function unwrap(input) {
   if (isHTMLSafe(input)) {
     return input.toString();
   }
   return input;
 }
+/** @private The "add as custom option" row of EuiComboBox. */
+
 class EuiComboBoxCreateOptionComponent extends Component {
   static {
-    g(this.prototype, "euiI18n", [inject]);
+    g(this.prototype, "euiI18n", [service]);
   }
   #euiI18n = (i(this, "euiI18n"), void 0);
   _regex = /\{\s*(.*?)\s*\}/g;
@@ -27,16 +32,16 @@ class EuiComboBoxCreateOptionComponent extends Component {
   }
   get formattedString() {
     if (this.args.customOptionText && typeof this.args.customOptionText === 'string') {
-      let str = unwrap(this.args.customOptionText);
-      let context = {
-        searchText: this.args.select.searchText
+      const str = unwrap(this.args.customOptionText);
+      const context = {
+        searchText: escapeHtml(this.args.select.searchText ?? '')
       };
       return htmlSafe(str.replace(this._regex, (_s, p1, p2) => {
         return get(context, p1 || p2);
       }));
     } else {
-      let str = unwrap(this.euiI18n.lookupToken('euiComboBox.customOptionText', 'Add&nbsp;<strong>{searchText}</strong>&nbsp;as custom option', {
-        searchText: this.args.select.searchText
+      const str = unwrap(this.euiI18n.lookupToken('euiComboBox.customOptionText', 'Add&nbsp;<strong>{searchText}</strong>&nbsp;as custom option', {
+        searchText: escapeHtml(this.args.select.searchText ?? '')
       }));
       return htmlSafe(str);
     }
@@ -60,7 +65,7 @@ class EuiComboBoxCreateOptionComponent extends Component {
     };
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    <div class=\"euiComboBoxOptionsList__rowWrap\" {{style this.extraStyling.container}} {{!--template-lint-disable no-invalid-interactive--}} {{on \"pointerup\" @onCreateOption}}>\n      <EuiText class=\"euiComboBoxOptionsList__empty\" @size=\"xs\" {{style this.extraStyling.content}}>\n        <div class=\"euiComboBoxOption__contentWrapper\">\n          <p class=\"euiComboBoxOption__emptyStateText\">\n            {{this.formattedString}}\n          </p>\n\n          <EuiBadge class=\"euiComboBoxOption__enterBadge\" @color=\"hollow\" @iconType={{unless @alwaysShow \"returnKey\"}}>\n            {{#if @alwaysShow}}\n              {{this.createLabel}}\n            {{/if}}\n          </EuiBadge>\n        </div>\n      </EuiText>\n    </div>\n  ", {
+    setComponentTemplate(precompileTemplate("<div class=\"euiComboBoxOptionsList__rowWrap\" {{style this.extraStyling.container}} {{!--template-lint-disable no-invalid-interactive--}} {{on \"pointerup\" @onCreateOption}}>\n  <EuiText class=\"euiComboBoxOptionsList__empty\" @size=\"xs\" {{style this.extraStyling.content}}>\n    <div class=\"euiComboBoxOption__contentWrapper\">\n      <p class=\"euiComboBoxOption__emptyStateText\">\n        {{this.formattedString}}\n      </p>\n\n      <EuiBadge class=\"euiComboBoxOption__enterBadge\" @color=\"hollow\" @iconType={{unless @alwaysShow \"returnKey\"}}>\n        {{#if @alwaysShow}}\n          {{this.createLabel}}\n        {{/if}}\n      </EuiBadge>\n    </div>\n  </EuiText>\n</div>", {
       strictMode: true,
       scope: () => ({
         style,

package/dist/components/eui-combo-box/create-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-option.js","sources":["../../../src/components/eui-combo-box/create-option.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport { get } from '@ember/object';\nimport { inject as service } from '@ember/service';\nimport { htmlSafe, isHTMLSafe } from '@ember/template';\n\nimport style from 'ember-style-modifier/modifiers/style';\n\nimport EuiBadge from '../eui-badge.gts';\nimport EuiText from '../eui-text.gts';\n\nimport type EuiI18n from '../../services/eui-i18n';\n\nfunction unwrap(input: string) {\n  if (isHTMLSafe(input)) {\n    return input.toString();\n  }\n\n  return input;\n}\n\nexport interface EuiComboBoxCreateOptionSignature {\n  Args: {\n    customOptionText?: string;\n    select: { searchText: string };\n    onCreateOption: () => void;\n    alwaysShow?: boolean;\n  };\n}\n\nexport default class EuiComboBoxCreateOptionComponent extends Component<EuiComboBoxCreateOptionSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  _regex = /\\{\\s*(.*?)\\s*\\}/g;\n\n  get createLabel() {\n    return this.euiI18n.lookupToken('euiComboBox.createLabel', 'Create');\n  }\n\n  get formattedString(): ReturnType<typeof htmlSafe> {\n    if (\n      this.args.customOptionText &&\n      typeof this.args.customOptionText === 'string'\n    ) {\n      let str = unwrap(this.args.customOptionText);\n\n      let context = {\n        searchText: this.args.select.searchText\n      };\n\n      return htmlSafe(\n        str.replace(this._regex, (_s, p1, p2) => {\n          return get(context, p1 || p2);\n        })\n      );\n    } else {\n      let str = unwrap(\n        this.euiI18n.lookupToken(\n          'euiComboBox.customOptionText',\n          'Add&nbsp;<strong>{searchText}</strong>&nbsp;as custom option',\n          {\n            searchText: this.args.select.searchText\n          }\n        )\n      );\n\n      return htmlSafe(str);\n    }\n  }\n\n  get extraStyling() {\n    if (this.args.alwaysShow) {\n      return {\n        container: {\n          padding: '4px 12px',\n          cursor: 'pointer'\n        },\n        content: {\n          padding: '0px'\n        }\n      };\n    }\n\n    return {\n      container: {\n        cursor: 'pointer'\n      }\n    };\n  }\n\n  <template>\n    <div\n      class=\"euiComboBoxOptionsList__rowWrap\"\n      {{style this.extraStyling.container}}\n      {{!template-lint-disable no-invalid-interactive}}\n      {{on \"pointerup\" @onCreateOption}}\n    >\n      <EuiText\n        class=\"euiComboBoxOptionsList__empty\"\n        @size=\"xs\"\n        {{style this.extraStyling.content}}\n      >\n        <div class=\"euiComboBoxOption__contentWrapper\">\n          <p class=\"euiComboBoxOption__emptyStateText\">\n            {{this.formattedString}}\n          </p>\n\n          <EuiBadge\n            class=\"euiComboBoxOption__enterBadge\"\n            @color=\"hollow\"\n            @iconType={{unless @alwaysShow \"returnKey\"}}\n          >\n            {{#if @alwaysShow}}\n              {{this.createLabel}}\n            {{/if}}\n          </EuiBadge>\n        </div>\n      </EuiText>\n    </div>\n  </template>\n}\n"],"names":["unwrap","input","isHTMLSafe","toString","EuiComboBoxCreateOptionComponent","Component","g","prototype","service","i","void 0","_regex","createLabel","euiI18n","lookupToken","formattedString","args","customOptionText","str","context","searchText","select","htmlSafe","replace","_s","p1","p2","get","extraStyling","alwaysShow","container","padding","cursor","content","setComponentTemplate","precompileTemplate","strictMode","scope","style","on","EuiText","EuiBadge"],"mappings":";;;;;;;;;;;;AAaA,SAASA,MAAAA,CAAOC,KAAa,EAAA;AAC3B,EAAA,IAAIC,WAAWD,KAAQ,CAAA,EAAA;AACrB,IAAA,OAAOA,MAAME,QAAQ,EAAA;AACvB;AAEA,EAAA,OAAOF,KAAA;AACT;AAWe,MAAMG,yCAAyCC,SAAU,CAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACrEC,MAAA,CAAA,CAAA;AAAA;AAAA,EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAAC,MAAA;AAEDC,EAAAA,MAAA,GAAS,kBAAmB;EAE5B,IAAIC,WAAcA,GAAA;IAChB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,yBAA2B,EAAA,QAAA,CAAA;AAC7D;EAEA,IAAIC,eAAAA,GAA+C;AACjD,IAAA,IACE,IAAI,CAACC,IAAI,CAACC,gBAAgB,IAC1B,OAAO,IAAI,CAACD,IAAI,CAACC,gBAAgB,KAAK,QACtC,EAAA;MACA,IAAIC,MAAMlB,MAAO,CAAA,IAAI,CAACgB,IAAI,CAACC,gBAAgB,CAAA;AAE3C,MAAA,IAAIE,OAAU,GAAA;AACZC,QAAAA,UAAA,EAAY,IAAI,CAACJ,IAAI,CAACK,MAAM,CAACD;OAC/B;AAEA,MAAA,OAAOE,QAAA,CACLJ,GAAI,CAAAK,OAAO,CAAC,IAAI,CAACZ,MAAM,EAAE,CAACa,EAAA,EAAIC,EAAI,EAAAC,EAAA,KAAA;AAChC,QAAA,OAAOC,GAAA,CAAIR,SAASM,EAAM,IAAAC,EAAA,CAAA;AAC5B,OAAA,CAAA,CAAA;AAEJ,KAAO,MAAA;AACL,MAAA,IAAIR,GAAA,GAAMlB,OACR,IAAI,CAACa,OAAO,CAACC,WAAW,CACtB,8BAAA,EACA,8DACA,EAAA;AACEM,QAAAA,UAAA,EAAY,IAAI,CAACJ,IAAI,CAACK,MAAM,CAACD;AAC/B,OAAA,CAAA,CAAA;MAIJ,OAAOE,QAAS,CAAAJ,GAAA,CAAA;AAClB;AACF;EAEA,IAAIU,YAAeA,GAAA;AACjB,IAAA,IAAI,IAAI,CAACZ,IAAI,CAACa,UAAU,EAAE;MACxB,OAAO;AACLC,QAAAA,SAAW,EAAA;AACTC,UAAAA,OAAS,EAAA,UAAA;AACTC,UAAAA,MAAQ,EAAA;SACV;AACAC,QAAAA,OAAS,EAAA;AACPF,UAAAA,OAAS,EAAA;AACX;OACF;AACF;IAEA,OAAO;AACLD,MAAAA,SAAW,EAAA;AACTE,QAAAA,MAAQ,EAAA;AACV;KACF;AACF;AAEA,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CA6BA,kvBAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,KAAA;QAAAC,EAAA;iBAAAC,gBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"create-option.js","sources":["../../../src/components/eui-combo-box/create-option.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport { get } from '@ember/object';\nimport { service } from '@ember/service';\nimport { htmlSafe, isHTMLSafe } from '@ember/template';\n\nimport style from 'ember-style-modifier/modifiers/style';\n\nimport EuiBadge from '../eui-badge.gts';\nimport EuiText from '../eui-text.gts';\n\nimport type EuiI18n from '../../services/eui-i18n';\n\n/** The typed text is user input: escape it before building HTML with it. */\nfunction escapeHtml(text: string): string {\n  return text\n    .replace(/&/g, '&amp;')\n    .replace(/</g, '&lt;')\n    .replace(/>/g, '&gt;')\n    .replace(/\"/g, '&quot;')\n    .replace(/'/g, '&#39;');\n}\n\nfunction unwrap(input: string) {\n  if (isHTMLSafe(input)) {\n    return input.toString();\n  }\n\n  return input;\n}\n\n/** @private The \"add as custom option\" row of EuiComboBox. */\nexport interface EuiComboBoxCreateOptionSignature {\n  Args: {\n    /** EuiComboBox's `@customOptionText`. */\n    customOptionText?: string;\n    /** ember-power-select's API, for the search text. */\n    select: { searchText: string };\n    /** Adds the typed text as an option. */\n    onCreateOption: () => void;\n    /** Rendered above matching options (`@alwaysShowCreateOption`). */\n    alwaysShow?: boolean;\n  };\n}\n\nexport default class EuiComboBoxCreateOptionComponent extends Component<EuiComboBoxCreateOptionSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  _regex = /\\{\\s*(.*?)\\s*\\}/g;\n\n  get createLabel() {\n    return this.euiI18n.lookupToken('euiComboBox.createLabel', 'Create');\n  }\n\n  get formattedString(): ReturnType<typeof htmlSafe> {\n    if (\n      this.args.customOptionText &&\n      typeof this.args.customOptionText === 'string'\n    ) {\n      const str = unwrap(this.args.customOptionText);\n\n      const context = {\n        searchText: escapeHtml(this.args.select.searchText ?? '')\n      };\n\n      return htmlSafe(\n        str.replace(this._regex, (_s, p1, p2) => {\n          return get(context, p1 || p2);\n        })\n      );\n    } else {\n      const str = unwrap(\n        this.euiI18n.lookupToken(\n          'euiComboBox.customOptionText',\n          'Add&nbsp;<strong>{searchText}</strong>&nbsp;as custom option',\n          {\n            searchText: escapeHtml(this.args.select.searchText ?? '')\n          }\n        )\n      );\n\n      return htmlSafe(str);\n    }\n  }\n\n  get extraStyling() {\n    if (this.args.alwaysShow) {\n      return {\n        container: {\n          padding: '4px 12px',\n          cursor: 'pointer'\n        },\n        content: {\n          padding: '0px'\n        }\n      };\n    }\n\n    return {\n      container: {\n        cursor: 'pointer'\n      }\n    };\n  }\n\n  <template>\n    <div\n      class=\"euiComboBoxOptionsList__rowWrap\"\n      {{style this.extraStyling.container}}\n      {{!template-lint-disable no-invalid-interactive}}\n      {{on \"pointerup\" @onCreateOption}}\n    >\n      <EuiText\n        class=\"euiComboBoxOptionsList__empty\"\n        @size=\"xs\"\n        {{style this.extraStyling.content}}\n      >\n        <div class=\"euiComboBoxOption__contentWrapper\">\n          <p class=\"euiComboBoxOption__emptyStateText\">\n            {{this.formattedString}}\n          </p>\n\n          <EuiBadge\n            class=\"euiComboBoxOption__enterBadge\"\n            @color=\"hollow\"\n            @iconType={{unless @alwaysShow \"returnKey\"}}\n          >\n            {{#if @alwaysShow}}\n              {{this.createLabel}}\n            {{/if}}\n          </EuiBadge>\n        </div>\n      </EuiText>\n    </div>\n  </template>\n}\n"],"names":["escapeHtml","text","replace","unwrap","input","isHTMLSafe","toString","EuiComboBoxCreateOptionComponent","Component","g","prototype","service","i","_regex","createLabel","euiI18n","lookupToken","formattedString","args","customOptionText","str","context","searchText","select","htmlSafe","_s","p1","p2","get","extraStyling","alwaysShow","container","padding","cursor","content","setComponentTemplate","precompileTemplate","strictMode","scope","style","on","EuiText","EuiBadge"],"mappings":";;;;;;;;;;;;AAcA,SAASA,UAAAA,CAAWC,IAAY,EAAS;AACvC,EAAA,OAAOA,KACJC,OAAO,CAAC,MAAM,OAAA,CAAA,CACdA,OAAO,CAAC,IAAA,EAAM,MAAA,CAAA,CACdA,OAAO,CAAC,IAAA,EAAM,QACdA,OAAO,CAAC,MAAM,QAAA,CAAA,CACdA,OAAO,CAAC,IAAA,EAAM,OAAA,CAAA;AACnB;AAEA,SAASC,MAAAA,CAAOC,KAAa,EAAA;AAC3B,EAAA,IAAIC,WAAWD,KAAA,CAAA,EAAQ;AACrB,IAAA,OAAOA,MAAME,QAAQ,EAAA;AACvB,EAAA;AAEA,EAAA,OAAOF,KAAA;AACT;AAEA;;AAce,MAAMG,yCAAyCC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACrEC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;AAEDC,EAAAA,MAAA,GAAS,kBAAA;EAET,IAAIC,WAAAA,GAAc;IAChB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,yBAAA,EAA2B,QAAA,CAAA;AAC7D,EAAA;EAEA,IAAIC,eAAAA,GAA+C;AACjD,IAAA,IACE,IAAI,CAACC,IAAI,CAACC,gBAAgB,IAC1B,OAAO,IAAI,CAACD,IAAI,CAACC,gBAAgB,KAAK,QAAA,EACtC;MACA,MAAMC,MAAMjB,MAAA,CAAO,IAAI,CAACe,IAAI,CAACC,gBAAgB,CAAA;AAE7C,MAAA,MAAME,OAAA,GAAU;QACdC,UAAA,EAAYtB,UAAA,CAAW,IAAI,CAACkB,IAAI,CAACK,MAAM,CAACD,UAAU,IAAI,EAAA;OACxD;AAEA,MAAA,OAAOE,QAAA,CACLJ,GAAA,CAAIlB,OAAO,CAAC,IAAI,CAACW,MAAM,EAAE,CAACY,EAAA,EAAIC,EAAA,EAAIC,EAAA,KAAA;AAChC,QAAA,OAAOC,GAAA,CAAIP,SAASK,EAAA,IAAMC,EAAA,CAAA;AAC5B,MAAA,CAAA,CAAA,CAAA;AAEJ,IAAA,CAAA,MAAO;AACL,MAAA,MAAMP,GAAA,GAAMjB,OACV,IAAI,CAACY,OAAO,CAACC,WAAW,CACtB,8BAAA,EACA,8DAAA,EACA;QACEM,UAAA,EAAYtB,UAAA,CAAW,IAAI,CAACkB,IAAI,CAACK,MAAM,CAACD,UAAU,IAAI,EAAA;AACxD,OAAA,CAAA,CAAA;MAIJ,OAAOE,QAAA,CAASJ,GAAA,CAAA;AAClB,IAAA;AACF,EAAA;EAEA,IAAIS,YAAAA,GAAe;AACjB,IAAA,IAAI,IAAI,CAACX,IAAI,CAACY,UAAU,EAAE;MACxB,OAAO;AACLC,QAAAA,SAAA,EAAW;AACTC,UAAAA,OAAA,EAAS,UAAA;AACTC,UAAAA,MAAA,EAAQ;SACV;AACAC,QAAAA,OAAA,EAAS;AACPF,UAAAA,OAAA,EAAS;AACX;OACF;AACF,IAAA;IAEA,OAAO;AACLD,MAAAA,SAAA,EAAW;AACTE,QAAAA,MAAA,EAAQ;AACV;KACF;AACF,EAAA;AAEA,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAAA,orBAAA,EA6BA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,KAAA;QAAAC,EAAA;iBAAAC,gBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

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

@@ -2,7 +2,8 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiComboBoxGroup = setComponentTemplate(precompileTemplate("\n    <div class=\"ember-power-select-group\" aria-disabled={{if @group.disabled \"true\"}} ...attributes>\n      <div class=\"ember-power-select-group-name euiComboBoxTitle\">{{@group.groupName}}</div>\n      {{yield}}\n    </div>\n  ", {
+/** @private Title row of an option group in EuiComboBox. */
+const EuiComboBoxGroup = setComponentTemplate(precompileTemplate("<div class=\"ember-power-select-group\" aria-disabled={{if @group.disabled \"true\"}} ...attributes>\n  <div class=\"ember-power-select-group-name euiComboBoxTitle\">{{@group.groupName}}</div>\n  {{yield}}\n</div>", {
   strictMode: true
 }), templateOnly());
 

package/dist/components/eui-combo-box/group.js.map

@@ -1 +1 @@
-{"version":3,"file":"group.js","sources":["../../../src/components/eui-combo-box/group.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiComboBoxGroupSignature {\n  Element: HTMLDivElement;\n  Args: {\n    group: {\n      groupName: string;\n      disabled: boolean;\n    };\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiComboBoxGroup: TemplateOnlyComponent<EuiComboBoxGroupSignature> =\n  <template>\n    <div\n      class=\"ember-power-select-group\"\n      aria-disabled={{if @group.disabled \"true\"}}\n      ...attributes\n    >\n      <div\n        class=\"ember-power-select-group-name euiComboBoxTitle\"\n      >{{@group.groupName}}</div>\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiComboBoxGroup;\n"],"names":["EuiComboBoxGroup","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AAeA,MAAMA,gBACJ,GAAAC,oBAAA,CAAAC,kBAAA,CAWA,6OAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"group.js","sources":["../../../src/components/eui-combo-box/group.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private Title row of an option group in EuiComboBox. */\nexport interface EuiComboBoxGroupSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The group: `{ groupName, disabled }`. */\n    group: {\n      groupName: string;\n      disabled: boolean;\n    };\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiComboBoxGroup: TemplateOnlyComponent<EuiComboBoxGroupSignature> =\n  <template>\n    <div\n      class=\"ember-power-select-group\"\n      aria-disabled={{if @group.disabled \"true\"}}\n      ...attributes\n    >\n      <div\n        class=\"ember-power-select-group-name euiComboBoxTitle\"\n      >{{@group.groupName}}</div>\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiComboBoxGroup;\n"],"names":["EuiComboBoxGroup","setComponentTemplate","precompileTemplate","strictMode","templateOnly"],"mappings":";;;;AAEA;AAeA,MAAMA,gBAAwC,GAAAC,oBAAA,CAC5CC,kBAAA,CAAA,uNAAA,EAWA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-combo-box/no-matches-message.js

@@ -3,7 +3,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const NoMatchesMessageComponent = setComponentTemplate(precompileTemplate("\n  {{#if @noMatchesMessage}}\n    <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\" ...attributes>\n      <p>\n        {{@noMatchesMessage}}\n      </p>\n    </EuiText>\n  {{/if}}\n", {
+const NoMatchesMessageComponent = setComponentTemplate(precompileTemplate("{{#if @noMatchesMessage}}\n  <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\" ...attributes>\n    <p>\n      {{@noMatchesMessage}}\n    </p>\n  </EuiText>\n{{/if}}", {
   strictMode: true,
   scope: () => ({
     EuiText: EuiTextComponent

package/dist/components/eui-combo-box/no-matches-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"no-matches-message.js","sources":["../../../src/components/eui-combo-box/no-matches-message.gts"],"sourcesContent":["import EuiText from '../eui-text.gts';\n\nimport type { EuiTextSignature } from '../eui-text';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\ninterface Signature {\n  Element: EuiTextSignature['Element'];\n  Args: {\n    noMatchesMessage?: string;\n  };\n}\n\nconst NoMatchesMessageComponent: TemplateOnlyComponent<Signature> = <template>\n  {{#if @noMatchesMessage}}\n    <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\" ...attributes>\n      <p>\n        {{@noMatchesMessage}}\n      </p>\n    </EuiText>\n  {{/if}}\n</template>;\n\nexport default NoMatchesMessageComponent;\n"],"names":["NoMatchesMessageComponent","setComponentTemplate","precompileTemplate","strictMode","scope","EuiText","templateOnly"],"mappings":";;;;;AAYA,MAAMA,yBAA8D,GAAAC,oBAAA,CAAAC,kBAAA,CAQpE,oMAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"no-matches-message.js","sources":["../../../src/components/eui-combo-box/no-matches-message.gts"],"sourcesContent":["import EuiText from '../eui-text.gts';\n\nimport type { EuiTextSignature } from '../eui-text';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** @private Shown in EuiComboBox's options list. */\ninterface Signature {\n  Element: EuiTextSignature['Element'];\n  Args: {\n    /** EuiComboBox's `@noMatchesMessage`. */\n    noMatchesMessage?: string;\n  };\n}\n\nconst NoMatchesMessageComponent: TemplateOnlyComponent<Signature> = <template>\n  {{#if @noMatchesMessage}}\n    <EuiText @size=\"xs\" class=\"euiComboBoxOptionsList__empty\" ...attributes>\n      <p>\n        {{@noMatchesMessage}}\n      </p>\n    </EuiText>\n  {{/if}}\n</template>;\n\nexport default NoMatchesMessageComponent;\n"],"names":["NoMatchesMessageComponent","setComponentTemplate","precompileTemplate","strictMode","scope","EuiText","templateOnly"],"mappings":";;;;;AAcA,MAAMA,yBAAiD,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,kLAAA,EAQpE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}