npm - @esri/calcite-components - Versions diffs - 1.5.0-next.3 → 1.5.0-next.30 - Mend

@esri/calcite-components 1.5.0-next.3 → 1.5.0-next.30

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 (1744) hide show

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

@@ -1,118 +1,8 @@
 /* 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([scale=s]) {
   --calcite-accordion-item-spacing-unit: 0.25rem;
   --calcite-accordion-icon-margin: 0.5rem;
@@ -156,4 +46,12 @@
   border-block-end-width: 0px;
   border-style: solid;
   border-color: var(--calcite-ui-border-2);
+}
+:host([hidden]) {
+  display: none;
+}
+[hidden] {
+  display: none;
 }

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

@@ -1,9 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-accordion-item`s. `calcite-accordion` cannot be nested, however `calcite-accordion-item`s can.
  */
@@ -14,38 +15,34 @@ export class Accordion {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list of Accordion items */
-    this.items = [];
-    /** keep track of whether the items have been sorted so we don't re-sort */
-    this.sorted = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
+    this.mutationObserver = createObserver("mutation", () => this.updateAccordionItems());
+    this.accordionParent = undefined;
     this.appearance = "solid";
     this.iconPosition = "end";
     this.iconType = "chevron";
     this.scale = "m";
     this.selectionMode = "multiple";
   }
+  handlePropsChange() {
+    this.updateAccordionItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentDidLoad() {
-    if (!this.sorted) {
-      this.items = this.sortItems(this.items);
-      this.sorted = true;
-    }
+  connectedCallback() {
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.updateAccordionItems();
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
   }
   render() {
     const transparent = this.appearance === "transparent";
     return (h("div", { class: {
         "accordion--transparent": transparent,
-        accordion: !transparent
+        accordion: !transparent,
       } }, h("slot", null)));
   }
   //--------------------------------------------------------------------------
@@ -53,24 +50,27 @@ export class Accordion {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  registerCalciteAccordionItem(event) {
-    const item = {
-      item: event.target,
-      parent: event.detail.parent,
-      position: event.detail.position
-    };
-    if (this.el === item.parent) {
-      this.items.push(item);
-    }
-    event.stopPropagation();
-  }
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
     this.calciteInternalAccordionChange.emit({
-      requestedAccordionItem: this.requestedAccordionItem
+      requestedAccordionItem: this.requestedAccordionItem,
     });
     event.stopPropagation();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  updateAccordionItems() {
+    this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
+      item.iconPosition = this.iconPosition;
+      item.iconType = this.iconType;
+      item.selectionMode = this.selectionMode;
+      item.scale = this.scale;
+      item.accordionParent = this.el;
+    });
+  }
   static get is() { return "calcite-accordion"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -85,6 +85,25 @@ export class Accordion {
   }
   static get properties() {
     return {
+      "accordionParent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLCalciteAccordionElement",
+          "resolved": "HTMLCalciteAccordionElement",
+          "references": {
+            "HTMLCalciteAccordionElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the parent of the component."
+        }
+      },
       "appearance": {
         "type": "string",
         "mutable": false,
@@ -230,14 +249,23 @@ export class Accordion {
       }];
   }
   static get elementRef() { return "el"; }
-  static get listeners() {
+  static get watchers() {
     return [{
-        "name": "calciteInternalAccordionItemRegister",
-        "method": "registerCalciteAccordionItem",
-        "target": undefined,
-        "capture": false,
-        "passive": false
+        "propName": "iconPosition",
+        "methodName": "handlePropsChange"
+      }, {
+        "propName": "iconType",
+        "methodName": "handlePropsChange"
+      }, {
+        "propName": "scale",
+        "methodName": "handlePropsChange"
       }, {
+        "propName": "selectionMode",
+        "methodName": "handlePropsChange"
+      }];
+  }
+  static get listeners() {
+    return [{
         "name": "calciteInternalAccordionItemSelect",
         "method": "updateActiveItemOnChange",
         "target": undefined,

package/dist/collection/components/accordion-item/accordion-item.css CHANGED Viewed

@@ -1,118 +1,8 @@
 /* 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;
-}
 .icon-position--end, .icon-position--start {
   /* icon rotation variables */
   --calcite-accordion-item-icon-rotation: calc(90deg * -1);
@@ -348,4 +238,11 @@
     /** give visual indicator of expandability/click-ability since subtle color changes can't be done **/
     text-decoration: underline;
   }
+}
+:host([hidden]) {
+  display: none;
+}
+[hidden] {
+  display: none;
 }

package/dist/collection/components/accordion-item/accordion-item.js CHANGED Viewed

@@ -1,11 +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.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
-import { h, Host } from "@stencil/core";
-import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { closestElementCrossShadowBoundary, getElementDir, getElementProp, getSlotted, toAriaBoolean } from "../../utils/dom";
+import { h, Host, } from "@stencil/core";
+import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";
+import { getElementDir, getSlotted, toAriaBoolean } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { SLOTS, CSS } from "./resources";
 /**
@@ -15,18 +15,19 @@ import { SLOTS, CSS } from "./resources";
  */
 export class AccordionItem {
   constructor() {
-    /** what icon position does the parent accordion specify */
-    this.iconPosition = "end";
     /** handle clicks on item header */
     this.itemHeaderClickHandler = () => this.emitRequestedItem();
-    /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-    this.scale = "m";
     this.expanded = false;
     this.heading = undefined;
     this.description = undefined;
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.iconFlipRtl = undefined;
+    this.iconPosition = undefined;
+    this.iconType = undefined;
+    this.accordionParent = undefined;
+    this.selectionMode = undefined;
+    this.scale = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -34,19 +35,8 @@ export class AccordionItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.parent = this.el.parentElement;
-    this.iconType = getElementProp(this.el, "icon-type", "chevron");
-    this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
   }
-  componentDidLoad() {
-    this.itemPosition = this.getItemPosition();
-    this.calciteInternalAccordionItemRegister.emit({
-      parent: this.parent,
-      position: this.itemPosition
-    });
-  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
@@ -71,7 +61,7 @@ export class AccordionItem {
     const { description } = this;
     return (h(Host, null, h("div", { class: {
         [`icon-position--${this.iconPosition}`]: true,
-        [`icon-type--${this.iconType}`]: true
+        [`icon-type--${this.iconType}`]: true,
       } }, h("div", { class: { [CSS.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), h("div", { "aria-expanded": toAriaBoolean(this.expanded), class: CSS.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, h("div", { class: CSS.headerContainer }, iconStartEl, h("div", { class: CSS.headerText }, h("span", { class: CSS.heading }, this.heading), description ? h("span", { class: CSS.description }, description) : null), iconEndEl), h("calcite-icon", { class: CSS.expandIcon, icon: this.iconType === "chevron"
         ? "chevronDown"
         : this.iconType === "caret"
@@ -111,7 +101,6 @@ export class AccordionItem {
   //
   //--------------------------------------------------------------------------
   determineActiveItem() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "multiple");
     switch (this.selectionMode) {
       case "multiple":
         if (this.el === this.requestedAccordionItem) {
@@ -128,14 +117,9 @@ export class AccordionItem {
   }
   emitRequestedItem() {
     this.calciteInternalAccordionItemSelect.emit({
-      requestedAccordionItem: this.el
+      requestedAccordionItem: this.el,
     });
   }
-  getItemPosition() {
-    const { el } = this;
-    const items = closestElementCrossShadowBoundary(el, "calcite-accordion")?.querySelectorAll("calcite-accordion-item");
-    return items ? Array.from(items).indexOf(el) : -1;
-  }
   static get is() { return "calcite-accordion-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
@@ -257,6 +241,126 @@ export class AccordionItem {
         },
         "attribute": "icon-flip-rtl",
         "reflect": true
+      },
+      "iconPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Position",
+          "resolved": "\"end\" | \"start\"",
+          "references": {
+            "Position": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the placement of the icon in the header inherited from the `calcite-accordion`."
+        },
+        "attribute": "icon-position",
+        "reflect": false
+      },
+      "iconType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"chevron\" | \"caret\" | \"plus-minus\"",
+          "resolved": "\"caret\" | \"chevron\" | \"plus-minus\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the type of the icon in the header inherited from the `calcite-accordion`."
+        },
+        "attribute": "icon-type",
+        "reflect": false
+      },
+      "accordionParent": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HTMLCalciteAccordionElement",
+          "resolved": "HTMLCalciteAccordionElement",
+          "references": {
+            "HTMLCalciteAccordionElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "The containing `accordion` element."
+        }
+      },
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\"single\" | \"single-persist\" | \"multiple\", SelectionMode>",
+          "resolved": "\"multiple\" | \"single\" | \"single-persist\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the `selectionMode` of the component inherited from the `calcite-accordion`."
+        },
+        "attribute": "selection-mode",
+        "reflect": false
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the size of the component inherited from the `calcite-accordion`."
+        },
+        "attribute": "scale",
+        "reflect": false
       }
     };
   }
@@ -302,29 +406,6 @@ export class AccordionItem {
           "resolved": "void",
           "references": {}
         }
-      }, {
-        "method": "calciteInternalAccordionItemRegister",
-        "name": "calciteInternalAccordionItemRegister",
-        "bubbles": true,
-        "cancelable": false,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "RegistryEntry",
-          "resolved": "RegistryEntry",
-          "references": {
-            "RegistryEntry": {
-              "location": "import",
-              "path": "./interfaces"
-            }
-          }
-        }
       }];
   }
   static get elementRef() { return "el"; }

package/dist/collection/components/accordion-item/resources.js CHANGED Viewed

@@ -1,11 +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.5.0-next.2
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.0-next.30
  */
 export const SLOTS = {
   actionsStart: "actions-start",
-  actionsEnd: "actions-end"
+  actionsEnd: "actions-end",
 };
 export const CSS = {
   icon: "icon",
@@ -20,5 +20,5 @@ export const CSS = {
   content: "content",
   iconStart: "icon--start",
   iconEnd: "icon--end",
-  headerContainer: "header-container"
+  headerContainer: "header-container",
 };