@nectary/components 4.1.4 → 4.2.0

package/button/index.js

@@ -159,8 +159,11 @@ defineCustomElement('sinch-button', class extends NectaryElement {
         }
     }
   };
-  #onButtonClick = () => {
-    if (!this.disabled) {
+  #onButtonClick = e => {
+    if (this.disabled) {
+      e.stopPropagation();
+      e.preventDefault();
+    } else {
       this.dispatchEvent(new CustomEvent('-click'));
     }
   };

package/file-drop/index.js

@@ -1,8 +1,8 @@
 import '../text';
 import '../file-picker';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-comp-file-drop-shape-radius);background-color:var(--sinch-comp-file-drop-color-default-background-initial)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-comp-file-drop-color-default-border-initial);border-radius:var(--sinch-comp-file-drop-shape-radius);pointer-events:none}#placeholder{align-self:center;text-align:center;--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-initial);--sinch-comp-text-font:var(--sinch-comp-file-drop-font-placeholder)}:host([invalid]) #wrapper{background-color:var(--sinch-comp-file-drop-color-invalid-background-initial)}:host([invalid]) #wrapper::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-initial);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid{background-color:var(--sinch-comp-file-drop-color-default-background-active)}#wrapper.drop.valid::after{border-color:var(--sinch-comp-file-drop-color-default-border-active);border-width:2px}#wrapper.drop.valid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-active)}:host([disabled])>#wrapper>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-disabled-placeholder-initial)}:host([disabled])>#wrapper{background-color:var(--sinch-comp-file-drop-color-disabled-background-initial)}:host([disabled])>#wrapper::after{border-color:var(--sinch-comp-file-drop-color-disabled-border-initial);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
-import { areFilesAccepted, doFilesSatisfySize } from './utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-comp-file-drop-shape-radius);background-color:var(--sinch-comp-file-drop-color-default-background-initial)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-comp-file-drop-color-default-border-initial);border-radius:var(--sinch-comp-file-drop-shape-radius);pointer-events:none}#placeholder{align-self:center;text-align:center;--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-initial);--sinch-comp-text-font:var(--sinch-comp-file-drop-font-placeholder)}:host([invalid]) #wrapper{background-color:var(--sinch-comp-file-drop-color-invalid-background-initial)}:host([invalid]) #wrapper::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-initial);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid{background-color:var(--sinch-comp-file-drop-color-default-background-active)}#wrapper.drop.valid::after{border-color:var(--sinch-comp-file-drop-color-default-border-active);border-width:2px}#wrapper.drop.valid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-active)}#wrapper.drop.invalid{background-color:var(--sinch-comp-file-drop-color-invalid-background-active)}#wrapper.drop.invalid::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-active);border-width:2px}#wrapper.drop.invalid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-invalid-placeholder-active)}:host([disabled])>#wrapper>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-disabled-placeholder-initial)}:host([disabled])>#wrapper{background-color:var(--sinch-comp-file-drop-color-disabled-background-initial)}:host([disabled])>#wrapper::after{border-color:var(--sinch-comp-file-drop-color-disabled-border-initial);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
+import { areFilesAccepted, areItemsAccepted, doFilesSatisfySize } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-file-drop', class extends NectaryElement {
@@ -129,18 +129,24 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
       if (isElementEnabled) {
         setClass(this.#$dropArea, 'drop', true);
         setClass(this.#$dropArea, 'valid', isValid);
+        setClass(this.#$dropArea, 'invalid', !isValid);
       }
     } else {
       setClass(this.#$dropArea, 'drop', false);
       setClass(this.#$dropArea, 'valid', false);
+      setClass(this.#$dropArea, 'invalid', false);
     }
   }
   #onDragEnter = e => {
     e.stopPropagation();
     e.preventDefault();
-    const hasTypes = e.dataTransfer?.types?.includes('Files') === true;
-    const hasItems = e.dataTransfer?.items != null && e.dataTransfer.items.length > 0;
-    this.#setDragEffect(true, hasTypes || hasItems);
+    const items = e.dataTransfer?.items;
+    let isValidItems = false;
+    if (items != null && items.length > 0) {
+      const itemsArray = Array.from(items);
+      isValidItems = areItemsAccepted(itemsArray, this.accept);
+    }
+    this.#setDragEffect(true, isValidItems);
   };
   #onDragLeave = e => {
     e.stopPropagation();

package/file-drop/utils.d.ts

@@ -1,2 +1,3 @@
 export declare const areFilesAccepted: (files: File[], accept: string | null) => boolean;
+export declare const areItemsAccepted: (item: DataTransferItem[], accept: string | null) => boolean;
 export declare const doFilesSatisfySize: (files: File[], size: number | null) => boolean;

package/file-drop/utils.js

@@ -21,6 +21,26 @@ export const areFilesAccepted = (files, accept) => {
     });
   });
 };
+export const areItemsAccepted = (item, accept) => {
+  if (accept === null) {
+    return true;
+  }
+  const acceptValues = accept.split(/\s*,\s*/);
+  return item.every(file => {
+    return acceptValues.some(acceptValue => {
+      if (acceptValue === 'image/*') {
+        return file.type.startsWith('image/');
+      }
+      if (acceptValue === 'video/*') {
+        return file.type.startsWith('video/');
+      }
+      if (acceptValue === 'audio/*') {
+        return file.type.startsWith('audio/');
+      }
+      return acceptValue === file.type;
+    });
+  });
+};
 export const doFilesSatisfySize = (files, size) => {
   if (size === null || size <= 0) {
     return true;

package/file-picker/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>';
 import { doFilesSatisfySize } from './utils';
 const template = document.createElement('template');
@@ -6,7 +6,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-file-picker', class extends NectaryElement {
   #$input;
   #$targetSlot;
-  #$target = null;
   #controller = null;
   constructor() {
     super();
@@ -30,7 +29,6 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
-    this.#$target = null;
   }
   static get observedAttributes() {
     return ['accept', 'multiple'];
@@ -71,9 +69,8 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
     updateAttribute(this, 'size', value);
   }
   #onTargetSlotChange = () => {
-    this.#$target?.removeEventListener('-click', this.#onTargetClick);
-    this.#$target = getFirstSlotElement(this.#$targetSlot, true);
-    this.#$target?.addEventListener('-click', this.#onTargetClick);
+    this.#$targetSlot.removeEventListener('click', this.#onTargetClick);
+    this.#$targetSlot.addEventListener('click', this.#onTargetClick);
   };
   #onTargetClick = () => {
     this.#$input.click();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.1.4",
+  "version": "4.2.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",