@aquera/nile-elements 1.3.3-beta-1.3 → 1.3.3-beta-1.5

package/dist/src/nile-file-upload/utils/file-validation.util.js

@@ -0,0 +1,170 @@
+import { FileUploadState, FileUploadError, FileUploadEvent } from "../types";
+export const setUpDragHandler = (nileFileUpload, dragHandler) => {
+    dragHandler.onStateChange((newState) => {
+        nileFileUpload.state = newState;
+    });
+    dragHandler.onFileDrop((files) => {
+        const maxSize = parseSize(nileFileUpload.size);
+        const uploadedFiles = nileFileUpload.uploadedFiles;
+        if (!nileFileUpload.allowMultiple && (uploadedFiles.length + files.length > 1)) {
+            nileFileUpload.errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;
+            console.error(nileFileUpload.errorMessage);
+            nileFileUpload.requestUpdate();
+            return;
+        }
+        let sizeExceeded = false;
+        let duplicatesFound = false;
+        const newFiles = [];
+        const rejectedFiles = [];
+        for (const file of files) {
+            if (file.size > maxSize) {
+                sizeExceeded = true;
+                rejectedFiles.push(file);
+                continue;
+            }
+            if (!nileFileUpload.allowDuplicates &&
+                uploadedFiles.some((uploaded) => uploaded.name === file.name &&
+                    uploaded.size === file.size &&
+                    uploaded.type === file.type)) {
+                duplicatesFound = true;
+                rejectedFiles.push(file);
+                continue;
+            }
+            if (!rejectedFiles.includes(file)) {
+                newFiles.push(file);
+            }
+        }
+        if (sizeExceeded) {
+            nileFileUpload.errorMessage = FileUploadError.SIZE_LIMIT_EXCEEDED;
+            console.error(nileFileUpload.errorMessage);
+            nileFileUpload.requestUpdate();
+            nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_SIZE_EXCEED_FILES, {
+                detail: { files: rejectedFiles }
+            }));
+        }
+        if (duplicatesFound && newFiles.length === 0) {
+            nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;
+            console.error(nileFileUpload.errorMessage);
+            nileFileUpload.requestUpdate();
+        }
+        nileFileUpload.uploadedFiles = [...uploadedFiles, ...newFiles];
+        nileFileUpload.requestUpdate();
+    });
+    dragHandler.setErrorMessage((errorMessage) => {
+        console.error(nileFileUpload.errorMessage);
+        nileFileUpload.errorMessage = errorMessage;
+    });
+};
+export const addGlobalListeners = (dragHandler) => {
+    document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });
+    document.addEventListener('drop', dragHandler.preventDrop, { passive: false });
+};
+export const addInternalListeners = (nileFileUpload, dragHandler, uploadRequests) => {
+    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);
+    removeFile(nileFileUpload.uploadedFiles, nileFileUpload);
+};
+export function handleHoverIn(setState, currentState) {
+    if (currentState === FileUploadState.DEFAULT) {
+        setState(FileUploadState.HOVER);
+    }
+}
+export function handleHoverOut(setState, currentState) {
+    if (currentState === FileUploadState.HOVER) {
+        setState(FileUploadState.DEFAULT);
+    }
+}
+export function uploadFiles(nileFileUpload) {
+    const { uploadedFiles, fileUploadUrl, uploadRequests } = nileFileUpload;
+    if (!fileUploadUrl || !uploadedFiles?.length)
+        return;
+    for (const file of uploadedFiles) {
+        if (uploadRequests.has(file))
+            continue;
+        const formData = new FormData();
+        formData.append('file', file);
+        const xhr = new XMLHttpRequest();
+        uploadRequests.set(file, xhr);
+        nileFileUpload.emit(FileUploadEvent.NILE_UPLOADING);
+        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 = () => {
+            if (xhr.status >= 200 && xhr.status < 300) {
+                nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {
+                    detail: { file, response: xhr.response }
+                }));
+            }
+            else {
+                nileFileUpload.errorMessage = FileUploadError.SERVER_SIDE_ERROR;
+                nileFileUpload.requestUpdate();
+                nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.SERVER_SIDE_ERROR, {
+                    detail: { file, status: xhr.status, response: xhr.response }
+                }));
+            }
+        };
+        xhr.onerror = () => {
+            uploadRequests.delete(file);
+            nileFileUpload.errorMessage = FileUploadError.NETWORK_ERROR;
+            nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_NETWORK_ERROR, {
+                detail: { file, status: xhr.status, response: xhr.response },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        xhr.open('POST', fileUploadUrl);
+        xhr.send(formData);
+    }
+}
+export const cancelFileUpload = (nileFileUpload, uploadRequests) => {
+    document.addEventListener(FileUploadEvent.NILE_CANCEL_UPLOAD, (e) => {
+        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 }
+        }));
+    });
+};
+function parseSize(sizeStr) {
+    const units = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };
+    const num = parseFloat(sizeStr);
+    const unit = sizeStr.replace(/[0-9.\s]/g, '').toUpperCase();
+    const multiplier = units[unit] || 1;
+    return num * multiplier;
+}
+export const preventDefaultAndStopPropagation = (event) => {
+    event.preventDefault?.();
+    event.stopPropagation();
+};
+export const removeFile = (uploadedFiles, nileFileUpload) => {
+    document.addEventListener('nile-remove', (e) => {
+        const { value } = e.detail;
+        uploadedFiles = uploadedFiles.filter(file => file !== value);
+        nileFileUpload.uploadedFiles = uploadedFiles;
+        nileFileUpload.requestUpdate();
+    });
+};
+export const truncateString = (nileFileUpload) => {
+    if (nileFileUpload.variant === 'vertical' && nileFileUpload.errorMessage.length > 34) {
+        nileFileUpload.isStringTruncated = true;
+        nileFileUpload.requestUpdate();
+    }
+    else if (nileFileUpload.variant === 'horizontal' && nileFileUpload.errorMessage.length > 96) {
+        nileFileUpload.isStringTruncated = true;
+        nileFileUpload.requestUpdate();
+    }
+};
+//# sourceMappingURL=file-validation.util.js.map

package/dist/src/nile-file-upload/utils/file-validation.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-validation.util.js","sourceRoot":"","sources":["../../../../src/nile-file-upload/utils/file-validation.util.ts"],"names":[],"mappings":"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","sourcesContent":["import { DragHandler } from \"./drag-drop.util\";\nimport { FileUploadState, FileUploadError, FileUploadEvent } from \"../types\";\nimport { NileFileUpload } from \"../nile-file-upload\";\nimport { RemoveFileDetail } from \"../../nile-file-preview/types\";\n\nexport const setUpDragHandler = (\n  nileFileUpload: NileFileUpload,\n  dragHandler: DragHandler,\n): void => {\n  dragHandler.onStateChange((newState: FileUploadState) => {\n    nileFileUpload.state = newState;\n  });\n\n  dragHandler.onFileDrop((files: File[]) => {\n    const maxSize = parseSize(nileFileUpload.size);\n    const uploadedFiles = nileFileUpload.uploadedFiles;\n  \n    if (!nileFileUpload.allowMultiple && (uploadedFiles.length + files.length > 1)) {\n      nileFileUpload.errorMessage = FileUploadError.MULTIPLE_NOT_ALLOWED;\n      console.error(nileFileUpload.errorMessage);\n      nileFileUpload.requestUpdate();\n      return;\n    }\n  \n    let sizeExceeded = false;\n    let duplicatesFound = false;\n    const newFiles: File[] = [];\n    const rejectedFiles: File[] = [];\n  \n    for (const file of files) {\n      if (file.size > maxSize) {\n        sizeExceeded = true;\n        rejectedFiles.push(file);\n        continue;\n      }\n  \n      if (\n        !nileFileUpload.allowDuplicates &&\n        uploadedFiles.some(\n          (uploaded) =>\n            uploaded.name === file.name &&\n            uploaded.size === file.size &&\n            uploaded.type === file.type\n        )\n      ) {\n        duplicatesFound = true;\n        rejectedFiles.push(file);\n        continue;\n      }\n  \n      if(!rejectedFiles.includes(file)) {\n        newFiles.push(file);\n      }\n    }\n\n    if (sizeExceeded) {\n      nileFileUpload.errorMessage = FileUploadError.SIZE_LIMIT_EXCEEDED;\n      console.error(nileFileUpload.errorMessage);\n      nileFileUpload.requestUpdate();\n      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_SIZE_EXCEED_FILES, {\n        detail: { files: rejectedFiles }\n      }));\n    }\n  \n    if (duplicatesFound && newFiles.length === 0) {\n      nileFileUpload.errorMessage = FileUploadError.DUPLICATES_NOT_ALLOWED;\n      console.error(nileFileUpload.errorMessage);\n      nileFileUpload.requestUpdate();\n    }\n  \n    nileFileUpload.uploadedFiles = [...uploadedFiles, ...newFiles];\n    nileFileUpload.requestUpdate();\n  });\n  \n\n  dragHandler.setErrorMessage((errorMessage: string) => {\n    console.error(nileFileUpload.errorMessage);\n    nileFileUpload.errorMessage = errorMessage;\n  });\n};\n\nexport const addGlobalListeners = (dragHandler: DragHandler): void => {\n  document.addEventListener('dragover', dragHandler.preventDragOver, { passive: false });\n  document.addEventListener('drop', dragHandler.preventDrop, { passive: false });\n}\n\nexport const addInternalListeners = (nileFileUpload: NileFileUpload, dragHandler: DragHandler, uploadRequests: any): void => {\n  nileFileUpload.addEventListener('mouseenter', (e) => handleHoverIn(nileFileUpload.setState, nileFileUpload.state));\n  nileFileUpload.addEventListener('mouseleave', (e) => handleHoverOut(nileFileUpload.setState, nileFileUpload.state));\n  nileFileUpload.addEventListener('dragenter', (e) => dragHandler.dragEnter(e));\n  nileFileUpload.addEventListener('dragleave', (e) => dragHandler.dragLeave(e));\n  nileFileUpload.addEventListener('dragover', (e) => dragHandler.dragOver(e));\n  nileFileUpload.addEventListener('drop', (e) => dragHandler.drop(e));  \n\n  cancelFileUpload(nileFileUpload, uploadRequests);\n  removeFile(nileFileUpload.uploadedFiles, nileFileUpload);\n}\n\nexport function handleHoverIn(\n  setState: (state: FileUploadState) => void,\n  currentState: FileUploadState\n): void {\n  if (currentState === FileUploadState.DEFAULT) {\n    setState(FileUploadState.HOVER);\n  }\n}\n\nexport function handleHoverOut(\n  setState: (state: FileUploadState) => void,\n  currentState: FileUploadState\n): void {\n  if (currentState === FileUploadState.HOVER) {\n    setState(FileUploadState.DEFAULT);\n  }\n}\n\nexport function uploadFiles(nileFileUpload: NileFileUpload) {\n  const { uploadedFiles, fileUploadUrl, uploadRequests } = nileFileUpload;\n  if (!fileUploadUrl || !uploadedFiles?.length) return;\n\n  for (const file of uploadedFiles) {\n    if (uploadRequests.has(file)) continue;\n    \n    const formData = new FormData();\n    formData.append('file', file);\n\n    const xhr = new XMLHttpRequest();\n    uploadRequests.set(file, xhr);\n\n    nileFileUpload.emit(FileUploadEvent.NILE_UPLOADING);\n\n    xhr.upload.onprogress = (e) => {\n      const percent = Math.floor((e.loaded / e.total) * 100);\n      \n      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_PROGRESS, {\n        detail: { file, progress: percent }\n      }));\n    };\n\n    xhr.onload = () => {\n      if (xhr.status >= 200 && xhr.status < 300) {\n        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_SUCCESS, {\n          detail: { file, response: xhr.response }\n        }));\n      } else {\n        nileFileUpload.errorMessage = FileUploadError.SERVER_SIDE_ERROR;\n        nileFileUpload.requestUpdate();\n        nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.SERVER_SIDE_ERROR, {\n          detail: { file, status: xhr.status, response: xhr.response }\n        }));\n      }\n    };\n\n    xhr.onerror = () => {\n      uploadRequests.delete(file);\n      nileFileUpload.errorMessage = FileUploadError.NETWORK_ERROR;\n      nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_NETWORK_ERROR, {\n        detail: { file, status: xhr.status, response: xhr.response },\n        bubbles: true,\n        composed: true,\n      }));\n    };\n\n    xhr.open('POST', fileUploadUrl);\n    xhr.send(formData);\n  }\n}\n\nexport const cancelFileUpload = (nileFileUpload: NileFileUpload, uploadRequests: Map<File, XMLHttpRequest>) => {\n  document.addEventListener(FileUploadEvent.NILE_CANCEL_UPLOAD, (e: CustomEvent) => {\n    const fileToCancel = e.detail.file;\n    const xhr = uploadRequests.get(fileToCancel);\n\n    if (xhr) {\n      xhr.abort();\n    }\n    uploadRequests.delete(fileToCancel);\n    nileFileUpload.uploadedFiles = nileFileUpload.uploadedFiles.filter(file => file !== fileToCancel);\n\n    nileFileUpload.dispatchEvent(new CustomEvent(FileUploadEvent.NILE_UPLOAD_CANCELLED, {\n      detail: { file: fileToCancel }\n    }));\n  });\n};\n\nfunction parseSize(sizeStr: string): number {\n  const units = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };\n  const num = parseFloat(sizeStr);\n  const unit = sizeStr.replace(/[0-9.\\s]/g, '').toUpperCase();\n  const multiplier = units[unit as keyof typeof units] || 1;\n  return num * multiplier;\n}\n\nexport const preventDefaultAndStopPropagation = (event: Event | DragEvent): void => {\n  event.preventDefault?.();\n  event.stopPropagation();\n}\n\nexport const removeFile = (uploadedFiles: File[], nileFileUpload: NileFileUpload) => {\n  document.addEventListener('nile-remove', (e: CustomEvent<RemoveFileDetail>) => {\n    const { value } = e.detail;\n    uploadedFiles = uploadedFiles.filter(file => file !== value);\n    nileFileUpload.uploadedFiles = uploadedFiles;\n    nileFileUpload.requestUpdate();\n  });\n}\n\nexport const truncateString = (nileFileUpload: NileFileUpload): void => {\n  if(nileFileUpload.variant === 'vertical' && nileFileUpload.errorMessage.length > 34) {\n    nileFileUpload.isStringTruncated = true;\n    nileFileUpload.requestUpdate();\n  } else if(nileFileUpload.variant === 'horizontal' && nileFileUpload.errorMessage.length > 96) {\n    nileFileUpload.isStringTruncated = true;\n    nileFileUpload.requestUpdate();\n  }\n}"]}

package/dist/src/nile-filter-chip/index.js

@@ -0,0 +1,2 @@
+export { NileFilterChip } from './nile-filter-chip';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-filter-chip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC","sourcesContent":["export { NileFilterChip } from './nile-filter-chip';"]}

package/dist/src/nile-filter-chip/nile-filter-chip.css.js

@@ -0,0 +1,148 @@
+/**
+* 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 `
+
+  :host{
+    -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));
+  }
+
+  .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, var(--ng-colors-border-primary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    font-size: 14px;
+    background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));
+    color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));
+    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, var(--ng-colors-bg-primary-hover));
+  }
+ .chip:active {
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
+:host([active]) .chip {
+  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));
+  border-color: var(--nile-filter-chip-active-border-color-stroke);
+}
+
+
+  .icon {
+    color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));
+    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, var(--ng-colors-text-primary-900));
+  }
+
+  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, var(--ng-colors-text-brand-secondary-700));
+  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, var(--ng-componentcolors-utility-gray-400));
+    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, var(--ng-colors-bg-primary-hover));
+    color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));
+  }
+
+.label-wrapper {
+  margin-right: 4px;
+}
+
+::slotted([slot="icon"]) {
+  margin-right: 6px;
+}
+
+.value-wrapper {
+  margin-right: 4px; 
+}
+
+.badge-wrapper {
+  margin-right: 12px;  
+}
+
+.badge{
+  display: inline-flex;
+    align-items: center;
+    height: 20px; 
+}
+
+nile-badge::part(content) {
+ line-height: 20px;
+}
+
+`;
+export default [styles];
+//# sourceMappingURL=nile-filter-chip.css.js.map

package/dist/src/nile-filter-chip/nile-filter-chip.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-filter-chip.css.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport {css} from 'lit';\n\n/**\n * FilterChip CSS\n */\n\nexport const styles = css`\n\n  :host{\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .filter-chips {\n    display: flex;\n    align-items: center;\n  }\n\n\n  .chip {\n    display: inline-flex;\n    align-items: center;\n    height: 30px;\n    padding: 8px;\n    border: 1px solid var(--nile-filter-chip-chip-border-color-stroke, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-md));\n    font-size: 14px;\n    background-color: var(--nile-filter-chip-background-default, var(--ng-colors-bg-primary));\n    color: var(--nile-filter-chip-text-default, var(--ng-colors-text-secondary-700));\n    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;\n    cursor: pointer;\n    box-sizing: border-box;\n  }\n\n  .chip:hover {\n    background-color: var(--nile-filter-chip-hover-background, var(--ng-colors-bg-primary-hover));\n  }\n .chip:active {\n  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n  border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n:host([active]) .chip {\n  background-color: var(--nile-filter-chip-active-background, var(--ng-colors-bg-active));\n  border-color: var(--nile-filter-chip-active-border-color-stroke);\n}\n\n\n  .icon {\n    color: var(--nile-filter-chip-icon-color-default, var(--ng-colors-text-primary-900));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: middle;\n    position: relative;\n    top: 12px;\n  }\n\n  .label {\n    font-weight: 500;\n    color: var(--nile-filter-chip-label-color-default, var(--ng-colors-text-primary-900));\n  }\n\n  nile-badge::part(base) {\n    width: auto;\n    height: 14px;\n    border-radius: 100px;\n    padding: 6px;\n    gap: 10px;\n    font-size: 8px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 1;\n  }\n\n  .chip-container {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    width: 100%;\n  }\n\n  .clear-all-container {\n    margin-left: 18px;\n    white-space: nowrap;\n    cursor: pointer;\n  }\n\n\n .value {\n  color: var(--nile-filter-chip-values-color-default, var(--ng-colors-text-brand-secondary-700));\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 140px;\n  vertical-align: bottom;\n}\n\n\n  .close-icon {\n    color: var(--nile-filter-chip-close-icon-color-default, var(--ng-componentcolors-utility-gray-400));\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n  }\n\n  .close-icon:hover {\n    background-color: var(--nile-filter-chip-close-icon-hover-background, var(--ng-colors-bg-primary-hover));\n    color: var(--nile-filter-chip-close-icon-hover-color, var(--ng-componentcolors-utility-gray-500));\n  }\n\n.label-wrapper {\n  margin-right: 4px;\n}\n\n::slotted([slot=\"icon\"]) {\n  margin-right: 6px;\n}\n\n.value-wrapper {\n  margin-right: 4px; \n}\n\n.badge-wrapper {\n  margin-right: 12px;  \n}\n\n.badge{\n  display: inline-flex;\n    align-items: center;\n    height: 20px; \n}\n\nnile-badge::part(content) {\n line-height: 20px;\n}\n\n`;\n\nexport default [styles];\n\n "]}

package/dist/src/nile-filter-chip/nile-filter-chip.js

@@ -0,0 +1,141 @@
+var NileFilterChip_1;
+import { __decorate } from "tslib";
+import { html } 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
+ */
+let NileFilterChip = NileFilterChip_1 = class NileFilterChip extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.value = '';
+        this.viewMoreCount = 0;
+        this.editable = false;
+        this.closable = false;
+        this.icon = '';
+        this.removeIcon = '';
+        this.active = false;
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.registerChip();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unregisterChip();
+    }
+    registerChip() {
+        NileFilterChip_1.activeChips.push(this);
+    }
+    unregisterChip() {
+        NileFilterChip_1.activeChips = NileFilterChip_1.activeChips.filter((chip) => chip !== this);
+    }
+    handleClose(event) {
+        event.stopPropagation();
+        this.dispatchEvent(new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } }));
+        this.remove();
+    }
+    handleClick() {
+        this.dispatchEvent(new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } }));
+    }
+    getLabelSlot() {
+        return html `
+    <span class="label-wrapper">
+      <slot name="label">
+        <span class="label" part="label">${this.label}:</span>
+      </slot>
+    </span>
+
+    `;
+    }
+    getValueSlot() {
+        return html `
+    <span class="value-wrapper">
+      <slot name="value">
+        <span class="value" part="value">${this.value}</span>
+      </slot>
+    </span>
+
+    `;
+    }
+    getviewMoreCountSlot() {
+        return html `
+      <slot name="suffix">
+        ${this.viewMoreCount
+            ? html `
+          <span class="badge-wrapper">
+              <nile-badge class="badge" part="badge" variant="primary" pilltype="pill-color" exportparts="content, base">
+                +${this.viewMoreCount}
+              </nile-badge>
+          </span>
+
+            `
+            : html ``}
+      </slot>
+    `;
+    }
+    getCloseIconSlot() {
+        return html `
+      ${this.closable
+            ? html `
+            <span class="close-icon" @click="${this.handleClose}">
+              <nile-icon name="${this.removeIcon || 'var(--nile-icon-close, var(--ng-icon-x-close))'}" size="12" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+            </span>
+          `
+            : html ``}
+    `;
+    }
+    render() {
+        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>
+    `;
+    }
+};
+NileFilterChip.activeChips = [];
+__decorate([
+    property({ type: String })
+], NileFilterChip.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], NileFilterChip.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], NileFilterChip.prototype, "viewMoreCount", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileFilterChip.prototype, "editable", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileFilterChip.prototype, "closable", void 0);
+__decorate([
+    property({ type: String })
+], NileFilterChip.prototype, "icon", void 0);
+__decorate([
+    property({ type: String })
+], NileFilterChip.prototype, "removeIcon", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileFilterChip.prototype, "active", void 0);
+NileFilterChip = NileFilterChip_1 = __decorate([
+    customElement('nile-filter-chip')
+], NileFilterChip);
+export { NileFilterChip };
+export default NileFilterChip;
+//# sourceMappingURL=nile-filter-chip.js.map

package/dist/src/nile-filter-chip/nile-filter-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-filter-chip.js","sourceRoot":"","sources":["../../../src/nile-filter-chip/nile-filter-chip.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport { styles } from './nile-filter-chip.css';\n\n/**\n * Nile filter-chip component.\n *\n * @tag nile-filter-chip\n */\n@customElement('nile-filter-chip')\nexport class NileFilterChip extends NileElement {\n  @property({ type: String }) label = '';\n  @property({ type: String }) value = '';\n  @property({ type: Number }) viewMoreCount: number = 0;\n  @property({ type: Boolean }) editable = false;\n  @property({ type: Boolean }) closable = false;\n  @property({ type: String }) icon = '';\n  @property({ type: String }) removeIcon = '';\n  @property({ type: Boolean, reflect: true }) active = false;\n\n\n  private static activeChips: NileFilterChip[] = [];\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.registerChip();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.unregisterChip();\n  }\n\n  private registerChip() {\n    NileFilterChip.activeChips.push(this);\n  }\n\n  private unregisterChip() {\n    NileFilterChip.activeChips = NileFilterChip.activeChips.filter(\n      (chip) => chip !== this\n    );\n  }\n\n  private handleClose(event: Event) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('nile-close', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })\n    );\n    this.remove();\n  }\n\n  private handleClick() {\n    this.dispatchEvent(\n      new CustomEvent('nile-click', { detail: { value: this.value, viewMoreCount: this.viewMoreCount } })\n    );\n  }\n\n  private getLabelSlot(): TemplateResult {\n    return html`\n    <span class=\"label-wrapper\">\n      <slot name=\"label\">\n        <span class=\"label\" part=\"label\">${this.label}:</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getValueSlot(): TemplateResult {\n    return html`\n    <span class=\"value-wrapper\">\n      <slot name=\"value\">\n        <span class=\"value\" part=\"value\">${this.value}</span>\n      </slot>\n    </span>\n\n    `;\n  }\n\n  private getviewMoreCountSlot(): TemplateResult {\n    return html`\n      <slot name=\"suffix\">\n        ${this.viewMoreCount\n          ? html`\n          <span class=\"badge-wrapper\">\n              <nile-badge class=\"badge\" part=\"badge\" variant=\"primary\" pilltype=\"pill-color\" exportparts=\"content, base\">\n                +${this.viewMoreCount}\n              </nile-badge>\n          </span>\n\n            `\n          : html``}\n      </slot>\n    `;\n  }\n\n  private getCloseIconSlot(): TemplateResult {\n    return html`\n      ${this.closable\n        ? html`\n            <span class=\"close-icon\" @click=\"${this.handleClose}\">\n              <nile-icon name=\"${this.removeIcon || 'var(--nile-icon-close, var(--ng-icon-x-close))'}\" size=\"12\" method=\"var(--nile-svg-method-fill, var(--ng-svg-method-stroke))\"></nile-icon>\n            </span>\n          `\n        : html``}\n    `;\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div class=\"chip\" @click=\"${this.handleClick}\">\n        <slot name=\"icon\">\n          ${this.icon ? html`<span class=\"icon\">${this.icon}</span>` : html``}\n        </slot>\n        ${this.getLabelSlot()}\n        <slot name=\"content\"></slot>\n        ${this.getValueSlot()}\n        ${this.getviewMoreCountSlot()}\n        ${this.getCloseIconSlot()}\n      </div>\n    `;\n  }\n}\n\nexport default NileFilterChip;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-filter-chip': NileFilterChip;\n  }\n}\n"]}

package/dist/src/nile-filter-chip/nile-filter-chip.test.js

@@ -0,0 +1,80 @@
+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.activeChips = [];
+    });
+    it('registers and unregisters itself in activeChips', async () => {
+        const el = await fixture(html `
+      <nile-filter-chip label="L" value="T"></nile-filter-chip>
+    `);
+        expect(NileFilterChip.activeChips).to.include(el);
+        el.remove();
+        await el.updateComplete;
+        expect(NileFilterChip.activeChips).to.not.include(el);
+    });
+    it('renders fallback label and value', async () => {
+        const el = await fixture(html `
+      <nile-filter-chip label="MyLabel" value="MyText"></nile-filter-chip>
+    `);
+        const label = el.shadowRoot.querySelector('.label');
+        const value = el.shadowRoot.querySelector('.value');
+        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(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"]');
+        const slottedValue = el.querySelector('[slot="value"]');
+        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(html `
+      <nile-filter-chip icon="★" label="L" value="T"></nile-filter-chip>
+    `);
+        const iconSpan = el.shadowRoot.querySelector('.icon');
+        expect(iconSpan).to.exist;
+        expect(iconSpan.textContent).to.equal('★');
+    });
+    it('does not render a badge when viewMoreCount is zero', async () => {
+        const el = await fixture(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(html `
+      <nile-filter-chip viewMoreCount="5" label="L" value="T"></nile-filter-chip>
+    `);
+        const badge = el.shadowRoot.querySelector('nile-badge');
+        expect(badge).to.exist;
+        expect(badge.textContent).to.contain('+5');
+    });
+    it('dispatches `nile-click` on chip click', async () => {
+        const el = await fixture(html `
+      <nile-filter-chip label="L" value="T"></nile-filter-chip>
+    `);
+        const chip = el.shadowRoot.querySelector('.chip');
+        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(html `
+      <nile-filter-chip closable viewMoreCount="2" value="TT"></nile-filter-chip>
+    `);
+        const closeIcon = el.shadowRoot.querySelector('.close-icon');
+        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;
+    });
+});
+//# sourceMappingURL=nile-filter-chip.test.js.map

package/dist/src/nile-filter-chip/nile-filter-chip.test.js.map

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