@aquera/nile-elements 1.2.1-beta-1.0 → 1.2.1-beta-1.1

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* 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.
+*/
+/**
+ * SideBarActionMenu CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.js

@@ -0,0 +1,73 @@
+/**
+* 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';
+/**
+ * SideBarActionMenu CSS
+ */
+export const styles = css `
+   :host {
+    display: block;
+    position: relative;
+    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
+    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));
+    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));
+    overflow: hidden;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    height: 100%;
+    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
+      0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+    /* overscroll-behavior: none; */
+    /* -ms-overflow-style: none; */
+    /* scrollbar-width: none; */
+  }
+
+  .search__wrapper {
+    box-sizing: border-box;
+    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));
+    position: sticky;
+    z-index: 999;
+    top: 0px;
+    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
+    height: 64px;
+  }
+
+  .menu__items-wrapper {
+    overflow: auto;
+    max-height: var(--auto-size-available-height);
+  }
+
+  ::slotted(nile-divider) {
+    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
+  }
+
+  .menu__footer {
+    display: var(--nile-display-flex, var(--ng-display-none)); 
+    /* No need to tokenize below - token not required*/
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
+    align-items: stretch;
+    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    line-height: 180%;
+    letter-spacing: normal;
+    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));
+    min-height: 40px;
+    transition: 150ms fill;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);
+    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));
+  }
+
+  .menu__footer:hover {
+    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-action-menu.css.js.map

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-action-menu.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarActionMenu CSS\n */\nexport const styles = css`\n   :host {\n    display: block;\n    position: relative;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));\n    overflow: hidden;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    height: 100%;\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    /* overscroll-behavior: none; */\n    /* -ms-overflow-style: none; */\n    /* scrollbar-width: none; */\n  }\n\n  .search__wrapper {\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));\n    position: sticky;\n    z-index: 999;\n    top: 0px;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    height: 64px;\n  }\n\n  .menu__items-wrapper {\n    overflow: auto;\n    max-height: var(--auto-size-available-height);\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .menu__footer {\n    display: var(--nile-display-flex, var(--ng-display-none)); \n    /* No need to tokenize below - token not required*/\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: 180%;\n    letter-spacing: normal;\n    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));\n    min-height: 40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);\n    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .menu__footer:hover {\n    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));\n  }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.d.ts

@@ -0,0 +1,49 @@
+/**
+ * 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 NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+import type NileMenuItem from '../nile-menu-item/nile-menu-item';
+/**
+ * A nile-side-bar-action-menu element.
+ * @summary Menus provide a list of options for the user to choose from.
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event nile-select - Emitted when a menu item is selected.
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+export declare class NileSideBarActionMenu extends NileElement {
+    static styles: CSSResultGroup;
+    searchValue: string;
+    searchWidth: number;
+    searchEnabled: boolean;
+    customSearch: boolean;
+    showNoResults: boolean;
+    allowSpaceKey: boolean;
+    noResultsMessage: string;
+    defaultSlot: HTMLSlotElement;
+    private readonly hasSlotController;
+    connectedCallback(): void;
+    private handleClick;
+    private handleKeyDown;
+    private handleMouseDown;
+    private handleSlotChange;
+    private isMenuItem;
+    getAllItems(): NileMenuItem[];
+    getCurrentItem(): NileMenuItem | undefined;
+    setCurrentItem(item: NileMenuItem): void;
+    private handleSearchChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default NileSideBarActionMenu;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-action-menu': NileSideBarActionMenu;
+    }
+}

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.js

@@ -0,0 +1,223 @@
+/**
+ * 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 { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { query } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-side-bar-action-menu.css';
+import { HasSlotController } from '../internal/slot';
+/**
+ * A nile-side-bar-action-menu element.
+ * @summary Menus provide a list of options for the user to choose from.
+ *
+ * @slot - The menu's content, including menu items, menu labels, and dividers.
+ *
+ * @event nile-select - Emitted when a menu item is selected.
+ * @fires count-changed - Indicates when the count changes
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+let NileSideBarActionMenu = class NileSideBarActionMenu extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.searchValue = '';
+        this.searchWidth = 0;
+        this.searchEnabled = false;
+        this.customSearch = false;
+        this.showNoResults = false;
+        this.allowSpaceKey = false;
+        this.noResultsMessage = 'No results found';
+        this.hasSlotController = new HasSlotController(this, 'menu__footer', 'menu__header');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'menu');
+    }
+    handleClick(event) {
+        const target = event.target;
+        const item = target.closest('nile-menu-item');
+        if (item?.hasSubMenu) {
+            return;
+        }
+        if (!item || item.disabled) {
+            return;
+        }
+        if (item.type === 'checkbox') {
+            item.checked = !item.checked;
+        }
+        this.emit('nile-select', { value: item.value });
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Enter') {
+            const item = this.getCurrentItem();
+            event.preventDefault();
+            item?.click();
+        }
+        if (!this.allowSpaceKey && event.key === ' ') {
+            event.preventDefault();
+        }
+        if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {
+            const items = this.getAllItems();
+            const activeItem = this.getCurrentItem();
+            let index = activeItem ? items.indexOf(activeItem) : 0;
+            if (items.length > 0) {
+                event.preventDefault();
+                if (event.key === 'ArrowDown')
+                    index++;
+                else if (event.key === 'ArrowUp')
+                    index--;
+                else if (event.key === 'Home')
+                    index = 0;
+                else if (event.key === 'End')
+                    index = items.length - 1;
+                if (index < 0)
+                    index = items.length - 1;
+                if (index > items.length - 1)
+                    index = 0;
+                this.setCurrentItem(items[index]);
+                items[index].focus();
+            }
+        }
+    }
+    handleMouseDown(event) {
+        const target = event.target;
+        if (this.isMenuItem(target)) {
+            this.setCurrentItem(target);
+        }
+    }
+    handleSlotChange() {
+        const items = this.getAllItems();
+        if (items.length > 0) {
+            this.setCurrentItem(items[0]);
+        }
+    }
+    isMenuItem(item) {
+        return (item.tagName.toLowerCase() === 'nile-menu-item' ||
+            ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? ''));
+    }
+    getAllItems() {
+        return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+            if (!this.isMenuItem(el)) {
+                return false;
+            }
+            return true;
+        });
+    }
+    getCurrentItem() {
+        return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
+    }
+    setCurrentItem(item) {
+        const items = this.getAllItems();
+        items.forEach(i => {
+            i.setAttribute('tabindex', i === item ? '0' : '-1');
+        });
+    }
+    handleSearchChange(e) {
+        let items = this.getAllItems();
+        let searchValue = e.target.value;
+        if (this.customSearch) {
+            this.emit('nile-search-value', { value: searchValue });
+            return;
+        }
+        let counter = 0;
+        items.map(curr_item => {
+            this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);
+            if (curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())) {
+                curr_item.style.display = 'block';
+                counter++;
+            }
+            else {
+                curr_item.style.display = 'none';
+            }
+        });
+        this.showNoResults = counter === 0;
+    }
+    render() {
+        return html `
+      <slot name="menu__pre-header" part="menu__pre-header" @click=${(e) => {
+            e.stopPropagation();
+        }}></slot>
+      ${this.searchEnabled
+            ? html `<div class="search__wrapper" part="search__wrapper">
+            <nile-input
+              size="medium"
+              .value=${this.searchValue}
+              placeholder="Search..."
+              @nile-input=${this.handleSearchChange}
+              part="menu__input"
+              clearable
+            >
+              <nile-icon
+                name="var(--nile-icon-search, var(--ng-icon-search-lg))"
+                method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                slot="suffix"
+              ></nile-icon>
+            </nile-input>
+          </div>`
+            : html ``}
+      <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) => {
+            e.stopPropagation();
+        }}
+        ></slot>
+        <slot
+          class="menu__item-wrapper"
+          @slotchange=${this.handleSlotChange}
+          @click=${this.handleClick}
+          @keydown=${this.handleKeyDown}
+          @mousedown=${this.handleMouseDown}
+        ></slot>
+        ${this.hasSlotController.test('menu__footer')
+            ? html ` <slot
+              part="menu__footer"
+              name="menu__footer"
+              class="menu__footer"
+            ></slot>`
+            : null}
+      </div>
+    `;
+    }
+};
+NileSideBarActionMenu.styles = styles;
+__decorate([
+    state()
+], NileSideBarActionMenu.prototype, "searchValue", void 0);
+__decorate([
+    state()
+], NileSideBarActionMenu.prototype, "searchWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarActionMenu.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarActionMenu.prototype, "customSearch", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSideBarActionMenu.prototype, "showNoResults", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileSideBarActionMenu.prototype, "allowSpaceKey", void 0);
+__decorate([
+    property({ type: String })
+], NileSideBarActionMenu.prototype, "noResultsMessage", void 0);
+__decorate([
+    query('slot:not([name])')
+], NileSideBarActionMenu.prototype, "defaultSlot", void 0);
+NileSideBarActionMenu = __decorate([
+    customElement('nile-side-bar-action-menu')
+], NileSideBarActionMenu);
+export { NileSideBarActionMenu };
+export default NileSideBarActionMenu;
+//# sourceMappingURL=nile-side-bar-action-menu.js.map

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-action-menu.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu/nile-side-bar-action-menu.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\nimport type NileMenuItem from '../nile-menu-item/nile-menu-item';\nimport { styles } from './nile-side-bar-action-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * A nile-side-bar-action-menu element.\n * @summary Menus provide a list of options for the user to choose from.\n *\n * @slot - The menu's content, including menu items, menu labels, and dividers.\n *\n * @event nile-select - Emitted when a menu item is selected.\n * @fires count-changed - Indicates when the count changes\n * @slot - This element has a slot\n * @csspart button - The button\n */\n@customElement('nile-side-bar-action-menu')\nexport class NileSideBarActionMenu extends NileElement {\n  static styles: CSSResultGroup = styles;\n  @state() searchValue: string = '';\n  @state() searchWidth: number = 0;\n\n  @property({ type: Boolean, reflect: true }) searchEnabled = false;\n  @property({ type: Boolean, reflect: true }) customSearch = false;\n\n  @property({ type: Boolean }) showNoResults: boolean = false;\n\n  @property({ type: Boolean }) allowSpaceKey: boolean = false;\n\n  @property({ type: String }) noResultsMessage: string = 'No results found';\n\n  @query('slot:not([name])') defaultSlot!: HTMLSlotElement;\n\n  private readonly hasSlotController = new HasSlotController(\n    this,\n    'menu__footer',\n    'menu__header'\n  );\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'menu');\n  }\n\n  private handleClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const item = target.closest('nile-menu-item');\n\n    if (item?.hasSubMenu) {\n      return;\n    }\n\n    if (!item || item.disabled) {\n      return;\n    }\n\n    if (item.type === 'checkbox') {\n      item.checked = !item.checked;\n    }\n\n    this.emit('nile-select', { value: item.value });\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      item?.click();\n    }\n\n    if (!this.allowSpaceKey && event.key === ' ') {\n      event.preventDefault();\n    }\n\n    if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) {\n      const items = this.getAllItems();\n      const activeItem = this.getCurrentItem();\n      let index = activeItem ? items.indexOf(activeItem) : 0;\n\n      if (items.length > 0) {\n        event.preventDefault();\n\n        if (event.key === 'ArrowDown') index++;\n        else if (event.key === 'ArrowUp') index--;\n        else if (event.key === 'Home') index = 0;\n        else if (event.key === 'End') index = items.length - 1;\n\n        if (index < 0) index = items.length - 1;\n        if (index > items.length - 1) index = 0;\n\n        this.setCurrentItem(items[index]);\n        items[index].focus();\n      }\n    }\n  }\n\n  private handleMouseDown(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n\n    if (this.isMenuItem(target)) {\n      this.setCurrentItem(target as NileMenuItem);\n    }\n  }\n\n  private handleSlotChange() {\n    const items = this.getAllItems();\n\n    if (items.length > 0) {\n      this.setCurrentItem(items[0]);\n    }\n  }\n\n  private isMenuItem(item: HTMLElement) {\n    return (\n      item.tagName.toLowerCase() === 'nile-menu-item' ||\n      ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(\n        item.getAttribute('role') ?? ''\n      )\n    );\n  }\n\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      (el: HTMLElement) => {\n        if (!this.isMenuItem(el)) {\n          return false;\n        }\n        return true;\n      }\n    ) as NileMenuItem[];\n  }\n\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n    items.forEach(i => {\n      i.setAttribute('tabindex', i === item ? '0' : '-1');\n    });\n  }\n\n  private handleSearchChange(e: any) {\n    let items = this.getAllItems();\n    let searchValue = e.target.value;\n    if (this.customSearch) {\n      this.emit('nile-search-value', { value: searchValue });\n      return;\n    }\n\n    let counter = 0;\n    items.map(curr_item => {\n      this.searchWidth = Math.max(this.searchWidth, curr_item.offsetWidth);\n      if (\n        curr_item.innerText.toLowerCase().includes(e.target.value.toLowerCase())\n      ) {\n        curr_item.style.display = 'block';\n        counter++;\n      } else {\n        curr_item.style.display = 'none';\n      }\n    });\n    this.showNoResults = counter === 0;\n  }\n\n  render() {\n    return html`\n      <slot name=\"menu__pre-header\" part=\"menu__pre-header\" @click=${(e: Event) => {\n            e.stopPropagation();\n          }}></slot>\n      ${this.searchEnabled\n        ? html`<div class=\"search__wrapper\" part=\"search__wrapper\">\n            <nile-input\n              size=\"medium\"\n              .value=${this.searchValue}\n              placeholder=\"Search...\"\n              @nile-input=${this.handleSearchChange}\n              part=\"menu__input\"\n              clearable\n            >\n              <nile-icon\n                name=\"var(--nile-icon-search, var(--ng-icon-search-lg))\"\n                method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n                slot=\"suffix\"\n              ></nile-icon>\n            </nile-input>\n          </div>`\n        : html``}\n      <div part=\"menu__items-wrapper\" class=\"menu__items-wrapper\">\n        ${this.showNoResults\n          ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `\n          : ''}\n\n        <slot\n          name=\"menu__header\"\n          part=\"menu__header\"\n          @click=${(e: Event) => {\n            e.stopPropagation();\n          }}\n        ></slot>\n        <slot\n          class=\"menu__item-wrapper\"\n          @slotchange=${this.handleSlotChange}\n          @click=${this.handleClick}\n          @keydown=${this.handleKeyDown}\n          @mousedown=${this.handleMouseDown}\n        ></slot>\n        ${this.hasSlotController.test('menu__footer')\n          ? html` <slot\n              part=\"menu__footer\"\n              name=\"menu__footer\"\n              class=\"menu__footer\"\n            ></slot>`\n          : null}\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarActionMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-action-menu': NileSideBarActionMenu;\n  }\n}\n"]}

package/dist/src/nile-side-bar-action-menu-item/index.d.ts

@@ -0,0 +1 @@
+export { NileSideBarActionMenuItem } from './nile-side-bar-action-menu-item';

package/dist/src/nile-side-bar-action-menu-item/index.js

@@ -0,0 +1,2 @@
+export { NileSideBarActionMenuItem } from './nile-side-bar-action-menu-item';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-side-bar-action-menu-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,kCAAkC,CAAC","sourcesContent":["export { NileSideBarActionMenuItem } from './nile-side-bar-action-menu-item';"]}

package/dist/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* 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.
+*/
+/**
+ * SideBarActionMenuItem CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.js

@@ -0,0 +1,140 @@
+/**
+* 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';
+/**
+ * SideBarActionMenuItem CSS
+ */
+export const styles = css `
+     :host {
+    box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  :host {
+    display: block;
+  }
+
+  :host([inert]) {
+    display: none;
+  }
+
+  .menu-item {
+    position: relative;
+    display: flex;
+    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
+    align-items: stretch;
+    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));
+    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));
+    letter-spacing: normal;
+    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));
+    min-height:40px;
+    transition: 150ms fill;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+  }
+
+  .menu-item.menu-item--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .menu-item .menu-item__label {
+    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));
+    display: inline-flex;
+  }
+
+  .menu-item .menu-item__prefix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__prefix::slotted(*) {
+    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
+  }
+
+  .menu-item .menu-item__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .menu-item .menu-item__suffix::slotted(*) {
+    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
+  }
+
+  :host(:focus-visible) {
+    outline: none;
+  }
+
+  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
+    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
+    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
+  }
+
+  :host(:focus-visible) .menu-item {
+    outline: none;
+    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));
+    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));
+    opacity: 1;
+  }
+
+  .menu-item .menu-item__check,
+  .menu-item .menu-item__chevron {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5em;
+    visibility: hidden;
+  }
+
+  .menu-item--checked .menu-item__check,
+  .menu-item--has-submenu .menu-item__chevron {
+    visibility: visible;
+  }
+
+  :host([active]) .menu-item {
+    background: var(--nile-colors-primary-100);
+  }
+
+
+ .menu-item {
+ 
+  margin-left: 8px;
+  margin-right: 8px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .menu-item,
+    :host(:focus-visible) .menu-item {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-action-menu-item.css.js.map

package/dist/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-action-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * SideBarActionMenuItem CSS\n */\nexport const styles = css`\n     :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  :host([active]) .menu-item {\n    background: var(--nile-colors-primary-100);\n  }\n\n\n .menu-item {\n \n  margin-left: 8px;\n  margin-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  \n  }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.d.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 { TemplateResult } from 'lit';
+import '../nile-icon';
+import NileElement from '../internal/nile-element';
+import type { CSSResultGroup } from 'lit';
+/**
+ * Nile side-bar-action-menu-item component.
+ *
+ * @tag nile-side-bar-action-menu-item
+ *
+ * @summary Menu items provide options for the user to pick from in a menu.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ *
+ * @slot - The menu item's label.
+ * @slot prefix - Used to prepend an icon or similar element to the menu item.
+ * @slot suffix - Used to append an icon or similar element to the menu item.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
+ * @csspart prefix - The prefix container.
+ * @csspart label - The menu item label.
+ * @csspart suffix - The suffix container.
+ * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu.
+ */
+export declare class NileSideBarActionMenuItem extends NileElement {
+    static styles: CSSResultGroup;
+    private cachedTextLabel;
+    defaultSlot: HTMLSlotElement;
+    menuItem: HTMLElement;
+    /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+    type: 'normal' | 'checkbox';
+    /** Draws the item in a checked state. */
+    checked: boolean;
+    /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+    value: string;
+    /** Draws the menu item in a disabled state, preventing selection. */
+    disabled: boolean;
+    /** Indicates if this menu item has a submenu. */
+    hasSubMenu: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleDefaultSlotChange;
+    private handleHostClick;
+    handleCheckedChange(): void;
+    handleDisabledChange(): void;
+    handleTypeChange(): void;
+    /** Returns a text label based on the contents of the menu item's default slot. */
+    getTextLabel(): string;
+    render(): TemplateResult<1>;
+}
+export default NileSideBarActionMenuItem;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-action-menu-item': NileSideBarActionMenuItem;
+    }
+}