@nectary/components 4.12.1 → 5.0.1

package/color-menu-option/index.js

@@ -1,11 +1,12 @@
-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');
+import "../color-swatch/index.js";
+import "../tooltip/index.js";
+import { getSwatchColorFg } from "../color-swatch/utils.js";
+import { updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  width: 44px;\n  height: 56px;\n  padding: 12px 6px;\n  box-sizing: border-box;\n}\n\n#swatch-wrapper {\n  position: relative;\n  cursor: pointer;\n  width: 32px;\n  height: 32px;\n}\n\n#swatch-wrapper::after {\n  content: "";\n  position: absolute;\n  width: 34px;\n  height: 34px;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-color-menu-option-color-default-border-initial);\n  border-radius: 50%;\n  pointer-events: none;\n}\n\n:host([data-checked]) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-selected);\n}\n\n:host([data-selected]) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-focus);\n}\n\n:host(:hover) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-hover);\n}\n\n:host(:active) #swatch-wrapper::after {\n  border-color: var(--sinch-comp-color-menu-option-color-default-border-active);\n}\n</style>\n\n<div id="wrapper">\n  <sinch-tooltip id="tooltip">\n    <div id="swatch-wrapper">\n      <sinch-color-swatch id="swatch"></sinch-color-swatch>\n    </div>\n  </sinch-tooltip>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ColorMenuOption extends NectaryElement {
+class ColorMenuOption extends NectaryElement {
   #$wrapper;
   #$tooltip;
   #$swatch;
@@ -13,37 +14,40 @@ export class ColorMenuOption extends NectaryElement {
     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');
+    this.#$wrapper = shadowRoot.querySelector("#wrapper");
+    this.#$tooltip = shadowRoot.querySelector("#tooltip");
+    this.#$swatch = shadowRoot.querySelector("#swatch");
   }
   connectedCallback() {
-    this.setAttribute('role', 'option');
+    this.setAttribute("role", "option");
+  }
+  disconnectedCallback() {
   }
-  disconnectedCallback() {}
   static get observedAttributes() {
-    return ['value'];
+    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;
+      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);
+    updateAttribute(this, "value", value);
   }
   get value() {
-    return getAttribute(this, 'value', '');
+    return getAttribute(this, "value", "");
   }
 }
-defineCustomElement('sinch-color-menu-option', ColorMenuOption);
+defineCustomElement("sinch-color-menu-option", ColorMenuOption);
+export {
+  ColorMenuOption
+};

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

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchColorMenuOptionProps = {
     /** Value */
     value: string;
@@ -16,3 +16,23 @@ export type TSinchColorMenuOption = {
 };
 export type TSinchColorMenuOptionElement = NectaryComponentVanillaByType<TSinchColorMenuOption>;
 export type TSinchColorMenuOptionReact = NectaryComponentReactByType<TSinchColorMenuOption>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-color-menu-option': TSinchColorMenuOption;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-menu-option': NectaryComponentVanilla<'sinch-color-menu-option'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-color-menu-option': NectaryComponentReact<'sinch-color-menu-option'>;
+        }
+    }
+}

package/color-menu-option/types.js

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

package/color-menu-option/utils.js

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

package/color-swatch/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/color-swatch/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-color-swatch");

package/color-swatch/index.d.ts

@@ -1,7 +1,6 @@
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchColorSwatch } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class ColorSwatch extends NectaryElement {
     #private;
     constructor();
@@ -12,23 +11,3 @@ export declare class ColorSwatch extends NectaryElement {
     get name(): string | null;
     set name(value: string | null);
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-color-swatch': TSinchColorSwatch;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-color-swatch': NectaryComponentVanilla<'sinch-color-swatch'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-color-swatch': NectaryComponentReact<'sinch-color-swatch'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-color-swatch': NectaryComponentReact<'sinch-color-swatch'>;
-        }
-    }
-}

package/color-swatch/index.js

@@ -1,16 +1,17 @@
-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-violet-200),var(--sinch-ref-color-honey-200),var(--sinch-ref-color-grass-200),var(--sinch-ref-color-ocean-200),var(--sinch-ref-color-violet-200))}</style><div id="wrapper"></div>';
-import { getSwatchColorBg } from './utils';
-const template = document.createElement('template');
+import "../text/index.js";
+import { getAttribute, updateAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getSwatchColorBg } from "./utils.js";
+const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  #wrapper {\n    width: var(--sinch-global-size-icon, 32px);\n    height: var(--sinch-global-size-icon, 32px);\n    border-radius: 50%;\n  }\n\n  #wrapper.no-color {\n    background:\n      linear-gradient(\n        45deg,\n        var(--sinch-ref-color-violet-200),\n        var(--sinch-ref-color-honey-200),\n        var(--sinch-ref-color-grass-200),\n        var(--sinch-ref-color-ocean-200),\n        var(--sinch-ref-color-violet-200)\n      );\n  }\n</style>\n\n<div id="wrapper"></div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ColorSwatch extends NectaryElement {
+class ColorSwatch extends NectaryElement {
   #$wrapper;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#$wrapper = shadowRoot.querySelector("#wrapper");
   }
   connectedCallback() {
     super.connectedCallback();
@@ -20,22 +21,21 @@ export class ColorSwatch extends NectaryElement {
     super.disconnectedCallback();
   }
   static get observedAttributes() {
-    return ['name'];
+    return ["name"];
   }
   attributeChangedCallback(name) {
     switch (name) {
-      case 'name':
-        {
-          this.#updateColor();
-          break;
-        }
+      case "name": {
+        this.#updateColor();
+        break;
+      }
     }
   }
   get name() {
-    return getAttribute(this, 'name');
+    return getAttribute(this, "name");
   }
   set name(value) {
-    updateAttribute(this, 'name', value);
+    updateAttribute(this, "name", value);
   }
   #updateColor() {
     if (!this.isDomConnected) {
@@ -44,12 +44,15 @@ export class ColorSwatch extends NectaryElement {
     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);
+      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);
+      this.#$wrapper.style.removeProperty("background-color");
+      setClass(this.#$wrapper, "no-color", true);
     }
   }
 }
-defineCustomElement('sinch-color-swatch', ColorSwatch);
+defineCustomElement("sinch-color-swatch", ColorSwatch);
+export {
+  ColorSwatch
+};

package/color-swatch/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchColorSwatchProps = {
     /** Color name */
     name?: string;
@@ -16,3 +16,23 @@ export type TSinchColorSwatch = {
 };
 export type TSinchColorSwatchElement = NectaryComponentVanillaByType<TSinchColorSwatch>;
 export type TSinchColorSwatchReact = NectaryComponentReactByType<TSinchColorSwatch>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-color-swatch': TSinchColorSwatch;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-color-swatch': NectaryComponentVanilla<'sinch-color-swatch'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-color-swatch': NectaryComponentReact<'sinch-color-swatch'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-color-swatch': NectaryComponentReact<'sinch-color-swatch'>;
+        }
+    }
+}

package/color-swatch/types.js

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

package/color-swatch/utils.js

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

package/date-picker/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/date-picker/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-date-picker");

package/date-picker/index.d.ts

@@ -1,8 +1,8 @@
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchDatePicker } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TRect } from '../types';
+export * from './types';
 export declare class DatePicker extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -36,23 +36,3 @@ export declare class DatePicker extends NectaryElement {
     get nextMonthButtonRect(): TRect;
     nthButtonRect(index: number): TRect | null;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-date-picker': TSinchDatePicker;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-date-picker': NectaryComponentVanilla<'sinch-date-picker'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-date-picker': NectaryComponentReact<'sinch-date-picker'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-date-picker': NectaryComponentReact<'sinch-date-picker'>;
-        }
-    }
-}