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

package/src/nile-grid-head-item/nile-grid-head-item.css.ts

@@ -12,7 +12,8 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --padding: var(--nile-spacing-xl) var(--nile-spacing-3xl);
+    --padding: var(--nile-spacing-lg) var(--nile-spacing-3xl);
+    --height: 50px;
     position: relative;
     box-sizing: border-box;
     user-select: none;
@@ -23,7 +24,16 @@ export const styles = css`
     padding: var(--padding);
     background-color: var(--nile-colors-neutral-100);
     border-bottom: 1px solid var(--nile-colors-neutral-400);
-    border-right: 1px solid var(--nile-colors-neutral-400);
+    font-size: 12px;
+    font-weight: 500;
+    font-family: var(--nile-font-weight-medium);
+    min-height: var(--height);
+  }
+
+  .head-item-base {
+    width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   ::slotted(*) {
@@ -32,12 +42,17 @@ export const styles = css`
     white-space: nowrap;
   }
 
+  :host(:last-child) .resize-handle {
+    border-right: none;
+    display: none;
+  }
+
   .resize-handle {
     position: absolute;
     top: 0;
     right: 0;
     height: 100%;
-    cursor: col-resize;
+    cursor: ew-resize;
     touch-action: none;
     z-index: 1;
     width: 2px;

package/src/nile-grid-head-item/nile-grid-head-item.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-head-item.css';
 import NileElement from '../internal/nile-element';
@@ -33,18 +33,14 @@ export class NileGridHeadItem extends NileElement {
 
   @property({ type: Number, reflect: true, attribute: true }) colspan = 1;
   @property({ type: Number, reflect: true, attribute: true }) rowspan = 1;
-  @property({ type: String, reflect: true, attribute: true }) scope:
-    | 'col'
-    | 'row' = 'col';
   @property({ type: Boolean, reflect: true, attribute: true }) resizable = false;
-  @property({ type: Boolean, reflect: true, attribute: true }) sticky = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) colSticky = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) lastColSticky = false;
+  @property({ type: Number, reflect: true, attribute: true }) customWidth: number | null = null;
 
   connectedCallback() {
     super.connectedCallback();
-    this.setAttribute(
-      'role',
-      this.scope === 'row' ? 'rowheader' : 'columnheader'
-    );
+    this.setAttribute('role','row');
   }
 
   private onHandlePointerDown = (ev: PointerEvent) => {
@@ -69,12 +65,7 @@ export class NileGridHeadItem extends NileElement {
   };
 
   protected updated(changed: Map<string, unknown>) {
-    if (changed.has('scope')) {
-      this.setAttribute(
-        'role',
-        this.scope === 'row' ? 'rowheader' : 'columnheader'
-      );
-    }
+    this.setAttribute('role','row');
   }
 
   disconnectedCallback() {
@@ -84,13 +75,14 @@ export class NileGridHeadItem extends NileElement {
 
   public render(): TemplateResult {
     return html`
-      <div style="display: contents;">
+      <div part="grid-head-item-base" class="head-item-base">
         <slot></slot>
         ${this.resizable
           ? html`
               <div
                 aria-hidden="false"
                 class="resize-handle"
+                part="resize-handle"
                 @pointerdown=${this.onHandlePointerDown}
               ></div>
             `

package/src/nile-grid-row/nile-grid-row.css.ts

@@ -12,18 +12,30 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    display: contents;
+    display: grid;
+    grid-template-columns: var(--nile-grid-columns);
+    position: relative;
   }
 
-  ::slotted(nile-grid-header) {
+  :host(:hover) {
     background-color: var(--nile-colors-neutral-100);
   }
 
-  .row-layer {
-    background-color: var(--row-bg, transparent);
+  .row-bg {
+    grid-column: 1 / -1;
+    pointer-events: none;
     z-index: 0;
-    pointer-events: auto;
+    display: none;
   }
+
+  .row-slot {
+    grid-column: 1 / -1;
+    display: contents;
+    z-index: 1;
+  }
+
+  :host([selected]) .row-bg { background: var(--row-selected-bg, rgba(0,0,0,.08)); }
+  :host([error]) .row-bg { background: var(--row-error-bg, #fff4f4); }
 `;
 
 export default [styles];

package/src/nile-grid-row/nile-grid-row.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { html, CSSResultArray, TemplateResult, PropertyValues } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import { styles } from './nile-grid-row.css';
 import NileElement from '../internal/nile-element';
 
@@ -26,18 +26,21 @@ export class NileGridRow extends NileElement {
     return [styles];
   }
 
+  @property({ type: Boolean, reflect: true, attribute: true }) disabled: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) hover: boolean = false;
+  @property({ type: Boolean, reflect: true, attribute: true }) selected: boolean = false;
+
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'row');
   }
 
-  public render(): TemplateResult {
+  protected render() {
     return html`
-      <div part="row-layer" class="row-layer" data-row-bg></div>
-
-      <div style="display: contents;">
+      <div part="row-slot" class="row-slot">
         <slot></slot>
       </div>
+      <div part="row-bg" class="row-bg"></div>
     `;
   }
 

package/src/nile-sidebar/index.ts

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

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

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

package/src/nile-sidebar-menu/nile-sidebar-menu.css.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 { 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

@@ -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 {
+  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

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

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

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

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

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