@arcgis/common-components 4.29.0-test.0 → 5.0.0-next.113

package/dist/components/arcgis-ckeditor5/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-ckeditor5/index.js

@@ -0,0 +1 @@
+export * from "./customElement.js";

package/dist/components/arcgis-ckeditor5/resources.d.ts

@@ -0,0 +1,9 @@
+export declare const CSS: {
+    arcgisAppCkeditor: string;
+    arcgisAppCkeditorMentionHeader: string;
+    arcgisAppCkeditorMentionItem: string;
+    arcgisAppCkeditorMentionItemContainer: string;
+    arcgisAppCkeditorPopoverContainer: string;
+    arcgisAppCkeditorPopoverFooter: string;
+    popover: string;
+};

package/dist/components/arcgis-ckeditor5/types.d.ts

@@ -0,0 +1,9 @@
+export type InputMentionField = {
+    id: string;
+    name: string;
+};
+export type DisplayMentionField = InputMentionField & {
+    isFirstExpression: boolean;
+    isFirstField: boolean;
+};
+export type EditorType = "html" | "markdown";

package/dist/components/arcgis-ckeditor5-popover/customElement.d.ts

@@ -0,0 +1,40 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-ckeditor5-popover/) */
+export declare class ArcgisCkeditor5Popover extends LitElement {
+    /** Guid for ckeditor popover instance. */
+    guid: `${string}-${string}-${string}-${string}-${string}`;
+    /** Reference element for the popover. */
+    refElement?: HTMLElement;
+    /**
+     * Ok button text.
+     *
+     * @default "Ok"
+     */
+    intlOk: string;
+    /**
+     * Cancel button text.
+     *
+     * @default "Cancel"
+     */
+    intlCancel: string;
+    /** Popover label text. */
+    intlLabel?: string;
+    /** Reposition the component. */
+    reposition(): Promise<void>;
+    /** @deprecated use arcgisPopoverClosed instead */
+    readonly arcgisCkeditor5PopoverClosed: TargetedEvent<this, {
+        guid: string;
+        data?: string;
+    }>;
+    /** Emitted when the popover has been closed. */
+    readonly arcgisPopoverClosed: TargetedEvent<this, {
+        guid: string;
+        data?: string;
+    }>;
+    "@eventTypes": {
+        "arcgisCkeditor5PopoverClosed": ArcgisCkeditor5Popover["arcgisCkeditor5PopoverClosed"]["detail"];
+        "arcgisPopoverClosed": ArcgisCkeditor5Popover["arcgisPopoverClosed"]["detail"];
+    };
+}

package/dist/components/arcgis-ckeditor5-popover/customElement.js

@@ -0,0 +1,60 @@
+import { c as a } from "../../chunks/runtime.js";
+import { css as n, html as l } from "lit";
+import { LitElement as c, createEvent as o, safeClassMap as e, nothing as d } from "@arcgis/lumina";
+import { createRef as s, ref as r } from "lit/directives/ref.js";
+import { Task as p } from "@lit/task";
+import { unsafeGetElementDirection as h } from "@arcgis/toolkit/dom";
+import { generateGuid as g } from "@arcgis/toolkit/string";
+import { i as u } from "../../chunks/commonFunctions.js";
+import { C as i } from "../../chunks/resources.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+const m = n`.arcgis-app-ckeditor-popover-footer{display:flex;justify-content:flex-end;margin-top:var(--calcite-space-sm);padding:0 var(--calcite-space-lg)}.arcgis-app-ckeditor-popover-container{margin:0 var(--calcite-space-md) 0 0;padding-bottom:var(--calcite-space-lg);box-shadow:val(--calcite-shadow-1)}`;
+class f extends c {
+  constructor() {
+    super(), this.okButton = s(), this.popoverNode = s(), this._propWatcherTask = new p(this, {
+      task: async ([t]) => {
+        if (!u(t)) {
+          console.error("[ckeditor5] Required properties are missing.");
+          return;
+        }
+      },
+      args: () => [this.refElement]
+    }), this.guid = g(), this.intlOk = "Ok", this.intlCancel = "Cancel", this.arcgisCkeditor5PopoverClosed = o(), this.arcgisPopoverClosed = o(), this.listen("arcgisCreated", this.afterEditorCreated), this.listen("arcgisSourceEditingChanged", this.onSourceEditingStatusChanged);
+  }
+  static {
+    this.properties = { guid: 0, refElement: 0, intlOk: 1, intlCancel: 1, intlLabel: 1 };
+  }
+  static {
+    this.styles = m;
+  }
+  async reposition() {
+    this.popoverNode.value?.reposition();
+  }
+  afterEditorCreated(t) {
+    this.editor = t.target, this.reposition(), this.requestUpdate();
+  }
+  onSourceEditingStatusChanged(t) {
+    this.okButton.value && (this.okButton.value.disabled = t.detail);
+  }
+  render() {
+    return this.el.classList.add("js-app-flyout"), this._propWatcherTask.render({
+      complete: () => l`<calcite-popover class=${e(i.popover)} dir=${h(this.el) ?? d} placement=leading-start open pointer-disabled .referenceElement=${this.refElement} .offsetDistance=${-Math.round(this.refElement.getBoundingClientRect().width)} offset-skidding=50 .label=${this.intlLabel ?? ""} focus-trap-disabled trigger-disabled ${r(this.popoverNode)}><div class=${e(i.arcgisAppCkeditorPopoverContainer)}><slot></slot><div class=${e(i.arcgisAppCkeditorPopoverFooter)}><calcite-button .label=${this.intlOk} @click=${async (t) => {
+        this.okButton.value?.disabled || (t.stopPropagation(), this.arcgisCkeditor5PopoverClosed.emit({
+          guid: this.guid,
+          data: await this.editor?.getData()
+        }), this.arcgisPopoverClosed.emit({
+          guid: this.guid,
+          data: await this.editor?.getData()
+        }));
+      }} ${r(this.okButton)}>${this.intlOk}</calcite-button><calcite-button appearance=outline-fill .label=${this.intlCancel} @click=${(t) => {
+        t.stopPropagation(), this.arcgisCkeditor5PopoverClosed.emit({ guid: this.guid }), this.arcgisPopoverClosed.emit({ guid: this.guid });
+      }}>${this.intlCancel}</calcite-button></div></div></calcite-popover>`
+    });
+  }
+}
+a("arcgis-ckeditor5-popover", f);
+export {
+  f as ArcgisCkeditor5Popover
+};

package/dist/components/arcgis-ckeditor5-popover/index.d.ts

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-button";
+export * from "./customElement.js";

package/dist/components/arcgis-ckeditor5-popover/index.js

@@ -0,0 +1,3 @@
+import "@esri/calcite-components/components/calcite-popover";
+import "@esri/calcite-components/components/calcite-button";
+export * from "./customElement.js";

package/dist/components/arcgis-color-input/customElement.d.ts

@@ -0,0 +1,84 @@
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import { IPopoverProps } from '../../utils/types';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-color-input/) */
+export declare class ArcgisColorInput extends LitElement {
+    /**
+     * Display option to set no color.
+     *
+     * @default false
+     */
+    clearable: boolean;
+    /** The selected color as a HEX value. If not set it will display a 'transparent' color swatch. */
+    color?: string;
+    /**
+     * Control whether the component should be displayed in a compact style (i.e., fewer recent color options).
+     *
+     * @default false
+     */
+    compact: boolean;
+    /**
+     * Control whether the component is disabled.
+     *
+     * @default false
+     */
+    disabled: boolean;
+    /** Replace localized message strings with your own strings. */
+    messageOverrides?: typeof this._messages._overrides;
+    /**
+     * Determines where the popup color picker will be positioned relative to the color input.
+     *
+     * @default "auto"
+     */
+    placement: HTMLCalcitePopoverElement["placement"];
+    /** Convenience prop to specify common popover props. */
+    popoverProps?: IPopoverProps;
+    /**
+     * The id of the local storage element that will store recent colors.
+     *
+     * @default "arcgis-color-input-storage-colors"
+     */
+    storageId: string;
+    /**
+     * If true, do not display recent colors.
+     *
+     * @default false
+     */
+    hideRecentColors: boolean;
+    /**
+     * If true, allow transparency to be modified within the color picker.
+     *
+     * @default false
+     */
+    showTransparency: boolean;
+    /** Close the component. */
+    close(): Promise<void>;
+    /** Set focus on the component. */
+    setFocus(): Promise<void>;
+    /** Emitted when the color has changed. */
+    readonly arcgisChange: TargetedEvent<this, void>;
+    /** @deprecated use arcgisChange instead */
+    readonly arcgisColorInputChange: TargetedEvent<this, void>;
+    /** @deprecated use arcgisPickerClose instead */
+    readonly arcgisColorInputPopoverClose: TargetedEvent<this, string>;
+    /** @deprecated use arcgisPickerOpen instead */
+    readonly arcgisColorInputPopoverOpen: TargetedEvent<this, void>;
+    /** @deprecated use arcgisSwatchUpdate instead */
+    readonly arcgisColorInputSwatchUpdate: TargetedEvent<this, string | undefined>;
+    readonly arcgisPickerClose: TargetedEvent<this, string>;
+    readonly arcgisPickerOpen: TargetedEvent<this, void>;
+    /** Emitted when a color swatch is updated (emits selected color hex). */
+    readonly arcgisSwatchUpdate: TargetedEvent<this, string | undefined>;
+    private _messages;
+    "@eventTypes": {
+        "arcgisChange": ArcgisColorInput["arcgisChange"]["detail"];
+        "arcgisColorInputChange": ArcgisColorInput["arcgisColorInputChange"]["detail"];
+        "arcgisColorInputPopoverClose": ArcgisColorInput["arcgisColorInputPopoverClose"]["detail"];
+        "arcgisColorInputPopoverOpen": ArcgisColorInput["arcgisColorInputPopoverOpen"]["detail"];
+        "arcgisColorInputSwatchUpdate": ArcgisColorInput["arcgisColorInputSwatchUpdate"]["detail"];
+        "arcgisPickerClose": ArcgisColorInput["arcgisPickerClose"]["detail"];
+        "arcgisPickerOpen": ArcgisColorInput["arcgisPickerOpen"]["detail"];
+        "arcgisSwatchUpdate": ArcgisColorInput["arcgisSwatchUpdate"]["detail"];
+    };
+}

package/dist/components/arcgis-color-input/customElement.js

@@ -0,0 +1,137 @@
+import { c as C } from "../../chunks/runtime.js";
+import { keyed as n } from "lit/directives/keyed.js";
+import { LitElement as m, createEvent as i } from "@arcgis/lumina";
+import { css as u, render as g, html as s, svg as f } from "lit";
+import { createRef as w, ref as a } from "lit/directives/ref.js";
+import { unsafeGetElementDirection as v } from "@arcgis/toolkit/dom";
+import { debounce as E } from "@arcgis/toolkit/function";
+import { u as k } from "../../chunks/useT9n.js";
+/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
+See https://js.arcgis.com/5.0/esri/copyright.txt for details.
+v5.0.0-next.113 */
+function $(l, e, o) {
+  window.localStorage.setItem(l, JSON.stringify(e));
+}
+function y(l, e) {
+  const o = window.localStorage.getItem(l);
+  return o && e ? JSON.parse(o) : o;
+}
+const S = u`:host,arcgis-picker-input{display:block}.color-picker-container{display:flex;flex-direction:column}.color-picker{--calcite-color-border-1: transparent;overflow-x:hidden}.preview-swatch{width:100%;height:24px}.recent-colors-container{align-items:center;border:var(--calcite-border-width-sm) solid var(--calcite-color-border-input);display:flex;gap:var(--calcite-space-sm);height:32px;padding:0 var(--calcite-space-xs);transition:outline-offset .1s ease-in-out,outline-color .1s ease-in-out}.preview-recent-swatch{cursor:pointer}.recent-colors-container:focus,.preview-recent-swatch:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-brand);outline-offset:var(--calcite-border-width-md)}.empty-swatch{cursor:default}.end-action{display:flex}`;
+class I extends m {
+  constructor() {
+    super(), this._messages = k(), this.actionEl = w(), this.setRecentColorElement = (e) => (o) => {
+      switch (e) {
+        case 1:
+          this.recentColor1El = o;
+          break;
+        case 2:
+          this.recentColor2El = o;
+          break;
+        default:
+          this.recentColor3El = o;
+      }
+    }, this.recentColors = [], this.clearable = !1, this.compact = !1, this.disabled = !1, this.placement = "auto", this.storageId = "arcgis-color-input-storage-colors", this.hideRecentColors = !1, this.showTransparency = !1, this.arcgisChange = i(), this.arcgisColorInputChange = i(), this.arcgisColorInputPopoverClose = i(), this.arcgisColorInputPopoverOpen = i(), this.arcgisColorInputSwatchUpdate = i(), this.arcgisInternalStoredColor = i(), this.arcgisPickerClose = i(), this.arcgisPickerOpen = i(), this.arcgisSwatchUpdate = i(), this.listenOn(document, "arcgisInternalStoredColor", this.handleUpdateRecentColors), this.listenOn(document, "arcgisRecentColorsUpdate", this.handleStoreNewRecentColor);
+  }
+  static {
+    this.properties = { recentColors: 16, clearable: 5, color: 1, compact: 5, disabled: 5, messageOverrides: 0, placement: 1, popoverProps: 0, storageId: 1, hideRecentColors: 5, showTransparency: 5 };
+  }
+  static {
+    this.styles = S;
+  }
+  async close() {
+    await this.inlineInputEl?.close();
+  }
+  async setFocus() {
+    await this.inlineInputEl?.setFocus();
+  }
+  load() {
+    this.setRecentColorsFromStorage();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeTooltip();
+  }
+  async handleOpen() {
+    await this.colorPickerEl?.setFocus(), this.arcgisPickerOpen.emit(), this.arcgisColorInputPopoverOpen.emit();
+  }
+  setInlineInputRef(e) {
+    this.inlineInputEl = e;
+  }
+  setColorPickerRef(e) {
+    e && (this.colorPickerEl = e);
+  }
+  getRecentColorElement(e) {
+    switch (e) {
+      case 1:
+        return this.recentColor1El;
+      case 2:
+        return this.recentColor2El;
+      default:
+        return this.recentColor3El;
+    }
+  }
+  setRecentColorsFromStorage() {
+    const e = y(this.storageId, !0);
+    e && (this.recentColors = [...e]);
+  }
+  handleSwatchClickOrKeyUp(e) {
+    if ("key" in e && e.key !== "Enter" && e.key !== "Space")
+      return;
+    const t = e.currentTarget.color || void 0;
+    this.updateColor(t), this.arcgisSwatchUpdate.emit(t), this.arcgisColorInputSwatchUpdate.emit(t), setTimeout(() => this.recentColor1El?.focus(), 200);
+  }
+  handleRecentColorsKeyDown(e) {
+    if (this.recentColors.length === 1)
+      return;
+    const o = e.key;
+    let t;
+    this.activeColorSwatchEl === this.recentColor1El ? t = 1 : this.activeColorSwatchEl === this.recentColor2El ? t = 2 : this.activeColorSwatchEl === this.recentColor3El && (t = 3), o === "ArrowLeft" && (!t || t === 1 ? this.getRecentColorElement(this.recentColors.length)?.focus() : this.getRecentColorElement(t - 1)?.focus()), o === "ArrowRight" && (!t || t === this.recentColors.length ? this.recentColor1El?.focus() : this.getRecentColorElement(t + 1)?.focus());
+  }
+  handleUpdateActiveSwatch(e) {
+    this.activeColorSwatchEl = e.target;
+  }
+  handleStoreNewRecentColor(e) {
+    this.storeRecentColorToStorage(e.detail);
+  }
+  handleUpdateRecentColors(e) {
+    e.composedPath().includes(this.el) || this.setRecentColorsFromStorage();
+  }
+  handleClearColor() {
+    this.updateColor(void 0);
+  }
+  updateColor(e, o = !0) {
+    e !== this.color && (this.color = e, this.arcgisChange.emit(), this.arcgisColorInputChange.emit(), o && this.storeRecentColorToStorage(e));
+  }
+  storeRecentColorToStorage(e) {
+    if (!e)
+      return;
+    e.length > 7 && (e = e.slice(0, 7));
+    const t = [e, ...this.recentColors.filter((r) => r !== e)].slice(0, 3);
+    $(this.storageId, t), this.recentColors = t, this.arcgisInternalStoredColor.emit();
+  }
+  handleClose(e) {
+    e.stopPropagation(), this.storeRecentColorToStorage(this.colorPickerEl?.value), this.arcgisPickerClose.emit(this.colorPickerEl?.value), this.arcgisColorInputPopoverClose.emit(this.colorPickerEl?.value);
+  }
+  addTooltip(e) {
+    this.removeTooltip(), this.tooltipContainerEl = document.createElement("div"), g(s`<calcite-tooltip .placement=${e.placement ?? "auto"} .referenceElement=${e.referenceElement} overlay-positioning=fixed open>${e.innerHTML}</calcite-tooltip>`, this.tooltipContainerEl), document.body.append(this.tooltipContainerEl);
+  }
+  removeTooltip() {
+    this.tooltipContainerEl?.parentNode && (this.tooltipContainerEl.remove(), this.tooltipContainerEl = void 0);
+  }
+  render() {
+    const { compact: e, disabled: o, recentColors: t, _messages: r } = this, h = [t[0], t[1]], d = v(this.el) === "rtl";
+    return e || h.push(t[2]), s`<arcgis-picker-input .disabled=${o} .intlDone=${r.commitColor} .heading=${r.selectColor} .label=${r.selectColor} @arcgisPopoverOpen=${this.handleOpen} @arcgisPopoverClose=${this.handleClose} .popoverProps=${this.popoverProps} ${a(this.setInlineInputRef)}><div class="color-picker-container" slot=content>${n(`color-picker${e ? "--compact" : ""}`, s`<calcite-color-picker .clearable=${this.clearable} class="color-picker" @calciteColorPickerInput=${E((c) => {
+      c.stopPropagation(), this.updateColor(this.colorPickerEl.value, !1);
+    }, 500)} .scale=${e ? "s" : "m"} .storageId=${this.storageId} .alphaChannel=${this.showTransparency} .value=${this.color} ${a(this.setColorPickerRef)}></calcite-color-picker>`)}</div><div slot=preview><calcite-color-picker-swatch class="preview-swatch" .color=${this.color} scale=s></calcite-color-picker-swatch></div>${!this.hideRecentColors && s`<div slot=content-end class="recent-colors-container" @keydown=${this.handleRecentColorsKeyDown} tabindex=-1>${h.map((c, p) => c ? n(c, s`<calcite-color-picker-swatch class="preview-recent-swatch" role=button scale=s tabindex=0 .active=${c === this.color} .color=${c} @click=${this.handleSwatchClickOrKeyUp} @keyup=${this.handleSwatchClickOrKeyUp} @focus=${this.handleUpdateActiveSwatch} ${a(this.setRecentColorElement(p + 1))}></calcite-color-picker-swatch>`) : this.renderEmptySwatch(`empty-swatch-${p}`))}</div>` || ""}${this.clearable && s`<div slot=content-end class="end-action"><calcite-action icon=circle-disallowed scale=s .label=${r.clearColor} .text=${r.clearColor ?? ""} @click=${this.handleClearColor} @mouseover=${() => this.addTooltip({
+      referenceElement: this.actionEl.value,
+      placement: d ? "right-start" : "left-start",
+      innerHTML: r.noColor ?? ""
+    })} @mouseout=${() => this.removeTooltip()} ${a(this.actionEl)}></calcite-action></div>` || ""}</arcgis-picker-input>`;
+  }
+  renderEmptySwatch(e) {
+    return n(e, s`<svg class="empty-swatch" viewBox="0 0 20 20" xmlns=http://www.w3.org/2000/svg width=20>${f`<rect width=20 height=20 fill=#f8f8f8 stroke=#000 stroke-dasharray=2 />`}</svg>`);
+  }
+}
+C("arcgis-color-input", I);
+export {
+  I as ArcgisColorInput
+};

package/dist/components/arcgis-color-input/index.d.ts

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-tooltip";
+import "../arcgis-picker-input/index.js";
+import "@esri/calcite-components/components/calcite-color-picker";
+import "@esri/calcite-components/components/calcite-color-picker-swatch";
+import "@esri/calcite-components/components/calcite-action";
+export * from "./customElement.js";

package/dist/components/arcgis-color-input/index.js

@@ -0,0 +1,6 @@
+import "@esri/calcite-components/components/calcite-tooltip";
+import "../arcgis-picker-input/index.js";
+import "@esri/calcite-components/components/calcite-color-picker";
+import "@esri/calcite-components/components/calcite-color-picker-swatch";
+import "@esri/calcite-components/components/calcite-action";
+export * from "./customElement.js";

package/dist/components/arcgis-field-info/customElement.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
+import { Status, FieldInfoLayer } from './utils';
+
+/** [Read more...](https://developers.arcgis.com/javascript/latest/references/common-components/arcgis-field-info/) */
+export declare class ArcgisFieldInfo extends LitElement {
+    /** View instance. If no view is provided all dates will show in 'system' timezone. */
+    view?: __esri.View;
+    /** Required layer instance. */
+    layer?: FieldInfoLayer;
+    /** Required field name. */
+    fieldName?: string;
+    /**
+     * If true, hide the field alias section.
+     *
+     * @default false
+     */
+    hideAlias: boolean;
+    /**
+     * If true, hide the decimal places section.
+     *
+     * @default false
+     */
+    hideNumericFormat: boolean;
+    /**
+     * If true, hide statistics (i.e., no top 10 values for string and no stats for number and date fields).
+     *
+     * @default false
+     */
+    hideStatistics: boolean;
+    /** Refresh the field info display after external changes are made. */
+    refresh(): Promise<void>;
+    /** Emitted once all information is displayed. */
+    readonly arcgisComplete: TargetedEvent<this, void>;
+    /** @deprecated use arcgisComplete instead. */
+    readonly arcgisFieldInfoComplete: TargetedEvent<this, void>;
+    "@eventTypes": {
+        "arcgisComplete": ArcgisFieldInfo["arcgisComplete"]["detail"];
+        "arcgisFieldInfoComplete": ArcgisFieldInfo["arcgisFieldInfoComplete"]["detail"];
+    };
+}