@nectary/components 4.12.0 → 4.12.1

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

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchColorMenuOptionProps = {
     /** Value */
     value: string;
@@ -16,23 +16,3 @@ 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 @@
-const getParentOption = ($element) => {
+export 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,7 +8,4 @@ const getParentOption = ($element) => {
     $el = parent;
   }
   return $el;
-};
-export {
-  getParentOption
-};
+};

package/color-swatch/index.d.ts

@@ -1,6 +1,7 @@
 import '../text';
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchColorSwatch } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export declare class ColorSwatch extends NectaryElement {
     #private;
     constructor();
@@ -11,3 +12,23 @@ 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,17 +1,16 @@
-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");
+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');
 template.innerHTML = templateHTML;
-class ColorSwatch extends NectaryElement {
+export 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();
@@ -21,21 +20,22 @@ 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,15 +44,12 @@ 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);
-export {
-  ColorSwatch
-};
+defineCustomElement('sinch-color-swatch', ColorSwatch);

package/color-swatch/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchColorSwatchProps = {
     /** Color name */
     name?: string;
@@ -16,23 +16,3 @@ 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,10 +1,6 @@
-const getSwatchColorBg = (id) => {
+export const getSwatchColorBg = id => {
   return `var(--sinch-comp-color-swatch-color-${id}-background)`;
 };
-const getSwatchColorFg = (id) => {
+export const getSwatchColorFg = id => {
   return `var(--sinch-comp-color-swatch-color-${id}-foreground)`;
-};
-export {
-  getSwatchColorBg,
-  getSwatchColorFg
-};
+};

package/date-picker/index.d.ts

@@ -1,8 +1,8 @@
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TRect } from '../types';
-export * from './types';
+import type { TSinchDatePicker } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
 export declare class DatePicker extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -36,3 +36,23 @@ 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'>;
+        }
+    }
+}