@nectary/components 4.1.4 → 4.3.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.3.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/select-menu/index.js

@@ -1,8 +1,9 @@
 import '../input';
 import '../icon';
 import '../text';
+import { isSelectMenuOption } from '../select-menu-option/utils';
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, hasClass, isTargetEqual } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
 const template = document.createElement('template');
@@ -70,9 +71,12 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
         }
       case 'rows':
         {
+          const numberOfItems = this.#$optionSlot.assignedElements().length;
+          const maxNumberOfRows = parseInt(newVal ?? '0', 10);
           this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
             min: 2,
-            itemSizeMultiplier: ITEM_HEIGHT
+            itemSizeMultiplier: ITEM_HEIGHT,
+            addExtraSpace: numberOfItems > maxNumberOfRows
           });
           break;
         }
@@ -142,6 +146,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onListboxClick = e => {
     const $elem = e.target;
+    if ($elem == null || !($elem instanceof Element) || !isSelectMenuOption($elem)) {
+      return;
+    }
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, 'disabled')) {
       this.#selectOption($elem);
@@ -231,7 +238,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   }
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
-    const options = this.#$optionSlot.assignedElements();
+    const options = this.#getOptionElements();
     const isEnoughOptions = options.length >= NUM_ITEMS_SEARCH;
     const isSearchActive = isEnoughOptions && searchable !== false || Boolean(searchable);
     if (!isSearchActive) {
@@ -314,7 +321,8 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     }
   }
   #getOptionElements() {
-    return this.#$optionSlot.assignedElements();
+    const assignedElements = this.#$optionSlot.assignedElements();
+    return assignedElements.filter(isSelectMenuOption);
   }
   #getSelectedOptionIndex() {
     const elements = this.#getOptionElements();

package/select-menu-option/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchSelectMenuOptionElement } from './types';
+export declare const isSelectMenuOption: (el: Element) => el is TSinchSelectMenuOptionElement;

package/select-menu-option/utils.js

@@ -0,0 +1 @@
+export const isSelectMenuOption = el => el.localName === 'sinch-select-menu-option';

package/utils/dom.d.ts

@@ -17,6 +17,7 @@ type IntegerOptions = {
     defaultValue?: number | null;
     itemSizeMultiplier?: number;
     itemSpaceBetween?: number;
+    addExtraSpace?: boolean;
 };
 export declare const attrValueToInteger: (value: string | null, options?: IntegerOptions) => number | null;
 export declare const attrValueToPixels: (value: string | null, options?: IntegerOptions) => string;

package/utils/dom.js

@@ -72,7 +72,8 @@ export const attrValueToInteger = function (value) {
   const {
     defaultValue = null,
     itemSizeMultiplier = 1,
-    itemSpaceBetween = 0
+    itemSpaceBetween = 0,
+    addExtraSpace = false
   } = options;
   let intValue = defaultValue;
   if (value !== null) {
@@ -82,7 +83,7 @@ export const attrValueToInteger = function (value) {
     }
   }
   if (intValue !== null) {
-    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween;
+    return intValue * itemSizeMultiplier + Math.max(intValue - 1, 0) * itemSpaceBetween + (addExtraSpace ? 0.5 * itemSizeMultiplier : 0);
   }
   return null;
 };