@ember-eui/core 8.0.65 → 8.0.67

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

@@ -0,0 +1,405 @@
+import { _ as _applyDecoratedDescriptor, a as _initializerDefineProperty, b as _defineProperty } from '../_rollupPluginBabelHelpers-9wjJaosZ.js';
+import { setComponentTemplate } from '@ember/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { fn, hash } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { schedule } from '@ember/runloop';
+import { inject } 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';
+
+var _class, _descriptor, _descriptor2, _descriptor3, _descriptor4, _descriptor5, _descriptor6, _descriptor7, _descriptor8;
+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));
+}
+let EuiColorStops = 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
+    >
+      <EuiScreenReaderOnly><p aria-live="polite">{{this.announcement}}</p></EuiScreenReaderOnly>
+      <div class="euiRangeTrack {{if @disabled 'euiRangeTrack--disabled'}}">
+        <div
+          class="euiRangeHighlight euiColorStops__highlight
+            {{if @compressed 'euiRangeHighlight--compressed'}}"
+        >
+          <div
+            class="euiRangeHighlight__progress"
+            style={{cssStyle
+              (hash marginLeft="0%" width="100%" background=this.gradient)
+            }}
+          ></div>
+        </div>
+        {{! template-lint-disable no-invalid-interactive }}
+        <div
+          class="euiColorStops__addContainer
+            {{if
+              (or2 this.isHoverDisabled this.isNotInteractive)
+              'euiColorStops__addContainer-isDisabled'
+            }}"
+          data-test-subj="euiColorStopsAdd"
+          {{on "click" this.onAddClick}}
+          {{on "mousemove" this.onAddHover}}
+        >
+          <div
+            class="euiColorStops__addTarget"
+            style={{cssStyle (hash left=(percent this.addTargetPosition))}}
+          ></div>
+        </div>
+        {{#each this.sortedStops key="id" as |colorStop index|}}
+          <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}}
+          />
+        {{/each}}
+      </div>
+    </EuiRangeWrapper>
+  `, {
+  strictMode: true,
+  scope: () => ({
+    EuiRangeWrapper,
+    on,
+    fn,
+    EuiScreenReaderOnly,
+    cssStyle,
+    hash,
+    or2,
+    percent,
+    EuiColorStopThumb,
+    gt1,
+    isEqual
+  })
+}), (_class = class EuiColorStops extends Component {
+  constructor(...args) {
+    super(...args);
+    _initializerDefineProperty(this, "euiI18n", _descriptor, this);
+    _initializerDefineProperty(this, "wrapper", _descriptor2, this);
+    _initializerDefineProperty(this, "trackWidth", _descriptor3, this);
+    _initializerDefineProperty(this, "hasFocus", _descriptor4, this);
+    _initializerDefineProperty(this, "focusedStopIndex", _descriptor5, this);
+    _initializerDefineProperty(this, "openedStopId", _descriptor6, this);
+    _initializerDefineProperty(this, "addTargetPosition", _descriptor7, this);
+    _initializerDefineProperty(this, "isHoverDisabled", _descriptor8, this);
+    // after adding a stop, focus it and open it once rendered
+    _defineProperty(this, "focusStopOnUpdate", null);
+    _defineProperty(this, "positionOf", stop => getPositionFromStop(stop, this.trackWidth, this.globalMin, this.globalMax));
+    _defineProperty(this, "isRangeMin", stop => this.args.min === undefined && stop === this.rangeMin);
+    _defineProperty(this, "isRangeMax", stop => this.args.max === undefined && stop === this.rangeMax);
+    _defineProperty(this, "localMin", index => index === 0 ? this.globalMin : this.sortedStops[index - 1].stop + 1);
+    _defineProperty(this, "localMax", index => index === this.sortedStops.length - 1 ? this.globalMax : this.sortedStops[index + 1].stop - 1);
+    _defineProperty(this, "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;
+          }
+        }
+      });
+    }));
+  }
+  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.' : ''
+    });
+  }
+  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();
+  }
+  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);
+  }
+  onRemove(id) {
+    this.focusWrapper();
+    this.change(removeStop(this.args.colorStops, id));
+  }
+  onStopChange(id, colorStop) {
+    const colorStops = [...this.args.colorStops];
+    colorStops.splice(id, 1, colorStop);
+    this.change(colorStops);
+  }
+  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);
+  }
+  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));
+  }
+  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;
+    }
+  }
+  onWrapperFocus(event) {
+    if (event.target === this.wrapper) this.hasFocus = true;
+  }
+  onWrapperBlur() {
+    this.hasFocus = false;
+  }
+  setHoverDisabled(value) {
+    if (!this.args.disabled) this.isHoverDisabled = value;
+  }
+  setFocusedStop(index) {
+    this.focusedStopIndex = index;
+  }
+  openStop(id) {
+    this.openedStopId = id;
+  }
+  closeStop() {
+    this.openedStopId = null;
+  }
+}, (_descriptor = _applyDecoratedDescriptor(_class.prototype, "euiI18n", [inject], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor2 = _applyDecoratedDescriptor(_class.prototype, "wrapper", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: null
+}), _descriptor3 = _applyDecoratedDescriptor(_class.prototype, "trackWidth", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return 0;
+  }
+}), _descriptor4 = _applyDecoratedDescriptor(_class.prototype, "hasFocus", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return false;
+  }
+}), _descriptor5 = _applyDecoratedDescriptor(_class.prototype, "focusedStopIndex", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return null;
+  }
+}), _descriptor6 = _applyDecoratedDescriptor(_class.prototype, "openedStopId", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return null;
+  }
+}), _descriptor7 = _applyDecoratedDescriptor(_class.prototype, "addTargetPosition", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return 0;
+  }
+}), _descriptor8 = _applyDecoratedDescriptor(_class.prototype, "isHoverDisabled", [tracked], {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  initializer: function () {
+    return false;
+  }
+}), _applyDecoratedDescriptor(_class.prototype, "focusWrapper", [action], Object.getOwnPropertyDescriptor(_class.prototype, "focusWrapper"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onAdd", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onAdd"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onRemove", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onRemove"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onStopChange", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onStopChange"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onAddHover", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onAddHover"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onAddClick", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onAddClick"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onKeyDown", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onKeyDown"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onWrapperFocus", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onWrapperFocus"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "onWrapperBlur", [action], Object.getOwnPropertyDescriptor(_class.prototype, "onWrapperBlur"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "setHoverDisabled", [action], Object.getOwnPropertyDescriptor(_class.prototype, "setHoverDisabled"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "setFocusedStop", [action], Object.getOwnPropertyDescriptor(_class.prototype, "setFocusedStop"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "openStop", [action], Object.getOwnPropertyDescriptor(_class.prototype, "openStop"), _class.prototype), _applyDecoratedDescriptor(_class.prototype, "closeStop", [action], Object.getOwnPropertyDescriptor(_class.prototype, "closeStop"), _class.prototype)), _class));
+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