@esri/calcite-components 5.2.0-next.10 → 5.2.0-next.100

package/dist/components/calcite-input-message/customElement.js

@@ -2,16 +2,16 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, stringOrBoolean, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { b as setRequestedIcon } from "../../chunks/dom.js";
+import { v as setRequestedIcon } from "../../chunks/dom.js";
+const CSS = {
+  inputMessageIcon: "calcite-input-message-icon"
+};
 const StatusIconDefaults = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",
   idle: "information"
 };
-const styles = css`:host{box-sizing:border-box;display:flex;block-size:auto;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);opacity:1;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;margin-block-start:var(--calcite-input-message-spacing, var(--calcite-input-message-spacing-value, var(--calcite-spacing-xxs)))}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;margin-inline-end:var(--calcite-spacing-sm)}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-danger))))}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-success))))}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand))))}:host([scale=s]){font-size:var(--calcite-font-size-relative-xs);line-height:var(--calcite-font-line-height-xs)}:host([scale=m]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=l]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([hidden]){display:none}[hidden]{display:none}`;
-const CSS = {
-  inputMessageIcon: "calcite-input-message-icon"
-};
+const styles = css`:host{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-sizing:border-box;display:flex;block-size:auto;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);opacity:1;margin-block-start:var(--calcite-input-message-spacing, var(--calcite-input-message-spacing-value, var(--calcite-theme-space-2xs, var(--calcite-spacing-xxs))))}.calcite-input-message-icon{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;pointer-events:none;display:inline-flex;flex-shrink:0;margin-inline-end:var(--calcite-theme-space-sm, var(--calcite-spacing-sm))}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-danger))))}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-status-success))))}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-input-message-icon-color, var(--calcite-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-brand))))}:host([scale=s]){font-size:var(--calcite-font-size-relative-xs);line-height:var(--calcite-font-line-height-xs)}:host([scale=m]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=l]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([hidden]){display:none}[hidden]{display:none}`;
 class InputMessage extends LitElement {
   constructor() {
     super(...arguments);
@@ -20,7 +20,7 @@ class InputMessage extends LitElement {
     this.status = "idle";
   }
   static {
-    this.properties = { icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }] };
+    this.properties = { icon: [3, { converter: stringOrBoolean }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -40,9 +40,7 @@ class InputMessage extends LitElement {
     return html`${this.renderIcon(this.requestedIcon)}<slot></slot>`;
   }
   renderIcon(iconName) {
-    if (iconName) {
-      return html`<calcite-icon class=${safeClassMap(CSS.inputMessageIcon)} .flipRtl=${this.iconFlipRtl} .icon=${iconName} scale=s></calcite-icon>`;
-    }
+    return iconName ? html`<calcite-icon class=${safeClassMap(CSS.inputMessageIcon)} .flipRtl=${this.iconFlipRtl} .icon=${iconName} scale=s></calcite-icon>` : iconName;
   }
 }
 customElement("calcite-input-message", InputMessage);

package/dist/components/calcite-input-number/customElement.d.ts

@@ -1,31 +1,72 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Alignment, Scale, Status } from "../interfaces.js";
+import type { Alignment, Scale, Status } from "../types.js";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { InputPlacement } from "../calcite-input/interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { InputPlacement } from "../calcite-input/types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the background color of the component's `clearable` and `number-button-type` elements. */
+  "--calcite-input-actions-background-color": "*";
+  /** Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered. */
+  "--calcite-input-actions-background-color-hover": "*";
+  /** Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed. */
+  "--calcite-input-actions-background-color-press": "*";
+  /** Specifies the icon color of the component's `clearable` and `number-button-type` elements. */
+  "--calcite-input-actions-icon-color": "*";
+  /** Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered. */
+  "--calcite-input-actions-icon-color-hover": "*";
+  /** Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed. */
+  "--calcite-input-actions-icon-color-press": "*";
+  /** When `loading`, specifies the background color of the component's `loading` element. */
+  "--calcite-input-loading-background-color": "*";
+  /** When `loading`, specifies the fill color of the component's `loading` element. */
+  "--calcite-input-loading-fill-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-input-number-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-input-number-border-color": "*";
+  /** Specifies the component's border radius. */
+  "--calcite-input-number-corner-radius": "*";
+  /** Specifies the component's icon color. */
+  "--calcite-input-number-icon-color": "*";
+  /** Specifies the component's height. */
+  "--calcite-input-number-height": "*";
+  /** Specifies the text color of the component's placeholder. */
+  "--calcite-input-number-placeholder-text-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-input-number-text-color": "*";
+  /** Specifies the component's text color when focused. */
+  "--calcite-input-number-text-color-focus": "*";
+  /** When `prefixText` is provided, specifies the width of the component's prefix element. */
+  "--calcite-input-prefix-size": "*";
+  /** When `prefixText` is provided, specifies the text color of the component's prefix element. */
+  "--calcite-input-prefix-text-color": "*";
+  /** When `suffixText` is provided, specifies the width of the component's suffix element. */
+  "--calcite-input-suffix-size": "*";
+  /** When `suffixText` is provided, specifies the text color of the component's suffix element. */
+  "--calcite-input-suffix-text-color": "*";
+  /** When `inlineEdit` is defined and `inlineEditing` is not set, specifies the component's background color when hovered. */
+  "--calcite-input-number-inline-edit-background-color-hover": "*";
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls. */
+  "--calcite-input-number-inline-edit-control-background-color": "*";
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when hovered. */
+  "--calcite-input-number-inline-edit-control-background-color-hover": "*";
+  /** When `inlineEdit` is defined, specifies the background color of the component's editing controls when pressed. */
+  "--calcite-input-number-inline-edit-control-background-color-press": "*";
+  /** When `inlineEdit` is defined, specifies the corner radius of the component's editing controls. */
+  "--calcite-input-number-inline-edit-control-corner-radius": "*";
+  /** When `inlineEdit` is `true`, specifies the loader color of the component's confirm control. */
+  "--calcite-input-number-inline-edit-control-loader-color": "*";
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls. */
+  "--calcite-input-number-inline-edit-control-text-color": "*";
+  /** When `inlineEdit` is defined, specifies the text color of the component's editing controls when pressed or hovered. */
+  "--calcite-input-number-inline-edit-control-text-color-press": "*";
+}
+}
 
 /**
- * @cssproperty [--calcite-input-actions-background-color] - Specifies the background color of the component's `clearable` and `number-button-type` elements.
- * @cssproperty [--calcite-input-actions-background-color-hover] - Specifies the background color of the component's `clearable` and `number-button-type` elements when hovered.
- * @cssproperty [--calcite-input-actions-background-color-press] - Specifies the background color of the component's `clearable` and `number-button-type` elements when pressed.
- * @cssproperty [--calcite-input-actions-icon-color] - Specifies the icon color of the component's `clearable` and `number-button-type` elements.
- * @cssproperty [--calcite-input-actions-icon-color-hover] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when hovered.
- * @cssproperty [--calcite-input-actions-icon-color-press] - Specifies the icon color of the component's `clearable` and `number-button-type` elements when pressed.
- * @cssproperty [--calcite-input-loading-background-color] - When `loading`, specifies the background color of the component's `loading` element.
- * @cssproperty [--calcite-input-loading-fill-color] - When `loading`, specifies the fill color of the component's `loading` element.
- * @cssproperty [--calcite-input-number-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-input-number-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-input-number-corner-radius] - Specifies the component's border radius.
- * @cssproperty [--calcite-input-number-icon-color] - Specifies the component's icon color.
- * @cssproperty [--calcite-input-number-height] - Specifies the component's height.
- * @cssproperty [--calcite-input-number-placeholder-text-color] - Specifies the text color of the component's placeholder.
- * @cssproperty [--calcite-input-number-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-input-number-text-color-focus] - Specifies the component's text color when focused.
- * @cssproperty [--calcite-input-prefix-size] - When `prefixText` is provided, specifies the width of the component's prefix element.
- * @cssproperty [--calcite-input-prefix-text-color] - When `prefixText` is provided, specifies the text color of the component's prefix element.
- * @cssproperty [--calcite-input-suffix-size] - When `suffixText` is provided, specifies the width of the component's suffix element.
- * @cssproperty [--calcite-input-suffix-text-color] - When `suffixText` is provided, specifies the text color of the component's suffix element.
  * @slot [action] - A slot for positioning a `calcite-action` or other interactive content adjacent to the component.
  * @slot [label-content] - A slot for rendering content next to the component's `labelText`.
  */
@@ -76,13 +117,29 @@ export abstract class InputNumber extends LitElement {
    * @default false
    */
   accessor iconFlipRtl: boolean;
+  /**
+   * Enables inline editing. When not editing, the component displays without a border.
+   * When `true`, edits must be saved or cancelled via controls.
+   * When `"controls-disabled"` is specified, edits are saved on blur.
+   *
+   * @default false
+   */
+  accessor inlineEdit: boolean | "controls-disabled";
+  /**
+   * When `true` and `inlineEdit` is defined, the component is editable.
+   *
+   * @default false
+   */
+  accessor inlineEditing: boolean;
+  /** When `inlineEdit` is `true`, specifies a callback to be run when changes are saved. */
+  accessor inlineEditingBeforeConfirm: (() => Promise<void>) | undefined;
   /**
    * When `true`, restricts the component to integer numbers only and disables exponential notation.
    *
    * @default false
    */
   accessor integer: boolean;
-  /** Specifies an accessible label for the component's button or hyperlink. */
+  /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
   /** Specifies the component's label text. */
   accessor labelText: string | undefined;
@@ -107,14 +164,18 @@ export abstract class InputNumber extends LitElement {
    * @see [MDN - maxlength](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength)
    */
   accessor maxLength: number | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      cancelInlineEditing?: string;
-      clear?: string;
-      confirmInlineEditingChanges?: string;
-      enableInlineEditing?: string;
-      loading?: string;
-      required?: string;
+      cancelInlineEditing?: string | undefined;
+      clear?: string | undefined;
+      confirmInlineEditingChanges?: string | undefined;
+      enableInlineEditing?: string | undefined;
+      loading?: string | undefined;
+      required?: string | undefined;
   };
   /**
    * When the component resides in a form,
@@ -132,7 +193,9 @@ export abstract class InputNumber extends LitElement {
    */
   accessor minLength: number | undefined;
   /**
-   * Specifies the name of the component. Required to pass the component's `value` on form submission.
+   * Specifies the name of the component.
+   *
+   * Required to pass the component's `value` on form submission.
    *
    * @see [MDN - name](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name)
    */
@@ -208,12 +271,21 @@ export abstract class InputNumber extends LitElement {
    * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Fires each time a new `value` is typed and committed. */
+  /** Fires each time a new `value` is committed. */
   readonly calciteInputNumberChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires each time a new `value` is typed. */
+  /** When `inlineEdit` is defined, fires when editing is cancelled. */
+  readonly calciteInputNumberInlineEditingCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** When `inlineEdit` is defined, fires when `inlineEditing` is enabled or disabled. */
+  readonly calciteInputNumberInlineEditingChange: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** When `inlineEdit` is `true`, fires after editing is confirmed. */
+  readonly calciteInputNumberInlineEditingConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** When `inlineEdit` is `false`, fires each time a new `value` is typed. */
   readonly calciteInputNumberInput: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputNumberChange: InputNumber["calciteInputNumberChange"]["detail"];
+    calciteInputNumberInlineEditingCancel: InputNumber["calciteInputNumberInlineEditingCancel"]["detail"];
+    calciteInputNumberInlineEditingChange: InputNumber["calciteInputNumberInlineEditingChange"]["detail"];
+    calciteInputNumberInlineEditingConfirm: InputNumber["calciteInputNumberInlineEditingConfirm"]["detail"];
     calciteInputNumberInput: InputNumber["calciteInputNumberInput"]["detail"];
   };
 }