@aquera/nile-elements 1.1.3 → 1.1.4

package/src/nile-side-bar-footer-text/nile-side-bar-footer-text.css.ts

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: block;
+    line-height: 1.2;
+  }
+
+  .footer-text {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  .main {
+    font-size: var(--nile-type-scale-3);
+    font-weight: 500;
+    color: var(--nile-colors-dark-900);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sub {
+    font-size: var(--nile-type-scale-2);
+    color: var(--nile-colors-dark-500);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+export default [styles];

package/src/nile-side-bar-footer-text/nile-side-bar-footer-text.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 { html, css, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-side-bar-footer-text.css';
+
+/**
+ * Nile side-bar-footer-text component.
+ *
+ * @tag nile-side-bar-footer-text
+ *
+ * @property {string} text - The main text (e.g. user name).
+ * @property {string} subtext - The sub text (e.g. organization/role).
+ */
+@customElement('nile-side-bar-footer-text')
+export class NileSideBarFooterText extends NileElement {
+  /** Main text (e.g., name) */
+  @property({ type: String }) text: string = '';
+
+  /** Sub text (e.g., org/role) */
+  @property({ type: String }) subtext: string = '';
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="footer-text">
+        <div class="main">${this.text}</div>
+        ${this.subtext
+          ? html`<div class="sub">${this.subtext}</div>`
+          : null}
+      </div>
+    `;
+  }
+}
+
+export default NileSideBarFooterText;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-footer-text': NileSideBarFooterText;
+  }
+}

package/src/nile-side-bar-group/index.ts

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

package/src/nile-side-bar-group/nile-side-bar-group.css.ts

@@ -0,0 +1,56 @@
+import { css } from 'lit';
+
+/**
+ * SideBarGroup CSS
+ */
+export const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: var(--nile-spacing-xs);
+    padding-left: var(--nile-spacing-md);
+    padding-right: var(--nile-spacing-md);
+    gap: var(--nile-spacing-lg);
+  }
+
+
+  :host([footer]) {
+    margin-top: auto;
+    margin-bottom: var(--nile-spacing-md);
+  }
+
+  .group-label {
+    font-weight: var(--nile-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-bottom: var(--nile-spacing-xs);
+  }
+  :host([divider])::before {
+  content: "";
+  display: block;
+  height: 1px;
+  background: var(--nile-colors-neutral-400);
+  margin-top: var(--nile-spacing-xs);
+ margin-left: var(--nile-spacing-md);
+ margin-right: var(--nile-spacing-md);
+ 
+}
+ 
+.side-bar-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--nile-spacing-xs)
+}
+
+
+:host ::slotted(nile-side-bar-group-item:first-child) {
+  margin-top: var(--nile-spacing-xs);
+}
+
+:host([collapsed]) .side-bar-group {
+align-items: center;
+justify-content: center;
+}
+`;
+
+export default [styles];

package/src/nile-side-bar-group/nile-side-bar-group.ts

@@ -0,0 +1,74 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-group.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile side-bar-group component.
+ *
+ * A logical grouping of sidebar items, optionally with a label and/or footer placement.
+ *
+ * @tag nile-side-bar-group
+ *
+ * @slot - Default slot for group items (nile-side-bar-group-item)
+ * @csspart base - The group container
+ * @csspart label - The group label element
+ */
+@customElement('nile-side-bar-group')
+export class NileSideBarGroup extends NileElement {
+  /**
+   * Optional label for the group.
+   */
+  @property({ type: String }) label: string = '';
+
+  /**
+   * Marks this group as footer (sticks to bottom of sidebar).
+   */
+  @property({ type: Boolean, reflect: true }) footer: boolean = false;
+  @property({ type: Boolean, reflect: true })divider = false;
+
+
+  /**
+   * The styles for nile-side-bar-group
+   * @remarks Extendable via super if needed
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  /* #region Render */
+
+  public render(): TemplateResult {
+    return html`
+      <section
+        part="base"
+        class="side-bar-group"
+        role="list"
+        aria-label=${this.label || 'Sidebar group'}
+        ?data-footer=${this.footer}
+      >
+        ${this.label
+          ? html`<div part="label" class="group-label">${this.label}</div>`
+          : null}
+        <slot></slot>
+      </section>
+    `;
+  }
+
+  /* #endregion */
+}
+
+export default NileSideBarGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-group': NileSideBarGroup;
+  }
+}

package/src/nile-side-bar-group-item/index.ts

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

package/src/nile-side-bar-group-item/nile-side-bar-group-item.css.ts

@@ -0,0 +1,70 @@
+/**
+* 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';
+
+/**
+ * SideBarGroupItem CSS
+ */
+export const styles = css`
+	 :host {
+  display: block;
+}
+
+.group-item {
+  display: flex;
+  flex-direction: column;
+}
+
+.item-link {
+  display: flex;
+  align-items: center;
+padding-top: var(--nile-spacing-lg);
+padding-bottom: var(--nile-spacing-lg);
+padding-left: var(--nile-spacing-md);
+padding-right: var(--nile-spacing-md);
+  cursor: pointer;
+  color: var(--nile-colors-dark-900);
+  text-decoration: none;
+  font-size: var(--nile-type-scale-3);
+  line-height: 1.4;
+}
+
+.item-link:hover {
+  background: var(--nile-colors-neutral-400);
+  border-radius: var(--nile-radius-sm);
+}
+
+
+
+::slotted(nile-side-bar-group-item-icon) {
+  flex-shrink: 0;
+}
+
+::slotted(nile-side-bar-group-item-text) {
+  flex-grow: 1;
+}
+:host([active]) [part="link"] {
+  background:    var(--nile-colors-primary-100);
+  border-radius: var(--nile-radius-sm);
+  font-weight: var(--nile-font-weight-semibold);
+}
+
+:host([collapsed]) .group-item {
+height: 38px;
+width: 38px;
+}
+:host([disabled]) .item-link {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+
+`;
+
+export default [styles];

package/src/nile-side-bar-group-item/nile-side-bar-group-item.ts

@@ -0,0 +1,161 @@
+/**
+ * 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 { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-group-item.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile side-bar-group-item component.
+ *
+ * @tag nile-side-bar-group-item
+ *
+ * @slot icon - Slot for the item icon
+ * @slot text - Slot for the item text
+ * @slot trigger - Slot for chevron/trigger icons
+ * @slot content - Slot for dropdown/popover content
+ *
+ * @csspart base - Wrapper for the group item
+ * @csspart link - The clickable row (div or anchor)
+ * @csspart content - Content container (for dropdown/popover)
+ */
+@customElement('nile-side-bar-group-item')
+export class NileSideBarGroupItem extends NileElement {
+
+  @property({ type: String }) href: string | null = null;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) active = false;
+
+  @property({ type: String, reflect: true })
+  type: 'default' | 'dropdown' | 'popover' = 'default';
+
+  @property({ type: Boolean, reflect: true }) expanded: boolean = false;
+
+  @property({ type: Boolean, reflect: true }) disabled: boolean = false;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  private toggleExpand() {
+    if ((this.type === 'dropdown' || this.type === 'popover') && !this.disabled) {
+      this.expanded = !this.expanded;
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.href && window.location.pathname === this.href) {
+      this.active = true;
+    }
+  }
+
+  private handleSelect(e: Event) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+
+    if (!this.href) {
+      e.preventDefault();
+    }
+    const parent = this.closest('nile-side-bar');
+    if (parent) {
+      parent.querySelectorAll<NileSideBarGroupItem>('nile-side-bar-group-item[active]')
+        .forEach(item => {
+          if (item !== this) {
+            item.active = false;
+            item.expanded = false; 
+          }
+        });
+    }
+  
+    this.active = true;
+  
+    if ((this.type === 'dropdown' || this.type === 'popover') && !this.disabled) {
+      this.expanded = true;
+    }
+    this.dispatchEvent(
+      new CustomEvent('nile-click', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          href: this.href,
+          text: this.textContent?.trim() || '',
+          type: this.type,
+        },
+      })
+    );
+  }
+
+  public render(): TemplateResult {
+    const interactive = this.type === 'dropdown' || this.type === 'popover';
+
+    return html`
+      <div
+        part="base"
+        class="group-item ${this.disabled ? 'disabled' : ''}"
+        role="listitem"
+        ?data-expanded=${this.expanded}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+      >
+        ${this.href
+          ? html`
+              <a
+                part="link"
+                class="item-link"
+                href=${this.href}
+                @click=${this.handleSelect}
+                tabindex=${this.disabled ? '-1' : '0'}
+              >
+                <slot name="icon"></slot>
+                <slot name="text"></slot>
+                <slot name="trigger"></slot>
+              </a>
+            `
+          : html`
+              <div
+                part="link"
+                class="item-link"
+                @click=${(e: Event) => {
+                  this.handleSelect(e);
+                  if (interactive && !this.disabled) this.toggleExpand();
+                }}
+                tabindex=${this.disabled ? '-1' : '0'}
+              >
+                <slot name="icon"></slot>
+                <slot name="text"></slot>
+                <slot name="trigger"></slot>
+              </div>
+            `}
+      </div>
+
+      ${interactive
+        ? html`
+            <div
+              part="content"
+              class="item-content"
+              role=${this.type === 'dropdown' ? 'menu' : 'dialog'}
+              ?hidden=${!this.expanded}
+            >
+              <slot name="content"></slot>
+            </div>
+          `
+        : null}
+    `;
+  }
+}
+
+export default NileSideBarGroupItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-group-item': NileSideBarGroupItem;
+  }
+}

package/src/nile-side-bar-group-item-icon/index.ts

@@ -0,0 +1 @@
+export { NileSideBarGroupItemIcon } from './nile-side-bar-group-item-icon';

package/src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.css.ts

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+
+export const styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    margin-right: 12px;
+    color: inherit;
+  }
+
+  ::slotted(nile-icon) {
+    width: 100%;
+    height: 100%;
+    color: inherit;
+    fill: currentColor;
+  }
+
+ 
+  :host-context(nile-side-bar[collapsed]) {
+    margin-right: 0;
+    width: 100%;       
+    justify-content: center;
+  }
+
+  nile-tooltip::part(body) {
+    width: max-content;
+    height: max-content;
+    padding: var(--nile-spacing-sm);
+    overflow-x: hidden;
+  }
+`;
+
+export default [styles];

package/src/nile-side-bar-group-item-icon/nile-side-bar-group-item-icon.ts

@@ -0,0 +1,97 @@
+/**
+ * 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 { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-group-item-icon.css';
+import NileElement from '../internal/nile-element';
+import type { NileSideBar } from '../nile-side-bar/nile-side-bar';
+
+/**
+ * Nile side-bar-group-item-icon component.
+ *
+ * @tag nile-side-bar-group-item-icon
+ *
+ * @attr icon - The name of the icon to render inside <nile-icon>
+ * @attr tooltip - Tooltip text shown when sidebar is collapsed
+ *
+ * @slot - Optional slot to override the icon completely
+ */
+@customElement('nile-side-bar-group-item-icon')
+export class NileSideBarGroupItemIcon extends NileElement {
+  /**
+   * Name of the icon (passed to <nile-icon name="">)
+   */
+  @property({ type: String, reflect: true })
+  icon: string = '';
+
+  /**
+   * Tooltip text (auto-synced from sibling text if available)
+   */
+  @property({ type: String })
+  tooltip: string = '';
+
+  private sidebar: NileSideBar | null = null;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback(): void {
+	if (!this.hasAttribute('slot')) {
+		this.setAttribute('slot', 'icon');
+	  }
+	  
+    super.connectedCallback();
+    this.sidebar = this.closest('nile-side-bar') as NileSideBar | null;
+    if (this.sidebar) {
+      const observer = new MutationObserver(() => this.requestUpdate());
+      observer.observe(this.sidebar, { attributes: true, attributeFilter: ['collapsed'] });
+      (this as any)._observer = observer;
+    }
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+    (this as any)._observer?.disconnect();
+  }
+
+  private getSiblingText(): string {
+    const parent = this.parentElement;
+    const textEl = parent?.querySelector('nile-side-bar-group-item-text');
+    return textEl?.textContent?.trim() ?? '';
+  }
+
+  public render(): TemplateResult {
+    const isCollapsed = !!this.sidebar?.collapsed;
+    const text = this.tooltip || this.getSiblingText();
+
+    if (isCollapsed && text) {
+      return html`
+        <nile-tooltip distance="18" content=${text} placement="right" hoist>
+          <slot>
+            ${this.icon ? html`<nile-icon size="14" color="var(--nile-colors-dark-900)" name=${this.icon}></nile-icon>` : null}
+          </slot>
+        </nile-tooltip>
+      `;
+    }
+
+    return html`
+      <slot>
+        ${this.icon ? html`<nile-icon color="var(--nile-colors-dark-900)" size="14" name=${this.icon}></nile-icon>` : null}
+      </slot>
+    `;
+  }
+}
+
+export default NileSideBarGroupItemIcon;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-group-item-icon': NileSideBarGroupItemIcon;
+  }
+}

package/src/nile-side-bar-group-item-text/index.ts

@@ -0,0 +1 @@
+export { NileSideBarGroupItemText } from './nile-side-bar-group-item-text';

package/src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.css.ts

@@ -0,0 +1,29 @@
+import { css } from 'lit';
+
+/**
+ * SideBarGroupItemText CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+    flex: 1 1 auto;        
+    min-width: 0;         
+    font-size: var(--nile-type-scale-3);  
+    line-height: var(--nile-line-height-small)
+    font-weight: var(--nile-font-weight-medium);
+    color: var(--nile-colors-dark-900);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  ::slotted(*) {
+    font: inherit;
+    color: inherit;
+  }
+  :host-context(nile-side-bar[collapsed]) {
+    display: none;
+  }
+`;
+
+export default [styles];

package/src/nile-side-bar-group-item-text/nile-side-bar-group-item-text.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 { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-group-item-text.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile side-bar-group-item-text component.
+ *
+ * @tag nile-side-bar-group-item-text
+ *
+ * @slot - The text content of the sidebar item
+ */
+@customElement('nile-side-bar-group-item-text')
+export class NileSideBarGroupItemText extends NileElement {
+  /**
+   * The styles for nile-side-bar-group-item-text
+   * @remarks Extendable via super if needed
+   */
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+ 
+    if (!this.hasAttribute('slot')) {
+      this.setAttribute('slot', 'text');
+    }
+  }
+
+  public render(): TemplateResult {
+    return html` <slot></slot> `;
+  }
+}
+
+export default NileSideBarGroupItemText;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-group-item-text': NileSideBarGroupItemText;
+  }
+}

package/src/nile-side-bar-header/index.ts

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