@nectary/components 0.43.0 → 0.44.1

package/file-drop/types.d.ts

@@ -44,7 +44,7 @@ export declare type TSinchFileDropReact = TSinchElementReact<TSinchFileDropEleme
     /** Placeholder */
     placeholder: string;
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<File[]>) => void;
+    'on-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid'?: (e: CustomEvent<TSinchFileDropInvalidType>) => void;
+    'on-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
 };

package/file-picker/types.d.ts

@@ -28,5 +28,5 @@ export declare type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerE
     /** Change value handler */
     'on-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid'?: (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
+    'on-invalid': (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
 };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@nectary/components",
-  "version": "0.43.0",
+  "version": "0.44.1",
   "files": [
-    "theme.css",
-    "theme/*.css",
-    "theme/*.json",
+    "**/*/*.css",
+    "**/*/*.json",
     "**/*/*.js",
     "**/*/*.d.ts",
+    "theme.css",
     "types.d.ts",
     "colors.json"
   ],

package/segmented-icon-control/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -69,9 +69,9 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/select-menu/index.js

@@ -1,4 +1,4 @@
-import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
+import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');
@@ -159,9 +159,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/stop-events/index.js

@@ -1,17 +1,17 @@
-import { defineCustomElement, getCsvSet } from '../utils';
+import { defineCustomElement, unpackCsv } from '../utils';
 defineCustomElement('sinch-stop-events', class extends HTMLElement {
   constructor() {
     super();
     this.style.display = 'contents';
   }
   connectedCallback() {
-    const events = getCsvSet(this.getAttribute('events'));
+    const events = unpackCsv(this.getAttribute('events'));
     for (const event of events) {
       this.addEventListener(event, this.#stopEvent);
     }
   }
   disconnectedCallback() {
-    const events = getCsvSet(this.getAttribute('events'));
+    const events = unpackCsv(this.getAttribute('events'));
     for (const event of events) {
       this.removeEventListener(event, this.#stopEvent);
     }

package/tile-control/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]:not([small=false])) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -91,9 +91,9 @@ defineCustomElement('sinch-tile-control', class extends NectaryElement {
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {

package/utils/csv.d.ts

@@ -1,3 +1,5 @@
-export declare const getCsvSet: (acc: string) => Set<string>;
-export declare const updateCsv: (acc: string, value: string, setActive: boolean) => string;
+export declare const CSV_DELIMITER = ",";
+export declare const packCsv: (values: string[]) => string;
+export declare const unpackCsv: (csv: string) => string[];
+export declare const updateCsv: (csv: string, value: string, setActive: boolean) => string;
 export declare const getFirstCsvValue: (acc: string) => string | null;

package/utils/csv.js

@@ -1,21 +1,22 @@
-const unpackCsv = csv => {
-  return csv === '' ? [] : csv.split(',');
+export const CSV_DELIMITER = ',';
+export const packCsv = values => {
+  return values.join(CSV_DELIMITER);
 };
-const packCsv = values => {
-  return Array.from(values).join(',');
+export const unpackCsv = csv => {
+  return csv.length === 0 ? [] : csv.split(CSV_DELIMITER);
 };
-export const getCsvSet = acc => {
-  return new Set(unpackCsv(acc));
-};
-export const updateCsv = (acc, value, setActive) => {
-  const values = getCsvSet(acc);
+export const updateCsv = (csv, value, setActive) => {
+  const values = unpackCsv(csv);
+  const index = values.indexOf(value);
   if (setActive) {
-    values.add(value);
-  } else {
-    values.delete(value);
+    if (index < 0) {
+      values.push(value);
+    }
+  } else if (index >= 0) {
+    values.splice(index, 1);
   }
   return packCsv(values);
 };
 export const getFirstCsvValue = acc => {
-  return acc === '' ? null : unpackCsv(acc)[0];
+  return acc.length === 0 ? null : unpackCsv(acc)[0];
 };