@nectary/components 0.41.1 → 0.42.0

package/color-menu/index.js

@@ -1,8 +1,9 @@
 import '../color-swatch';
 import '../tooltip';
 import '../icons/check';
+import { getSwatchColorFg } from '../color-swatch/utils';
+import { lightColorNames, darkColorNames, vibrantColorNames } from '../theme/colors';
 import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-import { lightColorNames, darkColorNames, vibrantColorNames, NO_COLOR } from '../utils/colors';
 import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
 const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon-check class="check"></sinch-icon-check></div></sinch-tooltip></div>';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}.option{padding:12px 6px;--sinch-color-icon:var(--sinch-color-stormy-500)}.swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}.swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked]) .swatch-wrapper::after{border-color:var(--sinch-color-border-focus)}.check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-size-icon:24px}.option[data-checked] .check{display:block}</style><div id="listbox" role="presentation"></div>';
@@ -19,14 +20,12 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   #controller = null;
   #prevColorsValue = '';
   #isConnected = false;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$listbox = shadowRoot.querySelector('#listbox');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -56,7 +55,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     dispatchContextConnectEvent(this, 'keydown');
     requestAnimationFrame(this.#onMount);
   }
-
   disconnectedCallback() {
     this.#isConnected = false;
     this.#prevColorsValue = null;
@@ -64,114 +62,88 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     dispatchContextDisconnectEvent(this, 'keydown');
     this.#controller.abort();
   }
-
   static get observedAttributes() {
     return ['value', 'rows', 'cols', 'colors'];
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
-    return getAttribute(this, 'value', NO_COLOR);
+    return getAttribute(this, 'value', '');
   }
-
   set colors(value) {
     updateAttribute(this, 'colors', value);
   }
-
   get colors() {
     return getAttribute(this, 'colors');
   }
-
   set rows(value) {
     updateIntegerAttribute(this, 'rows', value);
   }
-
   get rows() {
     return getIntegerAttribute(this, 'rows', null);
   }
-
   set cols(value) {
     updateIntegerAttribute(this, 'cols', value);
   }
-
   get cols() {
     return getIntegerAttribute(this, 'cols', null);
   }
-
   get focusable() {
     return true;
   }
-
   nthItemRect(index) {
     const $item = this.#$listbox.children[index];
-
     if ($item != null) {
       return getRect($item);
     }
-
     return null;
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
           if (this.#isConnected) {
             this.#onValueChange();
           }
-
           break;
         }
-
       case 'colors':
         {
           if (this.#isConnected) {
             this.#updateColors();
           }
-
           break;
         }
-
       case 'rows':
         {
           this.#updateRows();
           break;
         }
-
       case 'cols':
         {
           if (this.#isConnected) {
             this.#updateColumns();
           }
-
           break;
         }
     }
   }
-
   #updateColors() {
     const colorsValue = this.colors;
-
     if (colorsValue === this.#prevColorsValue) {
       return;
     }
-
     this.#prevColorsValue = colorsValue;
     const colorNames = getCsvSet(colorsValue ?? `${lightColorNames},${vibrantColorNames},${darkColorNames}`);
     const fragment = document.createDocumentFragment();
-
     for (const color of colorNames) {
-      if (color === NO_COLOR) {
+      if (color.length === 0) {
         continue;
       }
-
       const optFrag = optionTemplate.content.cloneNode(true);
       const $option = optFrag.querySelector('.option');
       const $swatch = optFrag.querySelector('.swatch');
@@ -179,15 +151,15 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       updateAttribute($option, 'data-value', color);
       updateAttribute($tooltip, 'text', color);
       updateAttribute($swatch, 'name', color);
-      $option.style.setProperty('--sinch-color-icon', `var(--sinch-color-map-${color}-fg)`);
+      $option.style.setProperty('--sinch-color-icon', getSwatchColorFg(color));
       fragment.appendChild(optFrag);
     }
-
     this.#$listbox.replaceChildren(fragment);
+
     this.#updateColumns();
+
     this.#onValueChange();
   }
-
   #updateRows() {
     const rowsValue = getAttribute(this, 'rows');
     this.#$listbox.style.maxHeight = attrValueToPixels(rowsValue, {
@@ -195,7 +167,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       itemSizeMultiplier: ITEM_HEIGHT
     });
   }
-
   #updateColumns() {
     const colsValue = getAttribute(this, 'cols');
     const numItems = this.#$listbox.children.length;
@@ -206,7 +177,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       itemSizeMultiplier: ITEM_WIDTH
     });
   }
-
   #onMount = () => {
     this.#updateColors();
     this.#isConnected = true;
@@ -216,11 +186,9 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   };
   #onListboxClick = e => {
     const $elem = e.target;
-
     if ($elem === this.#$listbox) {
       return;
     }
-
     const $option = getParentOption($elem);
     this.#dispatchChangeEvent($option);
     this.#selectOption($option);
@@ -238,43 +206,36 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
   #onListboxKeyDown = e => {
     this.#handleKeydown(e);
   };
-
   #handleKeydown(e) {
     switch (e.code) {
       case 'Space':
       case 'Enter':
         {
           const $option = this.#findSelectedOption();
-
           if ($option !== null) {
             e.preventDefault();
             this.#dispatchChangeEvent($option);
           }
-
           break;
         }
-
       case 'ArrowLeft':
         {
           e.preventDefault();
           this.#selectOption(this.#getPrevOption());
           break;
         }
-
       case 'ArrowRight':
         {
           e.preventDefault();
           this.#selectOption(this.#getNextOption());
           break;
         }
-
       case 'ArrowDown':
         {
           e.preventDefault();
           this.#selectOption(this.#getNextRowOption());
           break;
         }
-
       case 'ArrowUp':
         {
           e.preventDefault();
@@ -283,104 +244,79 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
         }
     }
   }
-
   #onValueChange() {
     const value = this.value;
-
     for (const $option of this.#getOptionElements()) {
       const isChecked = value === getAttribute($option, 'data-value', '');
       updateBooleanAttribute($option, 'data-checked', isChecked);
       updateExplicitBooleanAttribute($option, 'aria-selected', isChecked);
     }
   }
-
   #getFirstOption() {
     const $options = this.#getOptionElements();
     return $options[0] ?? null;
   }
-
   #getLastOption() {
     const $options = this.#getOptionElements();
     return $options[$options.length - 1] ?? null;
   }
-
   #getNextOption() {
     const index = this.#getSelectedOptionIndex();
-
     if (index !== null) {
       const $options = this.#getOptionElements();
       return $options[(1 + index) % $options.length];
     }
-
     return this.#getFirstOption();
   }
-
   #getPrevOption() {
     const index = this.#getSelectedOptionIndex();
-
     if (index !== null) {
       const $options = this.#getOptionElements();
       return $options[(index - 1 + $options.length) % $options.length];
     }
-
     return this.#getLastOption();
   }
-
   #getNextRowOption() {
     const selectedIndex = this.#getSelectedOptionIndex();
-
     if (selectedIndex !== null) {
       const $options = this.#getOptionElements();
       const numCols = Math.min(this.cols ?? NUM_COLS_DEFAULT, $options.length);
       const numColsInLastRow = $options.length % numCols;
-
       if (numColsInLastRow > 0) {
         if (selectedIndex < $options.length - numCols) {
           return $options[selectedIndex + numCols];
         }
-
         if (numColsInLastRow > 0 && selectedIndex < $options.length - numColsInLastRow) {
           return $options[$options.length - 1];
         }
-
         return $options[selectedIndex + numColsInLastRow - $options.length];
       }
-
       return $options[(selectedIndex + numCols) % $options.length];
     }
-
     return this.#getFirstOption();
   }
-
   #getPrevRowOption() {
     const selectedIndex = this.#getSelectedOptionIndex();
-
     if (selectedIndex !== null) {
       const $options = this.#getOptionElements();
       const numCols = Math.min(this.cols ?? NUM_COLS_DEFAULT, $options.length);
       const numColsInLastRow = $options.length % numCols;
-
       if (selectedIndex < numColsInLastRow) {
         return $options[(selectedIndex - numColsInLastRow + $options.length) % $options.length];
       }
-
       if (selectedIndex < numCols) {
         return $options[(selectedIndex - numCols - numColsInLastRow + $options.length) % $options.length];
       }
-
       return $options[(selectedIndex - numCols + $options.length) % $options.length];
     }
-
     return this.#getFirstOption();
   }
-
   #selectOption($option) {
     const hasRows = this.hasAttribute('rows');
-
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-      updateBooleanAttribute($op, 'data-selected', isSelected);
 
+      updateBooleanAttribute($op, 'data-selected', isSelected);
       if (isSelected && hasRows) {
         $op.scrollIntoView?.({
           block: 'nearest'
@@ -388,62 +324,48 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       }
     }
   }
-
   #getOptionElements() {
     return Array.from(this.#$listbox.children);
   }
-
   #getSelectedOptionIndex() {
     const elements = this.#getOptionElements();
-
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-
       if (getBooleanAttribute(el, 'data-selected')) {
         return i;
       }
     }
-
     return null;
   }
-
   #findSelectedOption() {
     const elements = this.#getOptionElements();
-
     for (const el of elements) {
       if (getBooleanAttribute(el, 'data-selected')) {
         return el;
       }
     }
-
     return null;
   }
-
   #findCheckedOption() {
     const elements = this.#getOptionElements();
     const value = this.value;
-
     for (const $el of elements) {
       if (getAttribute($el, 'data-value') === value) {
         return $el;
       }
     }
-
     return null;
   }
-
   #dispatchChangeEvent($opt) {
     if ($opt === null) {
       return;
     }
-
     if ($opt !== null) {
       this.dispatchEvent(new CustomEvent('-change', {
         detail: getAttribute($opt, 'data-value')
       }));
     }
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/color-menu/utils.js

@@ -1,15 +1,11 @@
 export const getParentOption = $element => {
   let $el = $element;
-
   while (!$el.hasAttribute('data-value')) {
     const parent = $el.parentElement;
-
     if (parent === null) {
       return null;
     }
-
     $el = parent;
   }
-
   return $el;
 };

package/color-swatch/index.js

@@ -1,41 +1,39 @@
 import '../icons/cancel';
 import '../text';
 import { defineCustomElement, NectaryElement, setClass, getAttribute, updateAttribute } from '../utils';
-import { NO_COLOR } from '../utils/colors';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-size-icon,32px);height:var(--sinch-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-color-map-light-orange-bg),var(--sinch-color-map-light-yellow-bg),var(--sinch-color-map-light-green-bg),var(--sinch-color-map-light-blue-bg),var(--sinch-color-map-light-violet-bg))}</style><div id="wrapper"></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-size-icon,32px);height:var(--sinch-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-color-swatch-color-light-orange-bg),var(--sinch-color-swatch-color-light-yellow-bg),var(--sinch-color-swatch-color-light-green-bg),var(--sinch-color-swatch-color-light-blue-bg),var(--sinch-color-swatch-color-light-violet-bg))}</style><div id="wrapper"></div>';
+import { assertSwatchColor, getSwatchColorBg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-color-swatch', class extends NectaryElement {
   #$wrapper;
-
+  #isConnected = false;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
   }
-
   connectedCallback() {
+    this.#isConnected = true;
     this.#updateColor();
   }
-
+  disconnectedCallback() {
+    this.#isConnected = false;
+  }
   get name() {
-    return getAttribute(this, 'name', NO_COLOR);
+    return getAttribute(this, 'name');
   }
-
   set name(value) {
     updateAttribute(this, 'name', value);
   }
-
   static get observedAttributes() {
     return ['name'];
   }
-
   attributeChangedCallback(name, oldValue, newVal) {
     if (oldValue === newVal) {
       return;
     }
-
     switch (name) {
       case 'name':
         {
@@ -44,17 +42,19 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
         }
     }
   }
-
   #updateColor() {
+    if (!this.#isConnected) {
+      return;
+    }
     const colorName = this.name;
-
-    if (colorName !== NO_COLOR) {
-      this.#$wrapper.style.setProperty('background-color', `var(--sinch-color-map-${colorName}-bg)`);
+    if (colorName !== null && colorName.length > 0) {
+      assertSwatchColor(this, colorName);
+      const bg = getSwatchColorBg(colorName);
+      this.#$wrapper.style.setProperty('background-color', bg);
+      setClass(this.#$wrapper, 'no-color', false);
     } else {
       this.#$wrapper.style.removeProperty('background-color');
+      setClass(this.#$wrapper, 'no-color', true);
     }
-
-    setClass(this.#$wrapper, 'no-color', colorName === NO_COLOR);
   }
-
 });

package/color-swatch/types.d.ts

@@ -1,11 +1,11 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchColorSwatchElement = HTMLElement & {
     /** Color name */
-    name: string;
+    name: string | null;
     /** Color name */
     setAttribute(name: 'name', value: string): void;
 };
 export declare type TSinchColorSwatchReact = TSinchElementReact<TSinchColorSwatchElement> & {
     /** Color name */
-    name: string;
+    name?: string;
 };

package/color-swatch/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const getSwatchColorBg: (id: string) => string;
+export declare const getSwatchColorFg: (id: string) => string;
+export declare const assertSwatchColor: (root: Element, id: string | null) => void;

package/color-swatch/utils.js

@@ -0,0 +1,11 @@
+export const getSwatchColorBg = id => {
+  return `var(--sinch-color-swatch-color-${id}-bg)`;
+};
+export const getSwatchColorFg = id => {
+  return `var(--sinch-color-swatch-color-${id}-fg)`;
+};
+export const assertSwatchColor = (root, id) => {
+  if (id === null || window.getComputedStyle(root).getPropertyValue(`--sinch-color-swatch-color-${id}-bg`).length === 0) {
+    throw new Error(`Invalid sinch-color-swatch color name: ${id}`);
+  }
+};