@aquera/nile-elements 0.0.82 → 0.0.85

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.82",
+  "version": "0.0.85",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -77,7 +77,8 @@
     "./nile-format-date": "./dist/src/nile-format-date/index.js",
     "./nile-split-panel": "./dist/src/nile-split-panel/index.js",
     "./nile-list": "./dist/src/nile-list/index.js",
-    "./nile-list-item": "./dist/src/nile-list-item/index.js"
+    "./nile-list-item": "./dist/src/nile-list-item/index.js",
+    "./nile-detail": "./dist/src/nile-detail/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",

package/src/index.ts

@@ -69,3 +69,5 @@ export { NileTree } from './nile-tree';
 export { NileTreeItem } from './nile-tree-item';
 export { NileListItem } from './nile-list-item';
 export { NileList } from './nile-list';
+export { NileDetail } from './nile-detail';
+export { NileDivider } from './nile-divider';

package/src/nile-calendar/nile-calendar.css.ts

@@ -73,7 +73,7 @@ export const styles = css`
   }
 
   .day_date ,.day_name{
-		font-family: Inter;
+		font-family: var( --nile-font-family-serif);
 		font-style: normal;
 		font-size: 14px;
 		line-height: 20px;
@@ -246,7 +246,7 @@ export const styles = css`
   .duration-name{
     display:flex;
     align-items:center;
-    font-family: Inter;
+    font-family:  var( --nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 500;
@@ -255,7 +255,7 @@ export const styles = css`
   
   .duration-units{
     display:flex;
-    font-family: Inter;
+    font-family:  var( --nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;

package/src/nile-calendar/nile-calendar.ts

@@ -489,7 +489,6 @@ export class NileCalendar extends NileElement {
               index >= fillerDaysBefore.length &&
               index < fillerDaysBefore.length + daysArray.length;
             const datePlacement:''|'selected-date'|'range-start'|'range-end' = isSelectedDate(day, month, year, isCurrentMonth)
-            if(datePlacement=='selected-date') console.log(day)
             const classMapObj:any={
               'day_date' : true,
               'not-allowed' : !this.isAllowedDate(day, month, year),
@@ -714,11 +713,6 @@ export class NileCalendar extends NileElement {
    * Render method
    */
   render(): TemplateResult {
-    // const timeZones: string[] = TIMEZONES;
-    // const daysArray = this.getDaysArray(this.currentYear, this.currentMonth);
-    // const nextMonth = (this.currentMonth + 1) % 12;
-    // const nextYear = this.currentMonth === 11 ? this.currentYear + 1 : this.currentYear;
-    // const nextMonthDaysArray = this.getDaysArray(nextYear, nextMonth);
     return html`
       <div
         class=${classMap({
@@ -738,6 +732,7 @@ export class NileCalendar extends NileElement {
         ${this.type == 'relative' ? this.renderRelativeCalendar():''}
         ${this.type == 'absolute' ? this.renderAbsoluteCalendar():''}
 
+        ${!this.range?'':html`
         <div class="button-container">
           <nile-button 
           class="apply-button"  
@@ -745,6 +740,7 @@ export class NileCalendar extends NileElement {
           @click="${this.confimRange}"
           > Apply</nile-button>
         </div>
+        `}
       </div>
     `;
   }
@@ -755,7 +751,7 @@ export class NileCalendar extends NileElement {
   renderAbsoluteCalendar(){
     return html`
     <div class="calendar-wrapper">
-      <div class="calendar-container ${this.range ? 'with-margin' : ''}">
+      <div class="calendar-container">
         ${this.renderMonth(
           this.currentYear,
           this.currentMonth,
@@ -766,15 +762,6 @@ export class NileCalendar extends NileElement {
     ${this.range ? html`
     <div class="calender-input ${this.showManualInputs  ? '' : 'hidden'}" >
         <div class="from">
-          <!-- ${!this.hideInput ? html`
-            <nile-input 
-              label="Date"
-              class="manual-input" 
-              value="${this.formatDate(this.startDate)}" 
-              placeholder="DD/MM/YYYY" 
-              @nile-change="${this.handleStartDateInput}"
-            ></nile-input>`:''} -->
-
           <nile-input 
             label="From"
             class="manual-input" 
@@ -784,15 +771,6 @@ export class NileCalendar extends NileElement {
         </div>
 
         <div class="from">
-          <!-- ${!this.hideInput ? html`
-          <nile-input 
-            label="Date"
-            class="manual-input" 
-            value="${this.formatDate(this.endDate)}" 
-            placeholder="DD/MM/YYYY" 
-            @nile-change="${this.handleEndDateInput}"
-          ></nile-input>`:''} -->
-
           <nile-input 
             label="To"
             class="manual-input" 

package/src/nile-date-picker/nile-date-picker.ts

@@ -61,6 +61,8 @@ export class NileDatePicker extends NileElement {
         <nile-calendar
           value="${this.value}"
           .range="${this.range}"
+          @nile-init="${(e:CustomEvent)=>e.stopPropagation()}"
+          @nile-destroy="${(e:CustomEvent)=>e.stopPropagation()}"
           @nile-changed="${this.handleChanged}"
           allowed-dates="${this.allowedDates}"
           .hideDurationFields="${this.hideDurationFields}"
@@ -71,7 +73,8 @@ export class NileDatePicker extends NileElement {
     `;
   }
 
-  handleChanged(event: any) {
+  handleChanged(event: CustomEvent) {
+    event.stopPropagation()
     this.emit('nile-changed', event.detail);
     if (this.dropdown) {
       this.dropdown.hide();

package/src/nile-detail/index.ts

@@ -0,0 +1 @@
+export { NileDetail } from './nile-detail';

package/src/nile-detail/nile-detail.css.ts

@@ -0,0 +1,107 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * Detail CSS
+ */
+export const styles = css`
+
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+  }
+
+  .details {
+    border: solid 1px hsl(240 5.9% 90%);
+    border-radius: 0.25rem;
+    background-color: #FFFFFF;
+    overflow-anchor: none;
+  }
+
+  .details--disabled {
+    opacity: 0.5;
+  }
+
+  .details__header {
+    display: flex;
+    align-items: center;
+    border-radius: inherit;
+    padding: 1rem;
+    user-select: none;
+    cursor: pointer;
+  }
+
+  .details__header:focus {
+    outline: none;
+  }
+
+  .details__header:focus-visible {
+    outline: solid 3px hsl(200.4, 98%, 39.4%);
+    outline-offset: calc(1px + 1px);
+  }
+
+  .details--disabled .details__header {
+    cursor: not-allowed;
+  }
+
+  .details--disabled .details__header:focus-visible {
+    outline: none;
+    box-shadow: none;
+  }
+
+  .details__summary {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .details__summary-icon {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    transition: 250ms rotate ease;
+  }
+
+  .details--open .details__summary-icon {
+    rotate: 90deg;
+  }
+
+  .details--open.details--rtl .details__summary-icon {
+    rotate: -90deg;
+  }
+
+  .details--open slot[name='expand-icon'],
+  .details:not(.details--open) slot[name='collapse-icon'] {
+    display: none;
+  }
+
+  .details__body {
+    overflow: hidden;
+  }
+
+  .details__content {
+    display: block;
+    padding: 1rem;
+  }
+`;
+
+export default [styles];

package/src/nile-detail/nile-detail.ts

@@ -0,0 +1,236 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import {styles} from './nile-detail.css';
+import NileElement from '../internal/nile-element';
+import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../internal/animate';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement, query } from 'lit/decorators.js';
+import { getAnimation, setDefaultAnimation } from '../utilities/animation-registry';
+import { waitForEvent } from '../internal/event';
+import { watch } from '../internal/watch';
+import type { CSSResultGroup } from 'lit';
+
+/**
+ * Nile detail component.
+ *
+ * @tag nile-accordion
+ *
+ */
+@customElement('nile-accordion')
+export class NileDetail extends NileElement {
+
+/**
+ * @summary Details show a brief summary and expand to show additional content.
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The details' main content.
+ * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<nile-icon>`.
+ * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<nile-icon>`.
+ *
+ * @event nile-show - Emitted when the details opens.
+ * @event nile-after-show - Emitted after the details opens and all animations are complete.
+ * @event nile-hide - Emitted when the details closes.
+ * @event nile-after-hide - Emitted after the details closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+ * @csspart summary - The container that wraps the summary.
+ * @csspart summary-icon - The container that wraps the expand/collapse icons.
+ * @csspart content - The details content.
+ *
+ * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ */
+
+static styles: CSSResultGroup = styles;
+
+
+@query('.details') details: HTMLElement;
+@query('.details__header') header: HTMLElement;
+@query('.details__body') body: HTMLElement;
+@query('.details__expand-icon-slot') expandIconSlot: HTMLSlotElement;
+
+/**
+ * Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
+ * can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+ */
+@property({ type: Boolean, reflect: true }) open = false;
+
+/** The summary to show in the header. If you need to display HTML, use the `summary` slot instead. */
+@property() summary: string;
+
+/** Disables the details so it can't be toggled. */
+@property({ type: Boolean, reflect: true }) disabled = false;
+
+firstUpdated() {
+  this.body.hidden = !this.open;
+  this.body.style.height = this.open ? 'auto' : '0';
+}
+
+private handleSummaryClick() {
+  if (!this.disabled) {
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+
+    this.header.focus();
+  }
+}
+
+private handleSummaryKeyDown(event: KeyboardEvent) {
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+
+    if (this.open) {
+      this.hide();
+    } else {
+      this.show();
+    }
+  }
+
+  if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+    event.preventDefault();
+    this.hide();
+  }
+
+  if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+    event.preventDefault();
+    this.show();
+  }
+}
+
+@watch('open', { waitUntilFirstUpdate: true })
+async handleOpenChange() {
+  if (this.open) {
+    // Show
+    const nileShow = this.emit('nile-show', { cancelable: true });
+    if (nileShow.defaultPrevented) {
+      this.open = false;
+      return;
+    }
+
+    await stopAnimations(this.body);
+    this.body.hidden = false;
+
+    const { keyframes, options } = getAnimation(this, 'details.show', { dir: 'ltr' });
+    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+    this.body.style.height = 'auto';
+
+    this.emit('nile-after-show');
+  } else {
+    // Hide
+    const nileHide = this.emit('nile-hide', { cancelable: true });
+    if (nileHide.defaultPrevented) {
+      this.open = true;
+      return;
+    }
+
+    await stopAnimations(this.body);
+
+    const { keyframes, options } = getAnimation(this, 'details.hide', { dir: 'ltr' });
+    await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
+    this.body.hidden = true;
+    this.body.style.height = 'auto';
+
+    this.emit('nile-after-hide');
+  }
+}
+
+/** Shows the details. */
+async show() {
+  if (this.open || this.disabled) {
+    return undefined;
+  }
+
+  this.open = true;
+  return waitForEvent(this, 'nile-after-show');
+}
+
+/** Hides the details */
+async hide() {
+  if (!this.open || this.disabled) {
+    return undefined;
+  }
+
+  this.open = false;
+  return waitForEvent(this, 'nile-after-hide');
+}
+
+render() {
+  const isRtl = false;
+
+  return html`
+    <div
+      part="base"
+      class=${classMap({
+        details: true,
+        'details--open': this.open,
+        'details--disabled': this.disabled,
+        'details--rtl': isRtl
+      })}
+    >
+      <div
+        part="header"
+        id="header"
+        class="details__header"
+        role="button"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls="content"
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        tabindex=${this.disabled ? '-1' : '0'}
+        @click=${this.handleSummaryClick}
+        @keydown=${this.handleSummaryKeyDown}
+      >
+        <slot name="summary" part="summary" class="details__summary">${this.summary}</slot>
+
+        <span part="summary-icon" class="details__summary-icon">
+          <slot name="expand-icon">
+            <nile-icon name="arrowright"></nile-icon>
+          </slot>
+          <slot name="collapse-icon">
+            <nile-icon name="arrowright"></nile-icon>
+          </slot>
+        </span>
+      </div>
+
+      <div class="details__body" role="region" aria-labelledby="header">
+        <slot part="content" id="content" class="details__content"></slot>
+      </div>
+    </div>
+  `;
+}
+}
+
+setDefaultAnimation('details.show', {
+keyframes: [
+  { height: '0', opacity: '0' },
+  { height: 'auto', opacity: '1' }
+],
+options: { duration: 250, easing: 'linear' }
+});
+
+setDefaultAnimation('details.hide', {
+keyframes: [
+  { height: 'auto', opacity: '1' },
+  { height: '0', opacity: '0' }
+],
+options: { duration: 250, easing: 'linear' }
+});
+
+export default NileDetail;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-accordion': NileDetail;
+  }
+}

package/src/nile-divider/index.ts

@@ -0,0 +1 @@
+export { NileDivider } from './nile-divider';

package/src/nile-divider/nile-divider.css.ts

@@ -0,0 +1,42 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+
+import {css} from 'lit-element';
+
+/**
+ * Divider CSS
+ */
+export const styles = css`
+	:host {
+		display: block;
+		height: 100%;
+	}
+
+	.divider {
+		background-color: var(--nile-colors-gray-light-mode-200, #eaecf0);;
+	}
+	
+	.horizontal {
+		height: 2px;
+		width: 100%;
+		margin: 8px 0;
+	}
+
+	.vertical {
+		height: 100%;
+		width: 2px;
+		margin: 0 8px;
+		display: inline-block;
+		vertical-align: middle;
+	}
+
+	.inset {
+		margin-left: 72px;
+	}
+`;
+
+export default [styles];

package/src/nile-divider/nile-divider.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-divider.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile divider component.
+ *
+ * @tag nile-divider
+ *
+ */
+@customElement('nile-divider')
+export class NileDivider extends NileElement {
+
+	/**
+	 * The styles for nile-divider
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+	@property({ type: Boolean, reflect:true }) inset = false;
+	@property({ type: Boolean, reflect:true }) vertical = false;
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<div part="divider" class="divider ${this.vertical ? 'vertical' : 'horizontal'} ${this.inset ? 'inset' : ''}"></div>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileDivider;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-divider': NileDivider;
+  }
+}

package/src/nile-icon/icons/svg/headphones-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjEgMThWMTJDMjEgNy4wMjk0NCAxNi45NzA2IDMgMTIgM0M3LjAyOTQ0IDMgMyA3LjAyOTQ0IDMgMTJWMThNNS41IDIxQzQuMTE5MjkgMjEgMyAxOS44ODA3IDMgMTguNVYxNi41QzMgMTUuMTE5MyA0LjExOTI5IDE0IDUuNSAxNEM2Ljg4MDcxIDE0IDggMTUuMTE5MyA4IDE2LjVWMTguNUM4IDE5Ljg4MDcgNi44ODA3MSAyMSA1LjUgMjFaTTE4LjUgMjFDMTcuMTE5MyAyMSAxNiAxOS44ODA3IDE2IDE4LjVWMTYuNUMxNiAxNS4xMTkzIDE3LjExOTMgMTQgMTguNSAxNEMxOS44ODA3IDE0IDIxIDE1LjExOTMgMjEgMTYuNVYxOC41QzIxIDE5Ljg4MDcgMTkuODgwNyAyMSAxOC41IDIxWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/index.ts

@@ -240,6 +240,7 @@ export { default as headerflows } from './header-flows';
 export { default as headerfunctions } from './header-functions';
 export { default as headertasks } from './header-tasks';
 export { default as headervariable } from './header-variable';
+export { default as headphones01 } from './headphones-01';
 export { default as help1 } from './help-1';
 export { default as helpcircle } from './help-circle';
 export { default as help } from './help';
@@ -264,6 +265,7 @@ export { default as intersection } from './intersection';
 export { default as itemplaceholder } from './itemplaceholder';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
+export { default as keyboard01 } from './keyboard-01';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree01 } from './layers-three-01';
@@ -303,6 +305,7 @@ export { default as menu } from './menu';
 export { default as messagenotificationsquare } from './message-notification-square';
 export { default as minus } from './minus';
 export { default as monitor01 } from './monitor-01';
+export { default as mouse } from './mouse';
 export { default as moveleft } from './moveleft';
 export { default as moveright } from './moveright';
 export { default as multipleuser } from './multiple-user';
@@ -359,6 +362,7 @@ export { default as predefined } from './predefined';
 export { default as prevup } from './prev-up';
 export { default as prev } from './prev';
 export { default as preview } from './preview';
+export { default as printer } from './printer';
 export { default as priorityhigh } from './priority-high';
 export { default as priorityhighest } from './priority-highest';
 export { default as prioritylow } from './priority-low';

package/src/nile-icon/icons/svg/keyboard-01.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNiAxMEg2LjAxTTggMTRIOC4wMU0xMCAxMEgxMC4wMU0xMiAxNEgxMi4wMU0xNCAxMEgxNC4wMU0xNiAxNEgxNi4wMU0xOCAxMEgxOC4wMU01LjIgMThIMTguOEMxOS45MjAxIDE4IDIwLjQ4MDIgMTggMjAuOTA4IDE3Ljc4MkMyMS4yODQzIDE3LjU5MDMgMjEuNTkwMyAxNy4yODQzIDIxLjc4MiAxNi45MDhDMjIgMTYuNDgwMiAyMiAxNS45MjAxIDIyIDE0LjhWOS4yQzIyIDguMDc5OSAyMiA3LjUxOTg0IDIxLjc4MiA3LjA5MjAyQzIxLjU5MDMgNi43MTU2OSAyMS4yODQzIDYuNDA5NzMgMjAuOTA4IDYuMjE3OTlDMjAuNDgwMiA2IDE5LjkyMDEgNiAxOC44IDZINS4yQzQuMDc5ODkgNiAzLjUxOTg0IDYgMy4wOTIwMiA2LjIxNzk5QzIuNzE1NjkgNi40MDk3MyAyLjQwOTczIDYuNzE1NjkgMi4yMTc5OSA3LjA5MjAyQzIgNy41MTk4NCAyIDguMDc5ODkgMiA5LjJWMTQuOEMyIDE1LjkyMDEgMiAxNi40ODAyIDIuMjE3OTkgMTYuOTA4QzIuNDA5NzMgMTcuMjg0MyAyLjcxNTY5IDE3LjU5MDMgMy4wOTIwMiAxNy43ODJDMy41MTk4NCAxOCA0LjA3OTkgMTggNS4yIDE4WiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-icon/icons/svg/mouse.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIgOVY2TTEyIDIyQzguMTM0MDEgMjIgNSAxOC44NjYgNSAxNVY5QzUgNS4xMzQwMSA4LjEzNDAxIDIgMTIgMkMxNS44NjYgMiAxOSA1LjEzNDAxIDE5IDlWMTVDMTkgMTguODY2IDE1Ljg2NiAyMiAxMiAyMloiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/printer.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTggN1Y1LjJDMTggNC4wNzk5IDE4IDMuNTE5ODQgMTcuNzgyIDMuMDkyMDJDMTcuNTkwMyAyLjcxNTY5IDE3LjI4NDMgMi40MDk3MyAxNi45MDggMi4yMTc5OUMxNi40ODAyIDIgMTUuOTIwMSAyIDE0LjggMkg5LjJDOC4wNzk5IDIgNy41MTk4NCAyIDcuMDkyMDIgMi4yMTc5OUM2LjcxNTY5IDIuNDA5NzMgNi40MDk3MyAyLjcxNTY5IDYuMjE3OTkgMy4wOTIwMkM2IDMuNTE5ODQgNiA0LjA3OTkgNiA1LjJWN002IDE4QzUuMDcwMDMgMTggNC42MDUwNCAxOCA0LjIyMzU0IDE3Ljg5NzhDMy4xODgyNyAxNy42MjA0IDIuMzc5NjIgMTYuODExNyAyLjEwMjIyIDE1Ljc3NjVDMiAxNS4zOTUgMiAxNC45MyAyIDE0VjExLjhDMiAxMC4xMTk4IDIgOS4yNzk3NiAyLjMyNjk4IDguNjM4MDNDMi42MTQ2IDguMDczNTQgMy4wNzM1NCA3LjYxNDYgMy42MzgwMyA3LjMyNjk4QzQuMjc5NzYgNyA1LjExOTg0IDcgNi44IDdIMTcuMkMxOC44ODAyIDcgMTkuNzIwMiA3IDIwLjM2MiA3LjMyNjk4QzIwLjkyNjUgNy42MTQ2IDIxLjM4NTQgOC4wNzM1NCAyMS42NzMgOC42MzgwM0MyMiA5LjI3OTc2IDIyIDEwLjExOTggMjIgMTEuOFYxNEMyMiAxNC45MyAyMiAxNS4zOTUgMjEuODk3OCAxNS43NzY1QzIxLjYyMDQgMTYuODExNyAyMC44MTE3IDE3LjYyMDQgMTkuNzc2NSAxNy44OTc4QzE5LjM5NSAxOCAxOC45MyAxOCAxOCAxOE0xNSAxMC41SDE4TTkuMiAyMkgxNC44QzE1LjkyMDEgMjIgMTYuNDgwMiAyMiAxNi45MDggMjEuNzgyQzE3LjI4NDMgMjEuNTkwMyAxNy41OTAzIDIxLjI4NDMgMTcuNzgyIDIwLjkwOEMxOCAyMC40ODAyIDE4IDE5LjkyMDEgMTggMTguOFYxNy4yQzE4IDE2LjA3OTkgMTggMTUuNTE5OCAxNy43ODIgMTUuMDkyQzE3LjU5MDMgMTQuNzE1NyAxNy4yODQzIDE0LjQwOTcgMTYuOTA4IDE0LjIxOEMxNi40ODAyIDE0IDE1LjkyMDEgMTQgMTQuOCAxNEg5LjJDOC4wNzk5IDE0IDcuNTE5ODQgMTQgNy4wOTIwMiAxNC4yMThDNi43MTU2OSAxNC40MDk3IDYuNDA5NzMgMTQuNzE1NyA2LjIxNzk5IDE1LjA5MkM2IDE1LjUxOTggNiAxNi4wNzk5IDYgMTcuMlYxOC44QzYgMTkuOTIwMSA2IDIwLjQ4MDIgNi4yMTc5OSAyMC45MDhDNi40MDk3MyAyMS4yODQzIDYuNzE1NjkgMjEuNTkwMyA3LjA5MjAyIDIxLjc4MkM3LjUxOTg0IDIyIDguMDc5ODkgMjIgOS4yIDIyWiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+";

package/src/nile-menu/nile-menu.ts

@@ -192,7 +192,7 @@ export class NileMenu extends NileElement {
   render() {
     return html`
       ${this.searchEnabled
-        ? html`<div class="search__wrapper" part="search__wrapper" >
+        ? html`<div class="search__wrapper" part="search__wrapper">
             <nile-input
               size="medium"
               style=${this.searchWidth
@@ -208,13 +208,14 @@ export class NileMenu extends NileElement {
             </nile-input>
           </div>`
         : html``}
-      <div class="menu__items-wrapper">
+      <div part="menu__items-wrapper" class="menu__items-wrapper">
         ${this.showNoResults
           ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `
           : ''}
 
         <slot
           name="menu__header"
+          part="menu__header"
           @click=${(e: Event) => {
             e.stopPropagation();
           }}