@aquera/nile-elements 0.0.1-beta.1

package/src/nile-sidebar/index.ts

@@ -0,0 +1,130 @@
+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 #e5e9eb;      
+      min-height: 100vh;
+      background: #fafafa;
+      border: 1px solid #e5e9eb;
+    }
+    :host([showSidebar=true]) {
+      min-width: 240px;
+    }
+    .nile-logo {
+      margin: 24px;
+      display: block;
+      margin-bottom: 12px;
+    }
+
+    .menu-group {
+      margin-left: 24px;
+      margin-right: 24px;
+    }
+
+    .view-component {
+      background-color: #fff;
+      min-width: 240px;
+    }
+    // padding: 3rem;
+    .view-component__item {
+      background-color: #fff;
+      // padding: 1rem;
+      border-radius: 3px;
+      border: solid 1px #eee;
+    }
+
+    .nile-menu__hr {
+      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+      margin-top: 12px !important;
+      margin-bottom: 12px !important;
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+
+    .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-slide-toggle/index.ts

@@ -0,0 +1 @@
+export { NileSlideToggle } from './nile-slide-toggle';

package/src/nile-slide-toggle/nile-slide-toggle.css.ts

@@ -0,0 +1,72 @@
+import { css } from 'lit';
+
+export default css`
+  .nile-slide-toggle {
+    display: flex;
+    align-items: center;
+  }
+
+  .nile-slide-toggle__switch {
+    position: relative;
+    display: inline-block;
+    width: 32px;
+    height: 16px;
+    line-height: 22px;
+    margin-right: 10px;
+  }
+
+  .nile-slide-toggle__label {
+    margin-left: 2px;
+    font-size: 14px;
+  }
+
+  .nile-slide-toggle__switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .nile-slide-toggle__slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--nile-colors-neutral-500);
+    transition: 0.4s;
+    border-radius: 34px;
+  }
+
+  .nile-slide-toggle__slider:before {
+    position: absolute;
+    content: '';
+    height: 12px;
+    width: 12px;
+    bottom: 2px;
+    left: 2px;
+    background-color: var(--nile-colors-white-base);
+    transition: 0.4s;
+    border-radius: 50%;
+  }
+
+  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
+    background-color: var(--nile-colors-primary-600);
+  }
+
+  .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
+    box-shadow: 0 0 1px var(--nile-colors-primary-600);
+  }
+
+  .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
+    transform: translateX(16px);
+  }
+
+  .nile-slide-toggle__slider.round {
+    border-radius: 20px;
+  }
+
+  .nile-slide-toggle__slider.round:before {
+    border-radius: 50%;
+  }
+`;

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -0,0 +1,34 @@
+import { CSSResultGroup } from 'lit';
+import { LitElement, html, property, customElement } from 'lit-element';
+import styles from './nile-slide-toggle.css';
+
+@customElement('nile-slide-toggle')
+export class NileSlideToggle extends LitElement {
+  public static styles: CSSResultGroup = styles;
+
+  @property({ type: String }) label = '';
+  @property({ type: Boolean, reflect: true }) isChecked = false;
+
+  toggleValue() {
+    this.isChecked = !this.isChecked;
+    this.dispatchEvent(
+      new CustomEvent('change', { detail: { checked: this.isChecked } })
+    );
+  }
+
+  public render() {
+    return html`
+    <div class="nile-slide-toggle">
+      <label class="nile-slide-toggle__switch">
+        <input
+          type="checkbox"
+          .checked=${this.isChecked}
+          @change=${this.toggleValue}
+        />
+        <span class="nile-slide-toggle__slider"></span>
+      </label>
+      <span class="nile-slide-toggle__label"> ${this.label} </span>
+    </div>
+    `;
+  }
+}

package/src/nile-spinner/index.ts

@@ -0,0 +1 @@
+export { NileSpinner }  from './nile-spinner';

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

@@ -0,0 +1,71 @@
+/**
+* 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-element';
+
+/**
+ * Spinner CSS
+ */
+export const styles = css`
+:host {
+    --track-width: 2px;
+    --track-color: rgb(128 128 128 / 25%);
+    --indicator-color: var(--nile-colors-white-base);
+    --speed: 2s;
+
+    display: inline-flex;
+    width: 1em;
+    height: 1em;
+  }
+
+  .spinner {
+    flex: 1 1 auto;
+    height: 100%;
+    width: 100%;
+  }
+
+  .spinner__track,
+  .spinner__indicator {
+    fill: none;
+    stroke-width: var(--track-width);
+    r: calc(0.5em - var(--track-width) / 2);
+    cx: 0.5em;
+    cy: 0.5em;
+    transform-origin: 50% 50%;
+  }
+
+  .spinner__track {
+    stroke: var(--track-color);
+    transform-origin: 0% 0%;
+  }
+
+  .spinner__indicator {
+    stroke: var(--indicator-color);
+    stroke-linecap: round;
+    stroke-dasharray: 150% 75%;
+    animation: spin var(--speed) linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+      stroke-dasharray: 0.01em, 2.75em;
+    }
+
+    50% {
+      transform: rotate(450deg);
+      stroke-dasharray: 1.375em, 1.375em;
+    }
+
+    100% {
+      transform: rotate(1080deg);
+      stroke-dasharray: 0.01em, 2.75em;
+    }
+  }
+`;
+
+export default [styles];

package/src/nile-spinner/nile-spinner.ts

@@ -0,0 +1,55 @@
+/**
+ * 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, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-spinner.css';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-spinner
+ *
+ */
+@customElement('nile-spinner')
+export class NileSpinner extends LitElement {
+
+	/**
+	 * The styles for Spinner
+	 * @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`
+      <svg part="base" class="spinner" role="progressbar" aria-valuetext="loading">
+        <circle class="spinner__track"></circle>
+        <circle class="spinner__indicator"></circle>
+      </svg>
+    `;
+	}
+
+	/* #endregion */
+}
+
+export default NileSpinner;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-spinner': NileSpinner;
+  }
+}

package/src/nile-toolbar/index.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 {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-toolbar.css';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-toolbar
+ *
+ */
+@customElement('nile-toolbar')
+export class NileToolbar extends LitElement {
+
+	/**
+	 * The styles for Toolbar
+	 * @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 NileToolbar;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-toolbar': NileToolbar;
+  }
+}

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

@@ -0,0 +1,19 @@
+/**
+* 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-element';
+
+/**
+ * Toolbar CSS
+ */
+export const styles = css`
+	:host {
+
+	}
+`;
+
+export default [styles];

package/src/nile-tooltip/index.ts

@@ -0,0 +1 @@
+export { NileTooltip } from './nile-tooltip';

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

@@ -0,0 +1,65 @@
+/**
+* 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-element';
+
+/**
+ * Tooltip CSS
+ */
+export const styles = css`
+
+:host {
+    --max-width: 20rem;
+    --hide-delay: 0ms;
+    --show-delay: 150ms;
+
+    display: contents;
+  }
+
+  .tooltip {
+    --arrow-size: 6px;
+    --arrow-color: hsl(240 3.7% 15.9%);
+  }
+
+  .tooltip::part(popup) {
+    pointer-events: none;
+    z-index: 1000;
+  }
+
+  .tooltip[placement^='top']::part(popup) {
+    transform-origin: bottom;
+  }
+
+  .tooltip[placement^='bottom']::part(popup) {
+    transform-origin: top;
+  }
+
+  .tooltip[placement^='left']::part(popup) {
+    transform-origin: right;
+  }
+
+  .tooltip[placement^='right']::part(popup) {
+    transform-origin: left;
+  }
+
+  .tooltip__body {
+    display: block;
+    width: max-content;
+    max-width: undefined;
+    border-radius: 0.25rem;
+    background-color: hsl(240 3.7% 15.9%);
+    font-family: inherit;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.4;
+    color: hsl(0, 0%, 100%);
+    padding: 0.25rem 0.5rem;
+    pointer-events: none;
+  }
+`;
+
+export default [styles];