@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-loader/nile-loader.js

@@ -0,0 +1,183 @@
+import { __decorate } from "tslib";
+import { nothing } from 'lit';
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import styles from './nile-loader.css';
+import { classMap } from 'lit/directives/class-map.js';
+let NileLoader = class NileLoader extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.propHeight = '';
+        this.propWidth = '';
+        this.label = '';
+        this.size = 'lg';
+        this.margin = '';
+        this.variant = 'v1';
+        this.color = 'var(--nile-colors-primary-600,var(--ng-colors-fg-brand-primary-600))';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setSvgDimensions();
+        if (this.variant == "v1" && this.color == "var(--nile-colors-primary-600,var(--ng-colors-fg-brand-primary-600))") {
+            this.color = "var(--nile-colors-blue-500,var(--ng-colors-fg-brand-primary-600))";
+        }
+    }
+    /**
+     * Sets circular loader's dimension.
+     * If either height or width is absent the dimensions defaults to dimension based on size variant
+     */
+    setSvgDimensions() {
+        if (!parseInt(this.propHeight) || !parseInt(this.propWidth)) {
+            switch (this.size) {
+                case 'sm':
+                    this.height = '32';
+                    this.width = '32';
+                    break;
+                case 'md':
+                    this.height = '48';
+                    this.width = '48';
+                    break;
+                case 'lg':
+                    this.height = '56';
+                    this.width = '56';
+                    break;
+                default:
+                    this.height = '64';
+                    this.width = '64';
+                    break;
+            }
+        }
+        else {
+            this.height = this.propHeight;
+            this.width = this.propWidth;
+        }
+    }
+    render() {
+        return html `
+    <div class="loader__container" part="loader-container" class=${classMap({
+            "loader__container": true,
+            "loader__container--sm": this.size == 'sm',
+            "loader__container--md": this.size == 'md',
+            "loader__container--lg": this.size == 'lg',
+            "loader__container--xl": this.size == 'xl'
+        })}>
+      <div part="svg-container" class=${classMap({ "svg__container": this.variant !== 'v1' })}>${this.getVariant()}</div>
+      ${!this.label ? nothing :
+            html `<div part="loader-label" class="loader__label">${this.label}</div>`}
+    </div>
+    `;
+    }
+    getVariant() {
+        switch (this.variant) {
+            case 'v1':
+                return this.renderV1();
+            case 'v2':
+                return this.renderV2();
+            case 'v3':
+                return this.renderV3();
+            default:
+                return this.renderV1();
+        }
+    }
+    renderV1() {
+        return html `
+      <div
+        style="width: ${this.width}px; 
+          height: ${this.height}px; 
+          background-size: ${this.width}px; 
+          color: ${this.color};
+          margin: ${this.margin}"
+        class="nile-loader__v1"
+      ></div>
+    `;
+    }
+    renderV2() {
+        return html `
+      <svg
+        class="nile-loader__v2"
+        width="${this.width}"
+        height="${this.height}"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g id="Loading circle">
+          <path
+            id="Background"
+            d="M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z"
+            stroke="var(--nile-colors-dark-200, var(--ng-colors-bg-tertiary))"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Line"
+            d="M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16"
+            stroke="${this.color}"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+      </svg>
+    `;
+    }
+    renderV3() {
+        return html `
+      <svg
+        class="nile-loader__v3"
+        width="${this.width}"
+        height="${this.height}"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g id="Loading circle">
+          <path
+            id="Background"
+            d="M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16L30 16Z"
+            stroke="white"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+          <path
+            id="Line"
+            d="M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276"
+            stroke="${this.color}"
+            stroke-width="4"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </g>
+      </svg>
+    `;
+    }
+};
+NileLoader.styles = styles;
+__decorate([
+    property({ type: String, attribute: 'height' })
+], NileLoader.prototype, "propHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'width' })
+], NileLoader.prototype, "propWidth", void 0);
+__decorate([
+    property({ type: String })
+], NileLoader.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], NileLoader.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NileLoader.prototype, "margin", void 0);
+__decorate([
+    property({ type: String })
+], NileLoader.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NileLoader.prototype, "color", void 0);
+NileLoader = __decorate([
+    customElement('nile-loader')
+], NileLoader);
+export { NileLoader };
+//# sourceMappingURL=nile-loader.js.map

package/dist/src/nile-loader/nile-loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-loader.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.ts"],"names":[],"mappings":"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","sourcesContent":["import { CSSResultGroup, css, nothing } from 'lit';\nimport { LitElement, html, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport styles from './nile-loader.css';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { watch } from '../internal/watch';\n\n@customElement('nile-loader')\nexport class NileLoader extends LitElement {\n  @property({ type: String, attribute:'height' }) propHeight = '';\n  @property({ type: String, attribute:'width' }) propWidth = '';\n  @property({ type: String }) label = '';\n  @property({ type: String }) size : 'sm' | 'md' | 'lg' | 'xl'= 'lg';\n  @property({ type: String }) margin = '';\n  @property({ type: String }) variant = 'v1';\n  @property({ type: String }) color = 'var(--nile-colors-primary-600,var(--ng-colors-fg-brand-primary-600))';\n\n  private height: string;\n  private width: string;\n\n  connectedCallback(): void {\n    super.connectedCallback()\n    this.setSvgDimensions()\n    if(this.variant==\"v1\" && this.color==\"var(--nile-colors-primary-600,var(--ng-colors-fg-brand-primary-600))\"){\n      this.color=\"var(--nile-colors-blue-500,var(--ng-colors-fg-brand-primary-600))\"\n    }\n  }\n\n  static override styles: CSSResultGroup = styles;\n\n  /**\n   * Sets circular loader's dimension.\n   * If either height or width is absent the dimensions defaults to dimension based on size variant\n   */\n  setSvgDimensions(){\n    if (!parseInt(this.propHeight) || !parseInt(this.propWidth)){\n      switch (this.size) {\n        case 'sm':\n          this.height='32';\n          this.width='32';\n          break;\n        case 'md':\n          this.height='48';\n          this.width='48';\n          break;\n        case 'lg':\n          this.height='56';\n          this.width='56';\n          break;\n        default:\n          this.height='64';\n          this.width='64';\n          break;\n      }\n    }\n    else{\n      this.height=this.propHeight;\n      this.width=this.propWidth;\n    }\n  }\n\n  override render(){\n    return html`\n    <div class=\"loader__container\" part=\"loader-container\" class=${classMap({\n      \"loader__container\":true,\n      \"loader__container--sm\":this.size=='sm',\n      \"loader__container--md\":this.size=='md',\n      \"loader__container--lg\":this.size=='lg',\n      \"loader__container--xl\":this.size=='xl'\n      })}>\n      <div part=\"svg-container\" class=${classMap({\"svg__container\":this.variant!=='v1'})}>${this.getVariant()}</div>\n      ${!this.label?nothing:\n        html`<div part=\"loader-label\" class=\"loader__label\">${this.label}</div>`\n      }\n    </div>\n    `\n  }\n\n  private getVariant(): TemplateResult {\n    switch (this.variant) {\n      case 'v1':\n        return this.renderV1();\n      case 'v2':\n        return this.renderV2();\n      case 'v3':\n        return this.renderV3();\n      default:\n        return this.renderV1();\n    }  \n  }\n  \n  private renderV1(): TemplateResult {\n    return html`\n      <div\n        style=\"width: ${this.width}px; \n          height: ${this.height}px; \n          background-size: ${this.width}px; \n          color: ${this.color};\n          margin: ${this.margin}\"\n        class=\"nile-loader__v1\"\n      ></div>\n    `;\n  }\n\n  private renderV2(): TemplateResult {\n    return html`\n      <svg\n        class=\"nile-loader__v2\"\n        width=\"${this.width}\"\n        height=\"${this.height}\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g id=\"Loading circle\">\n          <path\n            id=\"Background\"\n            d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16Z\"\n            stroke=\"var(--nile-colors-dark-200, var(--ng-colors-bg-tertiary))\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            id=\"Line\"\n            d=\"M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16\"\n            stroke=\"${this.color}\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n      </svg>\n    `;\n  }\n\n  private renderV3(): TemplateResult {\n    return html`\n      <svg\n        class=\"nile-loader__v3\"\n        width=\"${this.width}\"\n        height=\"${this.height}\"\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g id=\"Loading circle\">\n          <path\n            id=\"Background\"\n            d=\"M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16L30 16Z\"\n            stroke=\"white\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n          <path\n            id=\"Line\"\n            d=\"M6.10051 6.1005C7.66275 4.53826 9.57255 3.36793 11.6738 2.68521C13.775 2.00248 16.0079 1.82675 18.1901 2.17236C20.3722 2.51798 22.4416 3.37514 24.229 4.67376C26.0164 5.97238 27.4711 7.67559 28.4741 9.64414C29.4771 11.6127 30 13.7907 30 16C30 18.2093 29.4771 20.3873 28.4741 22.3559C27.4711 24.3244 26.0164 26.0276 24.229 27.3262C22.4416 28.6249 20.3722 29.482 18.1901 29.8276\"\n            stroke=\"${this.color}\"\n            stroke-width=\"4\"\n            stroke-linecap=\"round\"\n            stroke-linejoin=\"round\"\n          />\n        </g>\n      </svg>\n    `;\n  }\n}\n"]}

package/dist/src/nile-loader/nile-loader.test.js

@@ -0,0 +1,44 @@
+import { fixture, expect } from '@open-wc/testing';
+import { html } from 'lit';
+import './nile-loader';
+describe('NileLoader', () => {
+    it('should default to size "lg" if no size is provided', async () => {
+        const el = await fixture(html `<nile-loader></nile-loader>`);
+        expect(el.size).to.equal('lg');
+    });
+    it('should apply size classes correctly', async () => {
+        const sizes = ['sm', 'md', 'lg'];
+        await sizes.forEach(async (size) => {
+            const el = await fixture(html `<nile-loader size="${size}"></nile-loader>`);
+            const loaderContainer = el.shadowRoot.querySelector('.loader__container');
+            expect(loaderContainer.classList.contains(`loader__container--${size}`)).to.be.true;
+        });
+    });
+    it('should have a default variant of "v1"', async () => {
+        const el = await fixture(html `<nile-loader></nile-loader>`);
+        const variantV1 = el.shadowRoot.querySelector('.nile-loader__v1');
+        expect(variantV1).to.exist;
+    });
+    it('should render the correct variant', async () => {
+        const el = await fixture(html `<nile-loader variant="v2"></nile-loader>`);
+        const variantV2 = el.shadowRoot.querySelector('.nile-loader__v2');
+        expect(variantV2).to.exist;
+    });
+    it('should display label if provided', async () => {
+        const el = await fixture(html `<nile-loader label="Loading..."></nile-loader>`);
+        const label = el.shadowRoot.querySelector('.loader__label');
+        expect(label).to.exist;
+        expect(label?.textContent).to.equal('Loading...');
+    });
+    it('should handle margin property', async () => {
+        const el = await fixture(html `<nile-loader margin="10px"></nile-loader>`);
+        const loaderDiv = el.shadowRoot.querySelector('.nile-loader__v1');
+        expect(loaderDiv?.getAttribute('style')).to.contain('margin: 10px');
+    });
+    it('should render the v3 variant', async () => {
+        const el = await fixture(html `<nile-loader variant="v3"></nile-loader>`);
+        const variantV3 = el.shadowRoot.querySelector('.nile-loader__v3');
+        expect(variantV3).to.exist;
+    });
+});
+//# sourceMappingURL=nile-loader.test.js.map

package/dist/src/nile-loader/nile-loader.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-loader.test.js","sourceRoot":"","sources":["../../../src/nile-loader/nile-loader.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect } from '@open-wc/testing';\nimport { html } from 'lit';\nimport './nile-loader';\nimport { NileLoader } from './nile-loader';\n\ndescribe('NileLoader', () => {\n  it('should default to size \"lg\" if no size is provided', async () => {\n    const el: NileLoader = await fixture(html`<nile-loader></nile-loader>`);\n    expect(el.size).to.equal('lg');\n  });\n\n  it('should apply size classes correctly', async () => {\n    const sizes:Array<'sm'|'md'|'lg'>=['sm','md','lg']\n    await sizes.forEach(async size=>{\n        const el: NileLoader = await fixture(html`<nile-loader size=\"${size}\"></nile-loader>`);\n        const loaderContainer = el.shadowRoot!.querySelector('.loader__container')!;\n        expect(loaderContainer.classList.contains(`loader__container--${size}`)).to.be.true;\n    })\n  });\n\n  it('should have a default variant of \"v1\"', async () => {\n    const el: NileLoader = await fixture(html`<nile-loader></nile-loader>`);\n    const variantV1 = el.shadowRoot!.querySelector('.nile-loader__v1');\n    expect(variantV1).to.exist;\n  });\n\n  it('should render the correct variant', async () => {\n    const el: NileLoader = await fixture(html`<nile-loader variant=\"v2\"></nile-loader>`);\n    const variantV2 = el.shadowRoot!.querySelector('.nile-loader__v2');\n    expect(variantV2).to.exist;\n  });\n\n  it('should display label if provided', async () => {\n    const el: NileLoader = await fixture(html`<nile-loader label=\"Loading...\"></nile-loader>`);\n    const label = el.shadowRoot!.querySelector('.loader__label');\n    expect(label).to.exist;\n    expect(label?.textContent).to.equal('Loading...');\n  });\n\n  it('should handle margin property', async () => {\n    const el: NileLoader = await fixture(html`<nile-loader margin=\"10px\"></nile-loader>`);\n    const loaderDiv = el.shadowRoot!.querySelector('.nile-loader__v1');\n    expect(loaderDiv?.getAttribute('style')).to.contain('margin: 10px');\n  });\n  \n  it('should render the v3 variant', async () => {\n    const el: NileLoader = await fixture(html`<nile-loader variant=\"v3\"></nile-loader>`);\n    const variantV3 = el.shadowRoot!.querySelector('.nile-loader__v3');\n    expect(variantV3).to.exist;\n  });\n})"]}

package/dist/src/nile-menu/index.js

@@ -0,0 +1,2 @@
+export { NileMenu } from './nile-menu';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { NileMenu } from './nile-menu';\n"]}

package/dist/src/nile-menu/nile-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';
+/**
+ * Menu 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-menu.css.js.map

package/dist/src/nile-menu/nile-menu.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;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 * Menu 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];\n"]}

package/dist/src/nile-menu/nile-menu.js

@@ -0,0 +1,226 @@
+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-menu.css';
+import { HasSlotController } from '../internal/slot';
+/**
+ * An nile-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 NileMenu = class NileMenu 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 || item.inert) {
+        if (!item || item.disabled) {
+            return;
+        }
+        if (item.type === 'checkbox') {
+            item.checked = !item.checked;
+        }
+        this.emit('nile-select', { value: item.value });
+    }
+    handleKeyDown(event) {
+        // Make a selection when pressing enter
+        if (event.key === 'Enter') {
+            const item = this.getCurrentItem();
+            event.preventDefault();
+            item?.click();
+        }
+        // Prevent scrolling when space is pressed (ONLY if not typing)
+        if (!this.allowSpaceKey && event.key === ' ') {
+            event.preventDefault();
+        }
+        // Move selection
+        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();
+        // Reset the roving tab index when the slotted items change
+        if (items.length > 0) {
+            this.setCurrentItem(items[0]);
+        }
+    }
+    isMenuItem(item) {
+        return (item.tagName.toLowerCase() === 'nile-menu-item' ||
+            ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(item.getAttribute('role') ?? ''));
+    }
+    /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */
+    getAllItems() {
+        return [...this.defaultSlot.assignedElements({ flatten: true })].filter((el) => {
+            if (!this.isMenuItem(el)) {
+                // if (el.inert || !this.isMenuItem(el)) {
+                return false;
+            }
+            return true;
+        });
+    }
+    /**
+     * @internal Gets the current menu item, which is the menu item that has `tabindex="0"` within the roving tab index.
+     * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the "active" item.
+     */
+    getCurrentItem() {
+        return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');
+    }
+    /**
+     * @internal Sets the current menu item to the specified element. This sets `tabindex="0"` on the target element and
+     * `tabindex="-1"` to all other items. This method must be called prior to setting focus on a menu item.
+     */
+    setCurrentItem(item) {
+        const items = this.getAllItems();
+        // Update tab indexes
+        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 `
+      ${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>
+    `;
+    }
+};
+NileMenu.styles = styles;
+__decorate([
+    state()
+], NileMenu.prototype, "searchValue", void 0);
+__decorate([
+    state()
+], NileMenu.prototype, "searchWidth", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileMenu.prototype, "searchEnabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileMenu.prototype, "customSearch", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileMenu.prototype, "showNoResults", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileMenu.prototype, "allowSpaceKey", void 0);
+__decorate([
+    property({ type: String })
+], NileMenu.prototype, "noResultsMessage", void 0);
+__decorate([
+    query('slot:not([name])')
+], NileMenu.prototype, "defaultSlot", void 0);
+NileMenu = __decorate([
+    customElement('nile-menu')
+], NileMenu);
+export { NileMenu };
+export default NileMenu;
+//# sourceMappingURL=nile-menu.js.map

package/dist/src/nile-menu/nile-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-menu.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.ts"],"names":[],"mappings":"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","sourcesContent":["import { 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-menu.css';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * An nile-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\n@customElement('nile-menu')\nexport class NileMenu 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 || item.inert) {\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\n    // Make a selection when pressing enter\n    if (event.key === 'Enter') {\n      const item = this.getCurrentItem();\n      event.preventDefault();\n      item?.click();\n    }\n\n    // Prevent scrolling when space is pressed (ONLY if not typing)\n    if (!this.allowSpaceKey && event.key === ' ') {\n      event.preventDefault();\n    }\n\n    // Move selection\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\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    // Reset the roving tab index when the slotted items change\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  /** @internal Gets all slotted menu items, ignoring dividers, headers, and other elements. */\n  getAllItems() {\n    return [...this.defaultSlot.assignedElements({ flatten: true })].filter(\n      (el: HTMLElement) => {\n        if (!this.isMenuItem(el)) {\n          // if (el.inert || !this.isMenuItem(el)) {\n          return false;\n        }\n        return true;\n      }\n    ) as NileMenuItem[];\n  }\n\n  /**\n   * @internal Gets the current menu item, which is the menu item that has `tabindex=\"0\"` within the roving tab index.\n   * The menu item may or may not have focus, but for keyboard interaction purposes it's considered the \"active\" item.\n   */\n  getCurrentItem() {\n    return this.getAllItems().find(i => i.getAttribute('tabindex') === '0');\n  }\n\n  /**\n   * @internal Sets the current menu item to the specified element. This sets `tabindex=\"0\"` on the target element and\n   * `tabindex=\"-1\"` to all other items. This method must be called prior to setting focus on a menu item.\n   */\n  setCurrentItem(item: NileMenuItem) {\n    const items = this.getAllItems();\n\n    // Update tab indexes\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      ${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 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>\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}\nexport default NileMenu;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-menu': NileMenu;\n  }\n}\n"]}

package/dist/src/nile-menu-item/index.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-menu-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { NileMenuItem } from './nile-menu-item';\n"]}