@umbraco-ui/uui-menu-item 1.2.1 → 1.3.0-rc.1

package/custom-elements.json

@@ -168,8 +168,8 @@
           "description": "fires when the media card is selected"
         },
         {
-          "name": "unselected",
-          "description": "fires when the media card is unselected"
+          "name": "deselected",
+          "description": "fires when the media card is deselected"
         }
       ],
       "slots": [

package/lib/index.js

@@ -34,9 +34,24 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
     this.hasChildren = false;
     this.loading = false;
     this.iconSlotHasContent = false;
-  }
-  labelButtonChanged(label) {
-    this.selectableTarget = label || this;
+    this._labelButtonChanged = (label) => {
+      this.selectableTarget = label || this;
+    };
+    this._iconSlotChanged = (e) => {
+      this.iconSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+    };
+    this._onCaretClicked = () => {
+      const eventName = this.showChildren ? UUIMenuItemEvent.HIDE_CHILDREN : UUIMenuItemEvent.SHOW_CHILDREN;
+      const event = new UUIMenuItemEvent(eventName, { cancelable: true });
+      this.dispatchEvent(event);
+      if (event.defaultPrevented)
+        return;
+      this.showChildren = !this.showChildren;
+    };
+    this._onLabelClicked = () => {
+      const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);
+      this.dispatchEvent(event);
+    };
   }
   connectedCallback() {
     super.connectedCallback();
@@ -45,43 +60,30 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
     demandCustomElement(this, "uui-symbol-expand");
     demandCustomElement(this, "uui-loader-bar");
   }
-  iconSlotChanged(e) {
-    this.iconSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
-  }
-  onCaretClicked() {
-    this.showChildren = !this.showChildren;
-    const eventName = this.showChildren ? UUIMenuItemEvent.SHOW_CHILDREN : UUIMenuItemEvent.HIDE_CHILDREN;
-    const event = new UUIMenuItemEvent(eventName);
-    this.dispatchEvent(event);
-  }
-  onLabelClicked() {
-    const event = new UUIMenuItemEvent(UUIMenuItemEvent.CLICK_LABEL);
-    this.dispatchEvent(event);
-  }
   _renderLabelInside() {
     return html` <slot
         name="icon"
         id="icon"
         style=${this.iconSlotHasContent ? "" : "display: none;"}
-        @slotchange=${this.iconSlotChanged}></slot>
+        @slotchange=${this._iconSlotChanged}></slot>
       ${this.renderLabel()}
       <slot name="badge" id="badge"> </slot>`;
   }
   _renderLabelAsAnchor() {
     if (this.disabled) {
-      return html` <span id="label-button" ${ref(this.labelButtonChanged)}>
+      return html` <span id="label-button" ${ref(this._labelButtonChanged)}>
         ${this._renderLabelInside()}
       </span>`;
     }
     return html` <a
       id="label-button"
-      ${ref(this.labelButtonChanged)}
+      ${ref(this._labelButtonChanged)}
       href=${ifDefined(this.href)}
       target=${ifDefined(this.target || void 0)}
       rel=${ifDefined(
       this.target === "_blank" ? "noopener noreferrer" : void 0
     )}
-      @click=${this.onLabelClicked}
+      @click=${this._onLabelClicked}
       ?disabled=${this.disabled}
       aria-label="${this.label}">
       ${this._renderLabelInside()}
@@ -90,8 +92,8 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
   _renderLabelAsButton() {
     return html` <button
       id="label-button"
-      ${ref(this.labelButtonChanged)}
-      @click=${this.onLabelClicked}
+      ${ref(this._labelButtonChanged)}
+      @click=${this._onLabelClicked}
       ?disabled=${this.disabled}
       aria-label="${this.label}">
       ${this._renderLabelInside()}
@@ -100,7 +102,7 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
   render() {
     return html`
       <div id="menu-item" aria-label="menuitem" role="menuitem">
-        ${this.hasChildren ? html`<button id="caret-button" @click=${this.onCaretClicked}>
+        ${this.hasChildren ? html`<button id="caret-button" @click=${this._onCaretClicked}>
               <uui-symbol-expand ?open=${this.showChildren}></uui-symbol-expand>
             </button>` : ""}
         ${this.href ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}

package/lib/uui-menu-item.element.d.ts

@@ -56,11 +56,11 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
      */
     target?: '_blank' | '_parent' | '_self' | '_top';
     private iconSlotHasContent;
-    labelButtonChanged(label?: Element | undefined): void;
     connectedCallback(): void;
-    private iconSlotChanged;
-    private onCaretClicked;
-    private onLabelClicked;
+    private _labelButtonChanged;
+    private _iconSlotChanged;
+    private _onCaretClicked;
+    private _onLabelClicked;
     private _renderLabelInside;
     private _renderLabelAsAnchor;
     private _renderLabelAsButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "1.2.1",
+  "version": "1.3.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,18 +30,18 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.1",
-    "@umbraco-ui/uui-loader-bar": "1.2.1",
-    "@umbraco-ui/uui-symbol-expand": "1.2.1"
+    "@umbraco-ui/uui-base": "1.3.0-rc.1",
+    "@umbraco-ui/uui-loader-bar": "1.3.0-rc.1",
+    "@umbraco-ui/uui-symbol-expand": "1.3.0-rc.1"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
-    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json",
     "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
-  "gitHead": "94eb22bee5ff21bac6fadbd78653671279bebe36"
+  "gitHead": "0c517175884931aa0bc0d8f05974852a7704626e"
 }