@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.598

package/dist/collection/components/dropdown-item/dropdown-item.js

@@ -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.596
+ * v1.0.0-next.598
  */
-import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { CSS } from "./resources";
 /**
@@ -60,8 +60,7 @@ export class DropdownItem {
   render() {
     const scale = getElementProp(this.el, "scale", "m");
     const iconStartEl = (h("calcite-icon", { class: "dropdown-item-icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-    const contentNode = (h("span", { class: "dropdown-item-content" },
-      h("slot", null)));
+    const contentNode = (h("span", { class: "dropdown-item-content" }, h("slot", null)));
     const iconEndEl = (h("calcite-icon", { class: "dropdown-item-icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
     const slottedContent = this.iconStart && this.iconEnd
       ? [iconStartEl, contentNode, iconEndEl]
@@ -79,19 +78,16 @@ export class DropdownItem {
           ? "menuitemcheckbox"
           : "menuitem";
     const itemAria = this.selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
-    return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" },
-      h("div", { class: {
-          container: true,
-          [CSS.containerLink]: !!this.href,
-          [CSS.containerSmall]: scale === "s",
-          [CSS.containerMedium]: scale === "m",
-          [CSS.containerLarge]: scale === "l",
-          [CSS.containerMulti]: this.selectionMode === "multi",
-          [CSS.containerSingle]: this.selectionMode === "single",
-          [CSS.containerNone]: this.selectionMode === "none"
-        } },
-        this.selectionMode !== "none" ? (h("calcite-icon", { class: "dropdown-item-icon", icon: this.selectionMode === "multi" ? "check" : "bullet-point", scale: "s" })) : null,
-        contentEl)));
+    return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" }, h("div", { class: {
+        container: true,
+        [CSS.containerLink]: !!this.href,
+        [CSS.containerSmall]: scale === "s",
+        [CSS.containerMedium]: scale === "m",
+        [CSS.containerLarge]: scale === "l",
+        [CSS.containerMulti]: this.selectionMode === "multi",
+        [CSS.containerSingle]: this.selectionMode === "single",
+        [CSS.containerNone]: this.selectionMode === "none"
+      } }, this.selectionMode !== "none" ? (h("calcite-icon", { class: "dropdown-item-icon", icon: this.selectionMode === "multi" ? "check" : "bullet-point", scale: "s" })) : null, contentEl)));
   }
   //--------------------------------------------------------------------------
   //
@@ -176,285 +172,299 @@ export class DropdownItem {
   }
   static get is() { return "calcite-dropdown-item"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["dropdown-item.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["dropdown-item.css"]
-  }; }
-  static get properties() { return {
-    "active": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "name": "deprecated",
-            "text": "Use selected instead."
-          }],
-        "text": "Indicates whether the item is active."
-      },
-      "attribute": "active",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "selected": {
-      "type": "boolean",
-      "mutable": true,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["dropdown-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["dropdown-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "deprecated",
+              "text": "Use selected instead."
+            }],
+          "text": "Indicates whether the item is active."
+        },
+        "attribute": "active",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, item is selected"
+      "selected": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, item is selected"
+        },
+        "attribute": "selected",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "selected",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "iconFlipRtl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "FlipContext",
-        "resolved": "\"both\" | \"end\" | \"start\"",
-        "references": {
-          "FlipContext": {
-            "location": "import",
-            "path": "../interfaces"
+      "iconFlipRtl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FlipContext",
+          "resolved": "\"both\" | \"end\" | \"start\"",
+          "references": {
+            "FlipContext": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "flip the icon(s) in rtl"
-      },
-      "attribute": "icon-flip-rtl",
-      "reflect": true
-    },
-    "iconStart": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass an icon to display at the start of an item - accepts calcite ui icon names"
-      },
-      "attribute": "icon-start",
-      "reflect": true
-    },
-    "iconEnd": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass an icon to display at the end of an item - accepts calcite ui icon names"
-      },
-      "attribute": "icon-end",
-      "reflect": true
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optionally pass a href - used to determine if the component should render as anchor"
-      },
-      "attribute": "href",
-      "reflect": true
-    },
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Applies to the aria-label attribute on the button or hyperlink"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When true, the icon will be flipped when the element direction is right-to-left (`\"rtl\"`)."
+        },
+        "attribute": "icon-flip-rtl",
+        "reflect": true
       },
-      "attribute": "label",
-      "reflect": false
-    },
-    "rel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "iconStart": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an icon to display at the start of the component."
+        },
+        "attribute": "icon-start",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The rel attribute to apply to the hyperlink"
+      "iconEnd": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies an icon to display at the end of the component."
+        },
+        "attribute": "icon-end",
+        "reflect": true
       },
-      "attribute": "rel",
-      "reflect": true
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "optionally pass a href - used to determine if the component should render as anchor"
+        },
+        "attribute": "href",
+        "reflect": true
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The target attribute to apply to the hyperlink"
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Applies to the aria-label attribute on the button or hyperlink"
+        },
+        "attribute": "label",
+        "reflect": false
       },
-      "attribute": "target",
-      "reflect": true
-    }
-  }; }
-  static get events() { return [{
-      "method": "calciteInternalDropdownItemSelect",
-      "name": "calciteInternalDropdownItemSelect",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The rel attribute to apply to the hyperlink"
+        },
+        "attribute": "rel",
+        "reflect": true
       },
-      "complexType": {
-        "original": "RequestedItem",
-        "resolved": "RequestedItem",
-        "references": {
-          "RequestedItem": {
-            "location": "import",
-            "path": "../dropdown-group/interfaces"
-          }
-        }
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The target attribute to apply to the hyperlink"
+        },
+        "attribute": "target",
+        "reflect": true
       }
-    }, {
-      "method": "calciteInternalDropdownItemKeyEvent",
-      "name": "calciteInternalDropdownItemKeyEvent",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ItemKeyboardEvent",
-        "resolved": "ItemKeyboardEvent",
-        "references": {
-          "ItemKeyboardEvent": {
-            "location": "import",
-            "path": "../dropdown/interfaces"
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteInternalDropdownItemSelect",
+        "name": "calciteInternalDropdownItemSelect",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "RequestedItem",
+          "resolved": "RequestedItem",
+          "references": {
+            "RequestedItem": {
+              "location": "import",
+              "path": "../dropdown-group/interfaces"
+            }
           }
         }
-      }
-    }, {
-      "method": "calciteInternalDropdownCloseRequest",
-      "name": "calciteInternalDropdownCloseRequest",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [{
-            "name": "internal",
-            "text": undefined
-          }],
-        "text": ""
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-  static get methods() { return {
-    "setFocus": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }, {
+        "method": "calciteInternalDropdownItemKeyEvent",
+        "name": "calciteInternalDropdownItemKeyEvent",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ItemKeyboardEvent",
+          "resolved": "ItemKeyboardEvent",
+          "references": {
+            "ItemKeyboardEvent": {
+              "location": "import",
+              "path": "../dropdown/interfaces"
+            }
           }
+        }
+      }, {
+        "method": "calciteInternalDropdownCloseRequest",
+        "name": "calciteInternalDropdownCloseRequest",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": ""
         },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "Sets focus on the component.",
-        "tags": []
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "setFocus": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Sets focus on the component.",
+          "tags": []
+        }
       }
-    }
-  }; }
+    };
+  }
   static get elementRef() { return "el"; }
-  static get watchers() { return [{
-      "propName": "active",
-      "methodName": "activeHandler"
-    }, {
-      "propName": "selected",
-      "methodName": "selectedHandler"
-    }]; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "onClick",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "keydown",
-      "method": "keyDownHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "calciteInternalDropdownItemChange",
-      "method": "updateActiveItemOnChange",
-      "target": "body",
-      "capture": false,
-      "passive": false
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "active",
+        "methodName": "activeHandler"
+      }, {
+        "propName": "selected",
+        "methodName": "selectedHandler"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "keyDownHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "calciteInternalDropdownItemChange",
+        "method": "updateActiveItemOnChange",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/dropdown-item/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-next.596
+ * v1.0.0-next.598
  */
 export const CSS = {
   containerLink: "container--link",