@esri/calcite-components 3.0.0-next.99 → 3.0.0

package/dist/components/calcite-color-picker/resources.d.ts

@@ -48,15 +48,11 @@ export declare const OPACITY_LIMITS: {
     min: number;
     max: number;
 };
-export declare const DIMENSIONS: {
+export declare const STATIC_DIMENSIONS: {
     s: {
+        gap: number;
         slider: {
             height: number;
-            width: number;
-        };
-        colorField: {
-            height: number;
-            width: number;
         };
         thumb: {
             radius: number;
@@ -64,15 +60,12 @@ export declare const DIMENSIONS: {
         preview: {
             size: number;
         };
+        minWidth: number;
     };
     m: {
+        gap: number;
         slider: {
             height: number;
-            width: number;
-        };
-        colorField: {
-            height: number;
-            width: number;
         };
         thumb: {
             radius: number;
@@ -80,15 +73,12 @@ export declare const DIMENSIONS: {
         preview: {
             size: number;
         };
+        minWidth: number;
     };
     l: {
+        gap: number;
         slider: {
             height: number;
-            width: number;
-        };
-        colorField: {
-            height: number;
-            width: number;
         };
         thumb: {
             radius: number;
@@ -96,6 +86,7 @@ export declare const DIMENSIONS: {
         preview: {
             size: number;
         };
+        minWidth: number;
     };
 };
 export declare const SCOPE_SIZE = 1;

package/dist/components/calcite-color-picker/utils.d.ts

@@ -1,7 +1,7 @@
 import { default as Color } from 'color';
-import { Scale } from '../interfaces';
+import { Dimensions, Scale } from '../interfaces';
 import { ColorValue, HSLA, HSVA, RGB, RGBA } from './interfaces';
-import { DIMENSIONS } from './resources';
+import { STATIC_DIMENSIONS } from './resources';
 export declare const hexChar: RegExp;
 export declare const alphaToOpacity: (alpha: number) => number;
 export declare const opacityToAlpha: (opacity: number) => number;
@@ -41,5 +41,6 @@ export declare function colorEqual(value1: Color | null, value2: Color | null):
 export declare function alphaCompatible(mode: SupportedMode): boolean;
 export declare function toAlphaMode(mode: SupportedMode): SupportedMode;
 export declare function toNonAlphaMode(mode: SupportedMode): SupportedMode;
-export declare function getSliderWidth(activeDimensions: (typeof DIMENSIONS)[Scale], hasAlpha: boolean): number;
+export declare function getSliderWidth(availableWidth: number, activeStaticDimensions: (typeof STATIC_DIMENSIONS)[Scale], hasAlpha: boolean): number;
+export declare function getColorFieldDimensions(availableWidth: number): Dimensions;
 export {};

package/dist/components/calcite-color-picker-hex-input/customElement.js

@@ -1,31 +1,29 @@
 import { c as T } from "../../chunks/runtime.js";
 import { ref as v } from "lit-html/directives/ref.js";
-import { keyed as L } from "lit-html/directives/keyed.js";
-import { C, n as h, h as c, i as p, a as d, b as I, r as k, o as b, c as $, O as H, d as D } from "../../chunks/utils4.js";
+import { keyed as k } from "lit-html/directives/keyed.js";
+import { C, n as r, h as c, i as p, a as d, b as I, r as D, o as b, c as $, O as H, d as L } from "../../chunks/utils4.js";
 import { html as V } from "lit";
 import { LitElement as B, createEvent as A, safeClassMap as x } from "@arcgis/lumina";
 import { b as P } from "../../chunks/dom.js";
-import { c as R, s as K, a as z } from "../../chunks/loadable.js";
-import { css as U } from "@lit/reactive-element/css-tag.js";
-/*!
- * 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.0.0-next.99
-*/
+import { c as R } from "../../chunks/loadable.js";
+import { css as K } from "@lit/reactive-element/css-tag.js";
+/*! 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.0.0 */
 const f = {
   container: "container",
   hexInput: "hex-input",
   opacityInput: "opacity-input"
-}, G = U`:host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:100px;margin-inline-start:-1px}:host([hidden]){display:none}[hidden]{display:none}`, m = C();
-class M extends B {
+}, z = K`:host{display:block}.container{display:flex;inline-size:100%;flex-wrap:nowrap;align-items:center}.hex-input{flex-grow:1;text-transform:uppercase}.opacity-input{inline-size:100px;margin-inline-start:-1px}:host([hidden]){display:none}[hidden]{display:none}`, m = C();
+class U extends B {
   constructor() {
-    super(...arguments), this.internalColor = m, this.alphaChannel = !1, this.allowEmpty = !1, this.hexLabel = "Hex", this.scale = "m", this.value = h(c(m, this.alphaChannel), this.alphaChannel, !0), this.calciteColorPickerHexInputChange = A({ cancelable: !1 });
+    super(...arguments), this.internalColor = m, this.alphaChannel = !1, this.allowEmpty = !1, this.hexLabel = "Hex", this.scale = "m", this.value = r(c(m, this.alphaChannel), this.alphaChannel, !0), this.calciteColorPickerHexInputChange = A({ cancelable: !1 });
   }
   static {
     this.properties = { internalColor: 16, alphaChannel: 5, allowEmpty: 5, hexLabel: 1, messages: 0, numberingSystem: 1, scale: 3, value: 3 };
   }
   static {
-    this.styles = G;
+    this.styles = z;
   }
   // #endregion
   // #region Public Methods
@@ -39,26 +37,24 @@ class M extends B {
     super.connectedCallback(), this.previousNonNullValue = this.value;
     const { allowEmpty: t, alphaChannel: e, value: a } = this;
     if (a) {
-      const n = h(a, e);
+      const n = r(a, e);
       p(n, e) && this.internalSetValue(n, n, !1);
       return;
     }
     t && this.internalSetValue(void 0, void 0, !1);
   }
   load() {
-    K(this);
   }
   willUpdate(t) {
-    t.has("value") && (this.hasUpdated || this.value !== h(c(m, this.alphaChannel), this.alphaChannel, !0)) && this.internalSetValue(this.value, t.get("value"), !1);
+    t.has("value") && (this.hasUpdated || this.value !== r(c(m, this.alphaChannel), this.alphaChannel, !0)) && this.internalSetValue(this.value, t.get("value"), !1);
   }
   loaded() {
-    z(this);
   }
   // #endregion
   // #region Private Methods
   onHexInputBlur() {
     const t = this.hexInputNode, e = t.value, a = `#${e}`, { allowEmpty: n, internalColor: l } = this, s = n && !e, i = d(a);
-    (I(a, !0) || I(a, !1)) && this.onHexInputChange(), !(s || p(a) && i) && (t.value = n && !l ? "" : this.formatHexForInternalInput(k(
+    (I(a, !0) || I(a, !1)) && this.onHexInputChange(), !(s || p(a) && i) && (t.value = n && !l ? "" : this.formatHexForInternalInput(D(
       // always display hex input in RRGGBB format
       l.object()
     )));
@@ -73,9 +69,9 @@ class M extends B {
   onHexInputChange() {
     let e = this.hexInputNode.value;
     if (e) {
-      const a = h(e, !1);
+      const a = r(e, !1);
       if (p(a) && this.alphaChannel && this.internalColor) {
-        const l = h(this.internalColor.hexa(), !0).slice(-2);
+        const l = r(this.internalColor.hexa(), !0).slice(-2);
         e = `${a + l}`;
       }
     }
@@ -100,14 +96,14 @@ class M extends B {
     p(t, this.alphaChannel) && d(t, this.alphaChannel) && this.internalSetValue(t, e);
   }
   onInputKeyDown(t) {
-    const { altKey: e, ctrlKey: a, metaKey: n, shiftKey: l } = t, { alphaChannel: s, hexInputNode: i, internalColor: o, value: r } = this, { key: u } = t, y = t.composedPath();
-    if (u === "Tab" && I(r, this.alphaChannel) || u === "Enter") {
+    const { altKey: e, ctrlKey: a, metaKey: n, shiftKey: l } = t, { alphaChannel: s, hexInputNode: i, internalColor: o, value: h } = this, { key: u } = t, y = t.composedPath();
+    if (u === "Tab" && I(h, this.alphaChannel) || u === "Enter") {
       y.includes(i) ? this.onHexInputChange() : this.onOpacityInputChange(), u === "Enter" && t.preventDefault();
       return;
     }
     const w = u === "ArrowDown" || u === "ArrowUp", g = this.value;
     if (w) {
-      if (!r) {
+      if (!h) {
         this.internalSetValue(this.previousNonNullValue, g), t.preventDefault();
         return;
       }
@@ -115,7 +111,7 @@ class M extends B {
       this.internalSetValue(c(this.nudgeRGBChannels(o, F * E, y.includes(i) ? "rgb" : "a"), s), g), t.preventDefault();
       return;
     }
-    const N = e || a || n, S = u.length === 1, O = D.test(u);
+    const N = e || a || n, S = u.length === 1, O = L.test(u);
     S && !N && !O && t.preventDefault();
   }
   onHexInputPaste(t) {
@@ -124,10 +120,10 @@ class M extends B {
   }
   internalSetValue(t, e, a = !0) {
     if (t) {
-      const { alphaChannel: n } = this, l = h(t, n, n);
+      const { alphaChannel: n } = this, l = r(t, n, n);
       if (p(l, n)) {
-        const { internalColor: s } = this, i = C(l), o = h(c(i, n), n), r = !s || o !== h(c(s, n), n);
-        this.internalColor = i, this.previousNonNullValue = o, this.value = o, r && a && this.calciteColorPickerHexInputChange.emit();
+        const { internalColor: s } = this, i = C(l), o = r(c(i, n), n), h = !s || o !== r(c(s, n), n);
+        this.internalColor = i, this.previousNonNullValue = o, this.value = o, h && a && this.calciteColorPickerHexInputChange.emit();
         return;
       }
     } else if (this.allowEmpty) {
@@ -165,11 +161,11 @@ class M extends B {
   // #endregion
   // #region Rendering
   render() {
-    const { alphaChannel: t, hexLabel: e, internalColor: a, messages: n, scale: l, value: s } = this, i = this.formatHexForInternalInput(s), o = this.formatOpacityForInternalInput(a), r = l === "l" ? "m" : "s";
-    return V`<div class=${x(f.container)}><calcite-input-text class=${x(f.hexInput)} .label=${n?.hex || e} .maxLength=${this.alphaChannel ? 8 : 6} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} prefix-text=# .scale=${r} .value=${i} ${v(this.storeHexInputRef)}></calcite-input-text>${t ? L("opacity-input", V`<calcite-input-number class=${x(f.opacityInput)} .label=${n?.opacity} .max=${H.max} max-length=3 .min=${H.min} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.onInputKeyDown} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} .scale=${r} suffix-text=% .value=${o} ${v(this.storeOpacityInputRef)}></calcite-input-number>`) : null}</div>`;
+    const { alphaChannel: t, hexLabel: e, internalColor: a, messages: n, scale: l, value: s } = this, i = this.formatHexForInternalInput(s), o = this.formatOpacityForInternalInput(a), h = l === "l" ? "m" : "s";
+    return V`<div class=${x(f.container)}><calcite-input-text class=${x(f.hexInput)} .label=${n?.hex || e} .maxLength=${this.alphaChannel ? 8 : 6} @keydown=${this.onInputKeyDown} @paste=${this.onHexInputPaste} @calciteInputTextChange=${this.onHexInputChange} @calciteInputTextInput=${this.onHexInputInput} @calciteInternalInputTextBlur=${this.onHexInputBlur} @calciteInternalInputTextFocus=${this.onInputFocus} prefix-text=# .scale=${h} .value=${i} ${v(this.storeHexInputRef)}></calcite-input-text>${t ? k("opacity-input", V`<calcite-input-number class=${x(f.opacityInput)} .label=${n?.opacity} .max=${H.max} max-length=3 .min=${H.min} number-button-type=none .numberingSystem=${this.numberingSystem} @keydown=${this.onInputKeyDown} @calciteInputNumberInput=${this.onOpacityInputInput} @calciteInternalInputNumberBlur=${this.onOpacityInputBlur} @calciteInternalInputNumberFocus=${this.onInputFocus} .scale=${h} suffix-text=% .value=${o} ${v(this.storeOpacityInputRef)}></calcite-input-number>`) : null}</div>`;
   }
 }
-T("calcite-color-picker-hex-input", M);
+T("calcite-color-picker-hex-input", U);
 export {
-  M as ColorPickerHexInput
+  U as ColorPickerHexInput
 };

package/dist/components/calcite-color-picker-swatch/customElement.js

@@ -5,11 +5,9 @@ import { html as z, svg as d, nothing as r } from "lit";
 import { LitElement as y, safeClassMap as p } from "@arcgis/lumina";
 import { C as x } from "../../chunks/dom.js";
 import { css as b } from "@lit/reactive-element/css-tag.js";
-/*!
- * 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.0.0-next.99
-*/
+/*! 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.0.0 */
 const h = {
   swatch: "swatch",
   noColorSwatch: "swatch--no-color",

package/dist/components/calcite-combobox/customElement.d.ts

@@ -9,7 +9,6 @@ import { LoadableComponent } from '../../utils/loadable';
 import { OpenCloseComponent } from '../../utils/openCloseComponent';
 import { Scale, SelectionMode, Status } from '../interfaces';
 import { IconNameOrString } from '../calcite-icon/interfaces';
-import { ComboboxItemGroup as HTMLCalciteComboboxItemGroupElement } from '../calcite-combobox-item-group/customElement.js';
 import { ComboboxItem as HTMLCalciteComboboxItemElement } from '../calcite-combobox-item/customElement.js';
 import { Label } from '../calcite-label/customElement.js';
 import { SelectionDisplay } from './interfaces';
@@ -93,7 +92,10 @@ export declare class Combobox extends LitElement {
     placeholderIconFlipRtl: boolean;
     /** When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified. */
     readOnly: boolean;
-    /** When `true`, the component must have a value in order for the form to submit. */
+    /**
+     * When `true` and the component resides in a form,
+     * the component must have a value in order for the form to submit.
+     */
     required: boolean;
     /** Specifies the size of the component. */
     scale: Scale;
@@ -102,7 +104,7 @@ export declare class Combobox extends LitElement {
      *
      * @readonly
      */
-    readonly selectedItems: HTMLCalciteComboboxItemElement["el"][];
+    get selectedItems(): HTMLCalciteComboboxItemElement["el"][];
     /**
      * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where:
      *