npm - @aquera/nile-elements - Versions diffs - 0.0.42 → 0.0.43 - Mend

@@ -5,9 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
-import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import {
+  LitElement,
+  html,
+  property,
+  CSSResultArray,
+  TemplateResult,
+} from 'lit-element';
 import { customElement } from 'lit/decorators.js';
-import {styles} from './nile-menu-item.css';
+import { styles } from './nile-menu-item.css';
 import '../nile-icon';
 import { classMap } from 'lit/directives/class-map.js';
 import { query } from 'lit/decorators.js';
@@ -60,6 +66,9 @@ export class NileMenuItem extends NileElement {
   /** Draws the menu item in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
+  /** Draws the item in a checked state. */
+  @property({ type: Boolean, reflect: true }) hasSubMenu = false;
   connectedCallback() {
     super.connectedCallback();
     this.handleHostClick = this.handleHostClick.bind(this);
@@ -83,7 +92,11 @@ export class NileMenuItem extends NileElement {
     // When the label changes, emit a slotchange event so parent controls see it
     if (textLabel !== this.cachedTextLabel) {
       this.cachedTextLabel = textLabel;
-      this.emit('slotchange', { bubbles: true, composed: false, cancelable: false });
+      this.emit('slotchange', {
+        bubbles: true,
+        composed: false,
+        cancelable: false,
+      });
     }
   }
@@ -100,7 +113,10 @@ export class NileMenuItem extends NileElement {
     // For proper accessibility, users have to use type="checkbox" to use the checked attribute
     if (this.checked && this.type !== 'checkbox') {
       this.checked = false;
-      console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+      console.error(
+        'The checked attribute can only be used on menu items with type="checkbox"',
+        this
+      );
       return;
     }
@@ -141,21 +157,38 @@ export class NileMenuItem extends NileElement {
           'menu-item': true,
           'menu-item--checked': this.checked,
           'menu-item--disabled': this.disabled,
-          'menu-item--has-submenu': false // reserved for future use
+          'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
         })}
       >
         <span part="checked-icon" class="menu-item__check">
-          <nile-icon name="tick" library="system" aria-hidden="true"></nile-icon>
+          <nile-icon
+            name="tick"
+            library="system"
+            aria-hidden="true"
+          ></nile-icon>
         </span>
-        <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+        <slot
+          name="prefix"
+          part="prefix"
+          class="menu-item__prefix"
+        ></slot>
-        <slot part="label" class="menu-item__label" @slotchange=${this.handleDefaultSlotChange}></slot>
+        <slot
+          part="label"
+          class="menu-item__label"
+          @slotchange=${this.handleDefaultSlotChange}
+        ></slot>
         <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
         <span part="submenu-icon" class="menu-item__chevron">
-          <nile-icon name="arrowright" library="system" aria-hidden="true"></nile-icon>
+          <nile-icon
+            name="arrowright"
+            library="system"
+            aria-hidden="true"
+          ></nile-icon>
         </span>
       </div>
     `;

@@ -31,7 +31,7 @@ export const styles = css`
   .link__label {
     color: #005ea6;
     text-align: center;
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

@@ -41,6 +41,10 @@ export class NileMenu extends NileElement {
     const target = event.target as HTMLElement;
     const item = target.closest('nile-menu-item');
+    if (item?.hasSubMenu) {
+      return;
+    }
     // if (!item || item.disabled || item.inert) {
     if (!item || item.disabled) {
       return;
@@ -180,23 +184,30 @@ export class NileMenu extends NileElement {
   render() {
     return html`
       <div>
-          ${this.searchEnabled
-            ? html` <nile-input
-                size="medium"
-                clearable
-                style=${this.searchWidth
-                  ? `width: ${this.searchWidth}px;`
-                  : 'width: 100%;'}
-                .value=${this.searchValue}
-                placeholder="Search..."
-                @nile-input=${this.handleSearchChange}
-              >
-                <nile-icon name="search" slot="suffix"> </nile-icon>
-              </nile-input>`
-            : html``}
+        ${this.searchEnabled
+          ? html` <nile-input
+              size="medium"
+              clearable
+              style=${this.searchWidth
+                ? `width: ${this.searchWidth}px;`
+                : 'width: 100%;'}
+              .value=${this.searchValue}
+              placeholder="Search..."
+              @nile-input=${this.handleSearchChange}
+            >
+              <nile-icon name="search" slot="suffix"> </nile-icon>
+            </nile-input>`
+          : html``}
         ${this.showNoResults
           ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
           : ''}
+        <slot
+          name="menu__header"
+          @click=${(e: Event) => {
+            e.stopPropagation();
+          }}
+        ></slot>
         <slot
           @slotchange=${this.handleSlotChange}
           @click=${this.handleClick}

@@ -19,7 +19,7 @@ export const styles = css`
     display: block;
     color: var(--Dark-Normal, var(--Color-Text-Default, #000));
     font-feature-settings: 'clig' off, 'liga' off;
-    font-family: Colfax;
+    font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
     font-style: normal;
     font-weight: 500;

@@ -21,7 +21,7 @@ export default css`
     padding: 0;
     font-size: 14px;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

@@ -106,9 +106,7 @@ export const styles = css`
     position: relative;
     align-items: center;
     justify-content: start;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-      Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-      'Segoe UI Symbol';
+    font-family: var(--nile-font-family-sans-serif);
     font-weight: 400;
     letter-spacing: normal;
     vertical-align: middle;

@@ -20,7 +20,7 @@ export const styles = css`
     cursor: pointer;
   }
   .pointer-cursor-not-allowed {
-    cursor: default;
+    pointer-events: none;
   }
   .switcher__label {
@@ -28,7 +28,7 @@ export const styles = css`
     align-items: center;
     color: inherit;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
+    font-family:var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

@@ -333,7 +333,7 @@ export class NileSwitcher extends NileElement {
     } = Input;
     return html`<nile-code-editor
       part="switcher-code-editor"
-      exportparts="switcher-code-editor-base"
+      exportparts="code-editor-base"
       class=${classMap({
         'code-editor': true,
       })}

@aquera/nile-elements 0.0.42 → 0.0.43