@aquera/nile-elements 1.1.3-beta-1.2 → 1.1.3-beta-2.0

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

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

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

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

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

@@ -1,33 +0,0 @@
-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: 0.95rem;
-    font-weight: 500;
-    color: var(--nile-side-bar-footer-text-color, #111827);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .sub {
-    font-size: 0.8rem;
-    color: var(--nile-side-bar-footer-subtext-color, #6b7280);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
-export default [styles];

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

@@ -1,51 +0,0 @@
-/**
- * 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

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

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

@@ -1,55 +0,0 @@
-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: 12px;
-  }
-
-
-  :host([footer]) {
-    margin-top: auto;
-    margin-bottom: var(--nile-spacing-md);
-  }
-
-  .group-label {
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: var(--nile-spacing-xs);
-  }
-  :host([divider])::before {
-  content: "";
-  display: block;
-  height: 1px;
-  background: var(--nile-side-bar-group-divider, #e5e7eb);
-  margin-top: var(--nile-spacing-xs);
-  max-width: 192px;
- margin: auto;
-}
- 
-.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

@@ -1,74 +0,0 @@
-/**
- * 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

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

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

@@ -1,68 +0,0 @@
-/**
-* 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;
-  gap: 0.75rem;
-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: #111;
-  text-decoration: none;
-  font-size: 14px;
-  line-height: 1.4;
-}
-
-.item-link:hover {
-  background: var(--nile-colors-neutral-400);
-  border-radius: var(--nile-radius-sm);
-}
-
-.item-content {
-  display: block;
-  padding-left: 2.5rem;  
-}
-
-::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: 600;
-}
-
-:host([collapsed]) .group-item {
-height: 38px;
-width: 38px;
-}
-
-`;
-
-export default [styles];

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

@@ -1,146 +0,0 @@
-/**
- * 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 {
-  /**
-   * Optional navigation href. If provided, item renders as <a>.
-   */
-  @property({ type: String }) href: string | null = null;
-
-  /**
-   * Whether the item is currently active.
-   */
-  @property({ type: Boolean, reflect: true, attribute: true }) active = false;
-
-  /**
-   * Type of item: default | dropdown | popover
-   */
-  @property({ type: String, reflect: true })
-  type: 'default' | 'dropdown' | 'popover' = 'default';
-
-  /**
-   * Whether dropdown/popover content is expanded.
-   */
-  @property({ type: Boolean, reflect: true })
-  expanded: boolean = false;
-
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  private toggleExpand() {
-    if (this.type === 'dropdown' || this.type === 'popover') {
-      this.expanded = !this.expanded;
-    }
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this.href && window.location.pathname === this.href) {
-      this.active = true;
-    }
-  }
-
-  /**
-   * Emit nile-select whenever the item is clicked.
-   */
-  private handleSelect(e: Event) {
- 
-    if (!this.href) {
-      e.preventDefault();
-    }
-
-    this.dispatchEvent(
-      new CustomEvent('nile-select', {
-        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" role="listitem" ?data-expanded=${this.expanded}>
-        ${this.href
-          ? html`
-              <a
-                part="link"
-                class="item-link"
-                href=${this.href}
-                @click=${this.handleSelect}
-              >
-                <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.toggleExpand();
-                }}
-              >
-                <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-content/index.ts

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

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

@@ -1,19 +0,0 @@
-/**
-* 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';
-
-/**
- * SideBarGroupItemContent CSS
- */
-export const styles = css`
-	:host {
-
-	}
-`;
-
-export default [styles];

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

@@ -1,54 +0,0 @@
-/**
- * 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-item-content.css';
-import NileElement from '../internal/nile-element';
-
-
-/**
- * Nile side-bar-group-item-content component.
- *
- * @tag nile-side-bar-group-item-content
- *
- */
-@customElement('nile-side-bar-group-item-content')
-export class NileSideBarGroupItemContent extends NileElement {
-
-	/**
-	 * The styles for nile-side-bar-group-item-content
-	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
-	 */
-	public static get styles(): CSSResultArray {
-		return [styles];
-	}
-
-	/* #endregion */
-
-	/* #region Methods */
-
-	/**
-	 * Render method
-	 * @slot This is a slot test
-	 */
-	public render(): TemplateResult {
-		return html`
-			<slot> </slot>
-			`;
-	}
-
-	/* #endregion */
-}
-
-export default NileSideBarGroupItemContent;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-group-item-content': NileSideBarGroupItemContent;
-  }
-}

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

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

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