@aquera/nile-elements 0.0.1-beta.1 → 0.0.1-beta.3

package/dist/watch.cjs.js

@@ -0,0 +1,2 @@
+System.register([],function(_export,_context){"use strict";return{setters:[],execute:function(){}};});
+//# sourceMappingURL=watch.cjs.js.map

package/dist/watch.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"watch.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/watch.esm.js

@@ -0,0 +1 @@
+

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.1-beta.1",
+  "version": "0.0.1-beta.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -15,3 +15,7 @@ export { NileSlideToggle } from './nile-slide-toggle';
 export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
+export { NileSelect } from './nile-select';
+export { NileOption } from './nile-option';
+export { NileTag } from './nile-tag';
+export { NileIconButton } from './nile-icon-button';

package/src/internal/form.ts

@@ -78,7 +78,7 @@ export class FormControlController implements ReactiveController {
       disabled: input => input.disabled ?? false,
       reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),
       setValue: (input, value: string) => (input.value = value),
-      assumeInteractionOn: ['sl-input'],
+      assumeInteractionOn: ['nile-input'],
       ...options
     };
     this.handleFormData = this.handleFormData.bind(this);
@@ -182,7 +182,7 @@ export class FormControlController implements ReactiveController {
 
     // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by
     // injecting the name/value on a temporary button, so we can just skip them here.
-    const isButton = this.host.tagName.toLowerCase() === 'sl-button';
+    const isButton = this.host.tagName.toLowerCase() === 'nile-button';
 
     if (!disabled && !isButton && typeof name === 'string' && name.length > 0 && typeof value !== 'undefined') {
       if (Array.isArray(value)) {
@@ -349,14 +349,14 @@ export class FormControlController implements ReactiveController {
   }
 
   /**
-   * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.
-   * If the `sl-invalid` event will be cancelled then the original `invalid`
+   * Dispatches a non-bubbling, cancelable custom event of type `nile-invalid`.
+   * If the `nile-invalid` event will be cancelled then the original `invalid`
    * event (which may have been passed as argument) will also be cancelled.
-   * If no original `invalid` event has been passed then the `sl-invalid`
+   * If no original `invalid` event has been passed then the `nile-invalid`
    * event will be cancelled before being dispatched.
    */
   emitInvalidEvent(originalInvalidEvent?: Event) {
-    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('sl-invalid', {
+    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('nile-invalid', {
       bubbles: false,
       composed: false,
       cancelable: true,

package/src/internal/offset.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns an element's offset relative to its parent. Similar to element.offsetTop and element.offsetLeft, except the
+ * parent doesn't have to be positioned relative or absolute.
+ *
+ * NOTE: This was created to work around what appears to be a bug in Chrome where a slotted element's offsetParent seems
+ * to ignore elements inside the surrounding shadow DOM: https://bugs.chromium.org/p/chromium/issues/detail?id=920069
+ */
+export function getOffset(element: HTMLElement, parent: HTMLElement) {
+  return {
+    top: Math.round(element.getBoundingClientRect().top - parent.getBoundingClientRect().top),
+    left: Math.round(element.getBoundingClientRect().left - parent.getBoundingClientRect().left)
+  };
+}

package/src/internal/scroll.ts

@@ -0,0 +1,69 @@
+import { getOffset } from './offset';
+
+const locks = new Set();
+
+/** Returns the width of the document's scrollbar */
+function getScrollbarWidth() {
+  const documentWidth = document.documentElement.clientWidth;
+  return Math.abs(window.innerWidth - documentWidth);
+}
+
+/**
+ * Prevents body scrolling. Keeps track of which elements requested a lock so multiple levels of locking are possible
+ * without premature unlocking.
+ */
+export function lockBodyScrolling(lockingEl: HTMLElement) {
+  locks.add(lockingEl);
+
+  // When the first lock is created, set the scroll lock size to match the scrollbar's width to prevent content from
+  // shifting. We only do this on the first lock because the scrollbar width will measure zero after overflow is hidden.
+  if (!document.body.classList.contains('nile-scroll-lock')) {
+    const scrollbarWidth = getScrollbarWidth(); // must be measured before the `nile-scroll-lock` class is applied
+    document.body.classList.add('nile-scroll-lock');
+    document.body.style.setProperty('--nile-scroll-lock-size', `${scrollbarWidth}px`);
+  }
+}
+
+/**
+ * Unlocks body scrolling. Scrolling will only be unlocked once all elements that requested a lock call this method.
+ */
+export function unlockBodyScrolling(lockingEl: HTMLElement) {
+  locks.delete(lockingEl);
+
+  if (locks.size === 0) {
+    document.body.classList.remove('nile-scroll-lock');
+    document.body.style.removeProperty('--nile-scroll-lock-size');
+  }
+}
+
+/** Scrolls an element into view of its container. If the element is already in view, nothing will happen. */
+export function scrollIntoView(
+  element: HTMLElement,
+  container: HTMLElement,
+  direction: 'horizontal' | 'vertical' | 'both' = 'vertical',
+  behavior: 'smooth' | 'auto' = 'smooth'
+) {
+  const offset = getOffset(element, container);
+  const offsetTop = offset.top + container.scrollTop;
+  const offsetLeft = offset.left + container.scrollLeft;
+  const minX = container.scrollLeft;
+  const maxX = container.scrollLeft + container.offsetWidth;
+  const minY = container.scrollTop;
+  const maxY = container.scrollTop + container.offsetHeight;
+
+  if (direction === 'horizontal' || direction === 'both') {
+    if (offsetLeft < minX) {
+      container.scrollTo({ left: offsetLeft, behavior });
+    } else if (offsetLeft + element.clientWidth > maxX) {
+      container.scrollTo({ left: offsetLeft - container.offsetWidth + element.clientWidth, behavior });
+    }
+  }
+
+  if (direction === 'vertical' || direction === 'both') {
+    if (offsetTop < minY) {
+      container.scrollTo({ top: offsetTop, behavior });
+    } else if (offsetTop + element.clientHeight > maxY) {
+      container.scrollTo({ top: offsetTop - container.offsetHeight + element.clientHeight, behavior });
+    }
+  }
+}

package/src/nile-icon/index.ts

@@ -85,11 +85,6 @@ export class NileIcon extends LitElement {
       align-items: center;
       justify-content: center;
       contain: content;
-
-      --nile-svg-stroke: #7F7F7F;
-      --nile-svg-stroke-width: 1px;
-      --nile-svg-height: 16px;
-      --nile-svg-width: 16px;
     }
 
     .nds-icon {
@@ -98,15 +93,19 @@ export class NileIcon extends LitElement {
       justify-content: center;
     }
 
-    .nds-icon--push {
-      margin-right: 12px;
-    }
-
-    svg {
-      stroke: var(--nile-svg-stroke);
-      stroke-width: var(--nile-svg-stroke-width);
+    .nds-icon svg {
       height: var(--nile-svg-height);
       width: var(--nile-svg-width);
+      stroke: var(--nile-svg-stroke);
+      stroke-width: var(--nile-svg-stroke-width);
+    }
+
+    .nds-icon svg path {
+      fill: var(--nile-svg-fill);
+    }
+
+    .nds-icon--push {
+      margin-right: 12px;
     }
   `;
 
@@ -122,9 +121,12 @@ export class NileIcon extends LitElement {
       this.style.setProperty('--nile-svg-width', `${this.size}px`);
     }
     if (changedProperties.has('color')) {
-      this.style.setProperty('--nile-svg-stroke', `${this.color}`);
+      this.style.setProperty('--nile-svg-fill', `${this.color}`);
     }
-    if (changedProperties.has('name') || changedProperties.has('customSvgPath')) {
+    if (
+      changedProperties.has('name') ||
+      changedProperties.has('customSvgPath')
+    ) {
       let iconName = this.name ? this.removeHyphens(this.name) : undefined;
       if (iconName && iconPaths[iconName]) {
         this._svg = atob(iconPaths[iconName]);
@@ -150,7 +152,6 @@ export class NileIcon extends LitElement {
     return iconName.replace(/-/g, '');
   }
 
-
   get buttonClassMap() {
     return {
       'nds-icon--push': this.push,
@@ -168,7 +169,7 @@ export class NileIcon extends LitElement {
       ? `0 0 ${this.frame} ${this.frame}`
       : '0 0 16 16';
 
-      return html`
+    return html`
       <span class="nds-icon ${classMap(this.buttonClassMap)}">
         ${this.customSvgPath
           ? html`${unsafeHTML(this._svg)}`
@@ -186,8 +187,7 @@ export class NileIcon extends LitElement {
               fill="${color}"
             >
               ${unsafeSVG(this._svg)}
-            </svg>`
-        }
+            </svg>`}
       </span>
     `;
   }

package/src/nile-icon-button/index.ts

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

package/src/nile-icon-button/nile-icon-button.css.ts

@@ -0,0 +1,63 @@
+/**
+* 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';
+
+/**
+ * IconButton CSS
+ */
+export const styles = css`
+
+:host {
+    display: inline-block;
+    color: hsl(240 5.2% 33.9%);
+  }
+
+  .icon-button {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: inherit;
+    color: inherit;
+    padding: 0.5rem;
+    cursor: pointer;
+    transition: 50ms; color;
+    -webkit-appearance: none;
+  }
+
+  .icon-button:hover:not(.icon-button--disabled),
+  .icon-button:focus-visible:not(.icon-button--disabled) {
+    color: hsl(200.4 98% 39.4%);
+  }
+
+  .icon-button:active:not(.icon-button--disabled) {
+    color: hsl(201.3 96.3% 32.2%);
+  }
+
+  .icon-button:focus {
+    outline: none;
+  }
+
+  .icon-button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon-button:focus-visible {
+    outline: hsl(200.4 98% 39.4%);
+    outline-offset: 1px;
+  }
+
+  .icon-button__icon {
+    pointer-events: none;
+  }
+`;
+
+export default [styles];

package/src/nile-icon-button/nile-icon-button.ts

@@ -0,0 +1,154 @@
+/**
+ * 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, property, CSSResultArray, TemplateResult} from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import {styles} from './nile-icon-button.css';
+
+import '../nile-icon';
+import { classMap } from 'lit/directives/class-map.js';
+import { query, state } from 'lit/decorators.js';
+import { literal, html } from 'lit/static-html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import type { CSSResultGroup } from 'lit';
+import NileElement from '../internal/nile-element';
+
+/**
+ * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ *
+ * @event nile-blur - Emitted when the icon button loses focus.
+ * @event nile-focus - Emitted when the icon button gains focus.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+/**
+ * Nile icon component.
+ *
+ * @tag nile-icon-button
+ *
+ */
+@customElement('nile-icon-button')
+export class NileIconButton extends NileElement {
+  static styles: CSSResultGroup = styles;
+
+  @query('.icon-button') button: HTMLButtonElement | HTMLLinkElement;
+
+  @state() private hasFocus = false;
+
+  /** The name of the icon to draw. Available names depend on the icon library being used. */
+  @property() name?: string;
+
+  /** The name of a registered custom icon library. */
+  @property() library?: string;
+
+  /**
+   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and
+   * can result in XSS attacks.
+   */
+  @property() src?: string;
+
+  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+  @property() href?: string;
+
+  /** Tells the browser where to open the link. Only used when `href` is set. */
+  @property() target?: '_blank' | '_parent' | '_self' | '_top';
+
+  /** Tells the browser to download the linked file as this filename. Only used when `href` is set. */
+  @property() download?: string;
+
+  /**
+   * A description that gets read by assistive devices. For optimal accessibility, you should always include a label
+   * that describes what the icon button does.
+   */
+  @property() label = '';
+
+  /** Disables the button. */
+  @property({ type: Boolean, reflect: true }) disabled = false;
+
+  private handleBlur() {
+    this.hasFocus = false;
+    this.emit('nile-blur');
+  }
+
+  private handleFocus() {
+    this.hasFocus = true;
+    this.emit('nile-focus');
+  }
+
+  private handleClick(event: MouseEvent) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  /** Simulates a click on the icon button. */
+  click() {
+    this.button.click();
+  }
+
+  /** Sets focus on the icon button. */
+  focus(options?: FocusOptions) {
+    this.button.focus(options);
+  }
+
+  /** Removes focus from the icon button. */
+  blur() {
+    this.button.blur();
+  }
+
+  render() {
+    const isLink = this.href ? true : false;
+    const tag = isLink ? literal`a` : literal`button`;
+
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`
+      <${tag}
+        part="base"
+        class=${classMap({
+          'icon-button': true,
+          'icon-button--disabled': !isLink && this.disabled,
+          'icon-button--focused': this.hasFocus
+        })}
+        ?disabled=${ifDefined(isLink ? undefined : this.disabled)}
+        type=${ifDefined(isLink ? undefined : 'button')}
+        href=${ifDefined(isLink ? this.href : undefined)}
+        target=${ifDefined(isLink ? this.target : undefined)}
+        download=${ifDefined(isLink ? this.download : undefined)}
+        rel=${ifDefined(isLink && this.target ? 'noreferrer noopener' : undefined)}
+        role=${ifDefined(isLink ? undefined : 'button')}
+        aria-disabled=${this.disabled ? 'true' : 'false'}
+        aria-label="${this.label}"
+        tabindex=${this.disabled ? '-1' : '0'}
+        @blur=${this.handleBlur}
+        @focus=${this.handleFocus}
+        @click=${this.handleClick}
+      >
+        <nile-icon
+          class="icon-button__icon"
+          name=${ifDefined(this.name)}
+          library=${ifDefined(this.library)}
+          src=${ifDefined(this.src)}
+          aria-hidden="true"
+        ></nile-icon>
+      </${tag}>
+    `;
+  }
+}
+
+
+export default NileIconButton;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-icon-button': NileIconButton;
+  }
+}

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

@@ -126,15 +126,15 @@ export const styles = css`
   }
 
   .input--standard.input--warning {
-    border-color: #E5BF43;
+    border-color: #e5bf43;
   }
 
   .input--standard.input--error {
-    border-color: #E5434D;
+    border-color: #e5434d;
   }
 
   .input--standard.input--success {
-    border-color: #43E5C0;
+    border-color: #43e5c0;
   }
 
   /* Filled inputs */
@@ -264,7 +264,7 @@ export const styles = css`
   }
 
   .input--small .input__control {
-    height: calc(1.875rem - 1px * 2);
+    height: calc(1.875rem);
     padding: 0 0.75rem;
   }
 

package/src/nile-option/index.ts

@@ -0,0 +1 @@
+export { NileOption } from './nile-option';

package/src/nile-option/nile-option.css.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 { css } from 'lit-element';
+
+/**
+ * Option_2 CSS
+ */
+export const styles = css`
+  :host {
+    display: block;
+    user-select: none;
+  }
+
+  :host(:focus) {
+    outline: none;
+  }
+
+  .option {
+    position: relative;
+    display: flex;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.8;
+    letter-spacing: normal;
+    color: hsl(240 5.3% 26.1%);
+    padding: 0.5rem 1rem 0.5rem 0.5rem;
+    transition: 150ms fill;
+    cursor: pointer;
+  }
+
+  .option--hover:not(.option--current):not(.option--disabled) {
+    background-color: rgba(0, 94, 166, 0.1);
+    color: hsl(0, 0%, 0%);
+  }
+
+  .option--current,
+  .option--current.option--disabled {
+    background-color: rgba(0, 94, 166, 0.1);
+    color: #005ea6;
+    opacity: 1;
+  }
+
+  .option--disabled {
+    outline: none;
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .option__label {
+    flex: 1 1 auto;
+    display: inline-block;
+    line-height: 1.4;
+  }
+
+  .option .option__check {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    visibility: hidden;
+    padding-inline-end: 0.25rem;
+  }
+
+  .option--selected .option__check {
+    visibility: visible;
+  }
+
+  .option__prefix,
+  .option__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+  }
+
+  .option__prefix::slotted(*) {
+    margin-inline-end: 0.5rem;
+  }
+
+  .option__suffix::slotted(*) {
+    margin-inline-start: 0.5rem;
+  }
+
+  @media (forced-colors: active) {
+    :host(:hover:not([aria-disabled='true'])) .option {
+      outline: dashed 1px SelectedItem;
+      outline-offset: -1px;
+    }
+  }
+`;
+
+export default [styles];