/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit/directives/keyed.js";
import Color from "color";
import { css, html, nothing, svg } from "lit";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { d as getModeName } from "../../chunks/dom.js";
import { b as hexify } from "../../chunks/utils.js";
const CSS = {
  swatch: "swatch",
  noColorSwatch: "swatch--no-color",
  checker: "checker"
};
const COLORS = {
  borderLight: "rgba(0, 0, 0, 0.3)",
  borderDark: "rgba(255, 255, 255, 0.15)"
};
const checkerSquareSize = 4;
const CHECKER_DIMENSIONS = {
  squareSize: checkerSquareSize,
  size: checkerSquareSize * 2
};
const IDS = {
  checker: "checker",
  shape: "shape"
};
const styles = css`:host{position:relative;display:inline-flex}:host([scale=s]){block-size:1.25rem;inline-size:1.25rem}:host([scale=m]){block-size:1.5rem;inline-size:1.5rem}:host([scale=l]){block-size:2rem;inline-size:2rem}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch rect{transition-property:all;transition-duration:var(--calcite-animation-timing);transition-timing-function:cubic-bezier(.4,0,.2,1)}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}.swatch--no-color line{stroke:var(--calcite-color-status-danger)}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}`;
class ColorPickerSwatch extends LitElement {
  constructor() {
    super(...arguments);
    this.active = false;
    this.scale = "m";
  }
  static {
    this.properties = { active: [7, {}, { reflect: true, type: Boolean }], color: 1, scale: [3, {}, { reflect: true }] };
  }
  static {
    this.styles = styles;
  }
  load() {
    this.handleColorChange(this.color);
  }
  willUpdate(changes) {
    if (changes.has("color")) {
      this.handleColorChange(this.color);
    }
  }
  handleColorChange(color) {
    this.internalColor = color ? Color(color) : void 0;
  }
  render() {
    const isEmpty = !this.internalColor;
    const classes = {
      [CSS.swatch]: true,
      [CSS.noColorSwatch]: isEmpty
    };
    return html`<svg class=${safeClassMap(classes)} xmlns=http://www.w3.org/2000/svg>${this.renderSwatch()}</svg>`;
  }
  renderSwatch() {
    const { active, el, internalColor } = this;
    const borderRadius = active ? "100%" : "0";
    const theme = getModeName(el);
    const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
    const isEmpty = !internalColor;
    const commonSwatchProps = {
      height: "100%",
      rx: borderRadius,
      stroke: borderColor,
      strokeWidth: "2",
      width: "100%"
    };
    if (isEmpty) {
      return svg`<clipPath id=${IDS.shape}><rect height=100% rx=${borderRadius ?? nothing} width=100% /></clipPath>${this.renderSwatchRect({
        clipPath: `inset(0 round ${borderRadius})`,
        ...commonSwatchProps
      })}<line clip-path=url(#shape) stroke-width=3 x1=100% x2=0 y1=0 y2=100% />`;
    }
    const alpha = internalColor.alpha();
    const hex = hexify(internalColor);
    const hexa = hexify(internalColor, alpha < 1);
    return svg`<title>${hexa}</title><defs><pattern height=${CHECKER_DIMENSIONS.size} id=${IDS.checker} patternUnits=userSpaceOnUse width=${CHECKER_DIMENSIONS.size} x=0 y=0><rect class=${safeClassMap(CSS.checker)} height=${CHECKER_DIMENSIONS.squareSize} width=${CHECKER_DIMENSIONS.squareSize} x=0 y=0 /><rect class=${safeClassMap(CSS.checker)} height=${CHECKER_DIMENSIONS.squareSize} width=${CHECKER_DIMENSIONS.squareSize} x=${CHECKER_DIMENSIONS.squareSize} y=${CHECKER_DIMENSIONS.squareSize} /></pattern></defs>${this.renderSwatchRect({
      fill: "url(#checker)",
      rx: commonSwatchProps.rx,
      height: commonSwatchProps.height,
      width: commonSwatchProps.width
    })}${this.renderSwatchRect({
      clipPath: alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`,
      fill: hex,
      ...commonSwatchProps
    })}${alpha < 1 ? this.renderSwatchRect({
      clipPath: "polygon(100% 0, 100% 100%, 0 100%)",
      fill: hexa,
      key: "opacity-fill",
      ...commonSwatchProps
    }) : null}`;
  }
  renderSwatchRect({ clipPath, fill, height, key, rx, stroke, strokeWidth, width }) {
    return keyed(key, svg`<rect clip-path=${clipPath ?? nothing} fill=${fill ?? nothing} height=${height ?? nothing} rx=${rx ?? nothing} stroke=${stroke ?? nothing} stroke-width=${strokeWidth ?? nothing} width=${width ?? nothing} />`);
  }
}
customElement("calcite-color-picker-swatch", ColorPickerSwatch);
export {
  ColorPickerSwatch
};
