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

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

@@ -0,0 +1,199 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-action-menu-item.css';
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { query } from 'lit/decorators.js';
+import { getTextContent } from '../internal/slot';
+import { watch } from '../internal/watch';
+import NileElement from '../internal/nile-element';
+/**
+ * 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.
+ */
+let NileSideBarActionMenuItem = class NileSideBarActionMenuItem extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
+        this.type = 'normal';
+        /** Draws the item in a checked state. */
+        this.checked = false;
+        /** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
+        this.value = '';
+        /** Draws the menu item in a disabled state, preventing selection. */
+        this.disabled = false;
+        /** Indicates if this menu item has a submenu. */
+        this.hasSubMenu = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleHostClick = this.handleHostClick.bind(this);
+        this.addEventListener('click', this.handleHostClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this.handleHostClick);
+    }
+    handleDefaultSlotChange() {
+        const textLabel = this.getTextLabel();
+        // Ignore the first time the label is set
+        if (typeof this.cachedTextLabel === 'undefined') {
+            this.cachedTextLabel = textLabel;
+            return;
+        }
+        // When the label changes, emit a slotchange event so parent controls see it
+        if (textLabel !== this.cachedTextLabel) {
+            this.cachedTextLabel = textLabel;
+            this.emit('slotchange');
+        }
+    }
+    handleHostClick(event) {
+        // Prevent the click event from being emitted when the item is disabled
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    handleCheckedChange() {
+        // For proper accessibility, users have to use type="checkbox" to use the checked attribute
+        if (this.checked && this.type !== 'checkbox') {
+            this.checked = false;
+            console.error('The checked attribute can only be used on menu items with type="checkbox"', this);
+            return;
+        }
+        // Only checkbox types can receive the aria-checked attribute
+        if (this.type === 'checkbox') {
+            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        }
+        else {
+            this.removeAttribute('aria-checked');
+        }
+    }
+    handleDisabledChange() {
+        this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
+    }
+    handleTypeChange() {
+        if (this.type === 'checkbox') {
+            this.setAttribute('role', 'menuitemcheckbox');
+            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        }
+        else {
+            this.setAttribute('role', 'menuitem');
+            this.removeAttribute('aria-checked');
+        }
+    }
+    /** Returns a text label based on the contents of the menu item's default slot. */
+    getTextLabel() {
+        return getTextContent(this.defaultSlot);
+    }
+    render() {
+        return html `
+		<div
+		  part="base"
+		  class=${classMap({
+            'menu-item': true,
+            'menu-item--checked': this.checked,
+            'menu-item--disabled': this.disabled,
+            'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
+        })}
+		>
+		  ${this.checked
+            ? html `
+				<span part="checked-icon" class="menu-item__check">
+				  <nile-icon
+					name="var(--nile-icon-tick, var(--ng-icon-check))"
+					method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+					library="system"
+					color="green"
+					aria-hidden="true"
+				  ></nile-icon>
+				</span>
+			  `
+            : ``}
+  
+		  <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
+  
+		  <slot
+			part="label"
+			class="menu-item__label"
+			@slotchange=${this.handleDefaultSlotChange}
+		  ></slot>
+  
+		  <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
+  
+		  ${this.hasSubMenu
+            ? html ` <span part="submenu-icon" class="menu-item__chevron">
+				<nile-icon
+				  name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
+				  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+				  library="system"
+				  aria-hidden="true"
+				></nile-icon>
+			  </span>`
+            : ``}
+		</div>
+	  `;
+    }
+};
+NileSideBarActionMenuItem.styles = styles;
+__decorate([
+    query('slot:not([name])')
+], NileSideBarActionMenuItem.prototype, "defaultSlot", void 0);
+__decorate([
+    query('.menu-item')
+], NileSideBarActionMenuItem.prototype, "menuItem", void 0);
+__decorate([
+    property()
+], NileSideBarActionMenuItem.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarActionMenuItem.prototype, "checked", void 0);
+__decorate([
+    property()
+], NileSideBarActionMenuItem.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarActionMenuItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarActionMenuItem.prototype, "hasSubMenu", void 0);
+__decorate([
+    watch('checked')
+], NileSideBarActionMenuItem.prototype, "handleCheckedChange", null);
+__decorate([
+    watch('disabled')
+], NileSideBarActionMenuItem.prototype, "handleDisabledChange", null);
+__decorate([
+    watch('type')
+], NileSideBarActionMenuItem.prototype, "handleTypeChange", null);
+NileSideBarActionMenuItem = __decorate([
+    customElement('nile-side-bar-action-menu-item')
+], NileSideBarActionMenuItem);
+export { NileSideBarActionMenuItem };
+export default NileSideBarActionMenuItem;
+//# sourceMappingURL=nile-side-bar-action-menu-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-action-menu-item.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.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 {\n\tLitElement,\n\thtml,\n\tCSSResultArray,\n\tTemplateResult\n  } from 'lit';\n  import { customElement, property } from 'lit/decorators.js';\n  import { styles } from './nile-side-bar-action-menu-item.css';\n  import '../nile-icon';\n  import { classMap } from 'lit/directives/class-map.js';\n  import { query } from 'lit/decorators.js';\n  import { getTextContent } from '../internal/slot';\n  import { watch } from '../internal/watch';\n  import NileElement from '../internal/nile-element';\n  import type { CSSResultGroup } from 'lit';\n  \n  /**\n   * Nile side-bar-action-menu-item component.\n   *\n   * @tag nile-side-bar-action-menu-item\n   *\n   * @summary Menu items provide options for the user to pick from in a menu.\n   * @status stable\n   * @since 2.0\n   *\n   * @dependency nile-icon\n   *\n   * @slot - The menu item's label.\n   * @slot prefix - Used to prepend an icon or similar element to the menu item.\n   * @slot suffix - Used to append an icon or similar element to the menu item.\n   *\n   * @csspart base - The component's base wrapper.\n   * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.\n   * @csspart prefix - The prefix container.\n   * @csspart label - The menu item label.\n   * @csspart suffix - The suffix container.\n   * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu.\n   */\n  @customElement('nile-side-bar-action-menu-item')\n  export class NileSideBarActionMenuItem extends NileElement {\n\tstatic styles: CSSResultGroup = styles;\n  \n\tprivate cachedTextLabel: string;\n  \n\t@query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  \n\t@query('.menu-item') menuItem: HTMLElement;\n  \n\t/** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */\n\t@property() type: 'normal' | 'checkbox' = 'normal';\n  \n\t/** Draws the item in a checked state. */\n\t@property({ type: Boolean, reflect: true }) checked = false;\n  \n\t/** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */\n\t@property() value = '';\n  \n\t/** Draws the menu item in a disabled state, preventing selection. */\n\t@property({ type: Boolean, reflect: true }) disabled = false;\n  \n\t/** Indicates if this menu item has a submenu. */\n\t@property({ type: Boolean, reflect: true }) hasSubMenu = false;\n  \n\tconnectedCallback() {\n\t  super.connectedCallback();\n\t  this.handleHostClick = this.handleHostClick.bind(this);\n\t  this.addEventListener('click', this.handleHostClick);\n\t}\n  \n\tdisconnectedCallback() {\n\t  super.disconnectedCallback();\n\t  this.removeEventListener('click', this.handleHostClick);\n\t}\n  \n\tprivate handleDefaultSlotChange() {\n\t  const textLabel = this.getTextLabel();\n  \n\t  // Ignore the first time the label is set\n\t  if (typeof this.cachedTextLabel === 'undefined') {\n\t\tthis.cachedTextLabel = textLabel;\n\t\treturn;\n\t  }\n  \n\t  // When the label changes, emit a slotchange event so parent controls see it\n\t  if (textLabel !== this.cachedTextLabel) {\n\t\tthis.cachedTextLabel = textLabel;\n\t\tthis.emit('slotchange');\n\t  }\n\t}\n  \n\tprivate handleHostClick(event: MouseEvent) {\n\t  // Prevent the click event from being emitted when the item is disabled\n\t  if (this.disabled) {\n\t\tevent.preventDefault();\n\t\tevent.stopImmediatePropagation();\n\t  }\n\t}\n  \n\t@watch('checked')\n\thandleCheckedChange() {\n\t  // For proper accessibility, users have to use type=\"checkbox\" to use the checked attribute\n\t  if (this.checked && this.type !== 'checkbox') {\n\t\tthis.checked = false;\n\t\tconsole.error(\n\t\t  'The checked attribute can only be used on menu items with type=\"checkbox\"',\n\t\t  this\n\t\t);\n\t\treturn;\n\t  }\n  \n\t  // Only checkbox types can receive the aria-checked attribute\n\t  if (this.type === 'checkbox') {\n\t\tthis.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n\t  } else {\n\t\tthis.removeAttribute('aria-checked');\n\t  }\n\t}\n  \n\t@watch('disabled')\n\thandleDisabledChange() {\n\t  this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n\t}\n  \n\t@watch('type')\n\thandleTypeChange() {\n\t  if (this.type === 'checkbox') {\n\t\tthis.setAttribute('role', 'menuitemcheckbox');\n\t\tthis.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n\t  } else {\n\t\tthis.setAttribute('role', 'menuitem');\n\t\tthis.removeAttribute('aria-checked');\n\t  }\n\t}\n  \n\t/** Returns a text label based on the contents of the menu item's default slot. */\n\tgetTextLabel() {\n\t  return getTextContent(this.defaultSlot);\n\t}\n  \n\trender() {\n\t  return html`\n\t\t<div\n\t\t  part=\"base\"\n\t\t  class=${classMap({\n\t\t\t'menu-item': true,\n\t\t\t'menu-item--checked': this.checked,\n\t\t\t'menu-item--disabled': this.disabled,\n\t\t\t'menu-item--has-submenu': this.hasSubMenu, // reserved for future use\n\t\t  })}\n\t\t>\n\t\t  ${this.checked\n\t\t\t? html`\n\t\t\t\t<span part=\"checked-icon\" class=\"menu-item__check\">\n\t\t\t\t  <nile-icon\n\t\t\t\t\tname=\"var(--nile-icon-tick, var(--ng-icon-check))\"\n\t\t\t\t\tmethod=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n\t\t\t\t\tlibrary=\"system\"\n\t\t\t\t\tcolor=\"green\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t  ></nile-icon>\n\t\t\t\t</span>\n\t\t\t  `\n\t\t\t: ``}\n  \n\t\t  <slot name=\"prefix\" part=\"prefix\" class=\"menu-item__prefix\"></slot>\n  \n\t\t  <slot\n\t\t\tpart=\"label\"\n\t\t\tclass=\"menu-item__label\"\n\t\t\t@slotchange=${this.handleDefaultSlotChange}\n\t\t  ></slot>\n  \n\t\t  <slot name=\"suffix\" part=\"suffix\" class=\"menu-item__suffix\"></slot>\n  \n\t\t  ${this.hasSubMenu\n\t\t\t? html` <span part=\"submenu-icon\" class=\"menu-item__chevron\">\n\t\t\t\t<nile-icon\n\t\t\t\t  name=\"var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))\"\n\t\t\t\t  method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"\n\t\t\t\t  library=\"system\"\n\t\t\t\t  aria-hidden=\"true\"\n\t\t\t\t></nile-icon>\n\t\t\t  </span>`\n\t\t\t: ``}\n\t\t</div>\n\t  `;\n\t}\n  }\n  \n  export default NileSideBarActionMenuItem;\n  \n  declare global {\n\tinterface HTMLElementTagNameMap {\n\t  'nile-side-bar-action-menu-item': NileSideBarActionMenuItem;\n\t}\n  }\n  "]}

package/dist/src/nile-side-bar-expand/index.d.ts

@@ -0,0 +1 @@
+export { NileSideBarExpand } from './nile-side-bar-expand';

package/dist/src/nile-side-bar-expand/index.js

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

package/dist/src/nile-side-bar-expand/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { NileSideBarExpand } from './nile-side-bar-expand';"]}

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.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.
+*/
+/**
+ * SideBarExpand CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.css.js

@@ -0,0 +1,45 @@
+/**
+* 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';
+/**
+ * SideBarExpand CSS
+ */
+export const styles = css `
+	 :host {
+  display: inline-flex;
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background-color 0.2s ease;
+}
+
+.expand-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+nile-tooltip::part(body) {
+    width: max-content;
+    height: max-content;
+    padding: var(--nile-spacing-sm);
+    overflow-x: hidden;
+  }
+
+ 
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-expand.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-expand.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,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 * SideBarExpand CSS\n */\nexport const styles = css`\n\t :host {\n  display: inline-flex;\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background-color 0.2s ease;\n}\n\n.expand-btn:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\nnile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding: var(--nile-spacing-sm);\n    overflow-x: hidden;\n  }\n\n \n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-expand component.
+ *
+ * @tag nile-side-bar-expand
+ *
+ */
+export declare class NileSideBarExpand extends NileElement {
+    collapsed: boolean;
+    static get styles(): CSSResultArray;
+    connectedCallback(): void;
+    private toggleSidebar;
+    render(): TemplateResult;
+}
+export default NileSideBarExpand;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-expand': NileSideBarExpand;
+    }
+}

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js

@@ -0,0 +1,68 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-expand.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-expand component.
+ *
+ * @tag nile-side-bar-expand
+ *
+ */
+let NileSideBarExpand = class NileSideBarExpand extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.collapsed = false;
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Sync with parent sidebar if it exists
+        const sidebar = this.closest('nile-side-bar');
+        if (sidebar) {
+            this.collapsed = sidebar.hasAttribute('collapsed');
+        }
+    }
+    toggleSidebar() {
+        const sidebar = this.closest('nile-side-bar');
+        if (!sidebar)
+            return;
+        const isCollapsed = sidebar.hasAttribute('collapsed');
+        if (isCollapsed) {
+            sidebar.removeAttribute('collapsed');
+            this.collapsed = false;
+        }
+        else {
+            sidebar.setAttribute('collapsed', '');
+            this.collapsed = true;
+        }
+    }
+    render() {
+        return html `
+      <button class="expand-btn" @click=${this.toggleSidebar}>
+        ${this.collapsed
+            ? html `
+              <nile-tooltip placement="right" hoist content="Expand Sidebar">
+                <span part="icon"><nile-icon name="moveright"></nile-icon></span>
+              </nile-tooltip>
+            `
+            : html `
+              <nile-tooltip placement="right" hoist content="Collapse Sidebar">
+                <span part="icon"><nile-icon name="moveleft"></nile-icon></span>
+              </nile-tooltip>
+            `}
+      </button>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileSideBarExpand.prototype, "collapsed", void 0);
+NileSideBarExpand = __decorate([
+    customElement('nile-side-bar-expand')
+], NileSideBarExpand);
+export { NileSideBarExpand };
+export default NileSideBarExpand;
+//# sourceMappingURL=nile-side-bar-expand.js.map

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-expand.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAEL,cAAS,GAAY,KAAK,CAAC;IA8C7B,CAAC;IA5CQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wCAAwC;QACxC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,aAAa;UAClD,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;aAIH;YACH,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAC;IACJ,CAAC;CACF,CAAA;AA9CC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAChB;AAFhB,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAgD7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-expand component.\n *\n * @tag nile-side-bar-expand\n *\n */\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n  @property({ type: Boolean, reflect: true })\n  collapsed: boolean = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Sync with parent sidebar if it exists\n    const sidebar = this.closest('nile-side-bar');\n    if (sidebar) {\n      this.collapsed = sidebar.hasAttribute('collapsed');\n    }\n  }\n\n  private toggleSidebar() {\n    const sidebar = this.closest('nile-side-bar');\n    if (!sidebar) return;\n\n    const isCollapsed = sidebar.hasAttribute('collapsed');\n    if (isCollapsed) {\n      sidebar.removeAttribute('collapsed');\n      this.collapsed = false;\n    } else {\n      sidebar.setAttribute('collapsed', '');\n      this.collapsed = true;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <button class=\"expand-btn\" @click=${this.toggleSidebar}>\n        ${this.collapsed\n          ? html`\n              <nile-tooltip placement=\"right\" hoist content=\"Expand Sidebar\">\n                <span part=\"icon\"><nile-icon name=\"moveright\"></nile-icon></span>\n              </nile-tooltip>\n            `\n          : html`\n              <nile-tooltip placement=\"right\" hoist content=\"Collapse Sidebar\">\n                <span part=\"icon\"><nile-icon name=\"moveleft\"></nile-icon></span>\n              </nile-tooltip>\n            `}\n      </button>\n    `;\n  }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-expand': NileSideBarExpand;\n  }\n}\n"]}

package/dist/src/nile-side-bar-footer/index.d.ts

@@ -0,0 +1 @@
+export { NileSideBarFooter } from './nile-side-bar-footer';

package/dist/src/nile-side-bar-footer/index.js

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

package/dist/src/nile-side-bar-footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { NileSideBarFooter } from './nile-side-bar-footer';"]}

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

@@ -0,0 +1,6 @@
+/**
+ * SideBarFooter CSS
+ */
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.css.js

@@ -0,0 +1,44 @@
+import { css } from 'lit';
+/**
+ * SideBarFooter CSS
+ */
+export const styles = css `
+ :host {
+  display: block;
+  position: sticky;
+  bottom: var(--nile-spacing-md);
+ padding-bottom: var(--nile-spacing-xl);
+	padding-left: var(--nile-spacing-xl);
+	padding-right: var(--nile-spacing-xl);
+ gap: var(--nile-spacing-md);
+  z-index: 10;
+  background: var(--nile-colors-neutral-100);
+}
+
+.footer {
+  display: flex;
+  flex-direction: column;    
+  align-items: stretch;     
+  gap: 8px; 
+}
+
+::slotted(nile-side-bar-footer-item) {
+  display: flex;
+  align-items: center;
+  gap: var(--nile-spacing-md);
+  justify-content: center;
+ 
+  font-size: var(--nile-type-scale-3);
+  color: var(--nile-colors-dark-900);
+  cursor: pointer;
+  border-radius: var(--nile-radius-sm);
+  transition: background 0.2s ease;
+}
+
+
+
+
+ 
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-footer.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-footer.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  position: sticky;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl);\n\tpadding-left: var(--nile-spacing-xl);\n\tpadding-right: var(--nile-spacing-xl);\n gap: var(--nile-spacing-md);\n  z-index: 10;\n  background: var(--nile-colors-neutral-100);\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: 8px; \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3);\n  color: var(--nile-colors-dark-900);\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm);\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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 { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-footer component.
+ *
+ * @tag nile-side-bar-footer
+ *
+ * @slot icon - Slot for footer icon
+ * @slot text - Slot for footer text
+ */
+export declare class NileSideBarFooter extends NileElement {
+    static get styles(): CSSResultArray;
+    render(): TemplateResult;
+}
+export default NileSideBarFooter;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-side-bar-footer': NileSideBarFooter;
+    }
+}

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.js

@@ -0,0 +1,37 @@
+/**
+ * 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 } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-footer.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile side-bar-footer component.
+ *
+ * @tag nile-side-bar-footer
+ *
+ * @slot icon - Slot for footer icon
+ * @slot text - Slot for footer text
+ */
+let NileSideBarFooter = class NileSideBarFooter extends NileElement {
+    static get styles() {
+        return [styles];
+    }
+    render() {
+        return html `
+      <div part="base" class="footer">
+      <slot> </slot>
+      </div>
+    `;
+    }
+};
+NileSideBarFooter = __decorate([
+    customElement('nile-side-bar-footer')
+], NileSideBarFooter);
+export { NileSideBarFooter };
+export default NileSideBarFooter;
+//# sourceMappingURL=nile-side-bar-footer.js.map

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-footer.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;GAOG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IACzC,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AAZY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAY7B;;AAED,eAAe,iBAAiB,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 { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-footer.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-footer component.\n *\n * @tag nile-side-bar-footer\n *\n * @slot icon - Slot for footer icon\n * @slot text - Slot for footer text\n */\n@customElement('nile-side-bar-footer')\nexport class NileSideBarFooter extends NileElement {\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"footer\">\n      <slot> </slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarFooter;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-footer': NileSideBarFooter;\n  }\n}\n"]}

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

@@ -0,0 +1 @@
+export { NileSideBarFooterItem } from './nile-side-bar-footer-item';

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC","sourcesContent":["export { NileSideBarFooterItem } from './nile-side-bar-footer-item';"]}

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

@@ -0,0 +1,3 @@
+export declare const styles: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
+export default _default;

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

@@ -0,0 +1,75 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .footer-item {
+    display: flex;
+    align-items: center;
+	justify-content: flex-start;
+    padding: 12px;
+    font-size: 0.875rem;
+    color: var(--nile-side-bar-footer-color, #374151);
+    cursor: pointer;
+    border-radius: var(--nile-side-bar-footer-radius, 0.375rem);
+    transition: background 0.2s ease;
+    width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    line-height: 0;
+  }
+
+  .footer-item:hover {
+    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);
+  }
+
+  /* left: icon */
+  ::slotted([slot='icon']) {
+    flex-shrink: 0;
+    font-size: 1.25rem;
+    margin-right: 0.5rem;
+  }
+
+  /* middle: text */
+  ::slotted([slot='text']) {
+    flex-grow: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* right: action */
+  ::slotted([slot='action']) {
+    flex-shrink: 0;
+    font-size: 1.25rem;
+    color: var(--nile-side-bar-footer-icon-color, #6b7280);
+    margin-left: auto;
+  }
+
+ 
+  :host([type='support']) .footer-item {
+    background: var(--nile-colors-neutral-400);
+ 
+  }
+ 
+  :host([collapsed][type='avatar']) .footer-item {
+  padding: 3px;
+ 
+}
+ 
+:host([collapsed][type='avatar']) ::slotted([slot='text']),
+:host([collapsed][type='avatar']) ::slotted([slot='action']) {
+  display: none;
+}
+
+:host([collapsed]) .footer-item{
+  height: 38px;
+  width: 38px;
+}
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-side-bar-footer-item.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-side-bar-footer-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\tjustify-content: flex-start;\n    padding: 12px;\n    font-size: 0.875rem;\n    color: var(--nile-side-bar-footer-color, #374151);\n    cursor: pointer;\n    border-radius: var(--nile-side-bar-footer-radius, 0.375rem);\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n \n  }\n \n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 3px;\n \n}\n \n:host([collapsed][type='avatar']) ::slotted([slot='text']),\n:host([collapsed][type='avatar']) ::slotted([slot='action']) {\n  display: none;\n}\n\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n\n`;\n\nexport default [styles];\n"]}