@nectary/components 4.12.1 → 5.0.0

package/spinner/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 import type { TSinchSize } from '../utils/size';
 export type TSinchSpinnerProps = {
     /** Spinner size */
@@ -14,3 +14,23 @@ export type TSinchSpinner = {
 };
 export type TSinchSpinnerElement = NectaryComponentVanillaByType<TSinchSpinner>;
 export type TSinchSpinnerReact = NectaryComponentReactByType<TSinchSpinner>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-spinner': TSinchSpinner;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-spinner': NectaryComponentVanilla<'sinch-spinner'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-spinner': NectaryComponentReact<'sinch-spinner'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-spinner': NectaryComponentReact<'sinch-spinner'>;
+        }
+    }
+}

package/spinner/types.js

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

package/standalone.d.ts

@@ -11,7 +11,6 @@ import './button/index.js';
 import './card-container/index.js';
 import './card-v2-title/index.js';
 import './card-v2/index.js';
-import './card/index.js';
 import './checkbox/index.js';
 import './chip/index.js';
 import './code-tag/index.js';
@@ -30,8 +29,6 @@ import './flag/index.js';
 import './grid-item/index.js';
 import './grid/index.js';
 import './help-tooltip/index.js';
-import './horizontal-stepper-item/index.js';
-import './horizontal-stepper/index.js';
 import './icon/index.js';
 import './inline-alert/index.js';
 import './input/index.js';
@@ -50,7 +47,6 @@ import './radio/index.js';
 import './rich-text/index.js';
 import './rich-textarea/index.js';
 import './segment-collapse/index.js';
-import './segment/index.js';
 import './segmented-control-option/index.js';
 import './segmented-control/index.js';
 import './segmented-icon-control-option/index.js';
@@ -74,13 +70,9 @@ import './tabs/index.js';
 import './tag/index.js';
 import './text/index.js';
 import './textarea/index.js';
-import './tile-control-option/index.js';
-import './tile-control/index.js';
 import './time-picker/index.js';
 import './title/index.js';
 import './toast-manager/index.js';
 import './toast/index.js';
 import './toggle/index.js';
 import './tooltip/index.js';
-import './vertical-stepper-item/index.js';
-import './vertical-stepper/index.js';

package/standalone.js

@@ -1,88 +1,80 @@
-import { setNectaryRegistry } from './utils';
+import { setNectaryRegistry } from "./utils/element.js";
+import "./accordion-item/index.js";
+import "./accordion/index.js";
+import "./action-menu-option/index.js";
+import "./action-menu/index.js";
+import "./alert/index.js";
+import "./avatar/index.js";
+import "./badge/index.js";
+import "./button-group-item/index.js";
+import "./button-group/index.js";
+import "./button/index.js";
+import "./card-container/index.js";
+import "./card-v2-title/index.js";
+import "./card-v2/index.js";
+import "./checkbox/index.js";
+import "./chip/index.js";
+import "./code-tag/index.js";
+import "./color-menu-option/index.js";
+import "./color-menu/index.js";
+import "./color-swatch/index.js";
+import "./date-picker/index.js";
+import "./dialog/index.js";
+import "./emoji-picker/index.js";
+import "./emoji/index.js";
+import "./field/index.js";
+import "./file-drop/index.js";
+import "./file-picker/index.js";
+import "./file-status/index.js";
+import "./flag/index.js";
+import "./grid-item/index.js";
+import "./grid/index.js";
+import "./help-tooltip/index.js";
+import "./icon/index.js";
+import "./inline-alert/index.js";
+import "./input/index.js";
+import "./link/index.js";
+import "./list-item/index.js";
+import "./list/index.js";
+import "./pagination/index.js";
+import "./persistent-overlay/index.js";
+import "./pop/index.js";
+import "./popover/index.js";
+import "./progress-stepper-item/index.js";
+import "./progress-stepper/index.js";
+import "./progress/index.js";
+import "./radio-option/index.js";
+import "./radio/index.js";
+import "./rich-text/index.js";
+import "./rich-textarea/index.js";
+import "./segment-collapse/index.js";
+import "./segmented-control-option/index.js";
+import "./segmented-control/index.js";
+import "./segmented-icon-control-option/index.js";
+import "./segmented-icon-control/index.js";
+import "./select-button/index.js";
+import "./select-menu-option/index.js";
+import "./select-menu/index.js";
+import "./skeleton-item/index.js";
+import "./skeleton/index.js";
+import "./spinner/index.js";
+import "./stop-events/index.js";
+import "./table-body/index.js";
+import "./table-cell/index.js";
+import "./table-head-cell/index.js";
+import "./table-head/index.js";
+import "./table-row/index.js";
+import "./table/index.js";
+import "./tabs-icon-option/index.js";
+import "./tabs-option/index.js";
+import "./tabs/index.js";
+import "./tag/index.js";
+import "./text/index.js";
+import "./textarea/index.js";
+import "./time-picker/index.js";
+import "./title/index.js";
+import "./toast-manager/index.js";
+import "./toast/index.js";
+import "./toggle/index.js";
+import "./tooltip/index.js";
 setNectaryRegistry(window.customElements);
-import './accordion-item/index.js';
-import './accordion/index.js';
-import './action-menu-option/index.js';
-import './action-menu/index.js';
-import './alert/index.js';
-import './avatar/index.js';
-import './badge/index.js';
-import './button-group-item/index.js';
-import './button-group/index.js';
-import './button/index.js';
-import './card-container/index.js';
-import './card-v2-title/index.js';
-import './card-v2/index.js';
-import './card/index.js';
-import './checkbox/index.js';
-import './chip/index.js';
-import './code-tag/index.js';
-import './color-menu-option/index.js';
-import './color-menu/index.js';
-import './color-swatch/index.js';
-import './date-picker/index.js';
-import './dialog/index.js';
-import './emoji-picker/index.js';
-import './emoji/index.js';
-import './field/index.js';
-import './file-drop/index.js';
-import './file-picker/index.js';
-import './file-status/index.js';
-import './flag/index.js';
-import './grid-item/index.js';
-import './grid/index.js';
-import './help-tooltip/index.js';
-import './horizontal-stepper-item/index.js';
-import './horizontal-stepper/index.js';
-import './icon/index.js';
-import './inline-alert/index.js';
-import './input/index.js';
-import './link/index.js';
-import './list-item/index.js';
-import './list/index.js';
-import './pagination/index.js';
-import './persistent-overlay/index.js';
-import './pop/index.js';
-import './popover/index.js';
-import './progress-stepper-item/index.js';
-import './progress-stepper/index.js';
-import './progress/index.js';
-import './radio-option/index.js';
-import './radio/index.js';
-import './rich-text/index.js';
-import './rich-textarea/index.js';
-import './segment-collapse/index.js';
-import './segment/index.js';
-import './segmented-control-option/index.js';
-import './segmented-control/index.js';
-import './segmented-icon-control-option/index.js';
-import './segmented-icon-control/index.js';
-import './select-button/index.js';
-import './select-menu-option/index.js';
-import './select-menu/index.js';
-import './skeleton-item/index.js';
-import './skeleton/index.js';
-import './spinner/index.js';
-import './stop-events/index.js';
-import './table-body/index.js';
-import './table-cell/index.js';
-import './table-head-cell/index.js';
-import './table-head/index.js';
-import './table-row/index.js';
-import './table/index.js';
-import './tabs-icon-option/index.js';
-import './tabs-option/index.js';
-import './tabs/index.js';
-import './tag/index.js';
-import './text/index.js';
-import './textarea/index.js';
-import './tile-control-option/index.js';
-import './tile-control/index.js';
-import './time-picker/index.js';
-import './title/index.js';
-import './toast-manager/index.js';
-import './toast/index.js';
-import './toggle/index.js';
-import './tooltip/index.js';
-import './vertical-stepper-item/index.js';
-import './vertical-stepper/index.js';

package/standalone.ts

@@ -19,7 +19,6 @@ import './button/index.js'
 import './card-container/index.js'
 import './card-v2-title/index.js'
 import './card-v2/index.js'
-import './card/index.js'
 import './checkbox/index.js'
 import './chip/index.js'
 import './code-tag/index.js'
@@ -38,8 +37,6 @@ import './flag/index.js'
 import './grid-item/index.js'
 import './grid/index.js'
 import './help-tooltip/index.js'
-import './horizontal-stepper-item/index.js'
-import './horizontal-stepper/index.js'
 import './icon/index.js'
 import './inline-alert/index.js'
 import './input/index.js'
@@ -58,7 +55,6 @@ import './radio/index.js'
 import './rich-text/index.js'
 import './rich-textarea/index.js'
 import './segment-collapse/index.js'
-import './segment/index.js'
 import './segmented-control-option/index.js'
 import './segmented-control/index.js'
 import './segmented-icon-control-option/index.js'
@@ -82,13 +78,9 @@ import './tabs/index.js'
 import './tag/index.js'
 import './text/index.js'
 import './textarea/index.js'
-import './tile-control-option/index.js'
-import './tile-control/index.js'
 import './time-picker/index.js'
 import './title/index.js'
 import './toast-manager/index.js'
 import './toast/index.js'
 import './toggle/index.js'
 import './tooltip/index.js'
-import './vertical-stepper-item/index.js'
-import './vertical-stepper/index.js'

package/stop-events/index.js

@@ -1,28 +1,28 @@
-import { defineCustomElement, unpackCsv } from '../utils';
-export class StopEvents extends HTMLElement {
+import { unpackCsv } from "../utils/csv.js";
+import { defineCustomElement } from "../utils/element.js";
+class StopEvents extends HTMLElement {
   #controller = null;
   constructor() {
     super();
-    this.style.display = 'contents';
+    this.style.display = "contents";
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    const events = unpackCsv(this.getAttribute('events'));
+    const { signal } = this.#controller;
+    const events = unpackCsv(this.getAttribute("events"));
     for (const event of events) {
-      this.addEventListener(event, this.#stopEvent, {
-        signal
-      });
+      this.addEventListener(event, this.#stopEvent, { signal });
     }
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
-  #stopEvent = e => {
+  #stopEvent = (e) => {
     e.stopPropagation();
   };
 }
-defineCustomElement('sinch-stop-events', StopEvents);
+defineCustomElement("sinch-stop-events", StopEvents);
+export {
+  StopEvents
+};

package/table/global/index.d.ts

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

package/table/global/index.js

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

package/table/index.d.ts

@@ -1,26 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Table extends NectaryElement {
     constructor();
     connectedCallback(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-table': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table': NectaryComponentVanilla<'sinch-table'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table': NectaryComponentReact<'sinch-table'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-table': NectaryComponentReact<'sinch-table'>;
-        }
-    }
-}

package/table/index.js

@@ -1,15 +1,18 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:table}</style><slot></slot>';
-const template = document.createElement('template');
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = "<style>\n:host {\n  display: table;\n}\n</style>\n\n<slot></slot>\n";
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Table extends NectaryElement {
+class Table extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
-    this.setAttribute('role', 'table');
+    this.setAttribute("role", "table");
   }
 }
-defineCustomElement('sinch-table', Table);
+defineCustomElement("sinch-table", Table);
+export {
+  Table
+};

package/table/types.d.ts

@@ -1,3 +1,23 @@
-import type { NectaryComponentReactByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchTableElement = HTMLElement;
 export type TSinchTableReact = NectaryComponentReactByType<TSinchTableElement>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-table': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table': NectaryComponentVanilla<'sinch-table'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table': NectaryComponentReact<'sinch-table'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-table': NectaryComponentReact<'sinch-table'>;
+        }
+    }
+}

package/table/types.js

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

package/table-body/global/index.d.ts

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

package/table-body/global/index.js

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

package/table-body/index.d.ts

@@ -1,26 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export * from './types';
 export declare class TableBody extends NectaryElement {
     constructor();
     connectedCallback(): void;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-table-body': {};
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table-body': NectaryComponentVanilla<'sinch-table-body'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
-        }
-    }
-}

package/table-body/index.js

@@ -1,15 +1,18 @@
-import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:table-row-group}</style><slot></slot>';
-const template = document.createElement('template');
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = "<style>\n:host {\n  display: table-row-group;\n}\n</style>\n\n<slot></slot>\n";
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class TableBody extends NectaryElement {
+class TableBody extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
-    this.setAttribute('role', 'rowgroup');
+    this.setAttribute("role", "rowgroup");
   }
 }
-defineCustomElement('sinch-table-body', TableBody);
+defineCustomElement("sinch-table-body", TableBody);
+export {
+  TableBody
+};

package/table-body/types.d.ts

@@ -1,3 +1,23 @@
-import type { NectaryComponentReactByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchTableBodyElement = HTMLElement;
 export type TSinchTableBodyReact = NectaryComponentReactByType<TSinchTableBodyElement>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-table-body': {};
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-body': NectaryComponentVanilla<'sinch-table-body'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-table-body': NectaryComponentReact<'sinch-table-body'>;
+        }
+    }
+}

package/table-body/types.js

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

package/table-cell/global/index.d.ts

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

package/table-cell/global/index.js

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

package/table-cell/index.d.ts

@@ -1,29 +1,9 @@
 import { NectaryElement } from '../utils';
-import type { TSinchTableAlignType, TSinchTableCell } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchTableAlignType } from './types';
+export * from './types';
 export declare class TableCell extends NectaryElement {
     constructor();
     connectedCallback(): void;
     set align(value: TSinchTableAlignType);
     get align(): TSinchTableAlignType;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-table-cell': TSinchTableCell;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-table-cell': NectaryComponentVanilla<'sinch-table-cell'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
-        }
-    }
-}

package/table-cell/index.js

@@ -1,22 +1,26 @@
-import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-comp-table-color-cell-default-border-initial)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
-import { alignValues } from './utils';
-const template = document.createElement('template');
+import { updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { alignValues } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: table-cell;\n  vertical-align: top;\n  border-bottom: 1px solid var(--sinch-comp-table-color-cell-default-border-initial);\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 48px;\n  box-sizing: border-box;\n  padding: 8px;\n}\n\n:host([align="end"]) #wrapper {\n  text-align: end;\n  align-items: flex-end;\n}\n\n:host([align="center"]) #wrapper {\n  text-align: center;\n  align-items: center;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class TableCell extends NectaryElement {
+class TableCell extends NectaryElement {
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
   connectedCallback() {
-    this.setAttribute('role', 'cell');
+    this.setAttribute("role", "cell");
   }
   set align(value) {
-    updateLiteralAttribute(this, alignValues, 'align', value);
+    updateLiteralAttribute(this, alignValues, "align", value);
   }
   get align() {
-    return getLiteralAttribute(this, alignValues, 'align', 'start');
+    return getLiteralAttribute(this, alignValues, "align", "start");
   }
 }
-defineCustomElement('sinch-table-cell', TableCell);
+defineCustomElement("sinch-table-cell", TableCell);
+export {
+  TableCell
+};

package/table-cell/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchTableAlignType = 'start' | 'center' | 'end';
 export type TSinchTableCellProps = {
     align?: TSinchTableAlignType;
@@ -12,3 +12,23 @@ export type TSinchTableCell = {
 };
 export type TSinchTableCellElement = NectaryComponentVanillaByType<TSinchTableCell>;
 export type TSinchTableCellReact = NectaryComponentReactByType<TSinchTableCell>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-table-cell': TSinchTableCell;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-cell': NectaryComponentVanilla<'sinch-table-cell'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-table-cell': NectaryComponentReact<'sinch-table-cell'>;
+        }
+    }
+}

package/table-cell/types.js

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

package/table-cell/utils.js

@@ -1 +1,4 @@
-export const alignValues = ['start', 'center', 'end'];
+const alignValues = ["start", "center", "end"];
+export {
+  alignValues
+};

package/table-head/global/index.d.ts

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

package/table-head/global/index.js

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