@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
203 lines (202 loc) • 13.1 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.0/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
};