@aquera/nile-elements 0.1.36 → 0.1.38-beta-1.0

package/src/nile-file-upload/utils/file-validation.util.ts

@@ -0,0 +1,163 @@
+import { DragHandler } from "./drag-drop.util";
+import { FileUploadState, FileUploadError, FileUploadEvent } from "../types";
+import { NileFileUpload } from "../nile-file-upload";
+
+// write a function to check for duplicatse in the files name it as areDuplicates
+export const areDuplicates = (files: File[], uploadedFiles: File[]): boolean => {
+  return files.some(file =>
+    uploadedFiles.some(existing =>
+      file.name === existing.name &&
+      file.size === existing.size &&
+      file.lastModified === existing.lastModified
+    )
+  );
+};
+
+// set up the drag handler
+export const setUpDragHandler = (
+  nileFileUpload: NileFileUpload,
+  dragHandler: DragHandler
+): void => {
+  dragHandler.onStateChange((newState: FileUploadState) => {
+    nileFileUpload.state = newState;
+  });
+
+  dragHandler.onFileDrop((files: File[]) => {
+    let { allowMultiple, uploadedFiles, errorMessage, requestUpdate } = nileFileUpload;
+
+    if (!allowMultiple) {
+      const total = uploadedFiles.length + files.length;
+      if (total > 1) {
+        errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
+        requestUpdate();
+        return;
+      }
+    }
+
+    let newFiles = files;
+
+    if (!nileFileUpload.allowDuplicates) {
+      newFiles = files.filter(file =>
+        !nileFileUpload.uploadedFiles.some(
+          uploaded =>
+            uploaded.name === file.name &&
+            uploaded.size === file.size &&
+            uploaded.type === file.type
+        )
+      );
+
+      if (newFiles.length === 0) {
+        nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
+        nileFileUpload.requestUpdate();
+        return;
+      }
+    }
+
+    nileFileUpload.uploadedFiles = [...nileFileUpload.uploadedFiles, ...newFiles];
+    nileFileUpload.requestUpdate();
+  });
+
+  dragHandler.setErrorMessage((errorMessage: string) => {
+    nileFileUpload.errorMessage = errorMessage;
+  });
+};
+
+
+// global listenrers
+export const addGlobalListeners = (dragHandler: DragHandler): void => {
+  document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
+  document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
+}
+
+// for hover & dragging functionality
+export const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any): void => {
+  nileFileUpload.addEventListener('mouseenter', (e) => handleHoverIn(nileFileUpload.setState, nileFileUpload.state));
+  nileFileUpload.addEventListener('mouseleave', (e) => handleHoverOut(nileFileUpload.setState, nileFileUpload.state));
+  nileFileUpload.addEventListener('dragenter', (e) => dragHandler.dragEnter(e));
+  nileFileUpload.addEventListener('dragleave', (e) => dragHandler.dragLeave(e));
+  nileFileUpload.addEventListener('dragover', (e) => dragHandler.dragOver(e));
+  nileFileUpload.addEventListener('drop', (e) => dragHandler.drop(e));  
+
+  cancelFileUpload(nileFileUpload, uploadRequests);
+}
+
+export function handleHoverIn(
+  setState: (state: FileUploadState) => void,
+  currentState: FileUploadState
+): void {
+  if (currentState === FileUploadState.DEFAULT) {
+    setState(FileUploadState.HOVER);
+  }
+}
+
+export function handleHoverOut(
+  setState: (state: FileUploadState) => void,
+  currentState: FileUploadState
+): void {
+  if (currentState === FileUploadState.HOVER) {
+    setState(FileUploadState.DEFAULT);
+  }
+}
+
+export function uploadFiles(nileFileUpload: NileFileUpload) {
+  const { uploadedFiles, fileUploadUrl, uploadRequests } = nileFileUpload;
+  if (!fileUploadUrl || !uploadedFiles?.length) return;
+
+  for (const file of uploadedFiles) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const xhr = new XMLHttpRequest();
+    uploadRequests.set(file, xhr);
+
+    xhr.upload.onprogress = (e) => {
+      const percent = Math.floor((e.loaded / e.total) * 100);
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_PROGRESS, {
+        detail: { file, progress: percent }
+      }));
+    };
+
+    xhr.onload = () => {
+      uploadRequests.delete(file);
+      if (xhr.status === 201) {
+        // Remove the successfully uploaded file
+        nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(f => f !== file);
+
+        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {
+          detail: { file, response: xhr.response }
+        }));
+      } else {
+        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.SERVER_SIDE_ERROR, {
+          detail: { file, status: xhr.status, response: xhr.response }
+        }));
+      }
+    };
+
+    xhr.onerror = () => {
+      uploadRequests.delete(file);
+      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_NETWORK_ERROR, {
+        detail: { file, status: xhr.status, response: xhr.response }
+      }));
+    };
+
+    xhr.open('POST', fileUploadUrl);
+    xhr.send(formData);
+  }
+}
+
+export const cancelFileUpload = (nileFileUpload: NileFileUpload, uploadRequests: Map<File, XMLHttpRequest>) => {
+  document.addEventListener(FileUploadEvent.NILE_CANCEL_UPLOAD, (e: CustomEvent) => {
+    const fileToCancel = e.detail.file;
+    const xhr = uploadRequests.get(fileToCancel);
+
+    if (xhr) {
+      xhr.abort();
+    }
+    uploadRequests.delete(fileToCancel);
+    nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(file => file !== fileToCancel);
+
+    nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_CANCELLED, {
+      detail: { file: fileToCancel }
+    }));
+  });
+};

package/src/nile-filter-chip/index.ts

@@ -0,0 +1 @@
+export { NileFilterChip } from './nile-filter-chip';

package/src/nile-filter-chip/nile-filter-chip.css.ts

@@ -0,0 +1,138 @@
+/**
+* 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';
+
+/**
+ * FilterChip CSS
+ */
+
+export const styles = css`
+
+
+  .filter-chips {
+    display: flex;
+    align-items: center;
+  }
+
+
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    height: 30px;
+    padding: 8px;
+    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke);
+    border-radius: 4px;
+    font-size: 14px;
+    background-color: var(--nile-filter-chip-background-default);
+    color: var(--nile-filter-chip-text-default);
+    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+    cursor: pointer;
+    box-sizing: border-box;
+  }
+
+  .chip:hover {
+    background-color: var(--nile-filter-chip-hover-background);
+  }
+ .chip:active {
+  background-color: var(--nile-filter-chip-active-background);
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
+:host([active]) .chip {
+  background-color: var(--nile-filter-chip-active-background);
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
+
+
+  .icon {
+    color: var(--nile-filter-chip-icon-color-default);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    top: 12px;
+  }
+
+  .label {
+    font-weight: 500;
+    color: var(--nile-filter-chip-label-color-default);
+  }
+
+  nile-badge::part(base) {
+    width: auto;
+    height: 14px;
+    border-radius: 100px;
+    padding: 6px;
+    gap: 10px;
+    font-size: 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  .chip-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
+  .clear-all-container {
+    margin-left: 18px;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+
+ .value {
+  color: var(--nile-filter-chip-values-color-default);
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 140px;
+  vertical-align: bottom;
+}
+
+
+  .close-icon {
+    color: var(--nile-filter-chip-close-icon-color-default);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    border-radius: 50%;
+    transition: background-color 0.2s;
+  }
+
+  .close-icon:hover {
+    background-color: var(--nile-filter-chip-close-icon-hover-background);
+    color: var(--nile-filter-chip-close-icon-hover-color);
+  }
+
+.label-wrapper {
+  margin-right: 4px;
+}
+
+::slotted([slot="icon"]) {
+  margin-right: 6px;
+}
+
+.value-wrapper {
+  margin-right: 4px; 
+}
+
+.badge-wrapper {
+  margin-right: 12px;  
+}
+
+`;
+
+export default [styles];
+
+ 

package/src/nile-filter-chip/nile-filter-chip.test.ts

@@ -0,0 +1,92 @@
+import { fixture, expect, html, oneEvent } from '@open-wc/testing';
+import './nile-filter-chip';
+import { NileFilterChip } from './nile-filter-chip';
+
+describe('<nile-filter-chip>', () => {
+  afterEach(() => {
+    (NileFilterChip as any).activeChips = [];
+  });
+
+  it('registers and unregisters itself in activeChips', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip label="L" value="T"></nile-filter-chip>
+    `);
+    expect((NileFilterChip as any).activeChips).to.include(el);
+    el.remove();
+    await el.updateComplete;
+    expect((NileFilterChip as any).activeChips).to.not.include(el);
+  });
+
+  it('renders fallback label and value', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip label="MyLabel" value="MyText"></nile-filter-chip>
+    `);
+    const label = el.shadowRoot!.querySelector('.label')! as HTMLElement;
+    const value = el.shadowRoot!.querySelector('.value')! as HTMLElement;
+    expect(label.textContent).to.equal('MyLabel:');
+    expect(value.textContent!.trim()).to.equal('MyText');
+  });
+
+  it('renders slotted label and value over fallback', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip>
+        <span slot="label">SLOT-LBL</span>
+        <span slot="value">SLOT-VAL</span>
+      </nile-filter-chip>
+    `);
+    const slottedLabel = el.querySelector('[slot="label"]')! as HTMLElement;
+    const slottedValue = el.querySelector('[slot="value"]')! as HTMLElement;
+    expect(slottedLabel.textContent).to.equal('SLOT-LBL');
+    expect(slottedValue.textContent).to.equal('SLOT-VAL');
+  });
+
+  it('renders an icon when the `icon` property is set', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip icon="★" label="L" value="T"></nile-filter-chip>
+    `);
+    const iconSpan = el.shadowRoot!.querySelector('.icon')! as HTMLElement;
+    expect(iconSpan).to.exist;
+    expect(iconSpan.textContent).to.equal('★');
+  });
+
+  it('does not render a badge when viewMoreCount is zero', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip viewMoreCount="0" label="L" value="T"></nile-filter-chip>
+    `);
+    expect(el.shadowRoot!.querySelector('nile-badge')).to.be.null;
+  });
+
+  it('renders a +badge when viewMoreCount > 0', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip viewMoreCount="5" label="L" value="T"></nile-filter-chip>
+    `);
+    const badge = el.shadowRoot!.querySelector('nile-badge')! as HTMLElement;
+    expect(badge).to.exist;
+    expect(badge.textContent).to.contain('+5');
+  });
+
+
+
+  it('dispatches `nile-click` on chip click', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip label="L" value="T"></nile-filter-chip>
+    `);
+    const chip = el.shadowRoot!.querySelector('.chip')! as HTMLElement;
+    setTimeout(() => chip.click());
+    const ev = await oneEvent(el, 'nile-click');
+    expect(ev.detail).to.deep.equal({ value: 'T', viewMoreCount: 0 });
+  });
+
+  it('dispatches `nile-close` on close icon click and removes itself', async () => {
+    const el = await fixture<NileFilterChip>(html`
+      <nile-filter-chip closable viewMoreCount="2" value="TT"></nile-filter-chip>
+    `);
+    const closeIcon = el.shadowRoot!.querySelector('.close-icon')! as HTMLElement;
+    setTimeout(() => closeIcon.click());
+    const ev = await oneEvent(el, 'nile-close');
+    expect(ev.detail).to.deep.equal({ value: 'TT', viewMoreCount: 2 });
+    expect(document.body.contains(el)).to.be.false;
+  });
+
+ 
+});

package/src/nile-filter-chip/nile-filter-chip.ts

@@ -0,0 +1,136 @@
+import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+import { styles } from './nile-filter-chip.css';
+
+/**
+ * Nile filter-chip component.
+ *
+ * @tag nile-filter-chip
+ */
+@customElement('nile-filter-chip')
+export class NileFilterChip extends NileElement {
+  @property({ type: String }) label = '';
+  @property({ type: String }) value = '';
+  @property({ type: Number }) viewMoreCount: number = 0;
+  @property({ type: Boolean }) editable = false;
+  @property({ type: Boolean }) closable = false;
+  @property({ type: String }) icon = '';
+  @property({ type: String }) removeIcon = '';
+  @property({ type: Boolean, reflect: true }) active = false;
+
+
+  private static activeChips: NileFilterChip[] = [];
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.registerChip();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.unregisterChip();
+  }
+
+  private registerChip() {
+    NileFilterChip.activeChips.push(this);
+  }
+
+  private unregisterChip() {
+    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(
+      (chip) => chip !== this
+    );
+  }
+
+  private handleClose(event: Event) {
+    event.stopPropagation();
+    this.dispatchEvent(
+      new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
+    );
+    this.remove();
+  }
+
+  private handleClick() {
+    this.dispatchEvent(
+      new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })
+    );
+  }
+
+  private getLabelSlot(): TemplateResult {
+    return html`
+    <span class="label-wrapper">
+      <slot name="label">
+        <span class="label" part="label">${this.label}:</span>
+      </slot>
+    </span>
+
+    `;
+  }
+
+  private getValueSlot(): TemplateResult {
+    return html`
+    <span class="value-wrapper">
+      <slot name="value">
+        <span class="value" part="value">${this.value}</span>
+      </slot>
+    </span>
+
+    `;
+  }
+
+  private getviewMoreCountSlot(): TemplateResult {
+    return html`
+      <slot name="suffix">
+        ${this.viewMoreCount
+          ? html`
+          <span class="badge-wrapper">
+              <nile-badge variant="primary" pilltype="pill-color">
+                +${this.viewMoreCount}
+              </nile-badge>
+          </span>
+
+            `
+          : html``}
+      </slot>
+    `;
+  }
+
+  private getCloseIconSlot(): TemplateResult {
+    return html`
+      ${this.closable
+        ? html`
+            <span class="close-icon" @click="${this.handleClose}">
+              <nile-icon name="${this.removeIcon || 'close'}" size="12"></nile-icon>
+            </span>
+          `
+        : html``}
+    `;
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="chip" @click="${this.handleClick}">
+        <slot name="icon">
+          ${this.icon ? html`<span class="icon">${this.icon}</span>` : html``}
+        </slot>
+        ${this.getLabelSlot()}
+        <slot name="content"></slot>
+        ${this.getValueSlot()}
+        ${this.getviewMoreCountSlot()}
+        ${this.getCloseIconSlot()}
+      </div>
+    `;
+  }
+}
+
+export default NileFilterChip;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-filter-chip': NileFilterChip;
+  }
+}