@nectary/components 1.4.0 → 2.0.0

package/color-menu-option/index.js

@@ -0,0 +1,52 @@
+import '../color-swatch';
+import '../tooltip';
+import '../icon';
+import { getSwatchColorFg } from '../color-swatch/utils';
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:44px;height:56px;padding:12px 6px;box-sizing:border-box;--sinch-global-color-icon:var(--sinch-color-menu-color-icon)}#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}:host([data-selected]:not([data-checked])) #swatch-wrapper::after{border-color:var(--sinch-comp-color-swatch-color-outline-focus)}#check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-global-size-icon:24px}:host([data-checked]) #check{display:block}</style><div id="wrapper"><sinch-tooltip id="tooltip"><div id="swatch-wrapper"><sinch-color-swatch id="swatch"></sinch-color-swatch><sinch-icon id="check" name="check"></sinch-icon></div></sinch-tooltip></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-color-menu-option', class extends NectaryElement {
+  #$wrapper;
+  #$tooltip;
+  #$swatch;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#$tooltip = shadowRoot.querySelector('#tooltip');
+    this.#$swatch = shadowRoot.querySelector('#swatch');
+  }
+  connectedCallback() {
+    this.role = 'option';
+  }
+  disconnectedCallback() {}
+  static get observedAttributes() {
+    return ['value'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'value':
+        {
+          updateAttribute(this.#$tooltip, 'text', newVal);
+          updateAttribute(this.#$swatch, 'name', newVal);
+          if (newVal !== null) {
+            this.#$wrapper.style.setProperty('--sinch-global-color-icon', getSwatchColorFg(newVal));
+          } else {
+            this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
+          }
+          break;
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+});

package/color-menu-option/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchColorMenuOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+};
+export type TSinchColorMenuOptionReact = TSinchElementReact<TSinchColorMenuOptionElement> & {
+    /** Value */
+    value: string;
+};

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

@@ -0,0 +1 @@
+export declare const getParentOption: ($element: Element) => Element | null;

package/color-menu-option/utils.js

@@ -0,0 +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,6 +1,6 @@
 import '../text';
 import { defineCustomElement, NectaryElement, setClass, getAttribute, updateAttribute } from '../utils';
-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>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{width:var(--sinch-global-size-icon,32px);height:var(--sinch-global-size-icon,32px);border-radius:50%}#wrapper.no-color{background:linear-gradient(45deg,var(--sinch-ref-color-complementary-orange-200),var(--sinch-ref-color-complementary-bolt-200),var(--sinch-ref-color-complementary-grass-200),var(--sinch-ref-color-complementary-night-200),var(--sinch-ref-color-complementary-violet-200))}</style><div id="wrapper"></div>';
 import { assertSwatchColor, getSwatchColorBg } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/color-swatch/utils.js

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

package/date-picker/index.js

@@ -1,8 +1,8 @@
 import '../icon-button';
 import '../icon';
 import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCssVars, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-s);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, getTargetAttribute, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-comp-date-picker-font-day);width:24px;height:24px;line-height:22px;color:var(--sinch-comp-date-picker-day-color-default-text-initial);background-color:var(--sinch-comp-date-picker-day-color-default-background-initial);border:1px solid var(--sinch-comp-date-picker-day-color-default-border-initial);border-radius:var(--sinch-comp-date-picker-day-shape-radius);text-align:center;box-sizing:border-box;user-select:none;cursor:pointer}.day:focus-visible{outline:1px solid var(--sinch-comp-date-picker-day-color-default-outline-focus);outline-offset:1px}.day:disabled{cursor:initial;color:var(--sinch-comp-date-picker-day-color-disabled-text-initial)}.day:enabled:hover{background-color:var(--sinch-comp-date-picker-day-color-default-background-hover)}.day:enabled.range{background-color:var(--sinch-comp-date-picker-day-color-default-range-background)}.day:enabled.selected{color:var(--sinch-comp-date-picker-day-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-day-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-day-color-checked-border-initial)}.day.today{font:var(--sinch-comp-date-picker-font-today);color:var(--sinch-comp-date-picker-today-color-default-text-initial);background-color:var(--sinch-comp-date-picker-today-color-default-background-initial);border-color:var(--sinch-comp-date-picker-today-color-default-border-initial)}.day.today:hover{background-color:var(--sinch-comp-date-picker-today-color-default-background-hover)}.day.today:disabled{color:var(--sinch-comp-date-picker-today-color-disabled-text-initial);border-color:var(--sinch-comp-date-picker-today-color-disabled-border-initial)}.day.today.selected{color:var(--sinch-comp-date-picker-today-color-checked-text-initial);background-color:var(--sinch-comp-date-picker-today-color-checked-background-initial);border-color:var(--sinch-comp-date-picker-today-color-checked-border-initial)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-comp-date-picker-font-weekday);color:var(--sinch-comp-date-picker-weekday-color-default-text-initial);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize;--sinch-com-text-font:var(--sinch-comp-date-picker-font-header);--sinch-global-color-text:var(--sinch-comp-date-picker-header-color-default-text-initial)}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon id="icon-prev-year" slot="icon" name="keyboard_double_arrow_left"></sinch-icon></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon id="icon-prev-month" slot="icon" name="keyboard_arrow_left"></sinch-icon></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon id="icon-next-month" slot="icon" name="keyboard_arrow_right"></sinch-icon></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon id="icon-next-year" slot="icon" name="keyboard_double_arrow_right"></sinch-icon></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
 import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -20,10 +20,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
   #$nextMonth;
   #$prevYear;
   #$nextYear;
-  #$iconPrevMonth;
-  #$iconNextMonth;
-  #$iconPrevYear;
-  #$iconNextYear;
   #$date;
   #monthNames;
   #controller = null;
@@ -38,10 +34,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.#$nextYear = shadowRoot.querySelector('#next-year');
     this.#$date = shadowRoot.querySelector('#date');
     this.#$month = shadowRoot.querySelector('#month');
-    this.#$iconPrevMonth = shadowRoot.querySelector('#icon-prev-month');
-    this.#$iconNextMonth = shadowRoot.querySelector('#icon-next-month');
-    this.#$iconPrevYear = shadowRoot.querySelector('#icon-prev-year');
-    this.#$iconNextYear = shadowRoot.querySelector('#icon-next-year');
     this.#$days = [];
     this.#$weeks = [];
     this.#monthNames = [];
@@ -65,7 +57,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
     this.#$nextYear.addEventListener('click', this.#onNextYearClick, options);
     this.#$month.addEventListener('click', this.#onDateClick, options);
     this.addEventListener('-change', this.#onChangeReactHandler, options);
-    this.#updateIcons();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -162,9 +153,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
         }
     }
   }
-  get nodeName() {
-    return 'select';
-  }
   set locale(value) {
     updateAttribute(this, 'locale', value);
   }
@@ -402,13 +390,6 @@ defineCustomElement('sinch-date-picker', class extends NectaryElement {
       setClass(this.#$weeks[wi], 'empty', isEmptyWeek);
     }
   }
-  #updateIcons() {
-    const names = getCssVars(this, ['--sinch-date-picker-icon-prev-month', '--sinch-date-picker-icon-next-month', '--sinch-date-picker-icon-prev-year', '--sinch-date-picker-icon-next-year']);
-    updateAttribute(this.#$iconPrevMonth, 'name', names[0]);
-    updateAttribute(this.#$iconNextMonth, 'name', names[1]);
-    updateAttribute(this.#$iconPrevYear, 'name', names[2]);
-    updateAttribute(this.#$iconNextYear, 'name', names[3]);
-  }
   #subscribeRangeHover() {
     if (!this.#isHoverSubscribed) {
       this.#$month.addEventListener('mouseover', this.#onDateMouseEnter);

package/date-picker/types.d.ts

@@ -1,5 +1,4 @@
 import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
 export type TSinchDatePickerElement = HTMLElement & {
     /** Date value in ISO 8601 format */
     value: string;
@@ -66,8 +65,6 @@ export type TSinchDatePickerReact = TSinchElementReact<TSinchDatePickerElement>
     'prev-month-aria-label': string;
     /** Label that is used for a11y */
     'next-month-aria-label': string;
-    /** @deprecated Change value handler, return date in ISO 8601 format */
-    onChange?: (e: SyntheticEvent<TSinchDatePickerElement, CustomEvent<string>>) => void;
     /** Change value handler, return date in ISO 8601 format */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/dialog/index.js

@@ -3,12 +3,11 @@ import '../icon';
 import '../stop-events';
 import '../title';
 import { disableScroll, enableScroll } from '../pop/utils';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, getCssVar, setClass, isTargetEqual } from '../utils';
-const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{transform:translate(4px,-4px)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute, setClass, isTargetEqual } from '../utils';
+const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:50vh}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-comp-dialog-max-width);max-height:unset;border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow)}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;max-height:var(--sinch-comp-dialog-max-height);padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{position:relative;left:4px;top:-4px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}</style><dialog id="dialog"><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon id="icon-close" slot="icon" name="close"></sinch-icon></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {
-  #$iconClose;
   #$dialog;
   #$closeButton;
   #$caption;
@@ -22,7 +21,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#$dialog = shadowRoot.querySelector('#dialog');
     this.#$closeButton = shadowRoot.querySelector('#close');
     this.#$caption = shadowRoot.querySelector('#caption');
-    this.#$iconClose = shadowRoot.querySelector('#icon-close');
     this.#$actionWrapper = shadowRoot.querySelector('#action');
     this.#$actionSlot = shadowRoot.querySelector('slot[name="buttons"]');
   }
@@ -38,7 +36,6 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     this.#$dialog.addEventListener('cancel', this.#onCancel, options);
     this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange, options);
     this.addEventListener('-close', this.#onCloseReactHandler, options);
-    updateAttribute(this.#$iconClose, 'name', getCssVar(this, '--sinch-dialog-icon-close'));
     this.#onActionSlotChange();
     if (getBooleanAttribute(this, 'open')) {
       this.#onExpand();

package/dialog/types.d.ts

@@ -21,8 +21,6 @@ export type TSinchDialogReact = TSinchElementReact<TSinchDialogElement> & {
     'aria-label': string;
     /** Close button label that is used for a11y */
     'close-aria-label': string;
-    /** @deprecated close event handler */
-    onClose?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
     /** close event handler */
     'on-close'?: (e: CustomEvent<TSinchDialogCloseDetail>) => void;
 };

package/emoji/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-size-icon,48px);height:var(--sinch-size-icon,48px)}</style><img id="image" src="" alt="" loading="lazy"/>';
+const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px)}</style><img id="image" src="" alt="" loading="lazy"/>';
 import { getEmojiUrl } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/emoji-picker/index.d.ts

@@ -2,6 +2,7 @@ import '../input';
 import '../icon-button';
 import '../color-swatch';
 import '../color-menu';
+import '../color-menu-option';
 import '../popover';
 import '../tabs';
 import '../tabs-icon-option';

package/emoji-picker/index.js

@@ -2,16 +2,17 @@ import '../input';
 import '../icon-button';
 import '../color-swatch';
 import '../color-menu';
+import '../color-menu-option';
 import '../popover';
 import '../tabs';
 import '../tabs-icon-option';
 import '../emoji';
 import '../text';
 import '../icon';
-import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext, debounceTimeout, setClass, getCssVar, getCssVars } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext, debounceTimeout, setClass } from '../utils';
 import dataJson from './data.json';
-const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0;--sinch-icon-font-variation-settings:var(--sinch-emoji-picker-icon-font-variation-settings)}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon"></sinch-icon></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
-const groupIconTagNames = ['--sinch-emoji-picker-icon-emoji-emotions', '--sinch-emoji-picker-icon-emoji-people', '--sinch-emoji-picker-icon-emoji-animals-nature', '--sinch-emoji-picker-icon-emoji-food-drinks', '--sinch-emoji-picker-icon-emoji-travel-places', '--sinch-emoji-picker-icon-emoji-sports-activities', '--sinch-emoji-picker-icon-emoji-objects', '--sinch-emoji-picker-icon-emoji-symbols-flags'];
+const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0;--sinch-comp-icon-font-variation-settings:"FILL" 0}#toolbar{display:flex;gap:8px;padding:0 12px}#search{flex:1;min-width:0}#search-clear:not(.active){display:none}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}#not-found{display:none;width:100%;height:48px;align-items:center;justify-content:center;pointer-events:none;user-select:none;--sinch-global-color-text:var(--sinch-comp-emoji-picker-color-default-text-not-found);--sinch-comp-text-font:var(--sinch-comp-emoji-picker-font-not-found)}#not-found.active{display:flex}</style><div id="wrapper"><div id="toolbar"><sinch-input id="search" size="l" aria-label="Search emojis"><sinch-icon id="icon-search" slot="icon" name="search"></sinch-icon><sinch-icon-button id="search-clear" slot="right" aria-label="Clear"><sinch-icon slot="icon" name="close"></sinch-icon></sinch-icon-button></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skintone-default"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skintone-default" aria-label="Emoji skin tone menu"><sinch-color-menu-option value="skintone-default"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light"></sinch-color-menu-option><sinch-color-menu-option value="skintone-light-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium"></sinch-color-menu-option><sinch-color-menu-option value="skintone-medium-dark"></sinch-color-menu-option><sinch-color-menu-option value="skintone-dark"></sinch-color-menu-option></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div><div id="not-found"><sinch-text type="m">No results</sinch-text></div></div></div>';
+const groupIconNames = ['sentiment_satisfied', 'emoji_people', 'pets', 'emoji_food_beverage', 'emoji_transportation', 'sports_tennis', 'emoji_objects', 'emoji_symbols'];
 const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
 const data = dataJson;
 const template = document.createElement('template');
@@ -20,14 +21,14 @@ const SEARCH_DEBOUNCE_TIMEOUT = 300;
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   #$tabs;
-  #$input;
+  #$searchInput;
+  #$searchClearButton;
   #$skinPopover;
   #$skinMenu;
   #$skinSwatch;
   #$skinButton;
   #$list;
   #$notFound;
-  #$iconSearch;
   #controller = null;
   #$sh;
   #searchDebounce;
@@ -39,14 +40,14 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$sh = shadowRoot;
     this.#$tabs = shadowRoot.querySelector('#tabs');
-    this.#$input = shadowRoot.querySelector('#input');
+    this.#$searchInput = shadowRoot.querySelector('#search');
+    this.#$searchClearButton = shadowRoot.querySelector('#search-clear');
     this.#$skinPopover = shadowRoot.querySelector('#skin-popover');
     this.#$skinMenu = shadowRoot.querySelector('#skin-menu');
     this.#$skinSwatch = shadowRoot.querySelector('#skin-swatch');
     this.#$skinButton = shadowRoot.querySelector('#skin-button');
     this.#$list = shadowRoot.querySelector('#list');
     this.#$notFound = shadowRoot.querySelector('#not-found');
-    this.#$iconSearch = shadowRoot.querySelector('#icon-search');
     this.#searchDebounce = debounceTimeout(SEARCH_DEBOUNCE_TIMEOUT)(this.#updateSearch);
   }
   connectedCallback() {
@@ -57,7 +58,10 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#$tabs.addEventListener('-change', this.#onTabsChange, {
       signal
     });
-    this.#$input.addEventListener('-change', this.#onSearchChange, {
+    this.#$searchInput.addEventListener('-change', this.#onSearchChange, {
+      signal
+    });
+    this.#$searchClearButton.addEventListener('-click', this.#onSearchClearClick, {
       signal
     });
     this.addEventListener('keydown', this.#onListboxKeyDown, {
@@ -78,7 +82,6 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.addEventListener('-change', this.#onChangeReactHandler, {
       signal
     });
-    updateAttribute(this.#$iconSearch, 'name', getCssVar(this, '--sinch-emoji-picker-icon-search'));
     subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
     subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
     this.#updateTabs();
@@ -92,10 +95,10 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     return getRect(this.#$skinButton);
   }
   get searchInputRect() {
-    return getRect(this.#$input);
+    return getRect(this.#$searchInput);
   }
   get searchClearButtonRect() {
-    return this.#$input.clearButtonRect;
+    return getRect(this.#$searchClearButton);
   }
   nthSkinToneRect(index) {
     return this.#$skinMenu.nthItemRect(index);
@@ -147,12 +150,19 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
   #onTabsChange = e => {
     const value = e.detail;
     updateAttribute(this.#$tabs, 'value', value);
-    updateAttribute(this.#$input, 'value', '');
+    updateAttribute(this.#$searchInput, 'value', '');
     this.#updateEmojis();
   };
   #onSearchChange = e => {
-    this.#$input.value = e.detail;
+    this.#$searchInput.value = e.detail;
+    this.#searchDebounce.fn();
+    setClass(this.#$searchClearButton, 'active', e.detail.length > 0);
+  };
+  #onSearchClearClick = () => {
+    this.#$searchInput.value = '';
+    this.#$searchInput.focus();
     this.#searchDebounce.fn();
+    setClass(this.#$searchClearButton, 'active', false);
   };
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
@@ -164,7 +174,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     return Reflect.has(this.#$sh, 'createElement') ? this.#$sh : document;
   }
   #updateSearch = () => {
-    const value = this.#$input.value;
+    const value = this.#$searchInput.value;
     if (value.length < MIN_SEARCH_LENGTH) {
       if (this.#isSearchMode()) {
         if (this.#prevTabsValue !== null) {
@@ -185,13 +195,12 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     const doc = this.#getDocumentRoot();
     const tabsFragment = document.createDocumentFragment();
     const activeTab = data[0].name;
-    const iconNames = getCssVars(this, groupIconTagNames);
     for (let i = 0; i < data.length; i++) {
       const group = data[i];
       const tabOption = doc.createElement('sinch-tabs-icon-option');
       const icon = doc.createElement('sinch-icon');
       icon.setAttribute('slot', 'icon');
-      updateAttribute(icon, 'name', iconNames[i]);
+      updateAttribute(icon, 'name', groupIconNames[i]);
       tabOption.setAttribute('value', group.name);
       tabOption.setAttribute('aria-label', groupLabels[i]);
       tabOption.appendChild(icon);
@@ -233,7 +242,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     }
   }
   #updateSearchEmojis() {
-    const searchValue = this.#$input.value;
+    const searchValue = this.#$searchInput.value;
     if (searchValue.length < MIN_SEARCH_LENGTH) {
       return;
     }
@@ -277,32 +286,32 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
     this.#$skinSwatch.name = e.detail;
     this.#$skinMenu.value = e.detail;
     switch (e.detail) {
-      case 'skin-tone-0':
+      case 'skintone-default':
         {
           this.#currentSkinTone = 0;
           break;
         }
-      case 'skin-tone-10':
+      case 'skintone-light':
         {
           this.#currentSkinTone = 1;
           break;
         }
-      case 'skin-tone-20':
+      case 'skintone-light-medium':
         {
           this.#currentSkinTone = 2;
           break;
         }
-      case 'skin-tone-30':
+      case 'skintone-medium':
         {
           this.#currentSkinTone = 3;
           break;
         }
-      case 'skin-tone-40':
+      case 'skintone-medium-dark':
         {
           this.#currentSkinTone = 4;
           break;
         }
-      case 'skin-tone-50':
+      case 'skintone-dark':
         {
           this.#currentSkinTone = 5;
           break;

package/field/index.js

@@ -1,5 +1,5 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-text-s);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-text-xs);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-field', class extends NectaryElement {
@@ -28,18 +28,49 @@ defineCustomElement('sinch-field', class extends NectaryElement {
     const {
       signal
     } = this.#controller;
-    this.#$label.addEventListener('click', this.#onLabelClick, {
+    const options = {
       signal
-    });
-    this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, {
-      signal
-    });
+    };
+    this.#$label.addEventListener('click', this.#onLabelClick, options);
+    this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
   }
   static get observedAttributes() {
-    return ['label', 'optionaltext', 'additionaltext', 'invalidtext'];
+    return ['label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'label':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'optionaltext':
+        {
+          this.#$optionalText.textContent = newVal;
+          break;
+        }
+      case 'additionaltext':
+        {
+          this.#$additionalText.textContent = newVal;
+          break;
+        }
+      case 'invalidtext':
+        {
+          this.#$invalidText.textContent = newVal;
+          break;
+        }
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
   }
   set label(value) {
     updateAttribute(this, 'label', value);
@@ -71,30 +102,6 @@ defineCustomElement('sinch-field', class extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'label':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'optionaltext':
-        {
-          this.#$optionalText.textContent = newVal;
-          break;
-        }
-      case 'additionaltext':
-        {
-          this.#$additionalText.textContent = newVal;
-          break;
-        }
-      case 'invalidtext':
-        {
-          this.#$invalidText.textContent = newVal;
-          break;
-        }
-    }
-  }
   #onLabelClick = () => {
     getFirstSlotElement(this.#$inputSlot)?.focus?.();
   };

package/file-drop/index.js

@@ -1,7 +1,7 @@
 import '../text';
 import '../file-picker';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, 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-shape-radius-m);background-color:var(--sinch-color-bg-primary-contrast)}#wrapper.drop.valid{background-color:var(--sinch-color-bg-secondary-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-border-focus);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);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>';
+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 template = document.createElement('template');
 template.innerHTML = templateHTML;