@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
104 lines (103 loc) • 4.67 kB
JavaScript
/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import { c as customElement } from "../../chunks/runtime.js";
import { keyed } from "lit-html/directives/keyed.js";
import Color from "color";
import { html, nothing, svg } from "lit";
import { LitElement, safeClassMap } from "@arcgis/lumina";
import { C as getModeName } from "../../chunks/dom.js";
import { h as hexify } from "../../chunks/utils4.js";
import { css } from "@lit/reactive-element/css-tag.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 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:.15s;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) : null;
}
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=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=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
};