@nectary/components 2.4.0

package/color-menu/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-menu-option/index.d.ts

@@ -0,0 +1,13 @@
+import '../color-swatch';
+import '../tooltip';
+import type { TSinchColorMenuOptionElement, TSinchColorMenuOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-menu-option': TSinchColorMenuOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-menu-option': TSinchColorMenuOptionElement;
+    }
+}

package/color-menu-option/index.js

@@ -0,0 +1,48 @@
+import '../color-swatch';
+import '../tooltip';
+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}#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 var(--sinch-comp-color-menu-option-color-default-border-initial);border-radius:50%;pointer-events:none}:host([data-checked]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-selected)}:host([data-selected]) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-focus)}:host(:hover) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-hover)}:host(:active) #swatch-wrapper::after{border-color:var(--sinch-comp-color-menu-option-color-default-border-active)}</style><div id="wrapper"><sinch-tooltip id="tooltip"><div id="swatch-wrapper"><sinch-color-swatch id="swatch"></sinch-color-swatch></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, _, newVal) {
+    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,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchColorMenuOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+};
+export type TSinchColorMenuOptionReact = TSinchElementReact<TSinchColorMenuOptionElement> & {
+    /** Value */
+    value: string;
+};

package/color-menu-option/types.js

@@ -0,0 +1 @@
+export {};

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.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchColorSwatchElement, TSinchColorSwatchReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-swatch': TSinchColorSwatchReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-swatch': TSinchColorSwatchElement;
+    }
+}

package/color-swatch/index.js

@@ -0,0 +1,54 @@
+import '../text';
+import { defineCustomElement, NectaryElement, setClass, getAttribute, updateAttribute } from '../utils';
+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 { getSwatchColorBg } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-color-swatch', class extends NectaryElement {
+  #$wrapper;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateColor();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  static get observedAttributes() {
+    return ['name'];
+  }
+  attributeChangedCallback(name) {
+    switch (name) {
+      case 'name':
+        {
+          this.#updateColor();
+          break;
+        }
+    }
+  }
+  get name() {
+    return getAttribute(this, 'name');
+  }
+  set name(value) {
+    updateAttribute(this, 'name', value);
+  }
+  #updateColor() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const colorName = this.name;
+    if (colorName !== null && colorName.length > 0) {
+      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);
+    }
+  }
+});

package/color-swatch/types.d.ts

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

package/color-swatch/types.js

@@ -0,0 +1 @@
+export {};

package/color-swatch/utils.d.ts

@@ -0,0 +1,2 @@
+export declare const getSwatchColorBg: (id: string) => string;
+export declare const getSwatchColorFg: (id: string) => string;

package/color-swatch/utils.js

@@ -0,0 +1,6 @@
+export const getSwatchColorBg = id => {
+  return `var(--sinch-comp-color-swatch-color-${id}-background)`;
+};
+export const getSwatchColorFg = id => {
+  return `var(--sinch-comp-color-swatch-color-${id}-foreground)`;
+};

package/colors.json

@@ -0,0 +1,88 @@
+{
+  "colorHoney700": "#CC8800",
+  "colorHoney600": "#FFAA00",
+  "colorHoney500": "#FFBE3C",
+  "colorHoney400": "#FFCC66",
+  "colorHoney300": "#FFDF9E",
+  "colorHoney200": "#FCECCB",
+  "colorHoney100": "#FFF7E6",
+  "colorTropical700": "#003D3D",
+  "colorTropical600": "#005757",
+  "colorTropical500": "#007171",
+  "colorTropical400": "#059688",
+  "colorTropical300": "#66AAAA",
+  "colorTropical200": "#A7D5C2",
+  "colorTropical100": "#DCEDE1",
+  "colorTropical50": "#E5F1F1",
+  "colorStormy700": "#000000",
+  "colorStormy600": "#171717",
+  "colorStormy500": "#242424",
+  "colorStormy400": "#595959",
+  "colorStormy300": "#767676",
+  "colorStormy200": "#8C8C8C",
+  "colorStormy100": "#A6A6A6",
+  "colorOcean700": "#1B3E65",
+  "colorOcean600": "#1686CB",
+  "colorOcean500": "#3AA7EA",
+  "colorOcean400": "#6EBBEE",
+  "colorOcean300": "#A1D5F5",
+  "colorOcean200": "#C8E6F9",
+  "colorOcean100": "#DEF2FF",
+  "colorOcean50": "#F3FAFE",
+  "colorSnow700": "#CCCCCC",
+  "colorSnow600": "#D9D9D9",
+  "colorSnow500": "#E0E0E0",
+  "colorSnow400": "#F2F2F2",
+  "colorSnow200": "#F8F8F8",
+  "colorSnow100": "#FFFFFF",
+  "colorRaspberry700": "#882024",
+  "colorRaspberry600": "#D13D42",
+  "colorRaspberry500": "#EF5858",
+  "colorRaspberry400": "#F38686",
+  "colorRaspberry300": "#FFB8B8",
+  "colorRaspberry200": "#FBD5D5",
+  "colorRaspberry100": "#FFE8E4",
+  "colorRaspberry50": "#FFF6F5",
+  "colorNight700": "#1223a1",
+  "colorNight400": "#3247E9",
+  "colorNight200": "#D1D6FA",
+  "colorGrass700": "#006602",
+  "colorGrass400": "#39B93D",
+  "colorGrass200": "#B4E4B5",
+  "colorDirt700": "#363230",
+  "colorDirt400": "#828282",
+  "colorDirt200": "#E0DDDC",
+  "colorCandy700": "#981b77",
+  "colorCandy400": "#E467C3",
+  "colorCandy200": "#F6CBEA",
+  "colorMud700": "#6d4e46",
+  "colorMud400": "#8B6559",
+  "colorMud200": "#D7C6C1",
+  "colorOrange700": "#974302",
+  "colorOrange400": "#FF8C34",
+  "colorOrange200": "#FFD4B3",
+  "colorBolt700": "#805500",
+  "colorBolt400": "#FFBE3C",
+  "colorBolt200": "#FFE6B3",
+  "colorViolet700": "#4F1B98",
+  "colorViolet400": "#9E67E4",
+  "colorViolet200": "#DECBF6",
+  "colorOlive700": "#275D33",
+  "colorOlive400": "#46A65A",
+  "colorOlive200": "#D7F1D8",
+  "colorCeltic700": "#003B7E",
+  "colorCeltic400": "#2071CE",
+  "colorCeltic200": "#D5E5F8",
+  "colorJasper700": "#B71C1C",
+  "colorJasper400": "#F44336",
+  "colorJasper200": "#FFCDD2",
+  "colorPumpkin700": "#9C2E00",
+  "colorPumpkin400": "#F35B1C",
+  "colorPumpkin200": "#FFE8D6",
+  "colorColorSkinTone0": "#FFCC4D",
+  "colorColorSkinTone10": "#F7DECE",
+  "colorColorSkinTone20": "#F3D2A2",
+  "colorColorSkinTone30": "#D4AB88",
+  "colorColorSkinTone40": "#AF7E57",
+  "colorColorSkinTone50": "#7C533E"
+}

package/date-picker/index.d.ts

@@ -0,0 +1,14 @@
+import '../icon-button';
+import '../icon';
+import '../text';
+import type { TSinchDatePickerElement, TSinchDatePickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-date-picker': TSinchDatePickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-date-picker': TSinchDatePickerElement;
+    }
+}