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

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

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

@@ -0,0 +1,61 @@
+/**
+* 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);
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+
+:host-context(nile-side-bar[collapsed]) .header-content {
+  flex-direction: column;
+  justify-content: center;
+  gap: var(--nile-spacing-lg);
+}
+
+
+ 
+ 
+::slotted([slot='logo']) {
+  font-size: var(--nile-type-scale-3);
+  font-weight: var(--nile-font-weight-bold);
+  letter-spacing: -0.02em;
+  color: var(--nile-colors-dark-900);
+  text-transform: none;
+}
+
+::slotted([slot='actions']) {
+  display: flex;
+  align-items: center;
+  gap: var(--nile-spacing-md);
+}
+
+`;
+
+export default [styles];

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

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

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

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

@@ -0,0 +1,46 @@
+/**
+* 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 {
+  justify-content: center;
+  height: 100%;
+  flex: 0;
+}
+
+.logo {
+  max-height: 32px;
+  object-fit: contain;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.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

@@ -0,0 +1,52 @@
+/**
+ * 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;
+  }
+}

package/src/nile-table-header-item/nile-table-header-item.css.ts

@@ -20,6 +20,10 @@ export const styles = css`
     -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
     text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    
   }
 
   .header__item__wrapper{

package/src/nile-virtual-select/nile-virtual-select.css.ts

@@ -504,6 +504,10 @@ export const styles = css`
     color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
   }
 
+  .virtualized.no-scroll {
+    overflow: hidden !important;
+  }
+
   .virtual-select-loader {
     position: absolute;
     display: flex;