/* 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 { css, html, nothing, svg } from "lit";
import { createRef, ref } from "lit/directives/ref.js";
import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
import Color from "color";
import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
import { u as useSetFocus } from "../../chunks/useSetFocus.js";
import { b as hexify } from "../../chunks/utils.js";
import { u as useInteractive } from "../../chunks/useInteractive.js";
const CSS = {
  imageContainer: "image-container",
  container: "container",
  selectable: "selectable",
  nonInteractive: "non-interactive",
  selected: "selected",
  internalSvgContainer: "internal-svg-container",
  internalSvgDisabled: "internal-svg-disabled",
  internalSvgEmpty: "internal-svg-empty",
  swatch: "swatch",
  checker: "checker",
  noColorSwatch: "swatch--no-color"
};
const SLOTS = {
  image: "image"
};
const checkerSquareSize = 4;
const CHECKER_DIMENSIONS = {
  squareSize: checkerSquareSize,
  size: checkerSquareSize * 2
};
const IDS = {
  checker: "checker",
  shape: "shape",
  swatchRect: "swatch-rect",
  swatchSolid: "swatch-solid",
  swatchTransparent: "swatch-transparent"
};
const styles = css`:host{display:block;--calcite-internal-swatch-inset: var(--calcite-spacing-xxs)}:host([scale=s]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xl)}:host([scale=m]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xxl)}:host([scale=l]) .container{--calcite-internal-swatch-size: var(--calcite-spacing-xxxl)}.container{position:relative;box-sizing:border-box;justify-content:center;overflow:hidden;outline-color:transparent;font-size:var(--calcite-internal-swatch-font-size, var(--calcite-font-size));block-size:var(--calcite-internal-swatch-size, auto);inline-size:var(--calcite-internal-swatch-size, auto);min-inline-size:var(--calcite-internal-swatch-size, auto);border-radius:var(--calcite-swatch-corner-radius, 0)}.container:not(.non-interactive):hover{cursor:pointer;box-shadow:0 0 0 var(--calcite-border-width-md) var(--calcite-color-border-1)}.container.selectable{cursor:pointer}.container:not(.non-interactive):focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.swatch{position:absolute;display:inline-flex;overflow:hidden;z-index:calc(var(--calcite-z-index) + 1);block-size:var(--calcite-internal-swatch-size, auto);inline-size:var(--calcite-internal-swatch-size, auto);min-inline-size:var(--calcite-internal-swatch-size, auto);border-radius:var(--calcite-swatch-corner-radius, 0)}:host([selected]) .swatch{inset:var(--calcite-internal-swatch-inset);block-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset));inline-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset));min-inline-size:calc(var(--calcite-internal-swatch-size, auto) - 2 * var(--calcite-internal-swatch-inset))}:host([selected]) .container{box-shadow:inset 0 0 0 var(--calcite-border-width-md) var(--calcite-color-text-1),inset 0 0 0 var(--calcite-border-width-lg) var(--calcite-color-foreground-1)}:host([selected]) .image-container{inset:var(--calcite-internal-swatch-inset)}.image-container{position:absolute;display:inline-flex;overflow:hidden;z-index:calc(var(--calcite-z-index) + 2);inset:var(--calcite-spacing-px);display:flex;align-items:center;justify-content:center;pointer-events:none;border-radius:var(--calcite-swatch-corner-radius, 0)}.internal-svg-container{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:calc(var(--calcite-z-index) + 2)}.swatch{overflow:hidden;block-size:inherit;inline-size:inherit}.swatch--no-color rect{fill:var(--calcite-color-foreground-1)}:host([selected]) #swatch-rect,:host([selected]) #swatch-solid,:host([selected]) #swatch-transparent{stroke-width:0}#swatch-rect,#swatch-solid,#swatch-transparent{stroke:var(--calcite-color-text-1);stroke-width:var(--calcite-border-width-md);stroke-opacity:.3;rx:var(--calcite-swatch-corner-radius)}.internal-svg-disabled{stroke:#6a6a6a;fill:#fff}.internal-svg-empty{stroke:var(--calcite-color-status-danger);stroke-width:3}.checker{fill:#cacaca}:host([hidden]){display:none}[hidden]{display:none}`;
class Swatch extends LitElement {
  constructor() {
    super();
    this.containerRef = createRef();
    this.focusSetter = useSetFocus()(this);
    this.interactiveContainer = useInteractive(this);
    this.hasImage = false;
    this.disabled = false;
    this.interactive = false;
    this.scale = "m";
    this.selected = false;
    this.selectionMode = "none";
    this.calciteInternalSwatchKeyEvent = createEvent({ cancelable: false });
    this.calciteInternalSwatchSelect = createEvent({ cancelable: false });
    this.calciteInternalSyncSelectedSwatches = createEvent({ cancelable: false });
    this.calciteSwatchSelect = createEvent({ cancelable: false });
    this.listen("keydown", this.keyDownHandler);
  }
  static {
    this.properties = { hasImage: [16, {}, { state: true }], color: 1, disabled: [7, {}, { reflect: true, type: Boolean }], interactive: [5, {}, { type: Boolean }], label: 1, parentSwatchGroup: [0, {}, { attribute: false }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, value: 1 };
  }
  static {
    this.styles = styles;
  }
  async setFocus(options) {
    return this.focusSetter(() => this.el, options);
  }
  async load() {
    this.handleColorChange(this.color);
  }
  willUpdate(changes) {
    if (changes.has("selected") && this.hasUpdated) {
      this.watchSelected(this.selected);
    }
    if (changes.has("color")) {
      this.handleColorChange(this.color);
    }
  }
  loaded() {
    if (this.selectionMode !== "none" && this.interactive && this.selected) {
      this.handleSelectionPropertyChange(this.selected);
    }
  }
  watchSelected(selected) {
    if (this.selectionMode === "none") {
      return;
    }
    this.handleSelectionPropertyChange(selected);
  }
  keyDownHandler(event) {
    if (event.target === this.el) {
      switch (event.key) {
        case " ":
        case "Enter":
          this.handleEmittingEvent();
          event.preventDefault();
          break;
        case "ArrowRight":
        case "ArrowLeft":
        case "Home":
        case "End":
          this.calciteInternalSwatchKeyEvent.emit(event);
          event.preventDefault();
          break;
      }
    }
  }
  handleSlotImageChange(event) {
    this.hasImage = slotChangeHasAssignedElement(event);
  }
  handleEmittingEvent() {
    if (this.interactive) {
      this.calciteSwatchSelect.emit();
    }
  }
  handleSelectionPropertyChange(selected) {
    if (this.selectionMode === "single") {
      this.calciteInternalSyncSelectedSwatches.emit();
    }
    const selectedInParent = this.parentSwatchGroup.selectedItems.includes(this.el);
    if (!selectedInParent && selected && this.selectionMode !== "multiple") {
      this.calciteInternalSwatchSelect.emit();
    }
    if (this.selectionMode !== "single") {
      this.calciteInternalSyncSelectedSwatches.emit();
    }
  }
  handleColorChange(color) {
    this.internalColor = color ? Color(color) : null;
  }
  renderSwatchImage() {
    return html`<div class=${safeClassMap(CSS.imageContainer)}><slot name=${SLOTS.image} @slotchange=${this.handleSlotImageChange}></slot></div>`;
  }
  renderEmptyDisplay() {
    const scale = this.scale === "s" ? "12" : this.scale === "m" ? "16" : "20";
    return html`<div class=${safeClassMap(CSS.internalSvgContainer)}><svg fill=none height=${scale ?? nothing} viewBox=${`0 0 ${scale} ${scale}`} width=${scale ?? nothing} xmlns=http://www.w3.org/2000/svg>${svg`<path class=${safeClassMap(CSS.internalSvgEmpty)} d=${`M${scale} 0L0 ${scale}`} />`}</svg></div>`;
  }
  renderDisabledDisplay() {
    const svgSmMdPath = html`<svg fill=none height=14 viewBox="0 0 14 14" width=14 xmlns=http://www.w3.org/2000/svg>${svg`<path class=${safeClassMap(CSS.internalSvgDisabled)} d="M7 0.5C10.5899 0.5 13.5 3.41015 13.5 7C13.5 10.5899 10.5899 13.5 7 13.5C3.41015 13.5 0.5 10.5899 0.5 7C0.5 3.41015 3.41015 0.5 7 0.5ZM4.78906 10.917C5.44221 11.2866 6.19529 11.5 7 11.5C9.48528 11.5 11.5 9.48528 11.5 7C11.5 6.19529 11.2866 5.44221 10.917 4.78906L4.78906 10.917ZM7 2.5C4.51472 2.5 2.5 4.51472 2.5 7C2.5 7.95644 2.79808 8.84235 3.30664 9.57129L9.57129 3.30664C8.84235 2.79808 7.95644 2.5 7 2.5Z" />`}</svg>`;
    const svgLgPath = html`<svg fill=none height=18 viewBox="0 0 18 18" width=18 xmlns=http://www.w3.org/2000/svg>${svg`<path class=${safeClassMap(CSS.internalSvgDisabled)} d="M9 0.5C13.6944 0.5 17.5 4.30558 17.5 9C17.5 13.6944 13.6944 17.5 9 17.5C4.30558 17.5 0.5 13.6944 0.5 9C0.5 4.30558 4.30558 0.5 9 0.5ZM5.78125 14.2588C6.71828 14.8337 7.81941 15.167 9 15.167C12.4058 15.167 15.167 12.4058 15.167 9C15.167 7.81941 14.8337 6.71828 14.2588 5.78125L5.78125 14.2588ZM9 2.83301C5.59424 2.83301 2.83301 5.59424 2.83301 9C2.83301 10.3817 3.28731 11.6565 4.05469 12.6846L12.6846 4.05469C11.6565 3.28731 10.3817 2.83301 9 2.83301Z" />`}</svg>`;
    return html`<div class=${safeClassMap(CSS.internalSvgContainer)}>${this.scale === "l" ? svgLgPath : svgSmMdPath}</div>`;
  }
  renderSwatch() {
    const { internalColor } = this;
    const borderRadius = "0";
    const isEmpty = !internalColor;
    const commonSwatchProps = {
      height: "100%",
      rx: borderRadius,
      width: "100%"
    };
    if (isEmpty) {
      return svg`<clipPath id=${IDS.shape}><rect height=100% rx=${borderRadius} width=100% /></clipPath>${this.renderSwatchRect({
        clipPath: `inset(0 round "${borderRadius}")`,
        ...commonSwatchProps
      })}<line clip-path=url(#shape) x1=100% x2=0 y1=0 y2=100% />`;
    }
    const alpha = internalColor.alpha();
    const hex = hexify(internalColor);
    const hexa = hexify(internalColor, alpha < 1);
    return svg`<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,
      id: IDS.swatchSolid,
      ...commonSwatchProps
    })}${alpha < 1 ? this.renderSwatchRect({
      clipPath: "polygon(100% 0, 100% 100%, 0 100%)",
      fill: hexa,
      id: IDS.swatchTransparent,
      key: "opacity-fill",
      ...commonSwatchProps
    }) : null}`;
  }
  renderSwatchRect({ clipPath, fill, height, key, rx, stroke, strokeWidth, width, id }) {
    return keyed(key, svg`<rect clip-path=${clipPath ?? nothing} fill=${fill ?? nothing} height=${height ?? nothing} id=${(id ? id : IDS.swatchRect) ?? nothing} rx=${rx ?? nothing} stroke=${stroke ?? nothing} stroke-width=${strokeWidth ?? nothing} width=${width ?? nothing} />`);
  }
  render() {
    const { disabled } = this;
    const disableInteraction = disabled || !disabled && !this.interactive;
    const role = this.selectionMode === "multiple" && this.interactive ? "checkbox" : this.selectionMode !== "none" && this.interactive ? "radio" : this.interactive ? "button" : "presentation";
    const isEmpty = !this.internalColor;
    const classes = {
      [CSS.swatch]: true,
      [CSS.noColorSwatch]: isEmpty || this.hasImage && !this.internalColor
    };
    return this.interactiveContainer({ disabled, children: html`<div .ariaChecked=${this.selectionMode !== "none" && this.interactive ? this.selected : void 0} .ariaLabel=${role !== "presentation" ? this.label : ""} class=${safeClassMap({
      [CSS.container]: true,
      [CSS.selectable]: this.selectionMode !== "none",
      [CSS.selected]: this.selected,
      [CSS.nonInteractive]: !this.interactive
    })} @click=${this.handleEmittingEvent} .role=${role} .tabIndex=${disableInteraction ? -1 : 0} title=${this.label ?? nothing} ${ref(this.containerRef)}>${this.renderSwatchImage()}${!this.internalColor && !this.hasImage && this.renderEmptyDisplay() || ""}${this.disabled && this.renderDisabledDisplay() || ""}<svg class=${safeClassMap(classes)} role=presentation xmlns=http://www.w3.org/2000/svg>${this.renderSwatch()}</svg></div>` });
  }
}
customElement("calcite-swatch", Swatch);
export {
  Swatch
};
