@aquera/nile-elements 0.0.6 → 0.0.7

package/package.json

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

package/src/index.ts

@@ -29,5 +29,9 @@ export { NileErrorMessage } from './nile-error-message';
 export { NileFormErrorMessage } from './nile-form-error-message';
 export { NileFormHelpText } from './nile-form-help-text';
 export { NileCalendar } from './nile-calendar';
-export { NileLink } from './nile-link';
+export { NileLink} from './nile-link';
+export { NileButtonToggleGroup } from './nile-button-toggle-group';
+export { NileButtonToggle } from './nile-button-toggle';
 export { NileSwitcher } from './nile-switcher';
+export { NileContentEditor } from './nile-content-editor';
+export { NileDialog } from './nile-dialog';

package/src/internal/modal.ts

@@ -0,0 +1,64 @@
+import { getTabbableBoundary } from './tabbable';
+
+let activeModals: HTMLElement[] = [];
+
+export default class Modal {
+  element: HTMLElement;
+  tabDirection: 'forward' | 'backward' = 'forward';
+
+  constructor(element: HTMLElement) {
+    this.element = element;
+    this.handleFocusIn = this.handleFocusIn.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleKeyUp = this.handleKeyUp.bind(this);
+  }
+
+  activate() {
+    activeModals.push(this.element);
+    document.addEventListener('focusin', this.handleFocusIn);
+    document.addEventListener('keydown', this.handleKeyDown);
+    document.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  deactivate() {
+    activeModals = activeModals.filter(modal => modal !== this.element);
+    document.removeEventListener('focusin', this.handleFocusIn);
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('keyup', this.handleKeyUp);
+  }
+
+  isActive() {
+    // The "active" modal is always the most recent one shown
+    return activeModals[activeModals.length - 1] === this.element;
+  }
+
+  checkFocus() {
+    if (this.isActive()) {
+      if (!this.element.matches(':focus-within')) {
+        const { start, end } = getTabbableBoundary(this.element);
+        const target = this.tabDirection === 'forward' ? start : end;
+
+        if (typeof target?.focus === 'function') {
+          target.focus({ preventScroll: true });
+        }
+      }
+    }
+  }
+
+  handleFocusIn() {
+    this.checkFocus();
+  }
+
+  handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Tab' && event.shiftKey) {
+      this.tabDirection = 'backward';
+
+      // Ensure focus remains trapped after the key is pressed
+      requestAnimationFrame(() => this.checkFocus());
+    }
+  }
+
+  handleKeyUp() {
+    this.tabDirection = 'forward';
+  }
+}

package/src/internal/nile-element.ts

@@ -12,6 +12,7 @@ export default class NileElement extends LitElement {
     });
 
     this.dispatchEvent(event);
+    return event;
   }
 }
 

package/src/nile-badge/index.ts

@@ -1,119 +1 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-/**
- * An nile-badge element.
- *
- * @fires count-changed - Indicates when the count changes
- * @slot - This element has a slot
- * @csspart button - The button
- */
-@customElement('nile-badge')
-export class NileBadge extends LitElement {
-  static override styles = css`
-    :host {
-      display: block;
-    }
-    .nds-badge {
-      width: 24px;
-      height: 24px;
-      border-radius: 9rem;
-      font-size: 14px;
-      justify-content: space-around;
-      font-weight: bold;
-      display: flex;
-      background-color: rgb(221, 221, 221);
-      flex-wrap: nowrap;
-      align-items: center;
-      color: var(--nile-colors-dark-900);
-    }
-
-    .nds-badge:hover {
-      background: rgba(0, 94, 166, 0.1);
-    }
-    
-    .nds-badge__link {
-      font-family: var(--nile-font-family-sans-serif);
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 1;
-      letter-spacing: 0.2px;
-      text-decoration: none;
-      font-size: 12px;
-    }
-
-    .nds-badge__link:hover {
-      color: var(--nile-colors-dark-900);
-    }
-    
-    .nds-badge--active {
-      background-color: var(--nile-colors-primary-700);
-      color: var(--nile-colors-neutral-100);
-    }
-
-    .nds-badge--active:hover {
-      background-color: var(---nile-colors-primary-700);
-    }
-
-    .nds-badge__icon {
-      margin-bottom: 0;
-      height: 14px;
-    }
-  `;
-
-  /**
-   * Button Lab
-   */
-  @property()
-  name = 0;
-
-  /**
-   * Button Lab
-   */
-  @property()
-  icon: string = '';
-
-  /**
-   * Button Lab
-   */
-  @property()
-  active: boolean = false;
-
-  get buttonClassMap() {
-    return {
-      'nds-badge--active': this.active,
-    };
-  }
-
-  /**
-   * Button Lab
-   */
-  @property()
-  href = '/';
-
-  _hasSlotContent(slotName: string) {
-    const slot = this.querySelector(`slot[name=${slotName}]`);
-    console.log(slot, 'slot');
-  }
-
-  override render() {
-    const { name, icon, href } = this;
-    const hrefPath = `/${href}`;
-    return html`
-      <a class="nds-badge ${classMap(this.buttonClassMap)}">
-        <span class="nds-badge__link">${this.name}</span>
-      </a>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'nile-badge': NileBadge;
-  }
-}
-
-// <span class="nds-badge__icon">
-// <nile-icon name="${this.icon}" size="14" color="#000"></nile-icon>
-// </span>
+export { NileBadge } from './nile-badge';

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

@@ -0,0 +1,64 @@
+/**
+ * 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';
+
+/**
+ * Tag CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .badge {
+    padding: 0 4px;
+    border-radius: 4px;
+    height: 16px;
+    font-size: 10.24px;
+    display: inline-flex;
+    align-items: center;/
+    justify-content: center;
+  }
+
+  .badge__content {
+    font-family: Colfax-regular;
+    font-size: 10.24px;
+    font-style: normal;
+    font-weight: 400;
+    letter-spacing: 0.2px;
+  }
+
+  .badge--primary {
+    background: #005EA6;
+  }
+
+  .badge--success {
+    background: #A5F3E1;
+  }
+
+  .badge--normal {
+    background: #E5E9EB;
+  }
+
+  .badge--warning {
+    background: #F3E0A5;
+  }
+
+  .badge--error {
+    background: #F3A5AA;
+  }
+
+  .badge--info {
+    background: #A5D3F3;
+  }
+
+  .badge--rounded {
+    border-radius: 100px;
+    padding: 0 6px;
+  }
+`;
+export default [styles];

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

@@ -0,0 +1,94 @@
+/**
+ * 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 { styles } from './nile-badge.css';
+import '../nile-icon-button/nile-icon-button';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement } 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' = 'normal';
+
+  /** Draws a pill-style badge with rounded edges. */
+  @property({ type: Boolean, reflect: true }) rounded = false;
+
+
+  render() {
+    return html`
+      <span
+        part="base"
+        class=${classMap({
+          badge: true,
+
+          // Types
+          'badge--primary': this.variant === 'primary',
+          'badge--success': this.variant === 'success',
+          'badge--normal': this.variant === 'normal',
+          'badge--warning': this.variant === 'warning',
+          'badge--error': this.variant === 'error',
+          'badge--info': this.variant === 'info',
+          'badge--rounded': this.rounded,
+        })}
+      >
+
+
+        <slot  part="content" class="badge__content"></slot>
+
+
+      </span>
+    `;
+  }
+}
+
+export default NileBadge;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-badge': NileBadge;
+  }
+}

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

@@ -146,7 +146,7 @@ export const styles = css`
   .button--standard.button--tertiary {
     background-color: var(--nile-colors-white-base);
     border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
     box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
   }
 
@@ -218,7 +218,7 @@ export const styles = css`
   }
 
   .button--outline.button--secondary:active:not(.button--disabled) {
-    border-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-neutral-700);
     color: var(--nile-colors-white-base);
   }
 

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

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

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

@@ -0,0 +1,58 @@
+/**
+ * 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';
+
+/**
+ * ButtonToggle CSS
+ */
+export const styles = css`
+  :host {
+  }
+
+  .nile-button-toggle {
+    display: flex;
+    padding: 12px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #000;
+    text-align: center;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .nile-button-toggle__initial {
+    border-radius: 4px 0 0 4px;
+  }
+
+  .nile-button-toggle__end {
+    border-radius: 0 4px 4px 0;
+  }
+
+  .nile-button-toggle__middle {
+    border-width: 1px 0px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 0;
+  }
+
+  .nile-button-toggle__active {
+    background-color: #c7ced4;
+  }
+
+  .nile-button-toggle__disabled {
+    cursor: not-allowed;
+  }
+`;
+
+export default [styles];

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

@@ -0,0 +1,106 @@
+/**
+ * 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-button-toggle.css';
+import NileElement from '../internal/nile-element';
+
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle
+ *
+ */
+@customElement('nile-button-toggle')
+export class NileButtonToggle extends NileElement {
+
+	/**
+	 * The styles for ButtonToggle
+	 * @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 })
+  active = false;
+
+  @property({ type: Boolean, reflect: true })
+  initial = false;
+
+  @property({ type: Boolean, reflect: true })
+  middle = false;
+
+  @property({ type: Boolean, reflect: true })
+  end = false;
+
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  @property({ type: String })
+  value = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.toggle);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('click', this.toggle);
+    super.disconnectedCallback();
+  }
+
+  toggle() {
+    if (this.disabled) return;
+    this.active = true;
+    const eventData = { active: this.active, value: this.value };
+    this.dispatchEvent(new CustomEvent('nile-toggle-changed', { detail: eventData, bubbles: true }));
+  }
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+  public render(): TemplateResult {
+    let classes = ['nile-button-toggle'];
+    if (this.active) {
+      classes.push('nile-button-toggle__active');
+    }
+    if (this.initial) {
+      classes.push('nile-button-toggle__initial');
+    }
+    if (this.middle) {
+      classes.push('nile-button-toggle__middle');
+    }
+    if (this.end) {
+      classes.push('nile-button-toggle__end');
+    }
+    if (this.disabled) {
+      classes.push('nile-button-toggle__disabled');
+    }
+
+    const classString = classes.join(' ');
+
+    return html`
+      <div class="${classString}">
+        <slot name="prefix"></slot>
+        <slot> </slot>
+      </div>
+    `;
+  }
+
+	/* #endregion */
+}
+
+export default NileButtonToggle;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-button-toggle': NileButtonToggle;
+  }
+}

package/src/nile-button-toggle-group/index.ts

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

package/src/nile-button-toggle-group/nile-button-toggle-group.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';
+
+/**
+ * ButtonToggleGroup CSS
+ */
+export const styles = css`
+	:host {
+    display: inline-flex;
+	}
+`;
+
+export default [styles];

package/src/nile-button-toggle-group/nile-button-toggle-group.ts

@@ -0,0 +1,115 @@
+/**
+ * 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, query, queryAll } from 'lit/decorators.js';
+import {styles} from './nile-button-toggle-group.css';
+import NileButtonToggle from '../nile-button-toggle/nile-button-toggle';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle-group
+ *
+ */
+@customElement('nile-button-toggle-group')
+export class NileButtonToggleGroup extends NileElement {
+  /**
+   * The styles for ButtonToggleGroup
+   * @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];
+  }
+
+  @queryAll('nile-button-toggle')
+  private toggles!: NodeListOf<NileButtonToggle>;
+
+  @query('slot:not([name])')
+  private defaultSlot!: HTMLSlotElement;
+
+  @property({ type: Boolean, reflect: true })
+  public disabled: boolean = false;
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    this.defaultSlot.addEventListener('slotchange', () =>
+      this.updateTogglePositions()
+    );
+    this.addEventListener('nile-toggle-changed', this.handleToggle);
+    this.updateTogglePositions();
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this.updateDisabledState();
+    }
+  }
+
+  private updateDisabledState() {
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
+
+    toggles.forEach(toggle => {
+      if (!toggle.disabled) {
+        toggle.disabled = this.disabled;
+      }
+    });
+  }
+
+  updateTogglePositions() {
+    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+    const toggles = assignedNodes.filter(
+      node => node instanceof NileButtonToggle
+    ) as NileButtonToggle[];
+
+    toggles.forEach((toggle, index) => {
+      toggle.initial = index === 0;
+      toggle.middle = index > 0 && index < toggles.length - 1;
+      toggle.end = index === toggles.length - 1;
+    });
+  }
+
+  handleToggle(event: CustomEvent) {
+    if (this.disabled) return;
+    const toggles = this.querySelectorAll('nile-button-toggle');
+
+    if (toggles && event.detail.active) {
+      toggles.forEach((toggle: any) => {
+        if (toggle !== event.target) {
+          toggle.active = false;
+        }
+      });
+
+      this.emit('nile-change', { value: event.detail.value });
+    }
+  }
+
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
+  public render(): TemplateResult {
+    return html` <slot> </slot> `;
+  }
+
+  /* #endregion */
+}
+
+export default NileButtonToggleGroup;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-button-toggle-group': NileButtonToggleGroup;
+  }
+}

package/src/nile-content-editor/index.ts

@@ -0,0 +1 @@
+export { NileContentEditor } from './nile-content-editor';