@esri/calcite-components 2.13.0 → 2.14.0-next.1

package/dist/cjs/calcite-inline-editable.cjs.entry.js

@@ -1,25 +1,25 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const label = require('./label-4cec1587.js');
-const loadable = require('./loadable-1e343f4a.js');
-const locale = require('./locale-783be19a.js');
-const observers = require('./observers-dc37fb24.js');
-const t9n = require('./t9n-5f0809e3.js');
-require('./guid-7487a6a8.js');
-require('./resources-8d0a3a55.js');
-require('./component-25eaec79.js');
-require('./browser-b9024aa0.js');
-require('./key-8032a9dc.js');
+const index = require('./index-fa8af6d4.js');
+const interactive = require('./interactive-cad47537.js');
+const label = require('./label-818df254.js');
+const loadable = require('./loadable-3b4436ea.js');
+const locale = require('./locale-c8a9eaf0.js');
+const t9n = require('./t9n-386452e2.js');
+const dom = require('./dom-c64d16b4.js');
+require('./component-7ca6ac5e.js');
+require('./browser-39ff1e63.js');
+require('./key-cae77b35.js');
+require('./observers-d4deb7de.js');
+require('./guid-fd15b830.js');
+require('./resources-d4d76af1.js');
 
 const CSS = {
     wrapper: "wrapper",
@@ -40,7 +40,21 @@ const InlineEditable = class {
         this.calciteInlineEditableEditCancel = index.createEvent(this, "calciteInlineEditableEditCancel", 6);
         this.calciteInlineEditableEditConfirm = index.createEvent(this, "calciteInlineEditableEditConfirm", 6);
         this.calciteInternalInlineEditableEnableEditingChange = index.createEvent(this, "calciteInternalInlineEditableEnableEditingChange", 6);
-        this.mutationObserver = observers.createObserver("mutation", () => this.mutationObserverCallback());
+        //--------------------------------------------------------------------------
+        //
+        //  Private Methods
+        //
+        //--------------------------------------------------------------------------
+        this.handleDefaultSlotChange = (event) => {
+            const inputElement = dom.slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-input"))[0];
+            this.inputElement = inputElement;
+            if (!inputElement) {
+                return;
+            }
+            inputElement.disabled = this.disabled;
+            inputElement.label = inputElement.label || label.getLabelText(this);
+            this.scale = this.scale || this.inputElement?.scale;
+        };
         this.enableEditing = () => {
             this.valuePriorToEditing = this.inputElement?.value;
             this.editingEnabled = true;
@@ -148,8 +162,6 @@ const InlineEditable = class {
         label.connectLabel(this);
         locale.connectLocalized(this);
         t9n.connectMessages(this);
-        this.mutationObserver?.observe(this.el, { childList: true });
-        this.mutationObserverCallback();
     }
     async componentWillLoad() {
         loadable.setUpLoadableComponent(this);
@@ -162,18 +174,17 @@ const InlineEditable = class {
         label.disconnectLabel(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
-        this.mutationObserver?.disconnect();
     }
     componentDidRender() {
         interactive.updateHostInteraction(this);
     }
     render() {
-        return (index.h(interactive.InteractiveContainer, { key: '2b20c0c889e02709ab25fed13afe8cc03a0ad5a5', disabled: this.disabled }, index.h("div", { key: '31a6ae689e94a21c34718d848e43e7e848c82c33', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, index.h("div", { key: '21d48b4543d362c8253987aa04aa88b91dcbebd2', class: CSS.inputWrapper }, index.h("slot", { key: '1b0e62cefa8959014d776a55e882d89c1038d72e' })), index.h("div", { key: 'c10288b692a896c7d4a924fb3a99d5d1a0b8b655', class: CSS.controlsWrapper }, index.h("calcite-button", { key: '7b8312b37c3e1aa9e07b6cbad9f116c0e3b63438', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+        return (index.h(interactive.InteractiveContainer, { key: '47aba29a11e02b4397e7000f87b4fd963a3e8455', disabled: this.disabled }, index.h("div", { key: '16e546006242b0e18ef1ff8dea5c2a4fa2e2325e', class: CSS.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, index.h("div", { key: '173571cae937a972b47bee08b2dd8d7c9e6aff39', class: CSS.inputWrapper }, index.h("slot", { key: '1d1ec5c1d142093ff9c5585111707233ff5f1d88', onSlotchange: this.handleDefaultSlotChange })), index.h("div", { key: '3ede5ac03a835a485d5d8794b8b37c17c92526e9', class: CSS.controlsWrapper }, index.h("calcite-button", { key: '15ef87ec641f62f9fc8e2bb4ff5e750c9152a61c', appearance: "transparent", class: CSS.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button" }), this.shouldShowControls && [
-            index.h("div", { key: '96dc366959dff0b01f2b6720d04137d978b480ba', class: CSS.cancelEditingButtonWrapper }, index.h("calcite-button", { key: '74263d601b8f410497061c2a61ad9a7cc0950651', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-            index.h("calcite-button", { key: 'b6b0853810cb99eb88c908487078cc74e05f48bc', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
+            index.h("div", { key: 'fc37081fd7ba722a4d2f30d3a3dc91b4a6adb127', class: CSS.cancelEditingButtonWrapper }, index.h("calcite-button", { key: '7e3e3ff26034d053d7994b0fedf4c2dc2991312b', appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+            index.h("calcite-button", { key: 'e6d5fd66a37b89c83e700bd62616f705380d0515', appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
         ]))));
     }
     //--------------------------------------------------------------------------
@@ -199,29 +210,9 @@ const InlineEditable = class {
         await loadable.componentFocusable(this);
         this.el?.focus();
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    mutationObserverCallback() {
-        this.updateSlottedInput();
-        this.scale = this.scale || this.inputElement?.scale;
-    }
     onLabelClick() {
         this.setFocus();
     }
-    updateSlottedInput() {
-        const inputElement = dom.getSlotted(this.el, {
-            matches: "calcite-input",
-        });
-        this.inputElement = inputElement;
-        if (!inputElement) {
-            return;
-        }
-        this.inputElement.disabled = this.disabled;
-        this.inputElement.label = this.inputElement.label || label.getLabelText(this);
-    }
     get shouldShowControls() {
         return this.editingEnabled && this.controls;
     }

package/dist/cjs/calcite-inline-editable.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"calcite-inline-editable.entry.cjs.js","mappings":"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","names":["createObserver","connectLabel","connectLocalized","connectMessages","setUpLoadableComponent","setUpMessages","setComponentLoaded","disconnectLabel","disconnectLocalized","disconnectMessages","updateHostInteraction","h","InteractiveContainer","updateMessages","componentFocusable","getSlotted","getLabelText"],"sources":["src/components/inline-editable/resources.ts","src/components/inline-editable/inline-editable.scss?tag=calcite-inline-editable&encapsulation=shadow","src/components/inline-editable/inline-editable.tsx"],"sourcesContent":["export const CSS = {\n  wrapper: \"wrapper\",\n  confirmChangesButton: \"confirm-changes-button\",\n  cancelEditingButton: \"cancel-editing-button\",\n  inputWrapper: \"input-wrapper\",\n  cancelEditingButtonWrapper: \"cancel-editing-button-wrapper\",\n  enableEditingButton: \"enable-editing-button\",\n  controlsWrapper: \"controls-wrapper\",\n};\n",":host {\n  @apply block;\n}\n\n:host([scale=\"s\"]) {\n  .controls-wrapper {\n    @apply h-6;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .controls-wrapper {\n    @apply h-8;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .controls-wrapper {\n    @apply h-11;\n  }\n}\n\n:host(:not([editing-enabled]):not([disabled])) {\n  .wrapper {\n    &:hover {\n      @apply bg-foreground-2;\n    }\n  }\n}\n\n.wrapper {\n  @apply bg-foreground-1\n    transition-default\n    box-border\n    flex\n    justify-between;\n\n  .input-wrapper {\n    @apply flex-1;\n  }\n}\n\n.controls-wrapper {\n  @apply flex;\n}\n\n@include disabled() {\n  .cancel-editing-button-wrapper {\n    @apply border-color-2;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport { getSlotted } from \"../../utils/dom\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport { createObserver } from \"../../utils/observers\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { InlineEditableMessages } from \"./assets/inline-editable/t9n\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-input`.\n */\n@Component({\n  tag: \"calcite-inline-editable\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  styleUrl: \"inline-editable.scss\",\n  assetsDirs: [\"assets\"],\n})\nexport class InlineEditable\n  implements\n    InteractiveComponent,\n    LabelableComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Props\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  @Watch(\"disabled\")\n  disabledWatcher(disabled: boolean): void {\n    if (this.inputElement) {\n      this.inputElement.disabled = disabled;\n    }\n  }\n\n  /**\n   * When `true`, inline editing is enabled on the component.\n   */\n  @Prop({ mutable: true, reflect: true }) editingEnabled = false;\n\n  @Watch(\"editingEnabled\")\n  editingEnabledWatcher(newValue: boolean, oldValue: boolean): void {\n    if (this.inputElement) {\n      this.inputElement.editingEnabled = newValue;\n    }\n    if (!newValue && !!oldValue) {\n      this.shouldEmitCancel = true;\n    }\n  }\n\n  /** When `true`, a busy indicator is displayed. */\n  @Prop({ mutable: true, reflect: true }) loading = false;\n\n  /** When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. */\n  @Prop({ reflect: true }) controls = false;\n\n  /** Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale. */\n  @Prop({ reflect: true, mutable: true }) scale: Scale;\n\n  /** Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. */\n  @Prop() afterConfirm: () => Promise<void>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: InlineEditableMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<InlineEditableMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback() {\n    connectLabel(this);\n    connectLocalized(this);\n    connectMessages(this);\n    this.mutationObserver?.observe(this.el, { childList: true });\n    this.mutationObserverCallback();\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback() {\n    disconnectLabel(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n    this.mutationObserver?.disconnect();\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <div\n          class={CSS.wrapper}\n          onClick={this.enableEditingHandler}\n          onKeyDown={this.escapeKeyHandler}\n        >\n          <div class={CSS.inputWrapper}>\n            <slot />\n          </div>\n          <div class={CSS.controlsWrapper}>\n            <calcite-button\n              appearance=\"transparent\"\n              class={CSS.enableEditingButton}\n              disabled={this.disabled}\n              iconStart=\"pencil\"\n              kind=\"neutral\"\n              label={this.messages.enableEditing}\n              onClick={this.enableEditingHandler}\n              ref={(el) => (this.enableEditingButton = el)}\n              scale={this.scale}\n              style={{\n                opacity: this.editingEnabled ? \"0\" : \"1\",\n                width: this.editingEnabled ? \"0\" : \"inherit\",\n              }}\n              type=\"button\"\n            />\n            {this.shouldShowControls && [\n              <div class={CSS.cancelEditingButtonWrapper}>\n                <calcite-button\n                  appearance=\"transparent\"\n                  class={CSS.cancelEditingButton}\n                  disabled={this.disabled}\n                  iconStart=\"x\"\n                  kind=\"neutral\"\n                  label={this.messages.cancelEditing}\n                  onClick={this.cancelEditingHandler}\n                  ref={(el) => (this.cancelEditingButton = el)}\n                  scale={this.scale}\n                  type=\"button\"\n                />\n              </div>,\n              <calcite-button\n                appearance=\"solid\"\n                class={CSS.confirmChangesButton}\n                disabled={this.disabled}\n                iconStart=\"check\"\n                kind=\"brand\"\n                label={this.messages.confirmChanges}\n                loading={this.loading}\n                onClick={this.confirmChangesHandler}\n                ref={(el) => (this.confirmEditingButton = el)}\n                scale={this.scale}\n                type=\"button\"\n              />,\n            ]}\n          </div>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits when the component's \"cancel editing\" button is pressed.\n   */\n  @Event({ cancelable: false }) calciteInlineEditableEditCancel: EventEmitter<void>;\n\n  /**\n   * Emits when the component's \"confirm edits\" button is pressed.\n   */\n  @Event({ cancelable: false }) calciteInlineEditableEditConfirm: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalInlineEditableEnableEditingChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalInputBlur\")\n  blurHandler(): void {\n    if (!this.controls) {\n      this.disableEditing();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteInlineEditableElement;\n\n  private inputElement: HTMLCalciteInputElement;\n\n  private valuePriorToEditing: string;\n\n  private shouldEmitCancel: boolean;\n\n  private enableEditingButton: HTMLCalciteButtonElement;\n\n  private cancelEditingButton: HTMLCalciteButtonElement;\n\n  private confirmEditingButton: HTMLCalciteButtonElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  mutationObserver = createObserver(\"mutation\", () => this.mutationObserverCallback());\n\n  @State() defaultMessages: InlineEditableMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  mutationObserverCallback(): void {\n    this.updateSlottedInput();\n    this.scale = this.scale || this.inputElement?.scale;\n  }\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  updateSlottedInput(): void {\n    const inputElement: HTMLCalciteInputElement = getSlotted(this.el, {\n      matches: \"calcite-input\",\n    });\n\n    this.inputElement = inputElement;\n\n    if (!inputElement) {\n      return;\n    }\n\n    this.inputElement.disabled = this.disabled;\n    this.inputElement.label = this.inputElement.label || getLabelText(this);\n  }\n\n  private get shouldShowControls(): boolean {\n    return this.editingEnabled && this.controls;\n  }\n\n  private enableEditing = () => {\n    this.valuePriorToEditing = this.inputElement?.value;\n    this.editingEnabled = true;\n    this.inputElement?.setFocus();\n    this.calciteInternalInlineEditableEnableEditingChange.emit();\n  };\n\n  private disableEditing = () => {\n    this.editingEnabled = false;\n  };\n\n  private cancelEditing = () => {\n    if (this.inputElement) {\n      this.inputElement.value = this.valuePriorToEditing;\n    }\n    this.disableEditing();\n    this.enableEditingButton.setFocus();\n    if (!this.editingEnabled && !!this.shouldEmitCancel) {\n      this.calciteInlineEditableEditCancel.emit();\n    }\n  };\n\n  private escapeKeyHandler = async (event: KeyboardEvent) => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      this.cancelEditing();\n    }\n\n    if (event.key === \"Tab\" && this.shouldShowControls) {\n      if (!event.shiftKey && event.target === this.inputElement) {\n        event.preventDefault();\n        this.cancelEditingButton.setFocus();\n      }\n      if (!!event.shiftKey && event.target === this.cancelEditingButton) {\n        event.preventDefault();\n        this.inputElement?.setFocus();\n      }\n    }\n  };\n\n  private cancelEditingHandler = async (event: MouseEvent) => {\n    event.preventDefault();\n    this.cancelEditing();\n  };\n\n  private enableEditingHandler = async (event: MouseEvent) => {\n    if (\n      this.disabled ||\n      event.target === this.cancelEditingButton ||\n      event.target === this.confirmEditingButton\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    if (!this.editingEnabled) {\n      this.enableEditing();\n    }\n  };\n\n  private confirmChangesHandler = async (event: MouseEvent) => {\n    event.preventDefault();\n    this.calciteInlineEditableEditConfirm.emit();\n    try {\n      if (this.afterConfirm) {\n        this.loading = true;\n        await this.afterConfirm();\n        this.disableEditing();\n        this.enableEditingButton.setFocus();\n      }\n    } catch (error) {\n      // we handle error in finally block\n    } finally {\n      this.loading = false;\n    }\n  };\n}\n"],"version":3}
+{"file":"calcite-inline-editable.entry.cjs.js","mappings":"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","names":["slotChangeGetAssignedElements","getLabelText","connectLabel","connectLocalized","connectMessages","setUpLoadableComponent","setUpMessages","setComponentLoaded","disconnectLabel","disconnectLocalized","disconnectMessages","updateHostInteraction","h","InteractiveContainer","updateMessages","componentFocusable"],"sources":["src/components/inline-editable/resources.ts","src/components/inline-editable/inline-editable.scss?tag=calcite-inline-editable&encapsulation=shadow","src/components/inline-editable/inline-editable.tsx"],"sourcesContent":["export const CSS = {\n  wrapper: \"wrapper\",\n  confirmChangesButton: \"confirm-changes-button\",\n  cancelEditingButton: \"cancel-editing-button\",\n  inputWrapper: \"input-wrapper\",\n  cancelEditingButtonWrapper: \"cancel-editing-button-wrapper\",\n  enableEditingButton: \"enable-editing-button\",\n  controlsWrapper: \"controls-wrapper\",\n};\n",":host {\n  @apply block;\n}\n\n:host([scale=\"s\"]) {\n  .controls-wrapper {\n    @apply h-6;\n  }\n}\n\n:host([scale=\"m\"]) {\n  .controls-wrapper {\n    @apply h-8;\n  }\n}\n\n:host([scale=\"l\"]) {\n  .controls-wrapper {\n    @apply h-11;\n  }\n}\n\n:host(:not([editing-enabled]):not([disabled])) {\n  .wrapper {\n    &:hover {\n      @apply bg-foreground-2;\n    }\n  }\n}\n\n.wrapper {\n  @apply bg-foreground-1\n    transition-default\n    box-border\n    flex\n    justify-between;\n\n  .input-wrapper {\n    @apply flex-1;\n  }\n}\n\n.controls-wrapper {\n  @apply flex;\n}\n\n@include disabled() {\n  .cancel-editing-button-wrapper {\n    @apply border-color-2;\n  }\n}\n\n@include base-component();\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Listen,\n  Method,\n  Prop,\n  State,\n  VNode,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  InteractiveComponent,\n  InteractiveContainer,\n  updateHostInteraction,\n} from \"../../utils/interactive\";\nimport { connectLabel, disconnectLabel, getLabelText, LabelableComponent } from \"../../utils/label\";\nimport {\n  componentFocusable,\n  LoadableComponent,\n  setComponentLoaded,\n  setUpLoadableComponent,\n} from \"../../utils/loadable\";\nimport { connectLocalized, disconnectLocalized, LocalizedComponent } from \"../../utils/locale\";\nimport {\n  connectMessages,\n  disconnectMessages,\n  setUpMessages,\n  T9nComponent,\n  updateMessages,\n} from \"../../utils/t9n\";\nimport { Scale } from \"../interfaces\";\nimport { slotChangeGetAssignedElements } from \"../../utils/dom\";\nimport { InlineEditableMessages } from \"./assets/inline-editable/t9n\";\nimport { CSS } from \"./resources\";\n\n/**\n * @slot - A slot for adding a `calcite-input`.\n */\n@Component({\n  tag: \"calcite-inline-editable\",\n  shadow: {\n    delegatesFocus: true,\n  },\n  styleUrl: \"inline-editable.scss\",\n  assetsDirs: [\"assets\"],\n})\nexport class InlineEditable\n  implements\n    InteractiveComponent,\n    LabelableComponent,\n    LoadableComponent,\n    LocalizedComponent,\n    T9nComponent\n{\n  //--------------------------------------------------------------------------\n  //\n  //  Props\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * When `true`, interaction is prevented and the component is displayed with lower opacity.\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  @Watch(\"disabled\")\n  disabledWatcher(disabled: boolean): void {\n    if (this.inputElement) {\n      this.inputElement.disabled = disabled;\n    }\n  }\n\n  /**\n   * When `true`, inline editing is enabled on the component.\n   */\n  @Prop({ mutable: true, reflect: true }) editingEnabled = false;\n\n  @Watch(\"editingEnabled\")\n  editingEnabledWatcher(newValue: boolean, oldValue: boolean): void {\n    if (this.inputElement) {\n      this.inputElement.editingEnabled = newValue;\n    }\n    if (!newValue && !!oldValue) {\n      this.shouldEmitCancel = true;\n    }\n  }\n\n  /** When `true`, a busy indicator is displayed. */\n  @Prop({ mutable: true, reflect: true }) loading = false;\n\n  /** When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component. */\n  @Prop({ reflect: true }) controls = false;\n\n  /** Specifies the size of the component. Defaults to the scale of the wrapped `calcite-input` or the scale of the closest wrapping component with a set scale. */\n  @Prop({ reflect: true, mutable: true }) scale: Scale;\n\n  /** Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. */\n  @Prop() afterConfirm: () => Promise<void>;\n\n  /**\n   * Made into a prop for testing purposes only\n   *\n   * @internal\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messages: InlineEditableMessages;\n\n  /**\n   * Use this property to override individual strings used by the component.\n   */\n  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module\n  @Prop({ mutable: true }) messageOverrides: Partial<InlineEditableMessages>;\n\n  @Watch(\"messageOverrides\")\n  onMessagesChange(): void {\n    /* wired up by t9n util */\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  connectedCallback() {\n    connectLabel(this);\n    connectLocalized(this);\n    connectMessages(this);\n  }\n\n  async componentWillLoad(): Promise<void> {\n    setUpLoadableComponent(this);\n    await setUpMessages(this);\n  }\n\n  componentDidLoad(): void {\n    setComponentLoaded(this);\n  }\n\n  disconnectedCallback() {\n    disconnectLabel(this);\n    disconnectLocalized(this);\n    disconnectMessages(this);\n  }\n\n  componentDidRender(): void {\n    updateHostInteraction(this);\n  }\n\n  render(): VNode {\n    return (\n      <InteractiveContainer disabled={this.disabled}>\n        <div\n          class={CSS.wrapper}\n          onClick={this.enableEditingHandler}\n          onKeyDown={this.escapeKeyHandler}\n        >\n          <div class={CSS.inputWrapper}>\n            <slot onSlotchange={this.handleDefaultSlotChange} />\n          </div>\n          <div class={CSS.controlsWrapper}>\n            <calcite-button\n              appearance=\"transparent\"\n              class={CSS.enableEditingButton}\n              disabled={this.disabled}\n              iconStart=\"pencil\"\n              kind=\"neutral\"\n              label={this.messages.enableEditing}\n              onClick={this.enableEditingHandler}\n              ref={(el) => (this.enableEditingButton = el)}\n              scale={this.scale}\n              style={{\n                opacity: this.editingEnabled ? \"0\" : \"1\",\n                width: this.editingEnabled ? \"0\" : \"inherit\",\n              }}\n              type=\"button\"\n            />\n            {this.shouldShowControls && [\n              <div class={CSS.cancelEditingButtonWrapper}>\n                <calcite-button\n                  appearance=\"transparent\"\n                  class={CSS.cancelEditingButton}\n                  disabled={this.disabled}\n                  iconStart=\"x\"\n                  kind=\"neutral\"\n                  label={this.messages.cancelEditing}\n                  onClick={this.cancelEditingHandler}\n                  ref={(el) => (this.cancelEditingButton = el)}\n                  scale={this.scale}\n                  type=\"button\"\n                />\n              </div>,\n              <calcite-button\n                appearance=\"solid\"\n                class={CSS.confirmChangesButton}\n                disabled={this.disabled}\n                iconStart=\"check\"\n                kind=\"brand\"\n                label={this.messages.confirmChanges}\n                loading={this.loading}\n                onClick={this.confirmChangesHandler}\n                ref={(el) => (this.confirmEditingButton = el)}\n                scale={this.scale}\n                type=\"button\"\n              />,\n            ]}\n          </div>\n        </div>\n      </InteractiveContainer>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Events\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Emits when the component's \"cancel editing\" button is pressed.\n   */\n  @Event({ cancelable: false }) calciteInlineEditableEditCancel: EventEmitter<void>;\n\n  /**\n   * Emits when the component's \"confirm edits\" button is pressed.\n   */\n  @Event({ cancelable: false }) calciteInlineEditableEditConfirm: EventEmitter<void>;\n\n  /**\n   * @internal\n   */\n  @Event({ cancelable: false })\n  calciteInternalInlineEditableEnableEditingChange: EventEmitter<void>;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Event Listeners\n  //\n  //--------------------------------------------------------------------------\n\n  @Listen(\"calciteInternalInputBlur\")\n  blurHandler(): void {\n    if (!this.controls) {\n      this.disableEditing();\n    }\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private State\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteInlineEditableElement;\n\n  private inputElement: HTMLCalciteInputElement;\n\n  private valuePriorToEditing: string;\n\n  private shouldEmitCancel: boolean;\n\n  private enableEditingButton: HTMLCalciteButtonElement;\n\n  private cancelEditingButton: HTMLCalciteButtonElement;\n\n  private confirmEditingButton: HTMLCalciteButtonElement;\n\n  labelEl: HTMLCalciteLabelElement;\n\n  @State() defaultMessages: InlineEditableMessages;\n\n  @State() effectiveLocale: string;\n\n  @Watch(\"effectiveLocale\")\n  effectiveLocaleChange(): void {\n    updateMessages(this, this.effectiveLocale);\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Public Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /** Sets focus on the component. */\n  @Method()\n  async setFocus(): Promise<void> {\n    await componentFocusable(this);\n\n    this.el?.focus();\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  handleDefaultSlotChange = (event: Event): void => {\n    const inputElement = slotChangeGetAssignedElements(event).filter(\n      (el): el is HTMLCalciteInputElement => el.matches(\"calcite-input\"),\n    )[0];\n\n    this.inputElement = inputElement;\n\n    if (!inputElement) {\n      return;\n    }\n\n    inputElement.disabled = this.disabled;\n    inputElement.label = inputElement.label || getLabelText(this);\n    this.scale = this.scale || this.inputElement?.scale;\n  };\n\n  onLabelClick(): void {\n    this.setFocus();\n  }\n\n  private get shouldShowControls(): boolean {\n    return this.editingEnabled && this.controls;\n  }\n\n  private enableEditing = () => {\n    this.valuePriorToEditing = this.inputElement?.value;\n    this.editingEnabled = true;\n    this.inputElement?.setFocus();\n    this.calciteInternalInlineEditableEnableEditingChange.emit();\n  };\n\n  private disableEditing = () => {\n    this.editingEnabled = false;\n  };\n\n  private cancelEditing = () => {\n    if (this.inputElement) {\n      this.inputElement.value = this.valuePriorToEditing;\n    }\n    this.disableEditing();\n    this.enableEditingButton.setFocus();\n    if (!this.editingEnabled && !!this.shouldEmitCancel) {\n      this.calciteInlineEditableEditCancel.emit();\n    }\n  };\n\n  private escapeKeyHandler = async (event: KeyboardEvent) => {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    if (event.key === \"Escape\") {\n      event.preventDefault();\n      this.cancelEditing();\n    }\n\n    if (event.key === \"Tab\" && this.shouldShowControls) {\n      if (!event.shiftKey && event.target === this.inputElement) {\n        event.preventDefault();\n        this.cancelEditingButton.setFocus();\n      }\n      if (!!event.shiftKey && event.target === this.cancelEditingButton) {\n        event.preventDefault();\n        this.inputElement?.setFocus();\n      }\n    }\n  };\n\n  private cancelEditingHandler = async (event: MouseEvent) => {\n    event.preventDefault();\n    this.cancelEditing();\n  };\n\n  private enableEditingHandler = async (event: MouseEvent) => {\n    if (\n      this.disabled ||\n      event.target === this.cancelEditingButton ||\n      event.target === this.confirmEditingButton\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    if (!this.editingEnabled) {\n      this.enableEditing();\n    }\n  };\n\n  private confirmChangesHandler = async (event: MouseEvent) => {\n    event.preventDefault();\n    this.calciteInlineEditableEditConfirm.emit();\n    try {\n      if (this.afterConfirm) {\n        this.loading = true;\n        await this.afterConfirm();\n        this.disableEditing();\n        this.enableEditingButton.setFocus();\n      }\n    } catch (error) {\n      // we handle error in finally block\n    } finally {\n      this.loading = false;\n    }\n  };\n}\n"],"version":3}

package/dist/cjs/calcite-input-date-picker.cjs.entry.js

@@ -1,34 +1,34 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const utils = require('./utils-88cf8d18.js');
-const dom = require('./dom-401c47fa.js');
-const floatingUi = require('./floating-ui-4a04f844.js');
-const form = require('./form-26bde25c.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const key = require('./key-8032a9dc.js');
-const label = require('./label-4cec1587.js');
-const loadable = require('./loadable-1e343f4a.js');
-const locale = require('./locale-783be19a.js');
-const openCloseComponent = require('./openCloseComponent-56b018ff.js');
-const t9n = require('./t9n-5f0809e3.js');
-const focusTrapComponent = require('./focusTrapComponent-f0b8db52.js');
-const guid = require('./guid-7487a6a8.js');
-const component = require('./component-25eaec79.js');
-const Validation = require('./Validation-64dfab90.js');
-const input = require('./input-3dd5805a.js');
-const browser = require('./browser-b9024aa0.js');
-require('./resources-8d0a3a55.js');
-require('./debounce-f0f19c37.js');
-require('./observers-dc37fb24.js');
-require('./config-86d6376a.js');
+const index = require('./index-fa8af6d4.js');
+const utils = require('./utils-e3680f62.js');
+const dom = require('./dom-c64d16b4.js');
+const floatingUi = require('./floating-ui-019b6fb6.js');
+const form = require('./form-9fffc18b.js');
+const interactive = require('./interactive-cad47537.js');
+const key = require('./key-cae77b35.js');
+const label = require('./label-818df254.js');
+const loadable = require('./loadable-3b4436ea.js');
+const locale = require('./locale-c8a9eaf0.js');
+const openCloseComponent = require('./openCloseComponent-ad632ba8.js');
+const t9n = require('./t9n-386452e2.js');
+const focusTrapComponent = require('./focusTrapComponent-a7465f5d.js');
+const guid = require('./guid-fd15b830.js');
+const component = require('./component-7ca6ac5e.js');
+const Validation = require('./Validation-9804753d.js');
+const input = require('./input-bc0b5fd1.js');
+const browser = require('./browser-39ff1e63.js');
+require('./resources-d4d76af1.js');
+require('./debounce-45353486.js');
+require('./observers-d4deb7de.js');
+require('./config-17be57de.js');
 
 /**
  * Specifies if an ISO string date (YYYY-MM-DD) has two digit year.
@@ -541,23 +541,23 @@ const InputDatePicker = class {
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (index.h(index.Host, { key: 'b31ae837415083aa63451c5f32b78253b1d6af1e', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '7315a0e5773a1ef96c00b48b138c8afd50aca28a', disabled: this.disabled }, this.localeData && (index.h("div", { key: '022f86001938e2994ab523b30a2e3cb379a550b4', class: CSS.inputContainer }, index.h("div", { key: '4a3add7824ea7ec41b75ddd5e9b847afa1ca0708', class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, index.h("calcite-input-text", { key: 'd415c8d890333f76793fc5f804111c0a72f4d3c8', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-errormessage": IDS.validationMessage, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), class: {
+        return (index.h(index.Host, { key: 'af6a411d495acdf0b96d6aef7fcbc4a16dbee824', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '276559025b59e684be33145fdc1ebb54fc497905', disabled: this.disabled }, this.localeData && (index.h("div", { key: '929abf4e68279ff6e121864678bb8256c35f3fac', class: CSS.inputContainer }, index.h("div", { key: '0b6c5aff1ee9c34f3384a756e24e0fd42402ff20', class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, index.h("calcite-input-text", { key: '88fc779558736b876d689c81f54625b12b2b3053', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-errormessage": IDS.validationMessage, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), class: {
                 [CSS.input]: true,
                 [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "start"), index.h("span", { key: '7d5b86f35bde88b757f9a46485ce37bf8317ac88', "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), index.h("div", { key: '8d38fc155dcc3851865e699645f64e3278519f02', "aria-hidden": dom.toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), index.h("span", { key: '63defeb887ec40a1a1444047a574b150530db269', "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), index.h("div", { key: '29d287235f5f8080420470ab82800c3fc62d687a', "aria-hidden": dom.toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
                 [CSS.menu]: true,
                 [CSS.menuActive]: this.open,
-            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, index.h("div", { key: '92b37e521a0d2e0e8fb30ca129a53e75d26e9dd6', class: {
+            }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, index.h("div", { key: '2c3591bab4ba0dddae4d212e450d7f50ad8c08fc', class: {
                 [CSS.calendarWrapper]: true,
                 [CSS.calendarWrapperEnd]: this.focusedInput === "end",
                 [floatingUi.FloatingCSS.animation]: true,
                 [floatingUi.FloatingCSS.animationActive]: this.open,
-            }, ref: this.setTransitionEl }, index.h("calcite-date-picker", { key: '35aa39e5552eff762bb58368b4cbe1069692ee38', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (index.h("div", { key: '386b0a687fc16a4f96ef9cc199aca653ab90071b', class: CSS.horizontalArrowContainer }, index.h("calcite-icon", { key: '65b1d5b9e7b77f524ef40cd1f0efda3776db33e1', flipRtl: true, icon: "arrow-right", scale: component.getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (index.h("div", { key: '50b0b98f4d51c5866557ab5691692a42704d08f2', class: CSS.verticalArrowContainer }, index.h("calcite-icon", { key: '48758a61b800c61109b492d77ca468519ad65227', icon: "arrow-down", scale: component.getIconScale(this.scale) }))), this.range && (index.h("div", { key: 'af12058d6a8d299fd988ae4ac7fc0422d05342c6', class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, index.h("calcite-input-text", { key: '38c68e0df3d516ea5b840a1a937d1af6d1c971b0', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-errormessage": IDS.validationMessage, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), class: {
+            }, ref: this.setTransitionEl }, index.h("calcite-date-picker", { key: 'c1c74964ba43e80365bd5e4774dbf9e353f28960', activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (index.h("div", { key: '2bdc3a8473b8e21ac202966ed8940216386a86dd', class: CSS.horizontalArrowContainer }, index.h("calcite-icon", { key: 'fd80a1723c5132f6ecb73b850c2f29906783dc2f', flipRtl: true, icon: "arrow-right", scale: component.getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (index.h("div", { key: '4bc93f2e6983024e186ec3deddf38d5e375940a6', class: CSS.verticalArrowContainer }, index.h("calcite-icon", { key: '7496a51302115c2ae7e5a4b67db033bcbfe190e4', icon: "arrow-down", scale: component.getIconScale(this.scale) }))), this.range && (index.h("div", { key: '6a4bca2721c6ee243175dccbd3e55ab30715599b', class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, index.h("calcite-input-text", { key: '095b3d8b969e616e87d5de66c884d7ea8c8231e6', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-errormessage": IDS.validationMessage, "aria-expanded": dom.toAriaBoolean(this.open), "aria-haspopup": "dialog", "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), class: {
                 [CSS.input]: true,
                 [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), index.h(form.HiddenFormInputSlot, { key: '65e98114397e07a95ccf82217412360be3a36d96', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), index.h(form.HiddenFormInputSlot, { key: 'b7c073ea8c135ee82bdb267701ad5c7fbea96af4', component: this }), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (

package/dist/cjs/calcite-input-message.cjs.entry.js

@@ -1,16 +1,16 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-require('./guid-7487a6a8.js');
-require('./resources-8d0a3a55.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+require('./guid-fd15b830.js');
+require('./resources-d4d76af1.js');
 
 const StatusIconDefaults = {
     valid: "check-circle",
@@ -42,7 +42,7 @@ const InputMessage = class {
     }
     render() {
         const hidden = this.el.hidden;
-        return (index.h(index.Host, { key: 'c7d1b37721cec28dee1020b81ff66dee7fc8bc44', "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), index.h("slot", { key: '7147d81e906765c154b4a61e31706a72c1ef3ae0' })));
+        return (index.h(index.Host, { key: '05928715ef3020928c4c862f0bf160d67c195fa3', "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), index.h("slot", { key: '7d30b28320f2a551dd6b006b9b7910d2bbcec2d3' })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/cjs/calcite-input-number.cjs.entry.js

@@ -1,28 +1,28 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.13.0
+ * v2.14.0-next.1
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-03561b9a.js');
-const dom = require('./dom-401c47fa.js');
-const form = require('./form-26bde25c.js');
-const interactive = require('./interactive-e27cd6e3.js');
-const key = require('./key-8032a9dc.js');
-const label = require('./label-4cec1587.js');
-const loadable = require('./loadable-1e343f4a.js');
-const locale = require('./locale-783be19a.js');
-const observers = require('./observers-dc37fb24.js');
-const resources = require('./resources-8d0a3a55.js');
-const t9n = require('./t9n-5f0809e3.js');
-const component = require('./component-25eaec79.js');
-const Validation = require('./Validation-64dfab90.js');
-const input = require('./input-3dd5805a.js');
-require('./guid-7487a6a8.js');
-require('./browser-b9024aa0.js');
+const index = require('./index-fa8af6d4.js');
+const dom = require('./dom-c64d16b4.js');
+const form = require('./form-9fffc18b.js');
+const interactive = require('./interactive-cad47537.js');
+const key = require('./key-cae77b35.js');
+const label = require('./label-818df254.js');
+const loadable = require('./loadable-3b4436ea.js');
+const locale = require('./locale-c8a9eaf0.js');
+const resources = require('./resources-d4d76af1.js');
+const t9n = require('./t9n-386452e2.js');
+const component = require('./component-7ca6ac5e.js');
+const Validation = require('./Validation-9804753d.js');
+const input = require('./input-bc0b5fd1.js');
+require('./guid-fd15b830.js');
+require('./browser-39ff1e63.js');
+require('./observers-d4deb7de.js');
 
 const CSS = {
     loader: "loader",
@@ -58,7 +58,6 @@ const InputNumber = class {
         this.calciteInputNumberInput = index.createEvent(this, "calciteInputNumberInput", 7);
         this.calciteInputNumberChange = index.createEvent(this, "calciteInputNumberChange", 6);
         this.previousValueOrigin = "initial";
-        this.mutationObserver = observers.createObserver("mutation", () => this.setDisabledAction());
         this.userChangedValue = false;
         //--------------------------------------------------------------------------
         //
@@ -394,9 +393,6 @@ const InputNumber = class {
     handleGlobalAttributesChanged() {
         index.forceUpdate(this);
     }
-    disabledWatcher() {
-        this.setDisabledAction();
-    }
     /** watcher to update number-to-string for max */
     maxWatcher() {
         this.maxString = this.max?.toString() || null;
@@ -456,8 +452,6 @@ const InputNumber = class {
         }
         label.connectLabel(this);
         form.connectForm(this);
-        this.mutationObserver?.observe(this.el, { childList: true });
-        this.setDisabledAction();
         this.el.addEventListener(form.internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     componentDidLoad() {
@@ -468,7 +462,6 @@ const InputNumber = class {
         form.disconnectForm(this);
         locale.disconnectLocalized(this);
         t9n.disconnectMessages(this);
-        this.mutationObserver?.disconnect();
         this.el.removeEventListener(form.internalHiddenInputInputEvent, this.onHiddenFormInputInput);
     }
     async componentWillLoad() {
@@ -552,22 +545,6 @@ const InputNumber = class {
     syncHiddenFormInput(input$1) {
         input.syncHiddenFormInput("number", this, input$1);
     }
-    setDisabledAction() {
-        const slottedActionEl = dom.getSlotted(this.el, "action");
-        if (!slottedActionEl) {
-            return;
-        }
-        if (this.disabled) {
-            if (slottedActionEl.getAttribute("disabled") == null) {
-                this.slottedActionElDisabledInternally = true;
-            }
-            slottedActionEl.setAttribute("disabled", "");
-        }
-        else if (this.slottedActionElDisabledInternally) {
-            slottedActionEl.removeAttribute("disabled");
-            this.slottedActionElDisabledInternally = false;
-        }
-    }
     normalizeValue(value) {
         return locale.isValidNumber(value) ? value : "";
     }
@@ -583,27 +560,27 @@ const InputNumber = class {
     // --------------------------------------------------------------------------
     render() {
         const dir = dom.getElementDir(this.el);
-        const loader = (index.h("div", { key: 'cc2f276e80dee457d8a8f38e06d18967647e4591', class: CSS.loader }, index.h("calcite-progress", { key: '2764fc118ec3063a7e76e0738050fa7b3872018a', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (index.h("button", { key: '6bb6db58c8c20594f88c60f2d717ad9b4dfb9fe0', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '1746fe8d0a79b4516beb7574ba6b74b6a5070d81', icon: "x", scale: component.getIconScale(this.scale) })));
-        const iconEl = (index.h("calcite-icon", { key: '4d57c3fedac7bedd8f9397c4b276866ee5b7237f', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
+        const loader = (index.h("div", { key: '4c28e988c49955479975084969c3a5376cac03b9', class: CSS.loader }, index.h("calcite-progress", { key: '51f323bff54efb54a170a887f79cc9e0c6a06868', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (index.h("button", { key: '589418d620f7f3fba8da1971f7c93f0a2fde83ba', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '4cfb8c4ff1db1771e5dbefaa7f995873bdd3a351', icon: "x", scale: component.getIconScale(this.scale) })));
+        const iconEl = (index.h("calcite-icon", { key: '4821096b862a4a6baf98427476367937ef3c1bbc', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: component.getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (index.h("button", { key: 'c0e52d338c61d3d6f6349975751f6af707325db3', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (index.h("button", { key: 'f8bdc96985964f4a32cdd454fc5926241d64efe6', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '28697a2ed4b3581c5d190c86ef3d7ab1d70823f8', icon: "chevron-up", scale: component.getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (index.h("button", { key: '11f9db5af2916069d412089875d53fdea0b453c0', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '3dbd0525e4ddb69c7d89970bd6100aecbb4a53e1', icon: "chevron-up", scale: component.getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (index.h("button", { key: '69f669bd539e7b46ec773cfec092e3664a77f068', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: '1614213fecd0d957cda096df5ddf220bacc49dca', icon: "chevron-down", scale: component.getIconScale(this.scale) })));
-        const numberButtonsVertical = (index.h("div", { key: 'e8822b7270ea89e13ebf3703b6f271be512c6a9b', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = index.h("div", { key: '333318e5c2f5fbd0d307255c7a0a4eebde29b5c8', class: CSS.prefix }, this.prefixText);
-        const suffixText = index.h("div", { key: '4812a571237e8016e9d173036e663e91ef7df638', class: CSS.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, index.h("calcite-icon", { key: 'c73bb2a22ccc514dc695c2f6542ea2a0e6916f02', icon: "chevron-down", scale: component.getIconScale(this.scale) })));
+        const numberButtonsVertical = (index.h("div", { key: '849a047d01ede38a812f77bf8b6b1eebe1d7edd9', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = index.h("div", { key: '20c3378c06a26991c8ac78ea2a120c19a084edbb', class: CSS.prefix }, this.prefixText);
+        const suffixText = index.h("div", { key: '0cf3033ff36a91dd17ef40434ba1c9fe62b9febb', class: CSS.suffix }, this.suffixText);
         const childEl = (index.h("input", { "aria-errormessage": IDS.validationMessage, "aria-invalid": dom.toAriaBoolean(this.status === "invalid"), "aria-label": label.getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode") || "decimal", key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue }));
-        return (index.h(index.Host, { key: 'a765b9d4616c91517c512bf08511e7dd979ba8cc', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: 'b9ea4743c23e8dc2773cfb600b0e345797c3558d', disabled: this.disabled }, index.h("div", { key: '17dfcce5d569e546184d908cc595914d5aefe132', class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
+        return (index.h(index.Host, { key: 'b9e806f7c65f5d92bc4a018a484adf9a66d74228', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, index.h(interactive.InteractiveContainer, { key: '906a6414b83d2115eadf6d21bfc6fb0330fdc7c6', disabled: this.disabled }, index.h("div", { key: '3763dbeab91c7292ef301c33276b96953dd0946b', class: { [CSS.inputWrapper]: true, [resources.CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, index.h("div", { key: 'db2a55ec06a2418761f7a64c06b88680156870c3', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { key: '26fa02f076266dd8e4e9441d17b708994bac580d', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, index.h("slot", { key: 'cf216669a1ef119c5512515f014be59ee6c8121e', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, index.h("div", { key: '6d897beccf1d8ceb46c3f8f2c7c4e556127f6199', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), index.h("div", { key: '1090bfb3405e73e1ca514f487d3a723138ab235d', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, index.h("slot", { key: 'e116e08ae891a8a5eab0547f175a83d2740c675c', name: SLOTS.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, index.h(form.HiddenFormInputSlot, { key: 'efc80f0a385d1d56971473fde6862738cb06b446', component: this })), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, index.h(form.HiddenFormInputSlot, { key: '7bae52a05b87729eba3fa2edaf0e418aad5042a1', component: this })), this.validationMessage && this.status === "invalid" ? (index.h(Validation.Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return index.getElement(this); }
@@ -611,7 +588,6 @@ const InputNumber = class {
         "autofocus": ["handleGlobalAttributesChanged"],
         "enterkeyhint": ["handleGlobalAttributesChanged"],
         "inputmode": ["handleGlobalAttributesChanged"],
-        "disabled": ["disabledWatcher"],
         "max": ["maxWatcher"],
         "min": ["minWatcher"],
         "messageOverrides": ["onMessagesChange"],