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

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

@@ -1,97 +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-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" name=${this.icon}></nile-icon>` : null}
-          </slot>
-        </nile-tooltip>
-      `;
-    }
-
-    return html`
-      <slot>
-        ${this.icon ? html`<nile-icon 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

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

@@ -1,31 +0,0 @@
-import { css } from 'lit';
-
-/**
- * SideBarGroupItemText CSS
- */
-export const styles = css`
-  :host {
-    display: block;
-    flex: 1 1 auto;       /* take up remaining space */
-    min-width: 0;         /* allow ellipsis in flexbox */
-    font-size: 0.875rem;  /* 14px */
-    line-height: 1.25rem; /* 20px */
-    font-weight: 500;
-    color: inherit;       /* follow parent color (normal, hover, active) */
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  ::slotted(*) {
-    font: inherit;
-    color: inherit;
-  }
-
-  /* Hide text when sidebar is collapsed */
-  :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

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

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

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

@@ -1,66 +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';
-
-/**
- * SideBarHeader CSS
- */
-export const styles = css`
- :host {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-top: var(--nile-spacing-xl);
-  padding-bottom: var(--nile-spacing-lg);
-  padding-left: var(--nile-spacing-xl);
-  padding-right: var(--nile-spacing-xl);
-  position: sticky;
-    top: 0;
-    z-index: 10;
-    background: var(--nile-colors-neutral-100);
-}
-
-/* Expanded → inline row */
-.header-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-}
-
-/* Collapsed → stack logo and expand button vertically */
-:host-context(nile-side-bar[collapsed]) .header-content {
-  flex-direction: column;
-  justify-content: center;
-  gap: 0.75rem;
-}
-
-
-::slotted(*) {
-  /* display: flex;
-  align-items: center; */
-}
-
- 
-::slotted([slot='logo']) {
-  font-size: 1rem;
-  font-weight: 700;
-  letter-spacing: -0.02em;
-  color: inherit;
-  text-transform: none;
-}
-
-::slotted([slot='actions']) {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-`;
-
-export default [styles];

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

@@ -1,57 +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-header.css';
-import NileElement from '../internal/nile-element';
-
-
-/**
- * Nile side-bar-header component.
- *
- * @tag nile-side-bar-header
- *
- */
-@customElement('nile-side-bar-header')
-export class NileSideBarHeader extends NileElement {
-
-	/**
-	 * The styles for nile-side-bar-header
-	 * @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`
-		  <div class="header-content">
-      <slot name="logo"></slot>
-      <slot name="expand"></slot>
-    </div>
-			`;
-	}
-
-	/* #endregion */
-}
-
-export default NileSideBarHeader;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-header': NileSideBarHeader;
-  }
-}

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

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

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

@@ -1,49 +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';
-
-/**
- * SideBarLogo CSS
- */
-export const styles = css`
-	 :host {
-  /* display: flex;
-  align-items: center; */
-  justify-content: center;
-  height: 100%;
-  flex: 0;
-}
-
-.logo {
-  max-height: 32px;
-  object-fit: contain;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-}
-
-/* Expanded logo visible by default */
-.logo.expanded {
-  display: block;
-}
-
- 
-.logo.collapsed {
-  display: none;
-}
-
- 
-:host-context(nile-side-bar[collapsed]) .logo.expanded {
-  display: none;
-}
-
-:host-context(nile-side-bar[collapsed]) .logo.collapsed {
-  display: block;
-}
-
-`;
-
-export default [styles];

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

@@ -1,52 +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-logo.css';
-import NileElement from '../internal/nile-element';
-
-/**
- * Nile side-bar-logo component.
- *
- * @tag nile-side-bar-logo
- *
- * @attr src - The image URL for the expanded (full) logo
- * @attr collapsed-src - The image URL for the collapsed (icon) logo
- */
-@customElement('nile-side-bar-logo')
-export class NileSideBarLogo extends NileElement {
-  /**
-   * Expanded logo (default full size)
-   */
-  @property({ type: String, attribute: true, reflect: true })
-  src: string = 'https://assets.aquera.io/img/aquera-logo-blue.svg';
-  /**
-   * Collapsed logo (icon only)
-   */
-  @property({ type: String, attribute: 'collapsed-src' })
-  collapsedSrc: string = 'https://assets.aqueralabs.com/img/aquera-logo-mini.png';
-
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <img class="logo expanded" src="${this.src}" alt="Logo" part="logo-expanded" />
-      <img class="logo collapsed" src="${this.collapsedSrc}" alt="Logo icon" part="logo-collapsed" />
-    `;
-  }
-}
-
-export default NileSideBarLogo;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-logo': NileSideBarLogo;
-  }
-}