@esri/solutions-components 0.6.1 → 0.6.3

package/dist/esm/calcite-color-picker-hex-input.entry.js

@@ -1,195 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-d298aca9.js';
-import { c as color } from './index-9fdcb8d3.js';
-import { h as focusElement } from './dom-0fc13266.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentLoaded } from './loadable-e6dce690.js';
-import { i as isValidHex, a as isLonghandHex, r as rgbToHex, n as normalizeHex, b as hexChar } from './utils-0b3e94fe.js';
-import './_commonjsHelpers-d5f9d613.js';
-import './guid-2069664e.js';
-import './resources-e83f65b3.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
- */
-const CSS = {
-  container: "container",
-  preview: "preview",
-  input: "input"
-};
-
-const colorPickerHexInputCss = "@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-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-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:600}:host([hidden]){display:none}:host{display:block}.container{display:inline-grid;inline-size:100%;align-items:center;grid-template-columns:1fr auto}.preview{grid-column:2/3;pointer-events:none;margin-block:0px;margin-inline:0.25rem;display:flex;align-items:center}.preview,.input{grid-row:1}.input{grid-column:1/3;inline-size:100%;text-transform:uppercase}";
-
-const DEFAULT_COLOR = color();
-const ColorPickerHexInput = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.calciteColorPickerHexInputChange = createEvent(this, "calciteColorPickerHexInputChange", 6);
-    this.onCalciteInternalInputBlur = () => {
-      const node = this.inputNode;
-      const inputValue = node.value;
-      const hex = `#${inputValue}`;
-      const willClearValue = this.allowEmpty && !inputValue;
-      if (willClearValue || (isValidHex(hex) && isLonghandHex(hex))) {
-        return;
-      }
-      // manipulating DOM directly since rerender doesn't update input value
-      node.value =
-        this.allowEmpty && !this.internalColor
-          ? ""
-          : this.formatForInternalInput(rgbToHex(this.internalColor.object()));
-    };
-    this.onInputChange = () => {
-      this.internalSetValue(this.inputNode.value, this.value);
-    };
-    this.previousNonNullValue = this.value;
-    this.storeInputRef = (node) => {
-      this.inputNode = node;
-    };
-    this.hexLabel = "Hex";
-    this.allowEmpty = false;
-    this.scale = "m";
-    this.value = normalizeHex(DEFAULT_COLOR.hex());
-    this.numberingSystem = undefined;
-    this.internalColor = DEFAULT_COLOR;
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  connectedCallback() {
-    const { allowEmpty, value } = this;
-    if (value) {
-      const normalized = normalizeHex(value);
-      if (isValidHex(normalized)) {
-        this.internalSetValue(normalized, normalized, false);
-      }
-      return;
-    }
-    if (allowEmpty) {
-      this.internalSetValue(null, null, false);
-    }
-  }
-  componentWillLoad() {
-    setUpLoadableComponent(this);
-  }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
-  handleValueChange(value, oldValue) {
-    this.internalSetValue(value, oldValue, false);
-  }
-  // using @Listen as a workaround for VDOM listener not firing
-  onInputKeyDown(event) {
-    const { altKey, ctrlKey, metaKey, shiftKey } = event;
-    const { internalColor, value } = this;
-    const { key } = event;
-    if (key === "Tab" || key === "Enter") {
-      this.onInputChange();
-      return;
-    }
-    const isNudgeKey = key === "ArrowDown" || key === "ArrowUp";
-    const oldValue = this.value;
-    if (isNudgeKey) {
-      if (!value) {
-        this.internalSetValue(this.previousNonNullValue, oldValue);
-        event.preventDefault();
-        return;
-      }
-      const direction = key === "ArrowUp" ? 1 : -1;
-      const bump = shiftKey ? 10 : 1;
-      this.internalSetValue(normalizeHex(this.nudgeRGBChannels(internalColor, bump * direction).hex()), oldValue);
-      event.preventDefault();
-      return;
-    }
-    const withModifiers = altKey || ctrlKey || metaKey;
-    const singleChar = key.length === 1;
-    const validHexChar = hexChar.test(key);
-    if (singleChar && !withModifiers && !validHexChar) {
-      event.preventDefault();
-    }
-  }
-  onPaste(event) {
-    const hex = event.clipboardData.getData("text");
-    if (isValidHex(hex)) {
-      event.preventDefault();
-      this.inputNode.value = hex.slice(1);
-    }
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  render() {
-    const { value } = this;
-    const hexInputValue = this.formatForInternalInput(value);
-    return (h("div", { class: CSS.container }, h("calcite-input", { class: CSS.input, label: this.hexLabel, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, onPaste: this.onPaste, prefixText: "#", scale: this.scale, value: hexInputValue,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.storeInputRef }), hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
-  async setFocus() {
-    await componentLoaded(this);
-    focusElement(this.inputNode);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-  internalSetValue(value, oldValue, emit = true) {
-    if (value) {
-      const normalized = normalizeHex(value);
-      if (isValidHex(normalized)) {
-        const { internalColor } = this;
-        const changed = !internalColor || normalized !== normalizeHex(internalColor.hex());
-        this.internalColor = color(normalized);
-        this.previousNonNullValue = normalized;
-        this.value = normalized;
-        if (changed && emit) {
-          this.calciteColorPickerHexInputChange.emit();
-        }
-        return;
-      }
-    }
-    else if (this.allowEmpty) {
-      this.internalColor = null;
-      this.value = null;
-      if (emit) {
-        this.calciteColorPickerHexInputChange.emit();
-      }
-      return;
-    }
-    this.value = oldValue;
-  }
-  formatForInternalInput(hex) {
-    return hex ? hex.replace("#", "") : "";
-  }
-  nudgeRGBChannels(color$1, amount) {
-    return color.rgb(color$1.array().map((channel) => channel + amount));
-  }
-  handleKeyDown(event) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-    }
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["handleValueChange"]
-  }; }
-};
-ColorPickerHexInput.style = colorPickerHexInputCss;
-
-export { ColorPickerHexInput as calcite_color_picker_hex_input };

package/dist/esm/calcite-color-picker-swatch.entry.js

@@ -1,62 +0,0 @@
-/*!
- * Copyright 2022 Esri
- * Licensed under the Apache License, Version 2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- */
-import { r as registerInstance, h, g as getElement } from './index-d298aca9.js';
-import { c as color } from './index-9fdcb8d3.js';
-import { f as getModeName } from './dom-0fc13266.js';
-import './_commonjsHelpers-d5f9d613.js';
-import './guid-2069664e.js';
-import './resources-e83f65b3.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.2.0
- */
-const CSS = {
-  swatch: "swatch",
-  noColorIcon: "no-color-icon"
-};
-const COLORS = {
-  borderLight: "rgba(0, 0, 0, 0.3)",
-  borderDark: "rgba(255, 255, 255, 0.15)"
-};
-
-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-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-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:600}: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:visible;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)}.no-color-icon{position:absolute;inset:0px;block-size:100%;inline-size:100%}";
-
-const ColorPickerSwatch = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.active = false;
-    this.color = undefined;
-    this.scale = "m";
-  }
-  handleColorChange(color$1) {
-    this.internalColor = color(color$1);
-  }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
-  componentWillLoad() {
-    this.handleColorChange(this.color);
-  }
-  render() {
-    const { active, el, internalColor } = this;
-    const borderRadius = active ? "100%" : "0";
-    const hex = internalColor.hex();
-    const theme = getModeName(el);
-    const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
-    return (h("svg", { class: CSS.swatch, xmlns: "http://www.w3.org/2000/svg" }, h("title", null, hex), h("rect", { fill: hex, height: "100%", id: "swatch", rx: borderRadius, stroke: borderColor, "stroke-width": "2", style: { "clip-path": `inset(0 round ${borderRadius})` }, width: "100%" })));
-  }
-  get el() { return getElement(this); }
-  static get watchers() { return {
-    "color": ["handleColorChange"]
-  }; }
-};
-ColorPickerSwatch.style = colorPickerSwatchCss;
-
-export { ColorPickerSwatch as calcite_color_picker_swatch };