@nectary/components 0.27.0 → 0.28.0

package/radio-option/index.js

@@ -9,9 +9,6 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{--sinch-color-radio-outer-circle:var(--sinch-color-transparent);--sinch-color-radio-background:var(--sinch-color-snow-100);--sinch-color-radio-border:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-checked:var(--sinch-color-transparent);--sinch-color-radio-border-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-hover:var(--sinch-color-snow-500);--sinch-color-radio-border-hover:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-radio-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-focus:var(--sinch-color-snow-800);--sinch-color-radio-border-focus:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-radio-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-active:var(--sinch-color-stormy-100);--sinch-color-radio-border-active:var(--sinch-color-stormy-300);--sinch-color-radio-outer-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-radio-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-radio-outer-circle-disabled:var(--sinch-color-transparent);--sinch-color-radio-border-disabled:var(--sinch-color-stormy-100);--sinch-color-radio-outer-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-radio-border-disabled-checked:var(--sinch-color-stormy-100);display:block;outline:0}#wrapper{display:flex;height:32px;box-sizing:border-box;width:100%}#input{all:initial;display:block;width:32px;height:32px;cursor:pointer}#input:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#input::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-outer-circle);transition:background-color .1s linear}#input::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;pointer-events:none;background-color:var(--sinch-color-radio-background);box-shadow:0 0 0 2px var(--sinch-color-radio-border) inset;transition:background-color .1s linear}#icon-knob{position:absolute;left:11px;top:11px;width:10px;height:10px;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-color-radio-border);pointer-events:none}@media (prefers-reduced-motion){#icon-knob,#input::after,#input::before{transition:none}}#label{align-self:center;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}#input:checked::before{background-color:var(--sinch-color-radio-outer-circle-checked)}#input:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-checked) inset}#input:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-checked)}#input:focus::before{background-color:var(--sinch-color-radio-outer-circle-focus)}#input:focus::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus) inset}#input:focus~#icon-knob{background-color:var(--sinch-color-radio-border-focus)}#input:hover::before{background-color:var(--sinch-color-radio-outer-circle-hover)}#input:hover::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover) inset}#input:hover~#icon-knob{background-color:var(--sinch-color-radio-border-hover)}#input:active::before{background-color:var(--sinch-color-radio-outer-circle-active)}#input:active::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active) inset}#input:active~#icon-knob{background-color:var(--sinch-color-radio-border-active)}#input:disabled::before{background-color:var(--sinch-color-radio-outer-circle-disabled)}#input:disabled::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled) inset}#input:disabled~#icon-knob{background-color:var(--sinch-color-radio-border-disabled)}#input:focus:checked::before{background-color:var(--sinch-color-radio-outer-circle-focus-checked)}#input:focus:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-focus-checked) inset}#input:focus:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-focus-checked)}#input:hover:checked::before{background-color:var(--sinch-color-radio-outer-circle-hover-checked)}#input:hover:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-hover-checked) inset}#input:hover:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-hover-checked)}#input:active:checked::before{background-color:var(--sinch-color-radio-outer-circle-active-checked)}#input:active:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-active-checked) inset}#input:active:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-active-checked)}#input:disabled:checked::before{background-color:var(--sinch-color-radio-outer-circle-disabled-checked)}#input:disabled:checked::after{box-shadow:0 0 0 2px var(--sinch-color-radio-border-disabled-checked) inset}#input:disabled:checked~#icon-knob{opacity:1;background-color:var(--sinch-color-radio-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="input" type="radio"/><div id="icon-knob"></div></div><label for="input" id="label"></label></div>';
-export const isRadioOptionElement = element => {
-  return element instanceof Element && element.tagName === 'SINCH-RADIO-OPTION';
-};
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio-option', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends NectaryElement {

package/radio-option/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent } from 'react';
+export declare type TSinchRadioOptionElement = HTMLElement & {
+    value: string;
+    checked: boolean;
+    disabled: boolean;
+    text: string;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchRadioOptionReact = TSinchElementReact<TSinchRadioOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    text: string;
+    'aria-label': string;
+    onFocus?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchRadioOptionElement>) => void;
+};

package/radio-option/types.js

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

package/search-option/index.d.ts

@@ -1,13 +1,4 @@
-import type { TSinchElementReact } from '../types';
-export declare const isSinchSearchOptionElement: (element: EventTarget | Element | null) => element is TSinchSearchOptionElement;
-export declare type TSinchSearchOptionElement = HTMLElement & {
-    text: string;
-    selected: boolean;
-};
-export declare type TSinchSearchOptionReact = TSinchElementReact<TSinchSearchOptionElement> & {
-    text: string;
-    'aria-label': string;
-};
+import type { TSinchSearchOptionElement, TSinchSearchOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/search-option/index.js

@@ -1,6 +1,8 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
+var _$content;
+
 function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
 
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
@@ -9,10 +11,7 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement,
 const templateHTML = '<style>:host{display:block}#wrapper{display:block;box-sizing:border-box;line-height:40px;padding:0 12px;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-
-var _$content = new WeakMap();
-
-class SinchSearchOption extends NectaryElement {
+defineCustomElement('sinch-search-option', (_$content = new WeakMap(), class extends NectaryElement {
   constructor() {
     super();
 
@@ -66,9 +65,4 @@ class SinchSearchOption extends NectaryElement {
     return getBooleanAttribute(this, 'data-selected');
   }
 
-}
-
-defineCustomElement('sinch-search-option', SinchSearchOption);
-export const isSinchSearchOptionElement = element => {
-  return element instanceof SinchSearchOption;
-};
+}));

package/search-option/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchSearchOptionElement = HTMLElement & {
+    text: string;
+    selected: boolean;
+};
+export declare type TSinchSearchOptionReact = TSinchElementReact<TSinchSearchOptionElement> & {
+    text: string;
+    'aria-label': string;
+};

package/search-option/types.js

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

package/select-option/index.d.ts

@@ -1,6 +1,4 @@
-import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from '../dropdown-text-option';
-export declare type TSinchSelectOptionElement = TSinchDropdownTextOptionElement;
-export declare type TSinchSelectOptionReact = TSinchDropdownTextOptionReact;
+import type { TSinchSelectOptionElement, TSinchSelectOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/select-option/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchDropdownTextOptionElement, TSinchDropdownTextOptionReact } from '../dropdown-text-option/types';
+export declare type TSinchSelectOptionElement = TSinchDropdownTextOptionElement;
+export declare type TSinchSelectOptionReact = TSinchDropdownTextOptionReact;

package/select-option/types.js

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

package/table/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}</style><slot></slot>';
+const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body);color:var(--sinch-color-text-default);--sinch-color-icon:var(--sinch-color-text-default)}</style><slot></slot>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-table', class extends NectaryElement {

package/table-cell/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-color-snow-600)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px 4px}:host(:first-child) #wrapper{padding-left:8px}:host(:last-child) #wrapper{padding-right: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>';
+const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-color-snow-600)}#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>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];

package/table-head-cell/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}</style><slot name="checkbox"></slot><div id="wrapper"><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);vertical-align:middle;--sinch-color-icon:var(--sinch-color-stormy-200)}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);--sinch-icon-button-color:var(--sinch-color-stormy-100)}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200)}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host(:is([text=""],:not([text]))) #text{display:none}:host([fit]:not([fit=false])){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><span id="text"></span><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 const alignValues = ['start', 'center', 'end'];

package/tabs-option/index.d.ts

@@ -1,22 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent } from 'react';
-export declare const isTabsOptionElement: (element: EventTarget | Element | null) => element is TSinchTabsOptionElement;
-export declare type TSinchTabsOptionElement = HTMLElement & {
-    value: string;
-    disabled: boolean;
-    checked: boolean;
-    text: string;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
-    value: string;
-    disabled?: boolean;
-    text: string;
-    'aria-label': string;
-    onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
-};
+import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/tabs-option/index.js

@@ -8,9 +8,6 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label> <button id="button" type="radio"/></div>';
-export const isTabsOptionElement = element => {
-  return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
-};
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', (_onClick = new WeakMap(), class extends NectaryElement {

package/tabs-option/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent } from 'react';
+export declare type TSinchTabsOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    checked: boolean;
+    text: string;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    text: string;
+    'aria-label': string;
+    onFocus?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchTabsOptionElement>) => void;
+};

package/tabs-option/types.js

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

package/tooltip/index.d.ts

@@ -1,19 +1,4 @@
-import type { TRect, TSinchElementReact } from '../types';
-declare const orientationValues: readonly ["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];
-export declare type TSinchTooltipOrientation = typeof orientationValues[number];
-export declare type TSinchTooltipElement = HTMLElement & {
-    text: string;
-    width: number | null;
-    inverted: boolean;
-    orientation: TSinchTooltipOrientation;
-    readonly tooltipRect: TRect;
-};
-export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
-    text: string;
-    width?: number;
-    inverted?: boolean;
-    orientation?: TSinchTooltipOrientation;
-};
+import type { TSinchTooltipElement, TSinchTooltipReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -24,4 +9,3 @@ declare global {
         'sinch-tooltip': TSinchTooltipElement;
     }
 }
-export {};

package/tooltip/index.js

@@ -1,6 +1,6 @@
 import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, getRect, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{position:relative;display:block}#tooltip{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .2s linear .2s}@media (prefers-reduced-motion){#tooltip{transition:none}}:host(:hover) #tooltip{opacity:1}#text{position:absolute;padding:2px 6px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);width:max-content;border-radius:2px;top:-8px;left:50%;transform:translateX(-50%) translateY(-100%)}#arrow{position:absolute;top:-8px;left:50%;transform:translateX(-50%);fill:var(--sinch-color-snow-600)}:host([orientation=top-left]) #text{transform:translateX(-80%) translateY(-100%)}:host([orientation=top-right]) #text{transform:translateX(-20%) translateY(-100%)}:host([orientation=bottom-right]) #text{top:calc(100% + 8px);transform:translateX(-20%)}:host([orientation=bottom-left]) #text{top:calc(100% + 8px);transform:translateX(-80%)}:host([orientation=bottom]) #text{top:calc(100% + 8px);transform:translateX(-50%)}:host([orientation^=bottom]) #arrow{top:calc(100% + 4px);transform:translateX(-50%) rotate(180deg)}:host([orientation=left]) #text{left:unset;right:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=left]) #arrow{left:-11px;top:50%;transform:translateY(-50%) rotate(270deg)}:host([orientation=right]) #text{left:calc(100% + 8px);top:50%;transform:translateY(-50%)}:host([orientation=right]) #arrow{top:50%;left:calc(100% + 2px);transform:translateY(-50%) rotate(90deg)}:host([inverted]:not([inverted=false])) #text{color:var(--sinch-color-text-inverted);background-color:var(--sinch-color-stormy-500)}:host([inverted]:not([inverted=false])) #arrow{fill:var(--sinch-color-stormy-500)}::slotted(*){display:block}</style><div id="wrapper"><slot></slot><div id="tooltip"><div id="text"></div><svg id="arrow" width="9" height="4" aria-hidden="true"><path d="m4.5 4 4-4h-8l4 4Z"/></svg></div></div>';
-const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
+import { orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tooltip', class extends NectaryElement {

package/tooltip/types.d.ts

@@ -0,0 +1,16 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { orientationValues } from './utils';
+export declare type TSinchTooltipOrientation = typeof orientationValues[number];
+export declare type TSinchTooltipElement = HTMLElement & {
+    text: string;
+    width: number | null;
+    inverted: boolean;
+    orientation: TSinchTooltipOrientation;
+    readonly tooltipRect: TRect;
+};
+export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+    text: string;
+    width?: number;
+    inverted?: boolean;
+    orientation?: TSinchTooltipOrientation;
+};

package/tooltip/types.js

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

package/tooltip/utils.d.ts

@@ -0,0 +1 @@
+export declare const orientationValues: readonly ["top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right"];

package/tooltip/utils.js

@@ -0,0 +1 @@
+export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];