@esri/calcite-components 1.4.0-next.8 → 1.4.0

package/dist/collection/components/stack/stack.css

@@ -0,0 +1,197 @@
+/* mixins & extensions */
+@keyframes in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes in-down {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, -5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-up {
+  0% {
+    opacity: 0;
+    transform: translate3D(0, 5px, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-scale {
+  0% {
+    opacity: 0;
+    transform: scale3D(0.95, 0.95, 1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale3D(1, 1, 1);
+  }
+}
+:root {
+  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
+  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
+  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
+}
+
+.calcite-animate {
+  opacity: 0;
+  animation-fill-mode: both;
+  animation-duration: var(--calcite-animation-timing);
+}
+
+.calcite-animate__in {
+  animation-name: in;
+}
+
+.calcite-animate__in-down {
+  animation-name: in-down;
+}
+
+.calcite-animate__in-up {
+  animation-name: in-up;
+}
+
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
+.calcite-animate__in-scale {
+  animation-name: in-scale;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --calcite-internal-duration-factor: 0.01;
+  }
+}
+/* helper to properly scale internal durations */
+/**
+* Currently only used in Checkbox.
+*/
+:root {
+  --calcite-floating-ui-transition: var(--calcite-animation-timing);
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([disabled]) .content {
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+
+:host([disabled]) .content *,
+:host([disabled]) .content ::slotted(*) {
+  pointer-events: none;
+}
+
+/**
+* CSS Custom Properties
+*
+* These properties can be overridden using the component's tag as selector.
+*
+* @prop --calcite-stack-padding-inline: Specifies the inline padding of the component's content.
+* @prop --calcite-stack-padding-block: Specifies the block padding of the component's content.
+*/
+:host {
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+}
+
+.container {
+  display: flex;
+  flex: 1 1 auto;
+  align-items: stretch;
+  font-family: var(--calcite-sans-family);
+  font-weight: var(--calcite-font-weight-normal);
+  color: var(--calcite-ui-text-2);
+}
+
+.content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  justify-content: center;
+  font-size: var(--calcite-font-size--2);
+  line-height: 1.375;
+  padding-inline: var(--calcite-stack-padding-inline, 0.75rem);
+  padding-block: var(--calcite-stack-padding-block, 0.5rem);
+}
+
+.content-start {
+  justify-content: flex-start;
+}
+
+.content-end {
+  justify-content: flex-end;
+}
+
+.content-start,
+.content-end {
+  flex: 0 1 auto;
+}
+
+.actions-start,
+.actions-end,
+.content-start,
+.content-end {
+  display: flex;
+  align-items: center;
+}
+
+.content-start ::slotted(calcite-icon),
+.content-end ::slotted(calcite-icon) {
+  margin-inline: 0.75rem;
+  align-self: center;
+}
+
+.actions-start ::slotted(calcite-action),
+.actions-end ::slotted(calcite-action) {
+  align-self: stretch;
+  color: inherit;
+}
+
+[hidden] {
+  display: none;
+}

package/dist/collection/components/stack/stack.js

@@ -0,0 +1,110 @@
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.4.0
+ */
+import { h, Host } from "@stencil/core";
+import { slotChangeHasAssignedElement } from "../../utils/dom";
+import { CSS, SLOTS } from "./resources";
+/**
+ * @slot - A slot for adding content.
+ * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
+ * @slot content-start - A slot for adding non-actionable elements before content of the component.
+ * @slot content-end - A slot for adding non-actionable elements after content of the component.
+ * @slot actions-end - A slot for adding actionable `calcite-action` elements after the content of the component.
+ */
+export class Stack {
+  constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleActionsStartSlotChange = (event) => {
+      this.hasActionsStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleActionsEndSlotChange = (event) => {
+      this.hasActionsEnd = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentStartSlotChange = (event) => {
+      this.hasContentStart = slotChangeHasAssignedElement(event);
+    };
+    this.handleContentEndSlotChange = (event) => {
+      this.hasContentEnd = slotChangeHasAssignedElement(event);
+    };
+    this.disabled = false;
+    this.hasActionsStart = false;
+    this.hasActionsEnd = false;
+    this.hasContentStart = false;
+    this.hasContentEnd = false;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  renderActionsStart() {
+    const { hasActionsStart } = this;
+    return (h("div", { class: CSS.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, h("slot", { name: SLOTS.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+  }
+  renderActionsEnd() {
+    const { hasActionsEnd } = this;
+    return (h("div", { class: CSS.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, h("slot", { name: SLOTS.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+  }
+  renderContentStart() {
+    const { hasContentStart } = this;
+    return (h("div", { class: CSS.contentStart, hidden: !hasContentStart }, h("slot", { name: SLOTS.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+  }
+  renderDefaultContent() {
+    return (h("div", { class: CSS.content }, h("slot", null)));
+  }
+  renderContentEnd() {
+    const { hasContentEnd } = this;
+    return (h("div", { class: CSS.contentEnd, hidden: !hasContentEnd }, h("slot", { name: SLOTS.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+  }
+  render() {
+    return (h(Host, null, h("div", { class: CSS.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+  }
+  static get is() { return "calcite-stack"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["stack.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["stack.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When `true`, content interaction is prevented and displayed with lower opacity."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasActionsStart": {},
+      "hasActionsEnd": {},
+      "hasContentStart": {},
+      "hasContentEnd": {}
+    };
+  }
+}

package/dist/collection/components/stepper/stepper.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/stepper/stepper.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.4.0-next.8
+ * v1.4.0
  */
 import { h } from "@stencil/core";
 import { focusElementInGroup } from "../../utils/dom";

package/dist/collection/components/stepper-item/stepper-item.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/stepper-item/stepper-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.4.0-next.8
+ * v1.4.0
  */
 import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/switch/switch.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/switch/switch.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.4.0-next.8
+ * v1.4.0
  */
 import { h, Host } from "@stencil/core";
 import { focusElement, toAriaBoolean } from "../../utils/dom";

package/dist/collection/components/tab/tab.css

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/tab/tab.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.4.0-next.8
+ * v1.4.0
  */
 import { h, Host } from "@stencil/core";
 import { nodeListToArray } from "../../utils/dom";

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

@@ -27,6 +27,26 @@
     transform: translate3D(0, 0, 0);
   }
 }
+@keyframes in-right {
+  0% {
+    opacity: 0;
+    transform: translate3D(-5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
+@keyframes in-left {
+  0% {
+    opacity: 0;
+    transform: translate3D(5px, 0, 0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate3D(0, 0, 0);
+  }
+}
 @keyframes in-scale {
   0% {
     opacity: 0;
@@ -63,6 +83,14 @@
   animation-name: in-up;
 }
 
+.calcite-animate__in-right {
+  animation-name: in-right;
+}
+
+.calcite-animate__in-left {
+  animation-name: in-left;
+}
+
 .calcite-animate__in-scale {
   animation-name: in-scale;
 }
@@ -78,7 +106,7 @@
 */
 :root {
   --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: 600;
+  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
 }
 
 :host([hidden]) {

package/dist/collection/components/tab-nav/tab-nav.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.4.0-next.8
+ * v1.4.0
  */
 import { h, Host } from "@stencil/core";
 import { filterDirectChildren, focusElementInGroup, getElementDir } from "../../utils/dom";
@@ -29,7 +29,6 @@ export class TabNav {
     this.handleTabFocus = (event, el, destination) => {
       focusElementInGroup(this.enabledTabTitles, el, destination);
       event.stopPropagation();
-      event.preventDefault();
     };
     this.handleContainerScroll = () => {
       // remove active indicator transition duration while container is scrolling to prevent wobble
@@ -114,11 +113,11 @@ export class TabNav {
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
     return (h(Host, { role: "tablist" }, h("div", { class: "tab-nav", onScroll: this.handleContainerScroll,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.tabNavEl = el) }, h("div", { class: "tab-nav-active-indicator-container",
+      ref: (el) => (this.tabNavEl = el) }, h("slot", null), h("div", { class: "tab-nav-active-indicator-container",
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.activeIndicatorContainerEl = el) }, h("div", { class: "tab-nav-active-indicator", style: indicatorStyle,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.activeIndicatorEl = el) })), h("slot", null))));
+      ref: (el) => (this.activeIndicatorEl = el) })))));
   }
   //--------------------------------------------------------------------------
   //
@@ -142,12 +141,15 @@ export class TabNav {
       ? event.detail.tab
       : this.getIndexOfTabTitle(event.target);
     event.stopPropagation();
-    event.preventDefault();
   }
   activateTabHandler(event) {
     this.calciteTabChange.emit();
     event.stopPropagation();
-    event.preventDefault();
+  }
+  internalCloseTabHandler(event) {
+    const closedTabTitleEl = event.target;
+    this.handleTabTitleClose(closedTabTitleEl);
+    event.stopPropagation();
   }
   /**
    * Check for active tabs on register and update selected
@@ -197,7 +199,28 @@ export class TabNav {
     return filterDirectChildren(this.el, "calcite-tab-title");
   }
   get enabledTabTitles() {
-    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])");
+    return filterDirectChildren(this.el, "calcite-tab-title:not([disabled])").filter((tabTitle) => !tabTitle.closed);
+  }
+  handleTabTitleClose(closedTabTitleEl) {
+    const { tabTitles } = this;
+    const visibleTabTitlesIndices = tabTitles.reduce((tabTitleIndices, tabTitle, index) => !tabTitle.closed ? [...tabTitleIndices, index] : tabTitleIndices, []);
+    const totalVisibleTabTitles = visibleTabTitlesIndices.length;
+    if (totalVisibleTabTitles === 1 && tabTitles[visibleTabTitlesIndices[0]].closable) {
+      tabTitles[visibleTabTitlesIndices[0]].closable = false;
+      this.selectedTabId = visibleTabTitlesIndices[0];
+    }
+    else if (totalVisibleTabTitles > 1) {
+      const closedTabTitleIndex = tabTitles.findIndex((el) => el === closedTabTitleEl);
+      const nextTabTitleIndex = visibleTabTitlesIndices.find((value) => value > closedTabTitleIndex);
+      if (this.selectedTabId === closedTabTitleIndex) {
+        this.selectedTabId = nextTabTitleIndex ? nextTabTitleIndex : totalVisibleTabTitles - 1;
+      }
+    }
+    requestAnimationFrame(() => {
+      this.updateOffsetPosition();
+      this.updateActiveWidth();
+      tabTitles[this.selectedTabId].focus();
+    });
   }
   static get is() { return "calcite-tab-nav"; }
   static get encapsulation() { return "shadow"; }
@@ -504,6 +527,12 @@ export class TabNav {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "calciteInternalTabsClose",
+        "method": "internalCloseTabHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }, {
         "name": "calciteInternalTabTitleRegister",
         "method": "updateTabTitles",

package/dist/collection/components/tab-title/assets/tab-title/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type TabTitleMessages = {
+  close: string;
+};

package/dist/collection/components/tab-title/assets/tab-title/t9n/messages.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/dist/collection/components/tab-title/assets/tab-title/t9n/messages_ar.json

@@ -0,0 +1,3 @@
+{
+  "close": "إغلاق"
+}