@arcgis/common-components 6.0.0-next.1 → 6.0.0-next.3

package/dist/components/arcgis-toolbar-more-button/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as A } from "../../chunks/runtime.js";
 import { ref as u } from "lit/directives/ref.js";
 import { html as m } from "lit";

package/dist/components/arcgis-toolbar-split-button/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as y } from "../../chunks/runtime.js";
 import { ref as $ } from "lit/directives/ref.js";
 import { html as d } from "lit";

package/dist/components/arcgis-toolbar-stack/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as k } from "../../chunks/runtime.js";
 import { ref as _ } from "lit/directives/ref.js";
 import { css as C, render as w, nothing as P, html as p } from "lit";

package/dist/components/arcgis-unique-values-list/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as P } from "../../chunks/runtime.js";
 import { keyed as G } from "lit/directives/keyed.js";
 import { LitElement as J, createEvent as T } from "@arcgis/lumina";

package/dist/components/arcgis-value-picker/customElement.d.ts

@@ -12,7 +12,8 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * The [arcgis-value-picker-label](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-label/), [arcgis-value-picker-slider](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-slider/),
  * [arcgis-value-picker-combobox](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-combobox/), and [arcgis-value-picker-collection](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker-collection/) components provide the user with a few different options
  * for placing their data into a Value Picker with minimal configuration. Value Picker handles the different shapes of these components automatically by asserting
- * that all slotted components will extend the [ArcgisValuePickerSubcomponent](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/types#ArcgisValuePickerSubcomponent)
+ * that all slotted components will extend the
+ * [ArcgisValuePickerSubcomponent](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-value-picker/types/#ArcgisValuePickerSubcomponent)
  * interface, which allows Value picker to send and receive generic sets of instructions that are interpreted by the slotted component.
  *
  * ### Configuring Value Picker
@@ -216,6 +217,12 @@ export abstract class ArcgisValuePicker extends LitElement {
    * @default false
    */
   accessor disabled: boolean;
+  /**
+   * When set to `true`, the component will appear with rounded corners and a dropshadow.
+   *
+   * @default false
+   */
+  accessor floating: boolean;
   /**
    * When set to `true`, the next button is not displayed.
    *

package/dist/components/arcgis-value-picker/customElement.js

@@ -1,20 +1,20 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { LitElement as n, createEvent as i, nothing as l, safeClassMap as h } from "@arcgis/lumina";
-import { getSlotAssignedElements as r } from "@arcgis/toolkit/dom/slots";
-import { css as c, html as s } from "lit";
-import { u as d } from "../../chunks/useT9n.js";
-import { usePropertyChange as m } from "@arcgis/lumina/controllers";
-const p = c`:host{display:inline-flex;max-inline-size:100%}:host([layout="horizontal"]) slot{min-inline-size:300px;min-block-size:48px}:host([layout="vertical"]) slot{min-inline-size:300px;min-block-size:144px}slot{display:flex}slot.empty{display:none}.container{display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1)}.root{display:flex;flex-direction:row;align-items:stretch}calcite-action{width:var(--calcite-font-line-height-fixed-4xl);height:var(--calcite-font-line-height-fixed-4xl)}calcite-action-bar{--calcite-action-bar-items-space: var(--calcite-space-none);--calcite-spacing-sm: var(--calcite-space-none);background-color:var(--calcite-color-foreground-1)}.separator{border-inline-end:solid 1px var(--calcite-color-border-3);width:1px}`;
-class u extends n {
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { LitElement as c, createEvent as i, nothing as l, safeClassMap as h } from "@arcgis/lumina";
+import { getSlotAssignedElements as d } from "@arcgis/toolkit/dom/slots";
+import { css as m, html as s } from "lit";
+import { u } from "../../chunks/useT9n.js";
+import { useDirection as y, usePropertyChange as p } from "@arcgis/lumina/controllers";
+const g = m`:host{display:inline-flex;max-inline-size:100%}:host([layout="horizontal"]) slot{min-block-size:var(--calcite-size-xl)}:host([layout="vertical"]) slot{min-block-size:calc(2 * var(--calcite-size-2xl))}slot{display:flex;min-inline-size:300px}slot.empty{display:none}.container{display:flex;flex-direction:column;block-size:100%}.root{display:flex;flex-direction:row;align-items:stretch;flex:1;background-color:var(--calcite-color-foreground-1)}:host([floating]) .root{border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));box-shadow:var(--calcite-action-bar-shadow, var(--calcite-shadow-md));overflow:hidden}calcite-action{align-self:center}:host([layout="vertical"]) calcite-action{margin-block-start:auto}:host([layout="vertical"]) calcite-action:last-of-type{margin-block-end:auto}.separator{border-inline-end:solid var(--calcite-border-width-sm) var(--calcite-color-border-3)}`;
+class _ extends c {
   constructor() {
-    super(), this.messages = d({ blocking: !0 }), this._isPlaying = !1, this.autoDestroyDisabled = !1, this.disabled = !1, this.hideNextButton = !1, this.hidePlayButton = !1, this.hidePreviousButton = !1, this.icon = "list-rectangle", this.label = "", this.layout = "horizontal", this.loop = !1, this.playRate = 1e3, this.arcgisAnimate = i(), this.arcgisNext = i(), this.arcgisPause = i(), this.arcgisPlay = i(), this.arcgisPrevious = i(), this.arcgisPropertyChange = m()("layout", "loop", "playRate", "state"), this.arcgisSlottedElementChange = i(), this.listen("arcgisPropertyChange", () => this.requestUpdate());
+    super(), this._direction = y(), this.messages = u({ blocking: !0 }), this._isPlaying = !1, this.autoDestroyDisabled = !1, this.disabled = !1, this.floating = !1, this.hideNextButton = !1, this.hidePlayButton = !1, this.hidePreviousButton = !1, this.icon = "list-rectangle", this.label = "", this.layout = "horizontal", this.loop = !1, this.playRate = 1e3, this.arcgisAnimate = i(), this.arcgisNext = i(), this.arcgisPause = i(), this.arcgisPlay = i(), this.arcgisPrevious = i(), this.arcgisPropertyChange = p()("layout", "loop", "playRate", "state"), this.arcgisSlottedElementChange = i(), this.listen("arcgisPropertyChange", () => this.requestUpdate());
   }
   static {
-    this.properties = { _isPlaying: 16, _slottedElement: 16, autoDestroyDisabled: 5, disabled: 5, hideNextButton: 5, hidePlayButton: 5, hidePreviousButton: 5, icon: 1, label: 1, layout: 3, loop: 5, playRate: 9, state: 32 };
+    this.properties = { _isPlaying: 16, _slottedElement: 16, autoDestroyDisabled: 5, disabled: 5, floating: 7, hideNextButton: 5, hidePlayButton: 5, hidePreviousButton: 5, icon: 1, label: 1, layout: 3, loop: 5, playRate: 9, state: 32 };
   }
   static {
-    this.styles = p;
+    this.styles = g;
   }
   get state() {
     return this._isPlaying ? "playing" : "ready";
@@ -41,7 +41,7 @@ class u extends n {
     super.disconnectedCallback(), this._isPlaying && this.pause();
   }
   _handleSlotChange(t) {
-    const [e] = r(t);
+    const [e] = d(t);
     this._slottedElement = e, this.arcgisSlottedElementChange.emit({ slottedElement: e }), !e && this._isPlaying && this.pause(), this._isElementWithLayout(e) && (e.layout = this.layout), this._isElementWithDisabled(e) && (e.disabled = this.disabled), this._isElementWithComponentOnReady(e) && e.componentOnReady().then(() => {
       this._slottedElement === e && this.requestUpdate();
     });
@@ -68,20 +68,24 @@ class u extends n {
       }
     }, this.playRate);
   }
-  render() {
-    const t = !!this._slottedElement && !this._slottedElement.hidden, e = this.state === "playing";
-    return s`<div class="container"><div class="root"><calcite-action-bar expand-disabled .layout=${this.layout}>${!this.hidePlayButton && s`<calcite-action alignment=center .disabled=${this.disabled || this._slottedElement && !this._slottedElement.canPlay} .icon=${e ? "pause" : "play"} .text=${e ? this.messages.pause : this.messages.play} title=${(e ? this.messages.pause : this.messages.play) ?? l} @click=${() => {
+  _renderActions() {
+    const t = this.state === "playing", e = this.layout === "vertical" && this._slottedElement?.localName === "arcgis-value-picker-slider", a = !this.hidePlayButton && s`<calcite-action alignment=center .disabled=${this.disabled || this._slottedElement && !this._slottedElement.canPlay} .icon=${t ? "pause" : "play"} .text=${t ? this.messages.pause : this.messages.play} title=${(t ? this.messages.pause : this.messages.play) ?? l} @click=${() => {
       if (this._slottedElement && !this._slottedElement.canNext && !this.loop) {
         this._slottedElement.reset(), this.play();
         return;
       }
-      e ? this.pause() : this.play();
-    }}></calcite-action>` || ""}${!this.hidePreviousButton && s`<calcite-action alignment=center .disabled=${this.disabled || e || this._slottedElement && !this._slottedElement.canPrevious} .icon=${this.layout === "horizontal" ? "chevron-left" : "chevron-up"} .text=${this.messages.previous} title=${this.messages.previous ?? l} @click=${this.previous}></calcite-action>` || ""}${!this.hideNextButton && s`<calcite-action alignment=center .disabled=${this.disabled || e || this._slottedElement && !this._slottedElement.canNext} .icon=${this.layout === "horizontal" ? "chevron-right" : "chevron-down"} .text=${this.messages.next} title=${this.messages.next ?? l} @click=${this.next}></calcite-action>` || ""}</calcite-action-bar>${t && s`<div class="separator"></div>` || ""}<slot @slotchange=${({ currentTarget: a }) => {
+      t ? this.pause() : this.play();
+    }}></calcite-action>` || "", o = !this.hidePreviousButton && s`<calcite-action alignment=center .disabled=${this.disabled || t || this._slottedElement && !this._slottedElement.canPrevious} .icon=${this.layout === "horizontal" ? "chevron-left" : e ? "chevron-down" : "chevron-up"} .text=${this.messages.previous} title=${this.messages.previous ?? l} @click=${this.previous}></calcite-action>` || "", n = !this.hideNextButton && s`<calcite-action alignment=center .disabled=${this.disabled || t || this._slottedElement && !this._slottedElement.canNext} .icon=${this.layout === "horizontal" ? "chevron-right" : e ? "chevron-up" : "chevron-down"} .text=${this.messages.next} title=${this.messages.next ?? l} @click=${this.next}></calcite-action>` || "";
+    return (this._direction === "rtl" && this.layout === "horizontal" || e ? [a, n, o] : [a, o, n]).filter(Boolean);
+  }
+  render() {
+    const t = !!this._slottedElement && !this._slottedElement.hidden, e = this._renderActions();
+    return s`<div class="container"><div class="root"><calcite-action-bar expand-toggle-disabled .layout=${this.layout}>${e}</calcite-action-bar>${t && s`<div class="separator"></div>` || ""}<slot @slotchange=${({ currentTarget: a }) => {
       this._handleSlotChange(a);
     }} class=${h(t ? "component-slot" : "empty")}></slot></div></div>`;
   }
 }
-o("arcgis-value-picker", u);
+r("arcgis-value-picker", _);
 export {
-  u as ArcgisValuePicker
+  _ as ArcgisValuePicker
 };

package/dist/components/arcgis-value-picker/index.js

@@ -1,3 +1,3 @@
-import "@esri/calcite-components/components/calcite-action-bar";
 import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-action-bar";
 export * from "./customElement.js";

package/dist/components/arcgis-value-picker-collection/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as s } from "../../chunks/runtime.js";
 import { LitElement as i } from "@arcgis/lumina";
 import { usePropertyChange as a } from "@arcgis/lumina/controllers";

package/dist/components/arcgis-value-picker-combobox/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as l } from "../../chunks/runtime.js";
 import { LitElement as r } from "@arcgis/lumina";
 import { css as n, html as a } from "lit";

package/dist/components/arcgis-value-picker-label/customElement.d.ts

@@ -69,6 +69,12 @@ export abstract class ArcgisValuePickerLabel extends LitElement {
   accessor canPrevious: boolean;
   /** The currently selected label item rendered by the component. */
   accessor currentValue: LabelItem | undefined;
+  /**
+   * When true, the component is visually withdrawn and cannot receive user interaction.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
   /** The array of label items that [arcgis-value-picker](https://developers.arcgis.com/javascript/latest/references/common-components/components/arcgis-value-picker/) can iterate over. */
   accessor items: LabelItem[] | undefined;
   /** Permanently destroys the component. */

package/dist/components/arcgis-value-picker-label/customElement.js

@@ -1,15 +1,15 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as a } from "../../chunks/runtime.js";
 import { LitElement as r } from "@arcgis/lumina";
 import { css as n, html as c } from "lit";
 import { usePropertyChange as l } from "@arcgis/lumina/controllers";
-const o = n`:host{display:flex;flex:auto;min-width:300px;padding:var(--calcite-space-sm)}.container{align-items:center;border:solid 1px var(--calcite-color-border-3);display:flex;flex:auto;padding-inline:var(--calcite-space-sm)}.text{color:var(--calcite-color-text-1);flex:auto;font-family:inherit;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-normal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--calcite-space-none)}`;
+const o = n`:host{display:flex;flex:auto;min-width:300px;padding:var(--calcite-space-sm)}:host([disabled]){opacity:var(--calcite-opacity-disabled);pointer-events:none}.container{align-items:center;border:solid var(--calcite-border-width-sm) var(--calcite-color-border-3);display:flex;flex:auto;padding-inline:var(--calcite-space-sm)}.text{color:var(--calcite-color-text-1);flex:auto;font-family:inherit;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-normal);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:var(--calcite-space-none)}`;
 class h extends r {
   constructor() {
-    super(...arguments), this.autoDestroyDisabled = !1, this.canNext = !1, this.canPlay = !1, this.canPrevious = !1, this.arcgisPropertyChange = l()("canNext", "canPlay", "canPrevious", "currentValue");
+    super(...arguments), this.autoDestroyDisabled = !1, this.disabled = !1, this.canNext = !1, this.canPlay = !1, this.canPrevious = !1, this.arcgisPropertyChange = l()("canNext", "canPlay", "canPrevious", "currentValue");
   }
   static {
-    this.properties = { autoDestroyDisabled: 5, items: 0, currentValue: 0, canNext: 5, canPlay: 5, canPrevious: 5 };
+    this.properties = { autoDestroyDisabled: 5, disabled: 7, items: 0, currentValue: 0, canNext: 5, canPlay: 5, canPrevious: 5 };
   }
   static {
     this.styles = o;

package/dist/components/arcgis-value-picker-slider/customElement.js

@@ -1,4 +1,4 @@
-/* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
+/* COPYRIGHT Esri - https://js.arcgis.com/6.0/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
 import { LitElement as c } from "@arcgis/lumina";
 import { css as l, html as s } from "lit";
@@ -15,7 +15,7 @@ class o extends c {
     this.styles = h;
   }
   get _ascending() {
-    return this.layout === "horizontal" && !this.mirrored || this.layout === "vertical" && this.mirrored;
+    return !this.mirrored;
   }
   async destroy() {
     await this.manager.destroy();