@aquera/nile-elements 1.3.3-beta-1.4 → 1.3.3-beta-1.6

package/src/nile-badge/nile-badge.ts

@@ -1,116 +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 { styles } from './nile-badge.css';
-import '../nile-icon-button/nile-icon-button';
-import { classMap } from 'lit/directives/class-map.js';
-import { customElement, property } from 'lit/decorators.js';
-import NileElement from '../internal/nile-element';
-import type { CSSResultGroup } from 'lit';
-/**
- * Nile icon component.
- *
- * @tag nile-badge
- *
- */
-
-/**
- * @summary badges are used as labels to organize things or to indicate a selection.
- * @status stable
- *
- * @dependency nile-icon-button
- *
- * @slot - The badge's content.
- *
- * @event nile-remove - Emitted when the remove button is activated.
- *
- * @csspart base - The component's base wrapper.
- * @csspart content - The badge's content.
- * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.
- * @csspart remove-button__base - The remove button's exported `base` part.
- */
-
-@customElement('nile-badge')
-export class NileBadge extends NileElement {
-  static styles: CSSResultGroup = styles;
-
-  /** The badge's theme variant. */
-  @property({ reflect: true }) variant:
-    | 'primary'
-    | 'success'
-    | 'normal'
-    | 'warning'
-    | 'error'
-    | 'info'
-    | 'gray'
-    | 'brand'
-    | 'blue-light'
-    | 'blue'
-    | 'indigo'
-    | 'purple'
-    | 'pink'
-    | 'orange'
-    | 'blue-gray'
-    | 'gray-blue' = 'normal';
-
-  /** Draws a pill-style badge with rounded edges. */
-  @property({ type: Boolean, reflect: true }) rounded = false;
-
-  //  For setting pill type
-  @property({ reflect: true }) pilltype:
-    | 'pill-color'
-    | 'pill-outline'
-    | 'badge-color'='badge-color';
-
-  render() {
-    return html`
-      <span
-        part="base"
-        class=${classMap({
-          badge: true,
-          'badge--primary': this.variant === 'primary',
-          'badge--normal': this.variant === 'normal',
-          'badge--info': this.variant === 'info',
-          'badge--pink': this.variant === 'pink',
-          'badge--orange': this.variant === 'orange',
-          'badge--purple': this.variant === 'purple',
-          'badge--indigo': this.variant === 'indigo',
-          'badge--blue': this.variant === 'blue',
-          'badge--blue-light': this.variant === 'blue-light',
-          'badge--gray-blue': this.variant === 'gray-blue',
-          'badge--success': this.variant === 'success',
-          'badge--warning': this.variant === 'warning',
-          'badge--error': this.variant === 'error',
-          'badge--brand': this.variant === 'brand',
-          'badge--gray': this.variant === 'gray',
-          'badge--pill-outline': this.pilltype == 'pill-outline',
-          'badge--badge-color': this.pilltype == 'badge-color',
-          'badge--rounded':
-            this.rounded ||
-            this.pilltype == 'pill-outline' ||
-            this.pilltype == 'pill-color',
-        })}
-      >
-        <slot part="content" class="badge__content"></slot>
-      </span>
-    `;
-  }
-}
-
-export default NileBadge;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-badge': NileBadge;
-  }
-}

package/src/nile-breadcrumb/index.ts

@@ -1 +0,0 @@
-export {NileBreadcrumb} from './nile-breadcrumb';

package/src/nile-breadcrumb/nile-breadcrumb.css.ts

@@ -1,23 +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';
-
-/**
- * Breadcrumb CSS
- */
-export const styles = css`
-  :host {
-    display: flex;
-    align-items: center;
-    -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));
-  }
-`;
-
-export default [styles];

package/src/nile-breadcrumb/nile-breadcrumb.ts

@@ -1,83 +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-breadcrumb.css';
-import NileElement from '../internal/nile-element';
-import { foreach } from '../nile-icon/icons/svg';
-/**
- * Nile BreadCrumb component.
- *
- * @tag nile-breadcrumb
- *
- */
-@customElement('nile-breadcrumb')
-export class NileBreadcrumb extends NileElement {
-  /**
-   * The styles for Breadcrumb
-   * @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
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateComplete.then(() => {
-      this.changeLastItem();
-    });
-  }
-
-  private changeLastItem() {
-    const items: any = [...this.querySelectorAll('nile-breadcrumb-item')];
-    const itemslength = items.length;
-    for (let i = 0; i < itemslength - 1; i++) {
-      const element = items[i];
-      element.isLast = false;
-    }
-    const lastItem = items[itemslength - 1];
-    lastItem.isLast = true;
-  }
-
-  private handleRemoveClick(event: any) {
-    this.emit('nile-click', { value: event.target.innerText });
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <slot
-        @slotchange=${this.changeLastItem}
-        @nile-click-item=${this.handleRemoveClick}
-        class="breadcrumb"
-      ></slot>
-    `;
-  }
-
-  /* #endregion */
-}
-
-export default NileBreadcrumb;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-breadcrumb': NileBreadcrumb;
-  }
-}

package/src/nile-breadcrumb-item/index.ts

@@ -1 +0,0 @@
-export {NileBreadcrumbItem} from './nile-breadcrumb-item';

package/src/nile-breadcrumb-item/nile-breadcrumb-item.css.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 { css } from 'lit';
-
-/**
- * Breadcrumb-item CSS
- */
-export const styles = css`
-  :host {
-    display: flex;
-    align-items: center;
-    text-align: center;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));
-    font-style: normal;
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
-    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
-    letter-spacing: 0.2px; 
-    -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));
-  }
-
-  .nile-breadcrumb-item__arrow {
-    margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));
-  }
-
-  .nile-breadcrumb-item__arrow-hidden {
-    display: none;
-  }
-
-  .nile-breadcrumb-item__slot-text {
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));
-  }
-
-  .nile-breadcrumb-item__slot-text:hover {
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));
-    cursor: pointer;
-  }
-
-  .nile-breadcrumb-item__last-slot-text {
-    color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));
-  }
-`;
-
-export default [styles];

package/src/nile-breadcrumb-item/nile-breadcrumb-item.ts

@@ -1,86 +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, state, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { styles } from './nile-breadcrumb-item.css';
-import NileElement from '../internal/nile-element';
-/**
- * Nile BreadCrumb Item component.
- *
- * @tag nile-breadcrumb-item
- *
- */
-@customElement('nile-breadcrumb-item')
-export class NileBreadcrumbItem extends NileElement {
-  /**
-   * The styles for BreadcrumbItem
-   * @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];
-  }
-
-  @state() private isLast = false;
-
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-
-  @property({ type: String }) separator = 'var(--nile-icon-arrow-right, var(--ng-icon-chevron-right))';
-
-  private handleClick() {
-    if (this.isLast) {
-      return;
-    }
-    this.emit('nile-click-item');
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <slot
-        class=${classMap({
-          'nile-breadcrumb-item__slot-text': !this.isLast,
-          'nile-breadcrumb-item__last-slot-text': this.isLast,
-        })}
-        @click=${this.handleClick}
-      ></slot>
-      <nile-icon
-        name=${this.separator}
-        aria-label=${this.separator}
-        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-        color="var(--nile-colors-dark-500, var(--ng-colors-fg-quaternary-400))"
-        class=${classMap({
-          'nile-breadcrumb-item__arrow': true,
-          'nile-breadcrumb-item__arrow-hidden': this.isLast,
-        })}
-        size="14"
-      ></nile-icon>
-    `;
-  }
-
-  /* #endregion */
-}
-
-export default NileBreadcrumbItem;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-breadcrumb-item': NileBreadcrumbItem;
-  }
-}

package/src/nile-button/index.ts

@@ -1 +0,0 @@
-export { NileButton }  from './nile-button';