npm - @esri/calcite-components - Versions diffs - 1.4.0-next.13 → 1.4.0-next.15 - Mend

@esri/calcite-components 1.4.0-next.13 → 1.4.0-next.15

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

package/dist/collection/components/menu/assets/menu/t9n/messages_sl.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "Več"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_sr.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "Više"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_sv.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "Mer"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_th.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "กว่า"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_tr.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "Daha fazla"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_uk.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "Більше"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_vi.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "Thêm"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_zh-CN.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "大于"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_zh-HK.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "較多"
+}

package/dist/collection/components/menu/assets/menu/t9n/messages_zh-TW.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "more": "較多"
+}

package/dist/collection/components/menu/menu.css ADDED Viewed

@@ -0,0 +1,132 @@
+/* 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 {
+  display: flex;
+}
+ul {
+  margin: 0px;
+  display: inline-flex;
+  block-size: 100%;
+  align-items: center;
+  padding: 0px;
+}
+:host([layout=vertical]) ul {
+  display: flex;
+  inline-size: 100%;
+  flex-direction: column;
+}

package/dist/collection/components/menu/menu.js ADDED Viewed

@@ -0,0 +1,321 @@
+/*!
+ * 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.15
+ */
+import { h, Host } from "@stencil/core";
+import { focusElement, focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
+import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+export class CalciteMenu {
+  constructor() {
+    this.menuItems = [];
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.handleMenuSlotChange = (event) => {
+      this.menuItems = slotChangeGetAssignedElements(event);
+      this.setMenuItemLayout(this.menuItems, this.layout);
+    };
+    this.label = undefined;
+    this.layout = "horizontal";
+    this.messageOverrides = undefined;
+    this.messages = undefined;
+    this.role = "menubar";
+    this.defaultMessages = undefined;
+    this.effectiveLocale = "";
+  }
+  handleLayoutChange(value) {
+    this.setMenuItemLayout(this.menuItems, value);
+  }
+  onMessagesChange() {
+    /* wired up by t9n util */
+  }
+  effectiveLocaleChange() {
+    updateMessages(this, this.effectiveLocale);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    connectLocalized(this);
+    connectMessages(this);
+  }
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    await setUpMessages(this);
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  disconnectedCallback() {
+    disconnectLocalized(this);
+    disconnectMessages(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /** Sets focus on the component's first focusable element. */
+  async setFocus() {
+    await componentLoaded(this);
+    this.el.focus();
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  calciteInternalNavMenuItemKeyEvent(event) {
+    const target = event.target;
+    const submenuItems = event.detail.children;
+    const key = event.detail.event.key;
+    event.stopPropagation();
+    if (key === "ArrowDown") {
+      if (target.layout === "vertical") {
+        focusElementInGroup(this.menuItems, target, "next", false);
+      }
+      else {
+        if (event.detail.isSubmenuOpen) {
+          submenuItems[0].setFocus();
+        }
+      }
+    }
+    else if (key === "ArrowUp") {
+      if (this.layout === "vertical") {
+        focusElementInGroup(this.menuItems, target, "previous", false);
+      }
+      else {
+        if (event.detail.isSubmenuOpen) {
+          submenuItems[submenuItems.length - 1].setFocus();
+        }
+      }
+    }
+    else if (key === "ArrowRight") {
+      if (this.layout === "horizontal") {
+        focusElementInGroup(this.menuItems, target, "next", false);
+      }
+      else {
+        if (event.detail.isSubmenuOpen) {
+          submenuItems[0].setFocus();
+        }
+      }
+    }
+    else if (key === "ArrowLeft") {
+      if (this.layout === "horizontal") {
+        focusElementInGroup(this.menuItems, target, "previous", false);
+      }
+      else {
+        if (event.detail.isSubmenuOpen) {
+          this.focusParentElement(event.target);
+        }
+      }
+    }
+    else if (key === "Escape") {
+      this.focusParentElement(event.target);
+    }
+    event.preventDefault();
+  }
+  focusParentElement(el) {
+    const parentEl = el.parentElement;
+    if (parentEl) {
+      focusElement(parentEl);
+      parentEl.open = false;
+    }
+  }
+  setMenuItemLayout(items, layout) {
+    items.forEach((item) => {
+      item.layout = layout;
+      if (this.role === "menubar") {
+        item.isTopLevelItem = true;
+        item.topLevelMenuLayout = this.layout;
+      }
+    });
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Render Methods
+  //
+  // --------------------------------------------------------------------------
+  render() {
+    return (h(Host, null, h("ul", { "aria-label": this.label, role: this.role }, h("slot", { onSlotchange: this.handleMenuSlotChange }))));
+  }
+  static get is() { return "calcite-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get delegatesFocus() { return true; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["menu.css"]
+    };
+  }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Accessible name for the component."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "Layout": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the layout of the component."
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"horizontal\""
+      },
+      "messageOverrides": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "Partial<MenuMessages>",
+          "resolved": "{ more?: string; }",
+          "references": {
+            "Partial": {
+              "location": "global"
+            },
+            "MenuMessages": {
+              "location": "import",
+              "path": "./assets/menu/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Use this property to override individual strings used by the component."
+        }
+      },
+      "messages": {
+        "type": "unknown",
+        "mutable": true,
+        "complexType": {
+          "original": "MenuMessages",
+          "resolved": "{ more: string; }",
+          "references": {
+            "MenuMessages": {
+              "location": "import",
+              "path": "./assets/menu/t9n"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Made into a prop for testing purposes only."
+        }
+      },
+      "role": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the role of `menu` component. Marked as internal for parsing the role attribute in `menu-item` component shadowDOM.\nThis property falls outside of the `globalAttribute` interface pattern because it is immutable and has a default value."
+        },
+        "attribute": "role",
+        "reflect": false,
+        "defaultValue": "\"menubar\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "defaultMessages": {},
+      "effectiveLocale": {}
+    };
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component's first focusable element.",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "layout",
+        "methodName": "handleLayoutChange"
+      }, {
+        "propName": "messageOverrides",
+        "methodName": "onMessagesChange"
+      }, {
+        "propName": "effectiveLocale",
+        "methodName": "effectiveLocaleChange"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "calciteInternalMenuItemKeyEvent",
+        "method": "calciteInternalNavMenuItemKeyEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}