@umbraco-ui/uui-menu-item 1.2.0 → 1.3.0-rc.0

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()}
@@ -138,25 +140,25 @@ UUIMenuItemElement.styles = [
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #caret-button:hover {
-        background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
+        background-color: var(--uui-color-surface-emphasis,var(--uui-palette-white-dark));
       }
       :host(:not([active], [selected], [disabled]))
         #menu-item
         #label-button:hover,
       :host(:not([active], [selected])) #menu-item #caret-button:hover {
-        color: var(--uui-color-interactive-emphasis,#3544b1);
+        color: var(--uui-color-interactive-emphasis,var(--uui-palette-violet-blue));
       }
 
       :host([active]) #label-button,
       :host([active]) #caret-button {
-        color: var(--uui-color-current-contrast,#1b264f);
+        color: var(--uui-color-current-contrast,var(--uui-palette-space-cadet));
       }
       :host([active]) #label-button-background {
-        background-color: var(--uui-color-current,#f5c1bc);
+        background-color: var(--uui-color-current,var(--uui-palette-spanish-pink));
       }
       :host([active]) #label-button:hover ~ #label-button-background,
       :host([active]) #caret-button:hover {
-        background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
+        background-color: var(--uui-color-current-emphasis,var(--uui-palette-spanish-pink-light));
       }
 
       :host([selected]) #label-button,
@@ -164,16 +166,16 @@ UUIMenuItemElement.styles = [
         color: var(--uui-color-selected-contrast,#fff);
       }
       :host([selected]) #label-button-background {
-        background-color: var(--uui-color-selected,#3544b1);
+        background-color: var(--uui-color-selected,var(--uui-palette-violet-blue));
       }
       :host([selected]) #label-button:hover ~ #label-button-background,
       :host([selected]) #caret-button:hover {
-        background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
+        background-color: var(--uui-color-selected-emphasis,var(--uui-palette-violet-blue-light));
       }
 
       :host([disabled]) #menu-item {
-        color: var(--uui-color-disabled-contrast,#c4c4c4);
-        background-color: var(--uui-color-disabled,#f3f3f5);
+        color: var(--uui-color-disabled-contrast,var(--uui-palette-grey));
+        background-color: var(--uui-color-disabled,var(--uui-palette-sand));
       }
       :host([disabled]) #label-button {
         cursor: default;
@@ -229,7 +231,7 @@ UUIMenuItemElement.styles = [
         display: flex;
         align-items: center;
         justify-content: center;
-        color: var(--uui-color-interactive,#1b264f);
+        color: var(--uui-color-interactive,var(--uui-palette-space-cadet));
       }
 
       #label-button-background {

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.0",
+  "version": "1.3.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,18 +30,18 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.2.0",
-    "@umbraco-ui/uui-loader-bar": "1.2.0",
-    "@umbraco-ui/uui-symbol-expand": "1.2.0"
+    "@umbraco-ui/uui-base": "1.3.0-rc.0",
+    "@umbraco-ui/uui-loader-bar": "1.3.0-rc.0",
+    "@umbraco-ui/uui-symbol-expand": "1.3.0-rc.0"
   },
   "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 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": "78ce6df4b259921ed47e25ce10812920f25cbc1c"
+  "gitHead": "45c3824056586d9817efb3f61dc0bef5478747f0"
 }