@esri/calcite-components 2.1.0-next.9 → 2.1.0

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

@@ -1,90 +1,9 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
-import { o as setRequestedIcon } from './dom.js';
-import { d as defineCustomElement$2 } from './icon.js';
-
-var StatusIconDefaults;
-(function (StatusIconDefaults) {
-    StatusIconDefaults["valid"] = "check-circle";
-    StatusIconDefaults["invalid"] = "exclamation-mark-triangle";
-    StatusIconDefaults["idle"] = "information";
-})(StatusIconDefaults || (StatusIconDefaults = {}));
-
-const inputMessageCss = ":host([scale=m]),:host([scale=l]){--calcite-input-message-spacing-value:0.25rem}:host{visibility:hidden;box-sizing:border-box;display:flex;block-size:0px;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);visibility:visible;block-size:auto;opacity:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}:host([scale=m]),:host([scale=l]){margin-block-start:var(--calcite-input-message-spacing-value)}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-inline-end:0.5rem}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-color-status-danger)}:host([status=warning]) .calcite-input-message-icon{color:var(--calcite-color-status-warning)}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-color-status-success)}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-color-brand)}:host([status]){color:var(--calcite-color-text-1)}:host([status][scale=s]){font-size:var(--calcite-font-size--3);line-height:0.75rem}:host([status][scale=m]){margin-block-start:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([status][scale=l]){margin-block-start:0.25rem;font-size:var(--calcite-font-size--1);line-height:1rem}:host([hidden]){display:none}[hidden]{display:none}";
-
-const InputMessage = /*@__PURE__*/ proxyCustomElement(class InputMessage extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.icon = undefined;
-        this.iconFlipRtl = false;
-        this.scale = "m";
-        this.status = "idle";
-    }
-    handleIconEl() {
-        this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Lifecycle
-    //
-    //--------------------------------------------------------------------------
-    connectedCallback() {
-        this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);
-    }
-    render() {
-        const hidden = this.el.hidden;
-        return (h(Host, { "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), h("slot", null)));
-    }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    renderIcon(iconName) {
-        if (iconName) {
-            return (h("calcite-icon", { class: "calcite-input-message-icon", flipRtl: this.iconFlipRtl, icon: iconName, scale: "s" }));
-        }
-    }
-    get el() { return this; }
-    static get watchers() { return {
-        "status": ["handleIconEl"],
-        "icon": ["handleIconEl"]
-    }; }
-    static get style() { return inputMessageCss; }
-}, [1, "calcite-input-message", {
-        "icon": [520],
-        "iconFlipRtl": [516, "icon-flip-rtl"],
-        "scale": [513],
-        "status": [513]
-    }, undefined, {
-        "status": ["handleIconEl"],
-        "icon": ["handleIconEl"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["calcite-input-message", "calcite-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "calcite-input-message":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, InputMessage);
-            }
-            break;
-        case "calcite-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
-defineCustomElement$1();
+import { I as InputMessage, d as defineCustomElement$1 } from './input-message.js';
 
 const CalciteInputMessage = InputMessage;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1 +1 @@
-{"file":"calcite-input-message.js","mappings":";;;;;;;;;AAAA,IAAY,kBAIX;AAJD,WAAY,kBAAkB;IAC5B,4CAAsB,CAAA;IACtB,2DAAqC,CAAA;IACrC,0CAAoB,CAAA;AACtB,CAAC,EAJW,kBAAkB,KAAlB,kBAAkB;;ACA9B,MAAM,eAAe,GAAG,y7CAAy7C;;MCap8C,YAAY;;;;;;2BAWgB,KAAK;qBAGJ,GAAG;sBAGD,MAAM;;IAIhD,YAAY;QACV,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACnF;;;;;;IAQD,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,gBAAgB,CAAC,kBAAkB,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;KACnF;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC;QAC9B,QACE,EAAC,IAAI,+BAA0B,MAAM,IAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,EACpC,eAAQ,CACH,EACP;KACH;;;;;;IAmBO,UAAU,CAAC,QAAgB;QACjC,IAAI,QAAQ,EAAE;YACZ,QACE,oBACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAC,GAAG,GACT,EACF;SACH;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/input-message/interfaces.ts","src/components/input-message/input-message.scss?tag=calcite-input-message&encapsulation=shadow","src/components/input-message/input-message.tsx"],"sourcesContent":["export enum StatusIconDefaults {\n  valid = \"check-circle\",\n  invalid = \"exclamation-mark-triangle\",\n  idle = \"information\",\n}\n","/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-input-message-spacing-value: The top margin spacing above the component.\n */\n\n:host([scale=\"m\"]),\n:host([scale=\"l\"]) {\n  --calcite-input-message-spacing-value: theme(\"spacing.1\");\n}\n\n:host {\n  @apply text-color-1 transition-default invisible box-border flex h-0 w-full items-center font-medium opacity-0;\n}\n\n:host {\n  @apply transition-default visible h-auto opacity-100;\n}\n\n:host([scale=\"m\"]),\n:host([scale=\"l\"]) {\n  margin-block-start: var(--calcite-input-message-spacing-value);\n}\n\n.calcite-input-message-icon {\n  @apply transition-default\n    pointer-events-none\n    inline-flex\n    flex-shrink-0;\n  margin-inline-end: theme(\"margin.2\");\n}\n\n:host([status=\"invalid\"]) .calcite-input-message-icon {\n  color: var(--calcite-color-status-danger);\n}\n\n:host([status=\"warning\"]) .calcite-input-message-icon {\n  color: var(--calcite-color-status-warning);\n}\n\n:host([status=\"valid\"]) .calcite-input-message-icon {\n  color: var(--calcite-color-status-success);\n}\n\n:host([status=\"idle\"]) .calcite-input-message-icon {\n  color: var(--calcite-color-brand);\n}\n\n// Validation Text\n:host([status]) {\n  @apply text-color-1;\n}\n\n:host([status][scale=\"s\"]) {\n  @apply text-n3h;\n}\n\n:host([status][scale=\"m\"]) {\n  @apply text-n2h mt-1;\n}\n\n:host([status][scale=\"l\"]) {\n  @apply text-n1h mt-1;\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode, Watch } from \"@stencil/core\";\nimport { setRequestedIcon } from \"../../utils/dom\";\nimport { Scale, Status } from \"../interfaces\";\nimport { StatusIconDefaults } from \"./interfaces\";\n\n/**\n * @slot - A slot for adding text.\n */\n@Component({\n  tag: \"calcite-input-message\",\n  styleUrl: \"input-message.scss\",\n  shadow: true,\n})\nexport class InputMessage {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** Specifies an icon to display. */\n  @Prop({ reflect: true }) icon: boolean | string;\n\n  /** When `true`, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`). */\n  @Prop({ reflect: true }) iconFlipRtl = false;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /** Specifies the status of the input field, which determines message and icons. */\n  @Prop({ reflect: true }) status: Status = \"idle\";\n\n  @Watch(\"status\")\n  @Watch(\"icon\")\n  handleIconEl(): void {\n    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback(): void {\n    this.requestedIcon = setRequestedIcon(StatusIconDefaults, this.icon, this.status);\n  }\n\n  render(): VNode {\n    const hidden = this.el.hidden;\n    return (\n      <Host calcite-hydrated-hidden={hidden}>\n        {this.renderIcon(this.requestedIcon)}\n        <slot />\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State/Props\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteInputMessageElement;\n\n  /** the computed icon to render */\n  private requestedIcon?: string;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  private renderIcon(iconName: string): VNode {\n    if (iconName) {\n      return (\n        <calcite-icon\n          class=\"calcite-input-message-icon\"\n          flipRtl={this.iconFlipRtl}\n          icon={iconName}\n          scale=\"s\"\n        />\n      );\n    }\n  }\n}\n"],"version":3}
+{"file":"calcite-input-message.js","mappings":";;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/calcite-input-number.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { I as InputNumber, d as defineCustomElement$1 } from './input-number.js';
 

package/dist/components/calcite-input-text.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { I as InputText, d as defineCustomElement$1 } from './input-text.js';
 

package/dist/components/calcite-input-time-picker.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.1.0-next.9
+ * v2.1.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
@@ -17,8 +17,10 @@ import { c as connectMessages, s as setUpMessages, d as disconnectMessages } fro
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { d as decimalPlaces } from './math.js';
 import { g as getIconScale } from './component.js';
-import { d as defineCustomElement$8 } from './action.js';
-import { d as defineCustomElement$7 } from './icon.js';
+import { V as Validation } from './Validation.js';
+import { d as defineCustomElement$9 } from './action.js';
+import { d as defineCustomElement$8 } from './icon.js';
+import { d as defineCustomElement$7 } from './input-message.js';
 import { d as defineCustomElement$6 } from './input-text.js';
 import { d as defineCustomElement$5 } from './loader.js';
 import { d as defineCustomElement$4 } from './popover.js';
@@ -1191,7 +1193,7 @@ const updateLocale = (function (option, Dayjs, dayjs) {
   };
 });
 
-const inputTimePickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([hidden]){display:none}[hidden]{display:none}";
+const inputTimePickerCss = ":host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block;-webkit-user-select:none;user-select:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([scale=s]){--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}.validation-container{padding-block-start:0.5rem;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([hidden]){display:none}[hidden]{display:none}";
 
 // some bundlers (e.g., Webpack) need dynamic import paths to be static
 const supportedDayjsLocaleToLocaleConfigImport = new Map([
@@ -1472,6 +1474,8 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         this.readOnly = false;
         this.messageOverrides = undefined;
         this.messages = undefined;
+        this.validationMessage = undefined;
+        this.validationIcon = undefined;
         this.name = undefined;
         this.numberingSystem = undefined;
         this.required = false;
@@ -1820,7 +1824,7 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref: this.setCalcitePopoverEl }, h("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-            ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this })));
+            ref: this.setCalciteTimePickerEl })), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null));
     }
     renderToggleIcon(open) {
         return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
@@ -1848,6 +1852,8 @@ const InputTimePicker = /*@__PURE__*/ proxyCustomElement(class InputTimePicker e
         "readOnly": [516, "read-only"],
         "messageOverrides": [1040],
         "messages": [1040],
+        "validationMessage": [1, "validation-message"],
+        "validationIcon": [8, "validation-icon"],
         "name": [1],
         "numberingSystem": [1, "numbering-system"],
         "required": [516],
@@ -1876,7 +1882,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["calcite-input-time-picker", "calcite-action", "calcite-icon", "calcite-input-text", "calcite-loader", "calcite-popover", "calcite-progress", "calcite-time-picker"];
+    const components = ["calcite-input-time-picker", "calcite-action", "calcite-icon", "calcite-input-message", "calcite-input-text", "calcite-loader", "calcite-popover", "calcite-progress", "calcite-time-picker"];
     components.forEach(tagName => { switch (tagName) {
         case "calcite-input-time-picker":
             if (!customElements.get(tagName)) {
@@ -1885,10 +1891,15 @@ function defineCustomElement$1() {
             break;
         case "calcite-action":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-input-message":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }