@nectary/components 0.27.0 → 0.29.0

package/title/index.d.ts

@@ -1,18 +1,5 @@
 import '../icons/cancel';
-import type { TSinchElementReact } from '../types';
-declare const typeValues: readonly ["xl", "l", "m", "s", "xs"];
-declare const levelValues: readonly ["1", "2", "3", "4", "5", "6"];
-export declare type TSinchTitleType = typeof typeValues[number];
-export declare type TSinchTitleLevel = typeof levelValues[number];
-export declare type TSinchTitleElement = HTMLElement & {
-    text: string;
-    type: TSinchTitleType;
-};
-export declare type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
-    text: string;
-    type: TSinchTitleType;
-    'aria-level': TSinchTitleLevel;
-};
+import type { TSinchTitleElement, TSinchTitleReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -23,4 +10,3 @@ declare global {
         'sinch-title': TSinchTitleElement;
     }
 }
-export {};

package/title/index.js

@@ -10,21 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 import '../icons/cancel';
 import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement } from '../utils';
 const templateHTML = '<style>:host{display:block}:host([type=xl])>*{font:var(--sinch-font-title-xl)}:host([type="l"])>*{font:var(--sinch-font-title-l)}:host([type="m"])>*{font:var(--sinch-font-title-m)}:host([type="s"])>*{font:var(--sinch-font-title-s)}:host([type=xs])>*{font:var(--sinch-font-title-xs)}</style><span id="text"></span>';
-const typeValues = ['xl', 'l', 'm', 's', 'xs'];
-const levelValues = ['1', '2', '3', '4', '5', '6'];
-
-const assertLevel = value => {
-  if (value === null || !levelValues.includes(value)) {
-    throw new Error(`sinch-title: invalid aria-level attribute: ${value}`);
-  }
-};
-
-const assertType = value => {
-  if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-title: invalid type attribute: ${value}`);
-  }
-};
-
+import { assertLevel, assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends NectaryElement {
@@ -44,7 +30,7 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
 
   connectedCallback() {
     this.setAttribute('role', 'heading');
-    assertLevel(this.getAttribute('aria-level'));
+    assertLevel(this.getAttribute('level'));
     assertType(this.getAttribute('type'));
   }
 
@@ -65,7 +51,7 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
   }
 
   static get observedAttributes() {
-    return ['text', 'type', 'aria-level'];
+    return ['text', 'type', 'level'];
   }
 
   attributeChangedCallback(name, _, newVal) {
@@ -76,9 +62,10 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
           break;
         }
 
-      case 'aria-level':
+      case 'level':
         {
           assertLevel(newVal);
+          updateAttribute(this, 'aria-level', newVal);
           break;
         }
 

package/title/types.d.ts

@@ -0,0 +1,17 @@
+import type { TSinchElementReact } from '../types';
+import type { levelValues, typeValues } from './utils';
+export declare type TSinchTitleType = typeof typeValues[number];
+export declare type TSinchTitleLevel = typeof levelValues[number];
+export declare type TSinchTitleElement = HTMLElement & {
+    text: string;
+    type: TSinchTitleType;
+    level: TSinchTitleLevel;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'type', value: TSinchTitleType): void;
+    setAttribute(name: 'level', value: TSinchTitleLevel): void;
+};
+export declare type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
+    text: string;
+    type: TSinchTitleType;
+    level: TSinchTitleLevel;
+};

package/title/types.js

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

package/title/utils.d.ts

@@ -0,0 +1,8 @@
+import type { TSinchTitleLevel, TSinchTitleType } from './types';
+export declare const typeValues: readonly ["xl", "l", "m", "s", "xs"];
+export declare const levelValues: readonly ["1", "2", "3", "4", "5", "6"];
+declare type TAssertLevel = (value: string | null) => asserts value is TSinchTitleLevel;
+declare type TAssertType = (value: string | null) => asserts value is TSinchTitleType;
+export declare const assertLevel: TAssertLevel;
+export declare const assertType: TAssertType;
+export {};

package/title/utils.js

@@ -0,0 +1,12 @@
+export const typeValues = ['xl', 'l', 'm', 's', 'xs'];
+export const levelValues = ['1', '2', '3', '4', '5', '6'];
+export const assertLevel = value => {
+  if (value === null || !levelValues.includes(value)) {
+    throw new Error(`sinch-title: invalid level attribute: ${value}`);
+  }
+};
+export const assertType = value => {
+  if (value === null || !typeValues.includes(value)) {
+    throw new Error(`sinch-title: invalid type attribute: ${value}`);
+  }
+};

package/toggle/index.d.ts

@@ -1,25 +1,4 @@
-import type { TSinchElementReact } from '../types';
-import type { FocusEvent, SyntheticEvent } from 'react';
-export declare type TSinchToggleElement = HTMLElement & {
-    checked: boolean;
-    small: boolean;
-    labeled: boolean;
-    disabled: boolean;
-    text: string | null;
-    focus(): void;
-    blur(): void;
-};
-export declare type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
-    checked?: boolean;
-    small?: boolean;
-    labeled?: boolean;
-    disabled?: boolean;
-    text?: string;
-    'aria-label': string;
-    onChange: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
-    onFocus?: (e: FocusEvent<TSinchToggleElement>) => void;
-    onBlur?: (e: FocusEvent<TSinchToggleElement>) => void;
-};
+import type { TSinchToggleElement, TSinchToggleReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {

package/toggle/index.js

@@ -7,7 +7,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, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);text-align:initial}:host([small]:not([small=false])) #wrapper{font:var(--sinch-font-small-text)}#checkbox{all:initial;display:block;position:absolute;left:0;top:0;width:40px;height:20px;cursor:pointer;pointer-events:initial}#checkbox:disabled{cursor:initial}#knob-container{position:relative;box-sizing:border-box;align-self:center;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-color-stormy-100);overflow:hidden}:host([checked]:not([checked=false])) #knob-container{background-color:var(--sinch-color-tropical-500)}:host([small]:not([small=false])) #knob-container{width:32px;height:16px;border-radius:8px}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-color-snow-100);transform:translateX(0);transition:transform .1s ease-in-out}:host([checked]:not([checked=false])) #knob{transform:translateX(20px)}:host([small]:not([small=false])) #knob{width:12px;height:12px}:host([small]:not([small=false])[checked]:not([checked=false])) #knob{transform:translateX(16px)}#knob::after,#knob::before{color:var(--sinch-color-snow-100);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::after,:host([labeled]:not([labeled=false]):is(:not([small]),[small=false])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host([disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-snow-700)}:host([checked]:not([checked=false])[disabled]:not([disabled=false])) #knob-container{background-color:var(--sinch-color-tropical-100)}</style><div id="wrapper"><div id="knob-container"><div id="knob"></div><input id="checkbox" type="checkbox"></div><label for="checkbox" id="label"></label></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -117,13 +117,17 @@ defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new Weak
 
       case 'checked':
         {
-          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          const isChecked = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$input).checked = isChecked;
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
           break;
         }
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
+          const isDisabled = isAttrTrue(newVal);
+          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
     }

package/toggle/types.d.ts

@@ -0,0 +1,26 @@
+import type { TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+export declare type TSinchToggleElement = HTMLElement & {
+    checked: boolean;
+    small: boolean;
+    labeled: boolean;
+    disabled: boolean;
+    text: string | null;
+    focus(): void;
+    blur(): void;
+    addEventListener(type: 'change', listener: (e: CustomEvent<boolean>) => void): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'small', value: ''): void;
+    setAttribute(name: 'labeled', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export declare type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
+    checked?: boolean;
+    small?: boolean;
+    labeled?: boolean;
+    disabled?: boolean;
+    text?: string;
+    'aria-label': string;
+    onChange: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
+};

package/toggle/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,20 @@
+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;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'width', value: string): void;
+    setAttribute(name: 'inverted', value: ''): void;
+    setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
+};
+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'];

package/types.d.ts

@@ -1,6 +1,10 @@
-import type { ClassAttributes, HTMLAttributes } from 'react'
+import type { ClassAttributes, DOMAttributes, HTMLAttributes } from 'react'
 
-export type TSinchElementReact<TElementProperties> = Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> & ClassAttributes<TElementProperties> & { class?: string }
+export type TSinchElementReact<TElement> =
+  Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> &
+  ClassAttributes<TElement> &
+  Pick<DOMAttributes<TElement>, 'onClick' | 'onDoubleClick' | 'onMouseDown' | 'onMouseUp' | 'onMouseMove' | 'onMouseOver' | 'onMouseOut' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onKeyPress'> &
+  { class?: string }
 
 export type TRect = {
   x: number,

package/utils.d.ts

@@ -7,13 +7,13 @@ declare global {
     }
 }
 export declare class NectaryElement extends HTMLElement {
-    attachShadow(): ShadowRoot;
+    attachShadow(options?: Partial<ShadowRootInit>): ShadowRoot;
 }
 export declare const getReactEventHandler: ($element: HTMLElement, handlerName: string) => ((arg?: any) => void) | null;
-export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const updateExplicitBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const isAttrTrue: (attrValue: string | null) => boolean;
 export declare const getBooleanAttribute: ($element: Element, attrName: string) => boolean;
+export declare const updateBooleanAttribute: ($element: Element, attrName: string, attrValue: boolean | null | undefined) => void;
 export declare const updateAttribute: ($element: Element, attrName: string, attrValue: string | number | boolean | null | undefined) => void;
 export declare function getAttribute($element: Element, attrName: string): string | undefined;
 export declare function getAttribute($element: Element, attrName: string, defaultValue: null): string | null;

package/utils.js

@@ -27,11 +27,12 @@ export const setNectaryRegistry = registry => {
   nectaryDefinitions.clear();
 };
 export class NectaryElement extends HTMLElement {
-  attachShadow() {
+  attachShadow(options) {
     return super.attachShadow({
       mode: 'closed',
       delegatesFocus: true,
-      customElements: nectaryRegistry
+      customElements: nectaryRegistry,
+      ...options
     });
   }
 
@@ -45,13 +46,6 @@ export const getReactEventHandler = ($element, handlerName) => {
 
   return null;
 };
-export const updateBooleanAttribute = ($element, attrName, attrValue) => {
-  if (attrValue === true) {
-    $element.setAttribute(attrName, '');
-  } else {
-    $element.removeAttribute(attrName);
-  }
-};
 export const updateExplicitBooleanAttribute = ($element, attrName, attrValue) => {
   $element.setAttribute(attrName, attrValue === true ? 'true' : 'false');
 };
@@ -61,6 +55,17 @@ export const isAttrTrue = attrValue => {
 export const getBooleanAttribute = ($element, attrName) => {
   return isAttrTrue($element.getAttribute(attrName));
 };
+export const updateBooleanAttribute = ($element, attrName, attrValue) => {
+  const isCurrentValueTrue = getBooleanAttribute($element, attrName);
+
+  if (attrValue === true) {
+    if (!isCurrentValueTrue) {
+      $element.setAttribute(attrName, '');
+    }
+  } else if (isCurrentValueTrue) {
+    $element.removeAttribute(attrName);
+  }
+};
 export const updateAttribute = ($element, attrName, attrValue) => {
   if (attrValue != null) {
     $element.setAttribute(attrName, String(attrValue));

package/card-button/utils.d.ts

@@ -1,2 +0,0 @@
-import type { TSinchCardButtonElement } from '.';
-export declare const isSinchCardButtonElement: (el: Element) => el is TSinchCardButtonElement;

package/card-button/utils.js

@@ -1,3 +0,0 @@
-export const isSinchCardButtonElement = el => {
-  return el.tagName === 'SINCH-CARD-BUTTON';
-};

package/card-link/utils.d.ts

@@ -1,2 +0,0 @@
-import type { TSinchCardLinkElement } from '.';
-export declare const isSinchCardLinkElement: (el: Element) => el is TSinchCardLinkElement;

package/card-link/utils.js

@@ -1,3 +0,0 @@
-export const isSinchCardLinkElement = el => {
-  return el.tagName === 'SINCH-CARD-LINK';
-};