@esri/calcite-components 1.0.0-next.573 → 1.0.0-next.576

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Host, h, Prop, Watch } from "@stencil/core";
 import { getElementProp, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-message/interfaces.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export var StatusIconDefaults;
 (function (StatusIconDefaults) {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, h, Host, Method, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-number/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export {};

package/dist/collection/components/input-number/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   loader: "loader",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { getElementDir, getElementProp, getSlotted, setRequestedIcon } from "../../utils/dom";

package/dist/collection/components/input-text/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   loader: "loader",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Host, h, Prop, Listen, Event, Method, Watch, State } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -16,8 +16,14 @@ export class InputTimePicker {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** The active state of the time input */
+    /**
+     * The active state of the time input
+     *
+     * @deprecated Use open instead.
+     */
     this.active = false;
+    /** When true, displays the `calcite-time-picker` component.*/
+    this.open = false;
     /** The disabled state of the time input */
     this.disabled = false;
     /**
@@ -60,14 +66,14 @@ export class InputTimePicker {
     //
     //--------------------------------------------------------------------------
     this.calciteInternalInputBlurHandler = () => {
-      this.active = false;
+      this.open = false;
       const shouldIncludeSeconds = this.shouldIncludeSeconds();
       const localizedInputValue = localizeTimeString(this.calciteInputEl.value, this.locale, shouldIncludeSeconds);
       this.setInputValue(localizedInputValue || localizeTimeString(this.value, this.locale, shouldIncludeSeconds));
     };
     this.calciteInternalInputFocusHandler = (event) => {
       if (!this.readOnly) {
-        this.active = true;
+        this.open = true;
         event.stopPropagation();
       }
     };
@@ -96,8 +102,8 @@ export class InputTimePicker {
           event.preventDefault();
         }
       }
-      if (key === "Escape" && this.active) {
-        this.active = false;
+      if (key === "Escape" && this.open) {
+        this.open = false;
         event.preventDefault();
       }
     };
@@ -156,16 +162,20 @@ export class InputTimePicker {
       }
     };
   }
-  activeHandler() {
+  activeHandler(value) {
+    this.open = value;
+  }
+  openHandler(value) {
+    this.active = value;
     if (this.disabled || this.readOnly) {
-      this.active = false;
+      this.open = false;
       return;
     }
     this.reposition();
   }
   handleDisabledAndReadOnlyChange(value) {
     if (!value) {
-      this.active = false;
+      this.open = false;
     }
   }
   localeWatcher(newLocale) {
@@ -186,13 +196,13 @@ export class InputTimePicker {
   timePickerBlurHandler(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.active = false;
+    this.open = false;
   }
   timePickerFocusHandler(event) {
     event.preventDefault();
     event.stopPropagation();
     if (!this.readOnly) {
-      this.active = true;
+      this.open = true;
     }
   }
   // --------------------------------------------------------------------------
@@ -222,11 +232,18 @@ export class InputTimePicker {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    const { active, open } = this;
     if (this.value) {
       this.setValue({ value: isValidTime(this.value) ? this.value : undefined, origin: "loading" });
     }
     connectLabel(this);
     connectForm(this);
+    if (open) {
+      this.active = open;
+    }
+    else if (active) {
+      this.open = active;
+    }
   }
   componentDidLoad() {
     this.setInputValue(this.localizedValue);
@@ -248,7 +265,7 @@ export class InputTimePicker {
     return (h(Host, { onKeyDown: this.keyDownHandler },
       h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" },
         h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })),
-      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true },
+      h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.open, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true },
         h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })),
       h(HiddenFormInputSlot, { component: this })));
   }
@@ -272,13 +289,34 @@ export class InputTimePicker {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use open instead."
+          }],
         "text": "The active state of the time input"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "open": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, displays the `calcite-time-picker` component."
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -724,6 +762,9 @@ export class InputTimePicker {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "activeHandler"
+    }, {
+      "propName": "open",
+      "methodName": "openHandler"
     }, {
       "propName": "disabled",
       "methodName": "handleDisabledAndReadOnlyChange"

package/dist/collection/components/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export {};

package/dist/collection/components/label/label.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, h, Prop, Host } from "@stencil/core";
 import { labelDisconnectedEvent, labelConnectedEvent } from "../../utils/label";

package/dist/collection/components/label/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/link/link.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, h, Host, Method, Prop } from "@stencil/core";
 import { focusElement, getElementDir } from "../../utils/dom";

package/dist/collection/components/list/list.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, h, Host, Prop, Method } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/list-item/list-item.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Prop, h, Host, Method } from "@stencil/core";
 import { SLOTS, CSS } from "./resources";

package/dist/collection/components/list-item/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/list-item-group/list-item-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Prop, h, Host } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/list-item-group/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   heading: "heading",

package/dist/collection/components/loader/loader.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/modal/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export {};

package/dist/collection/components/modal/modal.css

@@ -179,12 +179,12 @@
   transform: var(--calcite-modal-hidden-position);
 }
 
-:host([open]) {
+:host([open][calcite-hydrated]) {
   opacity: 1;
   visibility: visible !important;
   transition-delay: 0ms;
 }
-:host([open]) .modal {
+:host([open][calcite-hydrated]) .modal--open {
   pointer-events: auto;
   visibility: visible;
   opacity: 1;
@@ -223,6 +223,7 @@
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   border-start-end-radius: 0.25rem;
   padding-block: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
+  padding-inline: var(--calcite-modal-padding, var(--calcite-modal-padding-internal));
   flex: 0 0 auto;
 }
 .close calcite-icon {

package/dist/collection/components/modal/modal.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -67,6 +67,12 @@ export class Modal {
     //
     //--------------------------------------------------------------------------
     this.hasFooter = true;
+    /**
+     * We use internal variable to make sure initially open modal can transition from closed state when rendered
+     *
+     * @private
+     */
+    this.isOpen = false;
     this.mutationObserver = createObserver("mutation", () => this.updateFooterVisibility());
     this.openTransitionProp = "opacity";
     //--------------------------------------------------------------------------
@@ -92,6 +98,7 @@ export class Modal {
     this.close = () => {
       return this.beforeClose(this.el).then(() => {
         this.open = false;
+        this.isOpen = false;
         focusElement(this.previousActiveElement);
         this.removeOverflowHiddenClass();
       });
@@ -120,7 +127,7 @@ export class Modal {
   componentWillLoad() {
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
     if (this.open) {
-      this.openModal();
+      requestAnimationFrame(() => this.openModal());
     }
   }
   connectedCallback() {
@@ -147,7 +154,10 @@ export class Modal {
     return (h(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" },
       h("calcite-scrim", { class: CSS.scrim, onClick: this.handleOutsideClose }),
       this.renderStyle(),
-      h("div", { class: CSS.modal, ref: this.setTransitionEl },
+      h("div", { class: {
+          [CSS.modal]: true,
+          [CSS.modalOpen]: this.isOpen
+        }, ref: this.setTransitionEl },
         h("div", { "data-focus-fence": true, onFocus: this.focusLastElement, tabindex: "0" }),
         h("div", { class: CSS.header },
           this.renderCloseButton(),
@@ -290,6 +300,7 @@ export class Modal {
     this.previousActiveElement = document.activeElement;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.open = true;
+    this.isOpen = true;
     const titleEl = getSlotted(this.el, SLOTS.header);
     const contentEl = getSlotted(this.el, SLOTS.content);
     this.titleId = ensureId(titleEl);
@@ -585,7 +596,8 @@ export class Modal {
     }
   }; }
   static get states() { return {
-    "hasFooter": {}
+    "hasFooter": {},
+    "isOpen": {}
   }; }
   static get events() { return [{
       "method": "calciteModalBeforeClose",

package/dist/collection/components/modal/resources.js

@@ -1,10 +1,11 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   modal: "modal",
+  modalOpen: "modal--open",
   title: "title",
   header: "header",
   footer: "footer",

package/dist/collection/components/notice/notice.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, SLOTS, TEXT } from "./resources";

package/dist/collection/components/notice/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const TEXT = {
   close: "Close"

package/dist/collection/components/option/option.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, h, Prop, Element, Event, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/option-group/option-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, h, Prop, Watch, Event, Fragment } from "@stencil/core";
 /**

package/dist/collection/components/pagination/pagination.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 import { Component, Element, Event, h, Prop, Method, Fragment, State } from "@stencil/core";
 import { unwatchGlobalAttributes, watchGlobalAttributes } from "../../utils/globalAttributes";

package/dist/collection/components/pagination/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.573
+ * v1.0.0-next.576
  */
 export const CSS = {
   page: "page",

package/dist/collection/components/panel/panel.css

@@ -253,23 +253,10 @@
   align-items: stretch;
 }
 
-.header-actions--end,
-.menu-container:only-child {
+.header-actions--end {
   margin-inline-start: auto;
 }
 
-.menu-button {
-  position: relative;
-  block-size: 100%;
-  flex: 0 1 auto;
-  align-self: stretch;
-}
-
-.menu {
-  min-inline-size: 10rem;
-  flex-flow: column nowrap;
-}
-
 .content-wrapper {
   overflow: auto;
 }
@@ -312,4 +299,8 @@
   padding: 0.5rem;
   inline-size: -moz-fit-content;
   inline-size: fit-content;
+}
+
+[hidden] {
+  display: none;
 }