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

package/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.ts

@@ -1,142 +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';
-
-/**
- * SideBarActionMenuItem CSS
- */
-export const styles = css`
-     :host {
-    box-sizing: border-box;
-    -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));
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-
-  :host {
-    display: block;
-  }
-
-  :host([inert]) {
-    display: none;
-  }
-
-  .menu-item {
-    position: relative;
-    display: flex;
-    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
-    align-items: stretch;
-    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));
-    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));
-    letter-spacing: normal;
-    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));
-    min-height:40px;
-    transition: 150ms fill;
-    user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
-  }
-
-  .menu-item.menu-item--disabled {
-    outline: none;
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .menu-item .menu-item__label {
-    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));
-    display: inline-flex;
-  }
-
-  .menu-item .menu-item__prefix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
-  }
-
-  .menu-item .menu-item__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-  }
-
-  .menu-item .menu-item__suffix::slotted(*) {
-    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
-  }
-
-  :host(:focus-visible) {
-    outline: none;
-  }
-
-  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
-    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
-  }
-
-  :host(:focus-visible) .menu-item {
-    outline: none;
-    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));
-    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));
-    opacity: 1;
-  }
-
-  .menu-item .menu-item__check,
-  .menu-item .menu-item__chevron {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5em;
-    visibility: hidden;
-  }
-
-  .menu-item--checked .menu-item__check,
-  .menu-item--has-submenu .menu-item__chevron {
-    visibility: visible;
-  }
-
-  :host([active]) .menu-item {
-    background: var(--nile-colors-primary-100);
-  }
-
-
- .menu-item {
- 
-  margin-left: 8px;
-  margin-right: 8px;
-  margin-top: 2px;
-  margin-bottom: 2px;
-}
-
-  @media (forced-colors: active) {
-    :host(:hover:not([aria-disabled='true'])) .menu-item,
-    :host(:focus-visible) .menu-item {
-      outline: dashed 1px SelectedItem;
-      outline-offset: -1px;
-    }
-  
-  }
-`;
-
-export default [styles];

package/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.ts

@@ -1,203 +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-action-menu-item.css';
-  import '../nile-icon';
-  import { classMap } from 'lit/directives/class-map.js';
-  import { query } from 'lit/decorators.js';
-  import { getTextContent } from '../internal/slot';
-  import { watch } from '../internal/watch';
-  import NileElement from '../internal/nile-element';
-  import type { CSSResultGroup } from 'lit';
-  
-  /**
-   * Nile side-bar-action-menu-item component.
-   *
-   * @tag nile-side-bar-action-menu-item
-   *
-   * @summary Menu items provide options for the user to pick from in a menu.
-   * @status stable
-   * @since 2.0
-   *
-   * @dependency nile-icon
-   *
-   * @slot - The menu item's label.
-   * @slot prefix - Used to prepend an icon or similar element to the menu item.
-   * @slot suffix - Used to append an icon or similar element to the menu item.
-   *
-   * @csspart base - The component's base wrapper.
-   * @csspart checked-icon - The checked icon, which is only visible when the menu item is checked.
-   * @csspart prefix - The prefix container.
-   * @csspart label - The menu item label.
-   * @csspart suffix - The suffix container.
-   * @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu.
-   */
-  @customElement('nile-side-bar-action-menu-item')
-  export class NileSideBarActionMenuItem extends NileElement {
-	static styles: CSSResultGroup = styles;
-  
-	private cachedTextLabel: string;
-  
-	@query('slot:not([name])') defaultSlot: HTMLSlotElement;
-  
-	@query('.menu-item') menuItem: HTMLElement;
-  
-	/** The type of menu item to render. To use `checked`, this value must be set to `checkbox`. */
-	@property() type: 'normal' | 'checkbox' = 'normal';
-  
-	/** Draws the item in a checked state. */
-	@property({ type: Boolean, reflect: true }) checked = false;
-  
-	/** A unique value to store in the menu item. This can be used as a way to identify menu items when selected. */
-	@property() value = '';
-  
-	/** Draws the menu item in a disabled state, preventing selection. */
-	@property({ type: Boolean, reflect: true }) disabled = false;
-  
-	/** Indicates if this menu item has a submenu. */
-	@property({ type: Boolean, reflect: true }) hasSubMenu = false;
-  
-	connectedCallback() {
-	  super.connectedCallback();
-	  this.handleHostClick = this.handleHostClick.bind(this);
-	  this.addEventListener('click', this.handleHostClick);
-	}
-  
-	disconnectedCallback() {
-	  super.disconnectedCallback();
-	  this.removeEventListener('click', this.handleHostClick);
-	}
-  
-	private handleDefaultSlotChange() {
-	  const textLabel = this.getTextLabel();
-  
-	  // Ignore the first time the label is set
-	  if (typeof this.cachedTextLabel === 'undefined') {
-		this.cachedTextLabel = textLabel;
-		return;
-	  }
-  
-	  // When the label changes, emit a slotchange event so parent controls see it
-	  if (textLabel !== this.cachedTextLabel) {
-		this.cachedTextLabel = textLabel;
-		this.emit('slotchange');
-	  }
-	}
-  
-	private handleHostClick(event: MouseEvent) {
-	  // Prevent the click event from being emitted when the item is disabled
-	  if (this.disabled) {
-		event.preventDefault();
-		event.stopImmediatePropagation();
-	  }
-	}
-  
-	@watch('checked')
-	handleCheckedChange() {
-	  // For proper accessibility, users have to use type="checkbox" to use the checked attribute
-	  if (this.checked && this.type !== 'checkbox') {
-		this.checked = false;
-		console.error(
-		  'The checked attribute can only be used on menu items with type="checkbox"',
-		  this
-		);
-		return;
-	  }
-  
-	  // Only checkbox types can receive the aria-checked attribute
-	  if (this.type === 'checkbox') {
-		this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-	  } else {
-		this.removeAttribute('aria-checked');
-	  }
-	}
-  
-	@watch('disabled')
-	handleDisabledChange() {
-	  this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
-	}
-  
-	@watch('type')
-	handleTypeChange() {
-	  if (this.type === 'checkbox') {
-		this.setAttribute('role', 'menuitemcheckbox');
-		this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-	  } else {
-		this.setAttribute('role', 'menuitem');
-		this.removeAttribute('aria-checked');
-	  }
-	}
-  
-	/** Returns a text label based on the contents of the menu item's default slot. */
-	getTextLabel() {
-	  return getTextContent(this.defaultSlot);
-	}
-  
-	render() {
-	  return html`
-		<div
-		  part="base"
-		  class=${classMap({
-			'menu-item': true,
-			'menu-item--checked': this.checked,
-			'menu-item--disabled': this.disabled,
-			'menu-item--has-submenu': this.hasSubMenu, // reserved for future use
-		  })}
-		>
-		  ${this.checked
-			? html`
-				<span part="checked-icon" class="menu-item__check">
-				  <nile-icon
-					name="var(--nile-icon-tick, var(--ng-icon-check))"
-					method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-					library="system"
-					aria-hidden="true"
-				  ></nile-icon>
-				</span>
-			  `
-			: ``}
-  
-		  <slot name="prefix" part="prefix" class="menu-item__prefix"></slot>
-  
-		  <slot
-			part="label"
-			class="menu-item__label"
-			@slotchange=${this.handleDefaultSlotChange}
-		  ></slot>
-  
-		  <slot name="suffix" part="suffix" class="menu-item__suffix"></slot>
-  
-		  ${this.hasSubMenu
-			? html` <span part="submenu-icon" class="menu-item__chevron">
-				<nile-icon
-				  name="var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))"
-				  method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-				  library="system"
-				  aria-hidden="true"
-				></nile-icon>
-			  </span>`
-			: ``}
-		</div>
-	  `;
-	}
-  }
-  
-  export default NileSideBarActionMenuItem;
-  
-  declare global {
-	interface HTMLElementTagNameMap {
-	  'nile-side-bar-action-menu-item': NileSideBarActionMenuItem;
-	}
-  }
-  

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

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

package/src/nile-side-bar-content/nile-side-bar-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';
-
-/**
- * SideBarContent CSS
- */
-export const styles = css`
-	:host {
-
-	}
-`;
-
-export default [styles];

package/src/nile-side-bar-content/nile-side-bar-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-content.css';
-import NileElement from '../internal/nile-element';
-
-
-/**
- * Nile side-bar-content component.
- *
- * @tag nile-side-bar-content
- *
- */
-@customElement('nile-side-bar-content')
-export class NileSideBarContent extends NileElement {
-
-	/**
-	 * The styles for nile-side-bar-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 NileSideBarContent;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-content': NileSideBarContent;
-  }
-}

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

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

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

@@ -1,47 +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';
-
-/**
- * SideBarExpand CSS
- */
-export const styles = css`
-	 :host {
-  display: inline-flex;
-}
-
-.expand-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  border-radius: 6px;
-  transition: background-color 0.2s ease;
-}
-
-.expand-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-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-expand/nile-side-bar-expand.ts

@@ -1,55 +0,0 @@
-import { html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { styles } from './nile-side-bar-expand.css';
-import NileElement from '../internal/nile-element';
-
-/**
- * Nile side-bar-expand component.
- *
- * @tag nile-side-bar-expand
- *
- */
-@customElement('nile-side-bar-expand')
-export class NileSideBarExpand extends NileElement {
-  /** Whether the sidebar is collapsed */
-  @property({ type: Boolean, reflect: true })
-  collapsed: boolean = false;
-
-  public static get styles(): CSSResultArray {
-    return [styles];
-  }
-
-  private toggleSidebar() {
-    // find parent nile-side-bar
-    const sidebar = this.closest('nile-side-bar');
-    if (!sidebar) return;
-
-    const isCollapsed = sidebar.hasAttribute('collapsed');
-    if (isCollapsed) {
-      sidebar.removeAttribute('collapsed');
-      this.collapsed = false;
-    } else {
-      sidebar.setAttribute('collapsed', '');
-      this.collapsed = true;
-    }
-  }
-
-  public render(): TemplateResult {
-    return html`
-
-      <button class="expand-btn" @click=${this.toggleSidebar}>
-        ${this.collapsed
-          ? html`<nile-tooltip placement="right" hoist content="Expand Sidebar"><span part="icon"><nile-icon name="moveright"></nile-icon></span></nile-tooltip>`  
-          : html`<nile-tooltip placement="right"  hoist content="Collapse Sidebar"><span part="icon"><nile-icon name="moveleft"></nile-icon></span></nile-tooltip>`}  
-      </button>
-    `;
-  }
-}
-
-export default NileSideBarExpand;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-expand': NileSideBarExpand;
-  }
-}

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

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

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

@@ -1,47 +0,0 @@
-import { css } from 'lit';
-
-/**
- * SideBarFooter CSS
- */
-export const styles = css`
- :host {
-  display: block;
-  position: sticky;
-  bottom: 0;
- padding-bottom: var(--nile-spacing-xl);
-	padding-left: var(--nile-spacing-xl);
-	padding-right: var(--nile-spacing-xl);
- gap: 8px;
-  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: 0.5rem;
- 
-  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;
-}
-
-::slotted(nile-side-bar-footer-item:hover) {
-  background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);
-}
-
-
-
- 
-`;
-
-export default [styles];

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

@@ -1,42 +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-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-icon/index.ts

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

package/src/nile-side-bar-footer-icon/nile-side-bar-footer-icon.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';
-
-/**
- * SideBarFooterIcon CSS
- */
-export const styles = css`
-	:host {
-
-	}
-`;
-
-export default [styles];

package/src/nile-side-bar-footer-icon/nile-side-bar-footer-icon.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-footer-icon.css';
-import NileElement from '../internal/nile-element';
-
-
-/**
- * Nile side-bar-footer-icon component.
- *
- * @tag nile-side-bar-footer-icon
- *
- */
-@customElement('nile-side-bar-footer-icon')
-export class NileSideBarFooterIcon extends NileElement {
-
-	/**
-	 * The styles for nile-side-bar-footer-icon
-	 * @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 NileSideBarFooterIcon;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-side-bar-footer-icon': NileSideBarFooterIcon;
-  }
-}

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

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