@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
147 lines (146 loc) • 5.35 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { Fragment, h } from "@stencil/core";
import Color from "color";
import { getModeName } from "../../utils/dom";
import { hexify } from "../color-picker/utils";
import { CHECKER_DIMENSIONS, COLORS, CSS } from "./resources";
export class ColorPickerSwatch {
constructor() {
this.active = false;
this.color = undefined;
this.scale = "m";
}
handleColorChange(color) {
this.internalColor = color ? Color(color) : null;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
componentWillLoad() {
this.handleColorChange(this.color);
}
render() {
const isEmpty = !this.internalColor;
const classes = {
[CSS.swatch]: true,
[CSS.noColorSwatch]: isEmpty
};
return (h("svg", { class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
}
renderSwatch() {
const { active, el, internalColor } = this;
const borderRadius = active ? "100%" : "0";
const theme = getModeName(el);
const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
const commonSwatchProps = {
height: "100%",
rx: borderRadius,
stroke: borderColor,
// stroke-width and clip-path are needed to hide overflowing portion of stroke
// see https://stackoverflow.com/a/7273346/194216
// using attribute to work around Stencil using the prop name vs the attribute when rendering
["stroke-width"]: "2",
width: "100%"
};
const isEmpty = !internalColor;
if (isEmpty) {
return (h(Fragment, null, h("clipPath", { id: "shape" }, h("rect", { height: "100%", rx: borderRadius, width: "100%" })), h("rect", { "clip-path": `inset(0 round ${borderRadius})`, rx: borderRadius, ...commonSwatchProps }), h("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 (h(Fragment, null, h("title", null, hexa), h("defs", null, h("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), h("rect", { class: CSS.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), h("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), h("rect", { fill: hex, style: {
"clip-path": alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`
}, ...commonSwatchProps }), alpha < 1 ? (h("rect", { fill: hexa, key: "opacity-fill", style: { "clip-path": "polygon(100% 0, 100% 100%, 0 100%)" }, ...commonSwatchProps })) : null));
}
static get is() { return "calcite-color-picker-swatch"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["color-picker-swatch.scss"]
};
}
static get styleUrls() {
return {
"$": ["color-picker-swatch.css"]
};
}
static get properties() {
return {
"active": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "When `true`, the component is active."
},
"attribute": "active",
"reflect": true,
"defaultValue": "false"
},
"color": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string | null",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [{
"name": "see",
"text": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"
}],
"text": "The color value."
},
"attribute": "color",
"reflect": false
},
"scale": {
"type": "string",
"mutable": false,
"complexType": {
"original": "Scale",
"resolved": "\"l\" | \"m\" | \"s\"",
"references": {
"Scale": {
"location": "import",
"path": "../interfaces"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specifies the size of the component."
},
"attribute": "scale",
"reflect": true,
"defaultValue": "\"m\""
}
};
}
static get elementRef() { return "el"; }
static get watchers() {
return [{
"propName": "color",
"methodName": "handleColorChange"
}];
}
}