@nectary/components 2.12.1 → 2.12.3

package/lib/esm/table-head-cell/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTableHeaderCellElement, TSinchTableHeaderCellReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head-cell': TSinchTableHeaderCellReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head-cell': TSinchTableHeaderCellElement;
+    }
+}

package/lib/esm/table-head-cell/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchTableAlignType } from '../table-cell/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchTableHeaderCellElement = HTMLElement & {
+    text: string | null;
+    align: TSinchTableAlignType;
+    fit: boolean;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'align', value: TSinchTableAlignType): void;
+    setAttribute(name: 'fit', value: ''): void;
+};
+export type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
+    text?: string;
+    fit?: boolean;
+    align?: TSinchTableAlignType;
+};

package/lib/esm/table-row/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableRowElement, TSinchTableRowReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-row': TSinchTableRowReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-row': TSinchTableRowElement;
+    }
+}

package/lib/esm/table-row/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableRowElement = HTMLElement & {
+    sticky: boolean;
+    selected: boolean;
+    setAttribute(name: 'sticky', value: ''): void;
+    setAttribute(name: 'selected', value: ''): void;
+};
+export type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
+    sticky?: boolean;
+    selected?: boolean;
+};

package/lib/esm/tabs/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTabsElement, TSinchTabsReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs': TSinchTabsReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs': TSinchTabsElement;
+    }
+}

package/lib/esm/tabs/types.d.ts

@@ -0,0 +1,18 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchTabsElement = HTMLElement & {
+    /** Value */
+    value: string;
+    nthOptionRect(index: number): TRect | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+};
+export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Change value event */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/lib/esm/tabs-icon-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTabsIconOptionElement, TSinchTabsIconOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-icon-option': TSinchTabsIconOptionElement;
+    }
+}

package/lib/esm/tabs-icon-option/types.d.ts

@@ -0,0 +1,19 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTabsIconOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
+    /** Value */
+    value: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/lib/esm/tabs-option/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs-option': TSinchTabsOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs-option': TSinchTabsOptionElement;
+    }
+}

package/lib/esm/tabs-option/types.d.ts

@@ -0,0 +1,25 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTabsOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/lib/esm/tag/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTagElement, TSinchTagReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tag': TSinchTagReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tag': TSinchTagElement;
+    }
+}

package/lib/esm/tag/types.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTagElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color: string | null;
+    /** Small */
+    small: boolean;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Color, gray by default */
+    setAttribute(name: 'color', value: string): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
+    /** Text */
+    text: string;
+    /** Color, gray by default */
+    color?: string;
+    /** Small */
+    small?: boolean;
+};

package/lib/esm/tag/utils.d.ts

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

package/lib/esm/text/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTextElement, TSinchTextReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-text': TSinchTextReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-text': TSinchTextElement;
+    }
+}

package/lib/esm/text/types.d.ts

@@ -0,0 +1,30 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
+export type TSinchTextElement = HTMLElement & {
+    /** Type */
+    type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    inline: boolean;
+    /** Emphasized */
+    emphasized: boolean;
+    /** Cuts the long text with “…” ellipsis */
+    ellipsis: boolean;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchTextType): void;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    setAttribute(name: 'inline', value: ''): void;
+    /** Emphasized */
+    setAttribute(name: 'emphasized', value: ''): void;
+    /** Cuts the long text with “…” ellipsis */
+    setAttribute(name: 'ellipsis', value: ''): void;
+};
+export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
+    /** Type */
+    type: TSinchTextType;
+    /** Block (“paragraph”, default) or inline (“span”) */
+    inline?: boolean;
+    /** Emphasized */
+    emphasized?: boolean;
+    /** Cuts the long text with “…” ellipsis */
+    ellipsis?: boolean;
+};

package/lib/esm/text/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchTextType } from './types';
+export declare const typeValues: readonly TSinchTextType[];

package/lib/esm/textarea/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTextareaElement, TSinchTextareaReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-textarea': TSinchTextareaReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-textarea': TSinchTextareaElement;
+    }
+}

package/lib/esm/textarea/types.d.ts

@@ -0,0 +1,60 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTextareaElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder: string | null;
+    /** Disabled */
+    disabled: boolean;
+    /** Invalid state */
+    invalid: boolean;
+    selectionStart: HTMLTextAreaElement['selectionStart'];
+    selectionEnd: HTMLTextAreaElement['selectionEnd'];
+    selectionDirection: HTMLTextAreaElement['selectionDirection'];
+    /** Number of rows */
+    rows: HTMLTextAreaElement['rows'];
+    minRows: HTMLTextAreaElement['rows'];
+    /** Whether the text field is resizable */
+    resizable: boolean;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text that appears in the text field when it has no value set */
+    setAttribute(name: 'placeholder', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Number of rows */
+    setAttribute(name: 'rows', value: string): void;
+    setAttribute(name: 'minrows', value: string): void;
+    /** Whether the text field is resizable */
+    setAttribute(name: 'resizable', value: ''): void;
+};
+export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+    /** Value */
+    value: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder?: string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Invalid state */
+    invalid?: boolean;
+    'aria-label': string;
+    /** Number of rows */
+    rows?: number;
+    minRows?: number;
+    /** Whether the text field is resizable */
+    resizable?: boolean;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/lib/esm/tile-control/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTileControlElement, TSinchTileControlReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control': TSinchTileControlReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control': TSinchTileControlElement;
+    }
+}

package/lib/esm/tile-control/types.d.ts

@@ -0,0 +1,37 @@
+import type { TSinchElementReact } from '../types';
+/** Number of coumns from 1 to 10 */
+export type TSinchTileControlColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number;
+export type TSinchTileControlElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Small */
+    small: boolean;
+    /** Multiple */
+    multiple: boolean;
+    /** Number of columns from 1 to 10 */
+    cols: TSinchTileControlColumns;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+    /** Multiple */
+    setAttribute(name: 'multiple', value: ''): void;
+    /** Number of columns from 1 to 10 */
+    setAttribute(name: 'cols', value: string): void;
+};
+export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
+    /** Value */
+    value: string;
+    /** Multiple */
+    multiple?: boolean;
+    /** Small */
+    small?: boolean;
+    /** Number of columns from 1 to 10 */
+    cols: TSinchTileControlColumns;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/lib/esm/tile-control-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTileControlOptionElement, TSinchTileControlOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control-option': TSinchTileControlOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control-option': TSinchTileControlOptionElement;
+    }
+}

package/lib/esm/tile-control-option/types.d.ts

@@ -0,0 +1,37 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTileControlOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Small */
+    small: boolean;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text content */
+    setAttribute(attr: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/lib/esm/time-picker/index.d.ts

@@ -0,0 +1,15 @@
+import '../icon-button';
+import '../icon';
+import '../segmented-control';
+import '../segmented-control-option';
+import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-time-picker': TSinchTimePickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-time-picker': TSinchTimePickerElement;
+    }
+}

package/lib/esm/time-picker/types.d.ts

@@ -0,0 +1,34 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchTimePickerElement = HTMLElement & {
+    /** Time value in ISO 8601 format */
+    value: string;
+    /** AM/PM 12-hour clock system, `false` by default */
+    ampm: boolean;
+    /** Submit button label that is used for a11y */
+    submitAriaLabel: string;
+    readonly submitButtonRect: TRect;
+    readonly amButtonRect: TRect | null;
+    readonly pmButtonRect: TRect | null;
+    hourDigitRect(hour: number): TRect | null;
+    minuteDigitRect(minute: number): TRect | null;
+    /** Change value handler, return time in ISO 8601 format */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Time value in ISO 8601 format */
+    setAttribute(name: 'value', value: string): void;
+    /** AM/PM 12-hour clock system, `false` by default */
+    setAttribute(name: 'ampm', value: boolean): void;
+    /** Submit button label that is used for a11y */
+    setAttribute(name: 'submit-aria-label', value: string): void;
+};
+export type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
+    /** Time value in ISO 8601 format */
+    value: string;
+    /** AM/PM 12-hour clock system, `false` by default */
+    ampm?: boolean;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Submit button label that is used for a11y */
+    'submit-aria-label': string;
+    /** Change value handler, return time in ISO 8601 format */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/lib/esm/time-picker/utils.d.ts

@@ -0,0 +1,11 @@
+export declare const parseTime: (value: string | null) => {
+    hours: number;
+    minutes: number;
+};
+export declare const stringifyTime: (hour: number, minute: number) => string;
+export declare const stringifyHour: (hour: number, is24: boolean) => string;
+export declare const stringifyHourFace: (hour: number) => string;
+export declare const stringifyMinute: (minute: number) => string;
+export declare const hourToIndex: (hour: number, is24: boolean) => number;
+export declare const getNeedleRotationDeg: (elem: HTMLElement) => number;
+export declare const getShortestCssDeg: (currentDeg: number, nextDeg: number) => number;

package/lib/esm/title/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTitleElement, TSinchTitleReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-title': TSinchTitleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-title': TSinchTitleElement;
+    }
+}

package/lib/esm/title/types.d.ts

@@ -0,0 +1,31 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
+export type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
+export type TSinchTitleElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Type */
+    type: TSinchTitleType;
+    /** Semantical level */
+    level: TSinchTitleLevel;
+    /** Cuts the long title with “…” ellipsis */
+    ellipsis: boolean;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchTitleType): void;
+    /** Semantical level */
+    setAttribute(name: 'level', value: TSinchTitleLevel): void;
+    /** Cuts the long title with “…” ellipsis */
+    setAttribute(name: 'ellipsis', value: ''): void;
+};
+export type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
+    /** Text */
+    text: string;
+    /** Type */
+    type: TSinchTitleType;
+    /** Semantical level */
+    level: TSinchTitleLevel;
+    /** Cuts the long title with “…” ellipsis */
+    ellipsis?: boolean;
+};

package/lib/esm/title/utils.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchTitleLevel, TSinchTitleType } from './types';
+export declare const typeValues: readonly TSinchTitleType[];
+export declare const getTitleLevelFromType: (type: TSinchTitleType) => TSinchTitleLevel;

package/lib/esm/toast/index.d.ts

@@ -0,0 +1,13 @@
+import '../icon';
+import '../rich-text';
+import type { TSinchToastElement, TSinchToastReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast': TSinchToastReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast': TSinchToastElement;
+    }
+}

package/lib/esm/toast/types.d.ts

@@ -0,0 +1,28 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
+export type TSinchToastElement = HTMLElement & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent: boolean;
+    /** Timeout event */
+    addEventListener(type: '-timeout', listener: (e: CustomEvent<void>) => void): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchToastType): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    setAttribute(name: 'persistent', value: ''): void;
+};
+export type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent?: boolean;
+    /** Timeout handler */
+    'on-timeout'?: (e: CustomEvent<void>) => void;
+};

package/lib/esm/toast/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchToastType } from './types';
+export declare const typeValues: readonly TSinchToastType[];

package/lib/esm/toast-manager/index.d.ts

@@ -0,0 +1,13 @@
+import '../title';
+import '../text';
+import type { TSinchToastManagerElement, TSinchToastManagerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast-manager': TSinchToastManagerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast-manager': TSinchToastManagerElement;
+    }
+}

package/lib/esm/toast-manager/types.d.ts

@@ -0,0 +1,13 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchToastManagerOrigin = 'top-right' | 'bottom-right';
+export type TSinchToastManagerElement = HTMLElement & {
+    readonly containerRect: TRect;
+    nthActionRect: (nth: number) => TRect | null;
+    nthCloseRect: (nth: number) => TRect | null;
+    origin: TSinchToastManagerOrigin;
+    /** Origin */
+    setAttribute(name: 'origin', value: TSinchToastManagerOrigin): void;
+};
+export type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {
+    origin?: TSinchToastManagerOrigin;
+};

package/lib/esm/toast-manager/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchToastManagerOrigin } from './types';
+export declare const originValues: TSinchToastManagerOrigin[];

package/lib/esm/toggle/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchToggleElement, TSinchToggleReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toggle': TSinchToggleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toggle': TSinchToggleElement;
+    }
+}