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

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

@@ -0,0 +1,45 @@
+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];

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

@@ -0,0 +1,42 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, CSSResultArray, TemplateResult } 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
+ */
+@customElement('nile-side-bar-footer')
+export class NileSideBarFooter extends NileElement {
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div part="base" class="footer">
+      <slot> </slot>
+      </div>
+    `;
+  }
+}
+
+export default NileSideBarFooter;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-footer': NileSideBarFooter;
+  }
+}

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

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

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

@@ -0,0 +1,76 @@
+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];

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

@@ -0,0 +1,45 @@
+import { html, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { styles } from './nile-side-bar-footer-item.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile side-bar-footer-item component.
+ *
+ * @tag nile-side-bar-footer-item
+ *
+ * @slot icon - Slot for footer item icon
+ * @slot text - Slot for footer item text
+ * @slot action - Slot for footer item action
+ *
+ * @csspart base - Wrapper for the footer item
+ * @csspart icon - Wrapper for the icon slot
+ * @csspart text - Wrapper for the text slot
+ * @csspart action - Wrapper for the action slot
+ */
+@customElement('nile-side-bar-footer-item')
+export class NileSideBarFooterItem extends NileElement {
+  @property({ type: String, reflect: true }) type: string | null = null;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div part="base" class="footer-item">
+        <slot name="icon" part="icon"></slot>
+        <slot name="text" part="text"></slot>
+        <slot name="action" part="action"></slot>
+      </div>
+    `;
+  }
+}
+
+export default NileSideBarFooterItem;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-footer-item': NileSideBarFooterItem;
+  }
+}

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

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

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';