var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
import { h } from '@stencil/core';
import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaBlur, VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
import { VegaInternalIconManager } from '../../../../../helpers/icon/internal-icon-manager';
import Hashtag from '../../assets/hashtag';
/**
 * Renderer for the custom color input in the color swatch picker popover.
 */
export class ColorSwatchInputRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.handleInputEvent = (input) => {
      DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, VegaChange, () => {
        const color = this.colorSwatchPickerColorFormatController.formatColor('output', input.value);
        if (!color || this.isValidColor(color)) {
          this.colorSwatchPickerValueController.updateInternalColor(color);
        }
      });
      // fallback validation on blur to handle cases where the user pastes an invalid color and doesn't trigger the change event
      DomNodeSubjectObserverFactory.addUniqueObserverToNode(input, VegaBlur, () => {
        if (input.value && !this.isValidColor(input.value)) {
          input.value = this.colorSwatchPickerColorFormatController.formatColor('input', this.internalColor);
        }
      });
    };
  }
  render() {
    if (!this.showInput)
      return null;
    return (h("vega-flex", { gap: "size-8", alignItems: "center", margin: { bottom: 'size-16' } },
      h("vega-color-swatch", { color: this.internalColor, size: "extra-small" }),
      h("vega-input", { ref: this.handleInputEvent, size: "small", value: this.colorSwatchPickerColorFormatController.formatColor('input', this.internalColor), placeholder: this.inputPlaceholder || this.translationSlimmer.t('Enter color'), prefixIcon: this.inputPrefixIcon === ColorSwatchInputRenderer.DEFAULT_INPUT_ICON
          ? VegaInternalIconManager.getIconKey('hashtag')
          : this.inputPrefixIcon })));
  }
  /**
   * A simple validation function to check if the provided value is a valid CSS color. It's used to reduce unnecessary updates to the color swatch when the user is typing in the custom color input.
   *
   * @param {string} value The value to validate.
   * @returns {boolean} True if the value is a valid CSS color, false otherwise.
   */
  isValidColor(value) {
    let result = true;
    if (globalThis.CSS && typeof globalThis.CSS.supports === 'function') {
      result = globalThis.CSS.supports('color', value);
    }
    return result;
  }
}
(() => {
  VegaInternalIconManager.register({
    hashtag: Hashtag,
  });
})();
ColorSwatchInputRenderer.DEFAULT_INPUT_ICON = 'hexColorIcon';
__decorate([
  MapToComponentField()
], ColorSwatchInputRenderer.prototype, "internalColor", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchInputRenderer.prototype, "showInput", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchInputRenderer.prototype, "inputPlaceholder", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchInputRenderer.prototype, "inputPrefixIcon", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchInputRenderer.prototype, "colorSwatchPickerValueController", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchInputRenderer.prototype, "colorSwatchPickerColorFormatController", void 0);
__decorate([
  MapToComponentField()
], ColorSwatchInputRenderer.prototype, "translationSlimmer", void 0);
