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

package/src/nile-sidebar/index.ts

@@ -1,133 +0,0 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-
-/**
- * An nile-menu element.
- */
-
-interface MenuItem {
-  name: string;
-  icon: string;
-  href: string;
-}
-
-interface MenuItemList {
-  [key: string]: MenuItem;
-}
-
-/**
- * An nile-sidebar element.
- *
- * @fires count-changed - Indicates when the count changes
- * @slot - This element has a slot
- * @csspart button - The button
- */
-@customElement('nile-sidebar')
-export class NileSidebar extends LitElement {
-  static override styles = css`
-    :host {
-      background-color: var(--nile-alert-color-background-base);
-      border-right: 1px solid var(--nile-colors-neutral-400);
-      min-height: 100vh;
-      background: var(--nile-colors-neutral-100);
-      border: 1px solid var(--nile-colors-neutral-400);
-      -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([showSidebar=true]) {
-      min-width: 240px;
-    }
-    .nile-logo {
-      margin: var(--nile-spacing-2xl);
-      display: block;
-      margin-bottom: var(--nile-spacing-lg);
-    }
-
-    .menu-group {
-      margin-left: var(--nile-spacing-2xl);
-      margin-right: var(--nile-spacing-2xl);
-    }
-
-    .view-component {
-      background-color: var(--nile-colors-white-base);
-      min-width: 240px;
-    }
-    // padding: 3rem;
-    .view-component__item {
-      background-color: var(--nile-colors-white-base);
-      // padding: 1rem;
-      border-radius: var(--nile-radius-sm);
-      border: solid 1px #eee;
-    }
-
-    .nile-menu__hr {
-      border-bottom: solid 1px var(--nile-colors-dark-100);
-      margin-top: var(--nile-spacing-lg) !important;
-      margin-bottom: var(--nile-spacing-lg) !important;
-      background-color: var(--nile-colors-dark-100);
-    }
-
-    .nds-menu--bottom {
-      position: absolute;
-      bottom: 0;
-    }
-
-    .nds-menu--active .nile-logo {
-      display: none;
-    }
-  `;
-
-  /**
-   * Button Lab
-   */
-  @property()
-  title = '';
-
-  /**
-   * Hide Sidebar
-   */
-  @property()
-  showSidebar = false;
-
-  get buttonClassMap() {
-    return {
-      'nds-menu--active': this.showSidebar
-    };
-  }
-
-  // class="nds-menu ${classMap(this.buttonClassMap)}"
-
-  override render() {
-    return html`
-      <div class="nile-menu--wrapper  ${classMap(this.buttonClassMap)}" >
-        <div class="nile-menu-group">
-          <a class="nile-logo" href="/">
-            <img
-              src="https://assets.aquera.io/img/aquera-logo-blue.svg"
-              alt="Aquera"
-              width="112.94px"
-              height="31.06px"
-              tabindex="1"
-            />
-          </a>
-          <div class="menu-group">
-            <slot name="menu"></slot>
-          </div>
-        </div>
-        <div class="">
-          <div class="nds-menu--bottom">
-            <slot name="bottom"></slot>
-          </div>
-        </div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-sidebar': NileSidebar;
-  }
-}

package/src/nile-sidebar/logo.svg

@@ -1 +0,0 @@
-<svg width="106" height="30" xmlns="http://www.w3.org/2000/svg"><title>Logo/Blue</title><g fill="#215690" fill-rule="evenodd"><path d="m13.828 14.513-3.552-10.5-3.551 10.5h7.103Zm1.057 3.225H5.63L4.005 22.5H0L8.198 0h4.118l8.199 22.5H16.51l-1.625-4.762ZM34.273 14.908c0-2.457-2.004-4.401-4.454-4.401-2.487 0-4.454 1.944-4.454 4.401s1.967 4.401 4.454 4.401c2.45 0 4.454-1.944 4.454-4.4Zm6.756 11.055v2.861c-.482.184-1.15.294-1.819.294-2.71 0-5.048-2.128-5.048-4.842v-3.573a7.044 7.044 0 0 1-4.788 1.834c-4.195 0-7.536-3.375-7.536-7.629S25.18 7.28 29.374 7.28c1.893 0 3.526.697 4.788 1.834v-1.54h3.527v16.3c0 1.284.853 2.09 1.967 2.09h1.373ZM41.691 16.68v-9.4h3.518v8.953c0 1.828 1.16 2.984 2.769 2.984 1.609 0 2.77-1.156 2.77-2.984V7.279h3.517v9.401c0 3.582-2.358 5.82-6.287 5.82-3.93 0-6.287-2.238-6.287-5.82M61.46 13.197h8.11c-.636-1.756-2.019-2.863-3.962-2.863-2.018 0-3.475 1.145-4.148 2.863Zm11.959 2.596H61.16c.187 2.558 1.943 4.353 4.447 4.353 1.906 0 3.4-1.031 4.036-2.635h3.55c-.86 3.322-3.737 5.65-7.586 5.65-4.634 0-8.034-3.359-8.034-7.94 0-4.582 3.437-7.942 7.997-7.942 4.522 0 7.81 3.284 7.885 7.865l-.037.65ZM86.691 7.391v3.32a6.153 6.153 0 0 0-1.26-.149c-2.557 0-4.484 1.754-4.484 4.365V22.5h-3.52V7.578h3.52V9.63c1.038-1.455 2.631-2.35 4.558-2.35.408 0 .815.037 1.186.111M100.331 15.22c0-2.557-1.985-4.58-4.412-4.58-2.463 0-4.411 2.023-4.411 4.58 0 2.558 1.948 4.582 4.411 4.582 2.427 0 4.412-2.024 4.412-4.581Zm5.551 4.658v2.978c-.33.191-.735.306-1.176.306-1.801 0-3.235-1.031-3.97-2.558-1.25 1.565-3.125 2.558-5.258 2.558-4.154 0-7.463-3.513-7.463-7.941 0-4.43 3.309-7.942 7.463-7.942 1.875 0 3.493.726 4.743 1.91V7.584h3.493V18.16c0 1.337.662 1.718 1.36 1.718h.808Z"/></g></svg>

package/src/nile-sidebar-menu/index.ts

@@ -1 +0,0 @@
-export { NileSidebarMenu } from './nile-sidebar-menu';

package/src/nile-sidebar-menu/nile-sidebar-menu.css.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 { css } from 'lit';
-
-/**
- * SidebarMenu CSS
- */
-export const styles = css`
-  :host {
-    background-color: var(--nile-sidebar-menu-background-color);
-    --min-width: 80px;
-    min-width: var(--min-width);
-    width: max-content;
-    height: 100%;
-    box-sizing: border-box;
-    display: flex;
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
-    flex-direction: column;
-    -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));
-  }
-
-  .submenu__box {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
-    padding: var(--nile-spacing-lg) var(--nile-spacing-none);
-  }
-
-  .sidemenu__items-list {
-    display:flex;
-    flex-direction: column;
-    gap: var(--nile-spacing-md);
-  }
-
-  .footer {
-    display:flex;
-    flex-direction: column;
-    gap: var(--nile-spacing-md);
-  }
-
-`;
-
-export default [styles];

package/src/nile-sidebar-menu/nile-sidebar-menu.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 {
-  LitElement,
-  html,
-  CSSResultArray,
-  TemplateResult,
-} from 'lit';
-import { customElement, query, property } from 'lit/decorators.js';
-import { styles } from './nile-sidebar-menu.css';
-import NileElement from '../internal/nile-element';
-import { classMap } from 'lit/directives/class-map.js';
-import { foreach, log } from '../nile-icon/icons/svg';
-
-/**
- * Nile sidebar-menu component.
- *
- * @tag nile-sidebar-menu
- *
- */
-@customElement('nile-sidebar-menu')
-export class NileSidebarMenu extends NileElement {
-  /**
-   * The styles for nile-sidebar-menu
-   * @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];
-  }
-
-  @property({ type: Boolean, reflect: true }) sidemenucollapsed = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('click', this.handleSidebarMenuCollapsed.bind(this));
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.removeEventListener('click', this.handleSidebarMenuCollapsed);
-  }
-  firstUpdated() {
-    if (this.sidemenucollapsed) {
-      const items = this.querySelectorAll('nile-sidebar-menu-items');
-      items.forEach(curr_item => {
-        curr_item.collapsed = this.sidemenucollapsed;
-      });
-    }
-  }
-
-  handleSidebarMenuCollapsed() {
-    this.sidemenucollapsed = !this.sidemenucollapsed;
-    const items = this.querySelectorAll('nile-sidebar-menu-items');
-    items.forEach(curr_item => {
-      curr_item.collapsed = this.sidemenucollapsed;
-    });
-  }
-
-
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  public render(): TemplateResult {
-    return html`
-      <slot name="header" class="header"></slot>
-      <div class="submenu__box">
-        <slot
-          class=${classMap({
-            'sidemenu__items-list': true,
-          })}
-        >
-        </slot>
-        <slot name="footer" part="footer" class="footer"></slot>
-      </div>
-    `;
-  }
-
-  /* #endregion */
-}
-
-export default NileSidebarMenu;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-sidebar-menu': NileSidebarMenu;
-  }
-}

package/src/nile-sidebar-menu-items/index.ts

@@ -1 +0,0 @@
-export { NileSidebarMenuItems } from './nile-sidebar-menu-items';

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.css.ts

@@ -1,50 +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';
-
-/**
- * SidebarMenuItems CSS
- */
-export const styles = css`
-  :host {
-    --min-width: 280px;
-    -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__sidebar-menu-item {
-    display: flex;
-    align-items: center;
-    padding: var(--nile-spacing-md);
-    gap: var(--nile-spacing-xl);
-    min-width: var(--min-width);
-    width: max-content;
-    box-sizing: border-box;
-
-    font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-medium);
-    line-height: var(--nile-line-height-medium);
-  }
-
-  .nile__sidebar-menu-item:hover {
-    background-color: var(--nile-colors-neutral-100);
-    border-radius: var(--nile-radius-sm);
-  }
-
-  .hide-sidebar-menu-items{
-    min-width:48px;
-  }
-
-  .hide-items {
-    display: none;
-  }
-`;
-
-export default [styles];

package/src/nile-sidebar-menu-items/nile-sidebar-menu-items.ts

@@ -1,81 +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 { styles } from './nile-sidebar-menu-items.css';
-import NileElement from '../internal/nile-element';
-import { classMap } from 'lit/directives/class-map.js';
-
-/**
- * Nile sidebar-menu-items component.
- *
- * @tag nile-sidebar-menu-items
- *
- */
-@customElement('nile-sidebar-menu-items')
-export class NileSidebarMenuItems extends NileElement {
-  /**
-   * The styles for nile-sidebar-menu-items
-   * @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];
-  }
-
-  @property() iconValue = ''; // name of the icon we are using
-  @property({ type: Boolean, reflect: true }) active = false;
-
-  @state() collapsed = false;
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  public render(): TemplateResult {
-    return html`
-      <div
-        class=${classMap({
-          'nile__sidebar-menu-item': true,
-          'hide-sidebar-menu-items': this.collapsed,
-        })}
-      >
-        ${this.iconValue
-          ? html`<nile-icon
-              name="${this.iconValue}"
-              aria-label="${this.iconValue}"
-              size="24"
-              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
-            ></nile-icon>`
-          : ``}
-        <slot
-          class=${classMap({
-            'hide-items': this.collapsed,
-          })}
-        ></slot>
-      </div>
-    `;
-  }
-
-  /* #endregion */
-}
-
-export default NileSidebarMenuItems;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-sidebar-menu-items': NileSidebarMenuItems;
-  }
-}

package/src/nile-sidebar-wrapper/index.ts

@@ -1 +0,0 @@
-export { NileSidebarWrapper } from './nile-sidebar-wrapper';

package/src/nile-sidebar-wrapper/nile-sidebar-wrapper.css.ts

@@ -1,119 +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';
-
-/**
- * SidebarWrapper CSS
- */
-export const styles = css`
-  :host {
-    display: block;
-    -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));
-  }
-
-  .wrapper-box {
-    display: flex;
-    height: 100vh;
-    width: 100%;
-  }
-
-  .wrapper-box--right {
-    flex-direction: row-reverse;
-  }
-
-  .sidebar-content {
-    display: flex;
-    height: 100%;
-  }
-
-  .body-content {
-    display: flex;
-    height: 100%;
-    background-color: var(--nile-colors-red-500);
-  }
-
-  .sidebar__content--overlay {
-    position: absolute;
-    z-index: 1000;
-  }
-
-  .sidebar__content--overlay--right {
-    right: 0;
-  }
-
-  .sidebar__content--overlay--left {
-    left: 0;
-  }
-
-  .body__content--overlay {
-    position: absolute;
-    left: 0;
-    opacity:0.5;
-    background-color:var(--nile-sidebar-wrapper-overlay-background-color);
-  }
-
-  /* For left side  */
-  .sidebar__content--overlay-open-left {
-    animation: slide-in-left 0.3s ease-in-out forwards;
-  }
-
-  .sidebar__content--overlay-closed-left {
-    animation: slide-out-left 0.3s ease-in-out forwards;
-  }
-
-  @keyframes slide-in-left {
-    0% {
-      transform: translateX(-100%);
-    }
-
-    100% {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slide-out-left {
-    0% {
-      transform: translateX(0);
-    }
-
-    100% {
-      transform: translateX(-100%);
-    }
-  }
-
-  /* For right side */
-  .sidebar__content--overlay-open-right {
-    animation: slide-in-right 0.3s ease-in-out forwards;
-  }
-
-  .sidebar__content--overlay-closed-right {
-    animation: slide-out-right 0.3s ease-in-out forwards;
-  }
-
-  @keyframes slide-in-right {
-    0% {
-      transform: translateX(100%);
-    }
-    100% {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slide-out-right {
-    0% {
-      transform: translateX(0);
-    }
-    100% {
-      transform: translateX(100%);
-    }
-  }
-`;
-
-export default [styles];

package/src/nile-sidebar-wrapper/nile-sidebar-wrapper.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 {
-  LitElement,
-  html,
-  CSSResultArray,
-  TemplateResult,
-} from 'lit';
-import { customElement, state, property } from 'lit/decorators.js';
-import { styles } from './nile-sidebar-wrapper.css';
-import NileElement from '../internal/nile-element';
-import { classMap } from 'lit/directives/class-map.js';
-
-/**
- * Nile sidebar-wrapper component.
- *
- * @tag nile-sidebar-wrapper
- *
- */
-@customElement('nile-sidebar-wrapper')
-export class NileSidebarWrapper extends NileElement {
-  /**
-   * The styles for nile-sidebar-wrapper
-   * @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];
-  }
-
-  @property({ type: Boolean, reflect: true }) overlaysidebar = false;
-  @property({ reflect: true }) placement: 'left' | 'right' = 'left';
-  @property({ type: Boolean, reflect: true }) isopen = false;
-
-  /* #endregion */
-
-  /* #region Methods */
-
-  /**
-   * Render method
-   * @slot This is a slot test
-   */
-  public render(): TemplateResult {
-    console.log(this.isopen);
-
-    return html`
-      <div
-        class=${classMap({
-          'wrapper-box': true,
-          'wrapper-box--right':
-            this.placement === 'right' && !this.overlaysidebar,
-        })}
-      >
-        <slot
-          name="sidebar-content"
-          class=${classMap({
-            'sidebar-content': true,
-            'sidebar__content--overlay': this.overlaysidebar,
-            'sidebar__content--overlay--right': this.placement === 'right',
-            'sidebar__content--overlay--left': this.placement === 'left',
-            'sidebar__content--overlay-open-left':
-              this.isopen && this.placement === 'left' && this.overlaysidebar,
-            'sidebar__content--overlay-closed-left':
-              !this.isopen && this.placement === 'left' && this.overlaysidebar,
-            'sidebar__content--overlay-open-right':
-              this.isopen && this.placement === 'right'&& this.overlaysidebar,
-            'sidebar__content--overlay-closed-right':
-              !this.isopen && this.placement === 'right' && this.overlaysidebar,
-          })}
-        >
-        </slot>
-        <slot
-          name="body-content"
-          class=${classMap({
-            'body-content': true,
-            'body__content--overlay': this.overlaysidebar && this.isopen,
-          })}
-        >
-        </slot>
-      </div>
-    `;
-  }
-
-  /* #endregion */
-}
-
-export default NileSidebarWrapper;
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-sidebar-wrapper': NileSidebarWrapper;
-  }
-}