'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-58ea899e.js');
const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
const component = require('./component-1e352960.js');
const tinycolorPolyfill = require('./tinycolor-polyfill-502efaa8.js');
const accessibility = require('./accessibility-88f8af84.js');
const internalVegaEventManager = require('./internal-vega-event-manager-063c17cb.js');
const eventEmitSlimmer = require('./event-emit-slimmer-73c42d7e.js');
const vegaEventId = require('./vega-event-id-f95480b7.js');
const translationSlimmer = require('./translation-slimmer-a4a7f0eb.js');
require('./dynamic-slimmer-f31fdfd7.js');
require('./change-manager-a297e4d2.js');
require('./dom-node-subject-observer-factory-ba6a95f3.js');
require('./observer-f49483e8.js');
require('./ui-3727d685.js');
require('./try-get-document-c0ebd39a.js');
require('./internal-translation-controller-f0da24b2.js');
require('./static-subject-title-5829a298.js');

var __decorate$1 = (undefined && undefined.__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;
};
/**
 * Renderer slimmer for vega-color-swatch.
 */
class VegaColorSwatchRenderer extends globalSlimmerRegistry.VegaSlimmer {
  constructor() {
    super(...arguments);
    /**
     * Handler for click event on the swatch. It will emit the click event to the parent component if the swatch is not disabled.
     *
     * @param {MouseEvent} e The click event.
     */
    this.handleClick = (e) => {
      if (this.disabled) {
        e.stopPropagation();
        return;
      }
      // Prevent the click event from bubbling up to avoid duplicate events if the event semantics namespace is not 'vega'.
      if (internalVegaEventManager.internalVegaEventManager.getSemantics(this.host).namespace !== 'vega') {
        e.stopPropagation();
      }
      this.clickEventEmitter.emit();
    };
  }
  /**
   * Render function for the slimmer. It will be called by the component to render the content.
   *
   * @returns {HTMLElement} The rendered content.
   */
  render() {
    const isClearView = this.variant === 'clear';
    const colorExists = !isClearView && !!this.color;
    return (index.h("div", { class: {
        'vega-color-swatch-container': true,
        [`size-${this.size}`]: true,
        [`shape-${this.shape}`]: true,
        'swatch-clear': isClearView,
      }, role: "button", part: "swatch-container", "aria-label": this.getAriaLabel(), "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick({ composed: true }) },
      index.h("div", { class: "swatch", part: "swatch" },
        colorExists && index.h("span", { class: "color-fill", style: this.getFillColorStyles() }),
        isClearView && index.h("span", { class: "clear-line" }),
        this.selected && !isClearView && (index.h("vega-icon", { class: "check-icon", icon: "checkmark", size: "size-16", color: this.getCheckMarkColor() }))),
      this.label && this.renderLabel()));
  }
  renderLabel() {
    return (index.h("vega-font", { class: "swatch-label", variant: "font-field-value", color: this.disabled ? 'text-disabled' : 'text-primary' }, this.label));
  }
  /**
   * Get the appropriate aria-label for the swatch based on the provided props.
   *
   * @returns {string} The aria-label for the swatch.
   */
  getAriaLabel() {
    if (this.label)
      return this.label;
    if (this.variant === 'clear')
      return this.translationSlimmer.t('Clear color');
    if (this.color)
      return this.translationSlimmer.t('Color {0}', this.color);
    return this.translationSlimmer.t('Color swatch');
  }
  /**
   * Get the fill color styles for the swatch.
   *
   * @returns {Record<string, string>} The styles for the swatch fill.
   */
  getFillColorStyles() {
    const styles = {};
    if (this.color) {
      styles.backgroundColor = this.color;
    }
    return styles;
  }
  /**
   * The check mark color will automatically adjust to maintain contrast against the swatch color. If no color is provided, it defaults to 'text-primary'.
   *
   * @returns {TextColorsTokenType} The appropriate check mark color.
   */
  getCheckMarkColor() {
    if (!this.color)
      return 'text-primary';
    const textBlack = 'text-black';
    const textWhite = 'text-white';
    const isColorDark = new tinycolorPolyfill.TinyColorPolyfill(this.color).isDark();
    return isColorDark ? textWhite : textBlack;
  }
}
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "host", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "variant", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "label", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "color", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "selected", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "size", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "disabled", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "shape", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "clickEventEmitter", void 0);
__decorate$1([
  globalSlimmerRegistry.MapToComponentField()
], VegaColorSwatchRenderer.prototype, "translationSlimmer", void 0);

const vegaColorSwatchCss = ":host{display:inline-block;vertical-align:middle}.vega-color-swatch-container{display:flex;flex-direction:row;align-items:center;border-radius:4px}.swatch{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));position:relative;flex-shrink:0;overflow:hidden}.shape-basket .swatch{border-radius:8px}.shape-block .swatch{border-radius:0px}.check-icon{position:relative;z-index:1}.swatch-clear .swatch{background-color:rgba(var(--v-bg-transparent, 0, 0, 0, 0));border-width:1px;border-style:solid;border-color:rgba(var(--v-border-color-danger, 230, 50, 87, 1))}.swatch-clear .swatch .clear-line{position:absolute;width:141%;height:0;border-top-width:1px;border-left-width:0px;border-bottom-width:0px;border-right-width:0px;border-style:solid;border-color:rgba(var(--v-border-color-danger, 230, 50, 87, 1));transform:rotate(-45deg);transform-origin:center}.color-fill{position:absolute;display:block;top:0;left:0;width:100%;height:100%}.size-extra-small .swatch{width:24px;height:24px;min-width:24px}.size-extra-small.shape-basket .swatch{border-radius:4px}.size-small .swatch{width:40px;height:40px;min-width:40px}.size-small.shape-basket{border-radius:8px}.size-medium .swatch{width:48px;height:48px;min-width:48px}.size-medium.shape-basket{border-radius:8px}@media (hover: hover){:host(:not(.disabled)) .swatch:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host(:not(.disabled)) .swatch-clear .swatch:hover{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}:host(:not(.disabled)) .swatch-clear .swatch:hover .clear-line{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}}.vega-color-swatch-container:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:2px}.vega-color-swatch-container:focus-visible .swatch{border-width:1px;border-style:solid;border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}.vega-color-swatch-container:focus-visible.swatch-clear{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:2px}.vega-color-swatch-container:focus-visible.swatch-clear .swatch{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}.vega-color-swatch-container:focus-visible.swatch-clear .swatch .clear-line{border-color:rgba(var(--v-border-color-danger-hover, 255, 87, 114, 1))}:host(:not(.disabled)) .vega-color-swatch-container{cursor:pointer}:host(.disabled) .vega-color-swatch-container{cursor:not-allowed}:host(.disabled) .swatch{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1));pointer-events:none}:host(.disabled) .swatch .color-fill,:host(.disabled) .swatch .check-icon{opacity:0.5}:host(.disabled) .swatch .label-container{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}:host(.disabled) .swatch .clear-line{border-color:rgba(var(--v-border-color-input-field-disabled, 222, 225, 227, 1))}.swatch-label{margin-left:8px}";

var __decorate = (undefined && undefined.__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;
};
const VegaColorSwatch = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.vegaClick = index.createEvent(this, "vegaClick", 7);
    this.click = index.createEvent(this, "click", 7);
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
    this.vegaColorSwatchRenderer = new VegaColorSwatchRenderer();
    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaColorSwatch, vegaEventId.VegaClick);
    /**
     * Specifies the CSS color value for the swatch (e.g. '#841AC1', 'rgb(15, 137, 82)', 'rgba(15, 137, 82, 0.5)').
     * Applies only when `variant` is set to 'swatch'.
     *
     * @vegaVersion 2.82.0
     */
    this.color = '';
    /**
     * Indicates whether the swatch is currently selected. When selected, a check mark is shown, and its color automatically adjusts to maintain contrast against the swatch color.
     *
     * @vegaVersion 2.82.0
     */
    // eslint-disable-next-line @stencil/strict-mutable
    this.selected = false;
    /**
     * Specifies the label or title for the swatch.
     *    It provides descriptive text that helps identify the purpose or content expected in the swatch.
     
     *
     * @vegaVersion 2.82.0
     */
    this.label = '';
    /**
     * Specifies the size of the swatch.
     *
     * @vegaVersion 2.82.0
     */
    this.size = 'small';
    /**
     * Specifies whether the swatch is disabled.
     *
     * @vegaVersion 2.82.0
     */
    this.disabled = false;
    /**
     * Specifies the visual style and prominence of the swatch.
     *    It determines how the swatch will be presented to the user.
     * - `swatch`: Displays the color fill.
     * - `clear`: Displays a diagonal line to indicate no color (clear selection).
     *
     * @vegaVersion 2.82.0
     */
    this.variant = 'swatch';
    /**
     * Controls the outer shape of the swatch.
     * - `basket`: Rounded corners for spaced layouts.
     * - `block`: Square corners for dense or flush layouts.
     *
     * @vegaVersion 2.82.0
     */
    this.shape = 'basket';
  }
  render() {
    return component.sanitizeVegaComponent(index.h(index.Host, { class: {
        disabled: this.disabled,
      } }, this.vegaColorSwatchRenderer.render()), this.host);
  }
  get host() { return index.getElement(this); }
};
__decorate([
  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
], VegaColorSwatch.prototype, "globalSlimmers", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatch.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatch.prototype, "translationSlimmer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatch.prototype, "vegaColorSwatchRenderer", void 0);
__decorate([
  globalSlimmerRegistry.InjectVegaSlimmer()
], VegaColorSwatch.prototype, "clickEventEmitter", void 0);
VegaColorSwatch.style = vegaColorSwatchCss;

exports.vega_color_swatch = VegaColorSwatch;
