@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
108 lines (103 loc) • 6.65 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 { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
import { c as color } from './index2.js';
import { r as getModeName } from './dom.js';
import { h as hexify } from './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 colorPickerSwatchCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}:host([hidden]){display:none}: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:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.swatch--no-color rect{fill:var(--calcite-ui-foreground-1)}.swatch--no-color line{stroke:var(--calcite-ui-danger)}.checker{fill:#cacaca}";
const ColorPickerSwatch = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
this.active = false;
this.color = undefined;
this.scale = "m";
}
handleColorChange(color$1) {
this.internalColor = color$1 ? color(color$1) : 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));
}
get el() { return this; }
static get watchers() { return {
"color": ["handleColorChange"]
}; }
static get style() { return colorPickerSwatchCss; }
}, [1, "calcite-color-picker-swatch", {
"active": [516],
"color": [1],
"scale": [513]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["calcite-color-picker-swatch"];
components.forEach(tagName => { switch (tagName) {
case "calcite-color-picker-swatch":
if (!customElements.get(tagName)) {
customElements.define(tagName, ColorPickerSwatch);
}
break;
} });
}
defineCustomElement();
export { ColorPickerSwatch as C, defineCustomElement as d };