npm - @esri/calcite-components - Versions diffs - 1.0.0-next.553 → 1.0.0-next.556 - Mend

@esri/calcite-components 1.0.0-next.553 → 1.0.0-next.556

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1005) hide show

package/dist/collection/components/tab/tab.js CHANGED Viewed

@@ -1,9 +1,9 @@
 /*!
  * 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.553
+ * v1.0.0-next.556
  */
-import { Component, Prop, Element, Listen, Method, Event, h, State, Host } from "@stencil/core";
+import { Component, Prop, Element, Listen, Method, Event, h, State, Host, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { nodeListToArray } from "../../utils/dom";
 /**
@@ -13,14 +13,26 @@ export class Tab {
   constructor() {
     /**
      * Show this tab
+     *
+     * @deprecated Use selected instead.
      */
     this.active = false;
+    /**
+     * When true, display this tab.
+     */
+    this.selected = false;
     /**
      * @internal
      */
     this.scale = "m";
     this.guid = `calcite-tab-title-${guid()}`;
   }
+  activeHandler(value) {
+    this.selected = value;
+  }
+  selectedHandler(value) {
+    this.active = value;
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -29,12 +41,17 @@ export class Tab {
   render() {
     const id = this.el.id || this.guid;
     return (h(Host, { "aria-labelledby": this.labeledBy, id: id },
-      h("div", { role: "tabpanel", tabIndex: this.active ? 0 : -1 },
+      h("div", { role: "tabpanel", tabIndex: this.selected ? 0 : -1 },
         h("section", null,
           h("slot", null)))));
   }
   connectedCallback() {
     this.parentTabsEl = this.el.closest("calcite-tabs");
+    const isSelected = this.selected || this.active;
+    if (isSelected) {
+      this.activeHandler(isSelected);
+      this.selectedHandler(isSelected);
+    }
   }
   componentDidLoad() {
     this.calciteInternalTabRegister.emit();
@@ -66,11 +83,11 @@ export class Tab {
       return;
     }
     if (this.tab) {
-      this.active = this.tab === event.detail.tab;
+      this.selected = this.tab === event.detail.tab;
     }
     else {
       this.getTabIndex().then((index) => {
-        this.active = index === event.detail.tab;
+        this.selected = index === event.detail.tab;
       });
     }
     event.stopPropagation();
@@ -136,13 +153,34 @@ export class Tab {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use selected instead."
+          }],
         "text": "Show this tab"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, display this tab."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "scale": {
       "type": "string",
       "mutable": true,
@@ -248,6 +286,13 @@ export class Tab {
     }
   }; }
   static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "active",
+      "methodName": "activeHandler"
+    }, {
+      "propName": "selected",
+      "methodName": "selectedHandler"
+    }]; }
   static get listeners() { return [{
       "name": "calciteInternalTabChange",
       "method": "internalTabChangeHandler",

package/dist/collection/components/tab-nav/tab-nav.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host {
@@ -102,6 +102,10 @@
   overflow: auto;
 }
+:host([layout=center]) .tab-nav {
+  justify-content: center;
+}
 .tab-nav-active-indicator-container {
   position: absolute;
   inset-inline: 0px;

package/dist/collection/components/tab-nav/tab-nav.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, Element, Event, h, Host, Listen, Prop, State, Watch } from "@stencil/core";
 import { getElementDir, filterDirectChildren } from "../../utils/dom";

package/dist/collection/components/tab-title/tab-title.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host([disabled]) {
@@ -134,7 +134,7 @@
           text-decoration-line: none;
 }
-:host([active]) .container {
+:host([selected]) .container {
   border-color: transparent;
   color: var(--calcite-ui-text-1);
 }
@@ -226,15 +226,15 @@
   margin-inline-end: 0;
 }
-:host([bordered][active]) {
+:host([bordered][selected]) {
   box-shadow: inset 0px -2px var(--calcite-ui-foreground-1);
 }
-:host([bordered][active][position=below]) {
+:host([bordered][selected][position=below]) {
   box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
 }
-:host([bordered][active][position=bottom]) {
+:host([bordered][selected][position=bottom]) {
   box-shadow: inset 0 2px 0 var(--calcite-ui-foreground-1);
 }
@@ -262,7 +262,7 @@
   border-block-start-style: unset;
 }
-:host([active][bordered]) .container {
+:host([selected][bordered]) .container {
   border-inline-start-color: var(--calcite-ui-border-1);
   border-inline-end-color: var(--calcite-ui-border-1);
 }
@@ -301,15 +301,15 @@
     border-block-start-style: solid;
   }
-  :host([bordered][active]) .container {
+  :host([bordered][selected]) .container {
     border-block-end-style: none;
   }
-  :host([bordered][position=below][active]) .container {
+  :host([bordered][position=below][selected]) .container {
     border-block-start-style: none;
   }
-  :host([bordered][position=bottom][active]) .container {
+  :host([bordered][position=bottom][selected]) .container {
     border-block-start-style: none;
   }
 }

package/dist/collection/components/tab-title/tab-title.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Build, Component, Element, Event, h, Host, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -18,8 +18,16 @@ export class TabTitle {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Show this tab title as selected */
+    /**
+     * Show this tab title as selected
+     *
+     * @deprecated Use selected instead.
+     */
     this.active = false;
+    /**
+     * When true, display this tab title as selected.
+     */
+    this.selected = false;
     /** Disable this tab title  */
     this.disabled = false;
     /**
@@ -37,8 +45,12 @@ export class TabTitle {
     this.hasText = false;
     this.guid = `calcite-tab-title-${guid()}`;
   }
-  activeTabChanged() {
-    if (this.active) {
+  activeHandler(value) {
+    this.selected = value;
+  }
+  selectedHandler(value) {
+    this.active = value;
+    if (this.selected) {
       this.emitActiveTab(false);
     }
   }
@@ -48,6 +60,13 @@ export class TabTitle {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    const { selected, active } = this;
+    if (selected) {
+      this.active = selected;
+    }
+    else if (active) {
+      this.activeHandler(active);
+    }
     this.setupTextContentObserver();
     this.parentTabNavEl = this.el.closest("calcite-tab-nav");
     this.parentTabsEl = this.el.closest("calcite-tabs");
@@ -64,7 +83,7 @@ export class TabTitle {
     if (Build.isBrowser) {
       this.updateHasText();
     }
-    if (this.tab && this.active) {
+    if (this.tab && this.selected) {
       this.emitActiveTab(false);
     }
   }
@@ -85,7 +104,7 @@ export class TabTitle {
     const id = this.el.id || this.guid;
     const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.active), id: id, role: "tab", tabIndex: this.active ? 0 : -1 },
+    return (h(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected ? 0 : -1 },
       h("div", { class: {
           container: true,
           "container--has-text": this.hasText
@@ -99,7 +118,7 @@ export class TabTitle {
   }
   componentDidRender() {
     updateHostInteraction(this, () => {
-      return this.active;
+      return this.selected;
     });
   }
   //--------------------------------------------------------------------------
@@ -115,11 +134,11 @@ export class TabTitle {
       return;
     }
     if (this.tab) {
-      this.active = this.tab === event.detail.tab;
+      this.selected = this.tab === event.detail.tab;
     }
     else {
       this.getTabIndex().then((index) => {
-        this.active = index === event.detail.tab;
+        this.selected = index === event.detail.tab;
       });
     }
     event.stopPropagation();
@@ -216,13 +235,34 @@ export class TabTitle {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "name": "deprecated",
+            "text": "Use selected instead."
+          }],
         "text": "Show this tab title as selected"
       },
       "attribute": "active",
       "reflect": true,
       "defaultValue": "false"
     },
+    "selected": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, display this tab title as selected."
+      },
+      "attribute": "selected",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,
@@ -605,7 +645,10 @@ export class TabTitle {
   static get elementRef() { return "el"; }
   static get watchers() { return [{
       "propName": "active",
-      "methodName": "activeTabChanged"
+      "methodName": "activeHandler"
+    }, {
+      "propName": "selected",
+      "methodName": "selectedHandler"
     }]; }
   static get listeners() { return [{
       "name": "calciteInternalTabChange",

package/dist/collection/components/tabs/interfaces.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export {};

package/dist/collection/components/tabs/resources.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export const SLOTS = {
   tabNav: "tab-nav"

package/dist/collection/components/tabs/tabs.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host {

package/dist/collection/components/tabs/tabs.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/tile/resources.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export const SLOTS = {
   contentStart: "content-start",

package/dist/collection/components/tile/tile.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host([disabled]) {

package/dist/collection/components/tile/tile.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";

package/dist/collection/components/tile-select/interfaces.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export {};

package/dist/collection/components/tile-select/resources.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export const CSS = {
   checked: "checked",

package/dist/collection/components/tile-select/tile-select.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host([disabled]) {

package/dist/collection/components/tile-select/tile-select.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/tile-select-group/interfaces.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export {};

package/dist/collection/components/tile-select-group/tile-select-group.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host([disabled]) {

package/dist/collection/components/tile-select-group/tile-select-group.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, h, Prop, Element } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

package/dist/collection/components/time-picker/resources.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host {

package/dist/collection/components/time-picker/time-picker.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";
@@ -137,7 +137,7 @@ export class TimePicker {
       }
     };
     this.hourKeyDownHandler = (event) => {
-      const key = event.key;
+      const { key } = event;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newHour;
@@ -182,7 +182,6 @@ export class TimePicker {
             this.incrementHour();
             break;
           case " ":
-          case "Spacebar":
             event.preventDefault();
             break;
         }
@@ -245,7 +244,6 @@ export class TimePicker {
           this.decrementMeridiem();
           break;
         case " ":
-        case "Spacebar":
           event.preventDefault();
           break;
       }
@@ -261,7 +259,7 @@ export class TimePicker {
       }
     };
     this.minuteKeyDownHandler = (event) => {
-      const key = event.key;
+      const { key } = event;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newMinute;
@@ -292,7 +290,6 @@ export class TimePicker {
             this.incrementMinute();
             break;
           case " ":
-          case "Spacebar":
             event.preventDefault();
             break;
         }
@@ -309,7 +306,7 @@ export class TimePicker {
       }
     };
     this.secondKeyDownHandler = (event) => {
-      const key = event.key;
+      const { key } = event;
       if (numberKeys.includes(key)) {
         const keyAsNumber = parseInt(key);
         let newSecond;
@@ -340,7 +337,6 @@ export class TimePicker {
             this.incrementSecond();
             break;
           case " ":
-          case "Spacebar":
             event.preventDefault();
             break;
         }
@@ -452,7 +448,7 @@ export class TimePicker {
     this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
-    const key = event.key;
+    const { key } = event;
     switch (this.activeEl) {
       case this.hourEl:
         if (key === "ArrowRight") {
@@ -520,7 +516,7 @@ export class TimePicker {
   //
   // --------------------------------------------------------------------------
   buttonActivated(event) {
-    const key = event.key;
+    const { key } = event;
     if (key === " ") {
       event.preventDefault();
     }

package/dist/collection/components/tip/resources.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

package/dist/collection/components/tip/tip.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host {

package/dist/collection/components/tip/tip.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";

package/dist/collection/components/tip-group/tip-group.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 :host {

package/dist/collection/components/tip-group/tip-group.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 import { Component, Prop, h } from "@stencil/core";
 /**

package/dist/collection/components/tip-manager/resources.js CHANGED Viewed

@@ -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.553
+ * v1.0.0-next.556
  */
 export const CSS = {
   header: "header",

package/dist/collection/components/tip-manager/tip-manager.css CHANGED Viewed

@@ -75,7 +75,7 @@
 }
 :host([hidden]) {
-  display: none;
+  display: none !important;
 }
 /**