@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.86

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-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, h, Host, Prop } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -12,17 +12,17 @@ export class Loader {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the loader is active. */
+    /** When true, the component is active. */
     this.active = false;
     /** When true, displays smaller and appears to the left of the text. */
     this.inline = false;
-    /** Specify the scale of the loader. */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** Valid only for determinate indicators. Percent complete of 100. */
+    /** The component's value. Valid only for determinate indicators. Percent complete of 100. */
     this.value = 0;
-    /** Text that displays under the loading indicator. */
+    /** Text that displays under the component's indicator. */
     this.text = "";
-    /** Disables spacing around the loader. */
+    /** Disables spacing around the component. */
     this.noPadding = false;
   }
   //--------------------------------------------------------------------------
@@ -50,14 +50,14 @@ export class Loader {
     };
     const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };
     const determinateStyle = { "stroke-dasharray": `${progress} ${remaining}` };
-    return (h(Host, Object.assign({ "aria-label": label, id: id, role: "progressbar" }, (isDeterminate ? hostAttributes : {})),
+    return (h(Host, { "aria-label": label, id: id, role: "progressbar", ...(isDeterminate ? hostAttributes : {}) },
       h("div", { class: "loader__svgs" },
         h("svg", { class: "loader__svg loader__svg--1", viewBox: viewbox },
-          h("circle", Object.assign({}, svgAttributes))),
+          h("circle", { ...svgAttributes })),
         h("svg", { class: "loader__svg loader__svg--2", viewBox: viewbox },
-          h("circle", Object.assign({}, svgAttributes))),
-        h("svg", Object.assign({ class: "loader__svg loader__svg--3", viewBox: viewbox }, (isDeterminate ? { style: determinateStyle } : {})),
-          h("circle", Object.assign({}, svgAttributes)))),
+          h("circle", { ...svgAttributes })),
+        h("svg", { class: "loader__svg loader__svg--3", viewBox: viewbox, ...(isDeterminate ? { style: determinateStyle } : {}) },
+          h("circle", { ...svgAttributes }))),
       text && h("div", { class: "loader__text" }, text),
       isDeterminate && h("div", { class: "loader__percentage" }, value)));
   }
@@ -106,7 +106,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the loader is active."
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -142,7 +142,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the loader."
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -164,7 +164,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specify the scale of the loader."
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -199,7 +199,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Valid only for determinate indicators. Percent complete of 100."
+        "text": "The component's value. Valid only for determinate indicators. Percent complete of 100."
       },
       "attribute": "value",
       "reflect": false,
@@ -217,7 +217,7 @@ export class Loader {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Text that displays under the loading indicator."
+        "text": "Text that displays under the component's indicator."
       },
       "attribute": "text",
       "reflect": false,
@@ -235,7 +235,7 @@ export class Loader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables spacing around the loader."
+        "text": "Disables spacing around the component."
       },
       "attribute": "no-padding",
       "reflect": false,

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-beta.83
+ * v1.0.0-beta.86
  */
 export {};

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

@@ -83,11 +83,11 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-modal-content-text: The `calcite-modal` content font size.
-* @prop --calcite-modal-padding: The top/bottom padding around items in the `calcite-modal`.
-* @prop --calcite-modal-padding-large: The left/right padding around items in the `calcite-modal`.
-* @prop --calcite-modal-title-text: The `calcite-modal` title font size.
-* @prop --calcite-scrim-background: The semi-transparent background color behind the `calcite-modal`.
+* @prop --calcite-modal-content-text: The component content's font size.
+* @prop --calcite-modal-padding: The top/bottom padding around items within the component.
+* @prop --calcite-modal-padding-large: The left/right padding around items within the component.
+* @prop --calcite-modal-title-text: The component title's font size.
+* @prop --calcite-scrim-background: The component's semi-transparent background color.
 */
 :host {
   position: fixed;
@@ -160,12 +160,14 @@
   transform: translate3d(0, 20px, 0);
 }
 
-:host([active]) {
+:host([active]), 
+:host([open]) {
   opacity: 1;
   visibility: visible !important;
   transition-delay: 0ms;
 }
-:host([active]) .modal {
+:host([active]) .modal, 
+:host([open]) .modal {
   pointer-events: auto;
   visibility: visible;
   opacity: 1;
@@ -215,7 +217,7 @@
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
-.close:hover, .close:focus, .close:active {
+.close:hover,  .close:focus,  .close:active {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }
@@ -229,7 +231,8 @@
   padding: var(--calcite-modal-padding) var(--calcite-modal-padding-large);
 }
 
-slot[name=header]::slotted(*), *::slotted([slot=header]) {
+slot[name=header]::slotted(*), 
+*::slotted([slot=header]) {
   margin: 0px;
   font-weight: var(--calcite-font-weight-normal);
   color: var(--calcite-ui-text-1);
@@ -290,7 +293,8 @@ slot[name=content]::slotted(*),
   z-index: 2;
 }
 
-.footer--hide-back .back, .footer--hide-secondary .secondary {
+.footer--hide-back .back, 
+.footer--hide-secondary .secondary {
   display: none;
 }
 
@@ -401,13 +405,16 @@ slot[name=primary] {
   flex: 1 1 auto;
 }
 
-:host([active][fullscreen]) .modal {
+:host([active][fullscreen]) .modal,
+:host([open][fullscreen]) .modal {
   transform: translate3D(0, 0, 0) scale(1);
 }
-:host([active][fullscreen]) .header {
+:host([active][fullscreen]) .header,
+:host([open][fullscreen]) .header {
   border-radius: 0;
 }
-:host([active][fullscreen]) .footer {
+:host([active][fullscreen]) .footer,
+:host([open][fullscreen]) .footer {
   border-radius: 0;
 }
 
@@ -441,12 +448,14 @@ slot[name=primary] {
   border-color: var(--calcite-ui-info);
 }
 
-:host([color=red]) .modal, :host([color=blue]) .modal {
+:host([color=red]) .modal, 
+:host([color=blue]) .modal {
   border-width: 0px;
   border-top-width: 4px;
   border-style: solid;
 }
-:host([color=red]) .header, :host([color=blue]) .header {
+:host([color=red]) .header, 
+:host([color=blue]) .header {
   border-radius: 0.25rem;
   border-bottom-right-radius: 0px;
   border-bottom-left-radius: 0px;
@@ -456,7 +465,8 @@ slot[name=primary] {
  * Tablet
  */
 @media screen and (max-width: 860px) {
-  slot[name=header]::slotted(*), *::slotted([slot=header]) {
+  slot[name=header]::slotted(*), 
+*::slotted([slot=header]) {
     font-size: var(--calcite-font-size-1);
   }
 
@@ -473,7 +483,8 @@ slot[name=primary] {
     flex-direction: column;
   }
 
-  .back, .secondary {
+  .back, 
+.secondary {
     margin: 0px;
     margin-bottom: 0.25rem;
   }

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-beta.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { ensureId, focusElement, getSlotted, isCalciteFocusable } from "../../utils/dom";
@@ -17,8 +17,8 @@ const getFocusableElements = (el) => {
   return queryShadowRoot(el, isHidden, isFocusableExtended);
 };
 /**
- * @slot header - A slot for adding a `calcite-modal` header.
- * @slot content - A slot for adding `calcite-modal` content.
+ * @slot header - A slot for adding header text.
+ * @slot content - A slot for adding the component's content.
  * @slot primary - A slot for adding a primary button.
  * @slot secondary - A slot for adding a secondary button.
  * @slot back - A slot for adding a back button.
@@ -30,23 +30,29 @@ export class Modal {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the `calcite-modal` is active. */
+    /**
+     * When true, the `calcite-modal` is active.
+     *
+     * @deprecated use open instead
+     */
     this.active = false;
+    /** When true,`calcite-modal`  opens  */
+    this.open = false;
     /** Passes a function to run before the `calcite-modal` closes. */
     this.beforeClose = () => Promise.resolve();
-    /** When true, disables the close button within the `calcite-modal`. */
+    /** When true, disables the component's close button. */
     this.disableCloseButton = false;
-    /** When true, disables the closing of the `calcite-modal` when clicked outside. */
+    /** When true, disables the closing of the component when clicked outside. */
     this.disableOutsideClose = false;
-    /** Accessible label for the close button. */
+    /** Accessible name for the component's close button. */
     this.intlClose = TEXT.close;
     /** When true, disables the default close on escape behavior. */
     this.disableEscape = false;
-    /** Specify the scale of `calcite-modal`. */
+    /** Specifies the size of the component. */
     this.scale = "m";
-    /** Set the width of the `calcite-modal`. Can use scale sizes or pass a number (displays in pixels). */
+    /** Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels). */
     this.width = "m";
-    /** Sets the background color of `calcite-modal` content. */
+    /** Sets the background color of the component's content. */
     this.backgroundColor = "white";
     /** When true, disables spacing to the content area slot. */
     this.noPadding = false;
@@ -65,7 +71,7 @@ export class Modal {
     //--------------------------------------------------------------------------
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active ? this.calciteModalOpen.emit() : this.calciteModalClose.emit();
+        this.open || this.active ? this.calciteModalOpen.emit() : this.calciteModalClose.emit();
       }
     };
     this.openEnd = () => {
@@ -82,6 +88,7 @@ export class Modal {
     this.close = () => {
       return this.beforeClose(this.el).then(() => {
         this.active = false;
+        this.open = false;
         focusElement(this.previousActiveElement);
         this.removeOverflowHiddenClass();
       });
@@ -109,8 +116,8 @@ export class Modal {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     // when modal initially renders, if active was set we need to open as watcher doesn't fire
-    if (this.active) {
-      this.open();
+    if (this.open || this.active) {
+      this.openModal();
     }
   }
   connectedCallback() {
@@ -185,7 +192,7 @@ export class Modal {
   //
   //--------------------------------------------------------------------------
   handleEscape(e) {
-    if (this.active && !this.disableEscape && e.key === "Escape") {
+    if ((this.open || this.active) && !this.disableEscape && e.key === "Escape") {
       this.close();
     }
   }
@@ -219,7 +226,7 @@ export class Modal {
     return focusElement(focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton);
   }
   /**
-   * Set the scroll top of the `calcite-modal` content.
+   * Sets the scroll top of the component's content.
    *
    * @param top
    * @param left
@@ -238,7 +245,7 @@ export class Modal {
   async toggleModal(value, oldValue) {
     if (value !== oldValue) {
       if (value) {
-        this.open();
+        this.openModal();
       }
       else if (!value) {
         this.close();
@@ -246,10 +253,11 @@ export class Modal {
     }
   }
   /** Open the modal */
-  open() {
+  openModal() {
     this.previousActiveElement = document.activeElement;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.active = true;
+    this.open = true;
     const titleEl = getSlotted(this.el, SLOTS.header);
     const contentEl = getSlotted(this.el, SLOTS.content);
     this.titleId = ensureId(titleEl);
@@ -279,13 +287,34 @@ export class Modal {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "use open instead"
+          }],
         "text": "When true, the `calcite-modal` is active."
       },
       "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,`calcite-modal`  opens"
+      },
+      "attribute": "open",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "beforeClose": {
       "type": "unknown",
       "mutable": false,
@@ -321,7 +350,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, disables the close button within the `calcite-modal`."
+        "text": "When true, disables the component's close button."
       },
       "attribute": "disable-close-button",
       "reflect": false,
@@ -339,7 +368,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, disables the closing of the `calcite-modal` when clicked outside."
+        "text": "When true, disables the closing of the component when clicked outside."
       },
       "attribute": "disable-outside-close",
       "reflect": false,
@@ -357,7 +386,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible label for the close button."
+        "text": "Accessible name for the component's close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -375,7 +404,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents the `calcite-modal` from expanding to the entire screen on mobile devices."
+        "text": "When true, prevents the component from expanding to the entire screen on mobile devices."
       },
       "attribute": "docked",
       "reflect": true
@@ -415,7 +444,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specify the scale of `calcite-modal`."
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -438,7 +467,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the width of the `calcite-modal`. Can use scale sizes or pass a number (displays in pixels)."
+        "text": "Specifies the width of the component. Can use scale sizes or pass a number (displays in pixels)."
       },
       "attribute": "width",
       "reflect": true,
@@ -456,7 +485,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set the `calcite-modal` to always be fullscreen (overrides width)."
+        "text": "Sets the component to always be fullscreen (overrides width)."
       },
       "attribute": "fullscreen",
       "reflect": true
@@ -473,7 +502,7 @@ export class Modal {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Adds a color bar to the top of `calcite-modal` for visual impact.\nUse color to add importance to destructive or workflow dialogs."
+        "text": "Adds a color bar to the top of component for visual impact.\nUse color to add importance to destructive or workflow dialogs."
       },
       "attribute": "color",
       "reflect": true
@@ -495,7 +524,7 @@ export class Modal {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Sets the background color of `calcite-modal` content."
+        "text": "Sets the background color of the component's content."
       },
       "attribute": "background-color",
       "reflect": true,
@@ -531,7 +560,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when `calcite-modal` finishes the open animation."
+        "text": "Emits when the component finishes the open animation."
       },
       "complexType": {
         "original": "any",
@@ -546,7 +575,7 @@ export class Modal {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when `calcite-modal` finishes the close animation."
+        "text": "Emits when the component finishes the close animation."
       },
       "complexType": {
         "original": "any",
@@ -635,7 +664,7 @@ export class Modal {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Set the scroll top of the `calcite-modal` content.",
+        "text": "Sets the scroll top of the component's content.",
         "tags": [{
             "name": "param",
             "text": "top"
@@ -650,6 +679,9 @@ export class Modal {
   static get watchers() { return [{
       "propName": "active",
       "methodName": "toggleModal"
+    }, {
+      "propName": "open",
+      "methodName": "toggleModal"
     }]; }
   static get listeners() { return [{
       "name": "keyup",

package/dist/collection/components/modal/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-beta.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   title: "title",

package/dist/collection/components/notice/notice.css

@@ -83,19 +83,21 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-notice-width: The width of `calcite-notice`.
+* @prop --calcite-notice-width: The width of the component.
 */
 :host([scale=s]) {
   --calcite-notice-spacing-token-small: 0.5rem;
   --calcite-notice-spacing-token-large: 0.75rem;
 }
-:host([scale=s]) .container slot[name=title]::slotted(*), :host([scale=s]) .container *::slotted([slot=title]) {
+:host([scale=s]) .container slot[name=title]::slotted(*), 
+:host([scale=s]) .container *::slotted([slot=title]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-:host([scale=s]) .container slot[name=message]::slotted(*), :host([scale=s]) .container *::slotted([slot=message]) {
+:host([scale=s]) .container slot[name=message]::slotted(*), 
+:host([scale=s]) .container *::slotted([slot=message]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size--2);
@@ -115,13 +117,15 @@
   --calcite-notice-spacing-token-small: 0.75rem;
   --calcite-notice-spacing-token-large: 1rem;
 }
-:host([scale=m]) .container slot[name=title]::slotted(*), :host([scale=m]) .container *::slotted([slot=title]) {
+:host([scale=m]) .container slot[name=title]::slotted(*), 
+:host([scale=m]) .container *::slotted([slot=title]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-:host([scale=m]) .container slot[name=message]::slotted(*), :host([scale=m]) .container *::slotted([slot=message]) {
+:host([scale=m]) .container slot[name=message]::slotted(*), 
+:host([scale=m]) .container *::slotted([slot=message]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size--1);
@@ -138,13 +142,15 @@
   --calcite-notice-spacing-token-small: 1rem;
   --calcite-notice-spacing-token-large: 1.25rem;
 }
-:host([scale=l]) .container slot[name=title]::slotted(*), :host([scale=l]) .container *::slotted([slot=title]) {
+:host([scale=l]) .container slot[name=title]::slotted(*), 
+:host([scale=l]) .container *::slotted([slot=title]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
-:host([scale=l]) .container slot[name=message]::slotted(*), :host([scale=l]) .container *::slotted([slot=message]) {
+:host([scale=l]) .container slot[name=message]::slotted(*), 
+:host([scale=l]) .container *::slotted([slot=message]) {
   margin-top: 0.125rem;
   margin-bottom: 0.125rem;
   font-size: var(--calcite-font-size-0);
@@ -218,13 +224,15 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.container slot[name=title]::slotted(*), .container *::slotted([slot=title]) {
+.container slot[name=title]::slotted(*), 
+.container *::slotted([slot=title]) {
   margin: 0px;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
 
-.container slot[name=message]::slotted(*), .container *::slotted([slot=message]) {
+.container slot[name=message]::slotted(*), 
+.container *::slotted([slot=message]) {
   margin: 0px;
   display: inline;
   font-weight: var(--calcite-font-weight-normal);
@@ -277,7 +285,7 @@
   flex: 0 0 auto;
   -webkit-appearance: none;
 }
-.notice-close:hover, .notice-close:focus {
+.notice-close:hover,  .notice-close:focus {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }