@nectary/components 0.8.0

package/toggle/index.d.ts

@@ -0,0 +1,31 @@
+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;
+    onChange: (e: SyntheticEvent<TSinchToggleElement, CustomEvent<boolean>>) => void;
+    onFocus?: (e: FocusEvent<TSinchToggleElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchToggleElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toggle': TSinchToggleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toggle': TSinchToggleElement;
+    }
+}

package/toggle/index.js

@@ -0,0 +1,144 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$input, _$label, _onInput;
+
+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"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } 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);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;
+defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$input, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onInput, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        const isChecked = _classPrivateFieldGet(this, _$input).checked;
+
+        _classPrivateFieldGet(this, _$input).checked = this.checked;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: isChecked,
+          bubbles: true
+        }));
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('input'));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('label'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'text'];
+  }
+
+  get type() {
+    return 'text';
+  }
+
+  get nodeName() {
+    return 'input';
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+
+  set labeled(isLabeled) {
+    updateBooleanAttribute(this, 'labeled', isLabeled);
+  }
+
+  get labeled() {
+    return getBooleanAttribute(this, 'labeled');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', null);
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'checked':
+        {
+          _classPrivateFieldGet(this, _$input).checked = isAttrTrue(newVal);
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$input).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$input).blur();
+  }
+
+}));

package/tooltip/index.d.ts

@@ -0,0 +1,26 @@
+import type { 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;
+};
+export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+    text: string;
+    width?: number;
+    inverted?: boolean;
+    orientation?: TSinchTooltipOrientation;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tooltip': TSinchTooltipReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tooltip': TSinchTooltipElement;
+    }
+}
+export {};

package/tooltip/index.js

@@ -0,0 +1,68 @@
+import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } 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:100%}#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"><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'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tooltip', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.$tooltipText = shadowRoot.querySelector('#text');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'width'];
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get width() {
+    return getIntegerAttribute(this, 'width', null);
+  }
+
+  set width(value) {
+    updateAttribute(this, 'width', value);
+  }
+
+  get inverted() {
+    return getBooleanAttribute(this, 'inverted');
+  }
+
+  set inverted(isInverted) {
+    updateBooleanAttribute(this, 'inverted', isInverted);
+  }
+
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'top');
+  }
+
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.$tooltipText.textContent = newVal;
+          break;
+        }
+
+      case 'width':
+        {
+          this.$tooltipText.style.maxWidth = attrValueToPixels(newVal);
+          break;
+        }
+    }
+  }
+
+});

package/types.d.ts

@@ -0,0 +1,3 @@
+import type { ClassAttributes, HTMLAttributes } from 'react'
+
+export type TSinchElementReact<TElementProperties> = Pick<HTMLAttributes<HTMLElement>, 'id' | 'className' | 'style' | 'slot' | 'children'> & ClassAttributes<TElementProperties> & { class?: string }

package/utils.d.ts

@@ -0,0 +1,31 @@
+export declare const defineCustomElement: (name: string, constructor: CustomElementConstructor) => void;
+export declare const defineNectaryElements: (registry: CustomElementRegistry) => void;
+export declare type TEventHandler = (arg?: any) => void;
+export declare const updateBooleanAttribute: ($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 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;
+export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
+export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
+export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: T[number] | null | undefined) => void;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number] | undefined;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
+export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
+declare type TRange = {
+    min?: number;
+    max?: number;
+};
+export declare const attrValueToInteger: (value: string | null, range?: TRange) => number | null;
+export declare const attrValueToPixels: (value: string | null, options?: TRange & {
+    multiplier?: number;
+}) => string;
+export declare const updateIntegerAttribute: ($element: Element, attrName: string, attrValue: string | number | null | undefined, range?: TRange) => void;
+export declare function getIntegerAttribute($element: Element, attrName: string): number | undefined;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
+export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
+export declare const updateCSV: (acc: string, value: string, setActive: boolean) => string;
+export declare const getCSVSet: (acc: string) => Set<string>;
+export declare const getFirstCSValue: (acc: string) => string;
+export {};

package/utils.js

@@ -0,0 +1,146 @@
+const nectaryDefinitions = new Map();
+let nectaryRegistry = null;
+export const defineCustomElement = (name, constructor) => {
+  if (nectaryRegistry !== null) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, constructor);
+    }
+
+    return;
+  }
+
+  nectaryDefinitions.set(name, constructor);
+
+  if (customElements.get(name) == null) {
+    customElements.define(name, constructor);
+  }
+};
+export const defineNectaryElements = registry => {
+  if (nectaryRegistry !== null) {
+    throw new Error('Nectary elements already registered');
+  }
+
+  nectaryRegistry = registry;
+
+  for (const [name, ctor] of nectaryDefinitions.entries()) {
+    if (nectaryRegistry.get(name) == null) {
+      nectaryRegistry.define(name, ctor);
+    }
+  }
+};
+export const updateBooleanAttribute = ($element, attrName, attrValue) => {
+  if (attrValue === true) {
+    $element.setAttribute(attrName, '');
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export const isAttrTrue = attrValue => {
+  return attrValue === '' || attrValue !== 'false' && attrValue !== null;
+};
+export const getBooleanAttribute = ($element, attrName) => {
+  return isAttrTrue($element.getAttribute(attrName));
+};
+export const updateAttribute = ($element, attrName, attrValue) => {
+  if (attrValue != null) {
+    $element.setAttribute(attrName, String(attrValue));
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getAttribute($element, attrName, defaultValue) {
+  return $element.getAttribute(attrName) ?? defaultValue;
+}
+export const isLiteralValue = (literals, value) => {
+  return value != null && literals.includes(value);
+};
+export const updateLiteralAttribute = ($element, literals, attrName, attrValue) => {
+  if (isLiteralValue(literals, attrValue)) {
+    $element.setAttribute(attrName, attrValue);
+  } else {
+    $element.removeAttribute(attrName);
+  }
+};
+export function getLiteralAttribute($element, literals, attrName, defaultValue) {
+  const attrValue = $element.getAttribute(attrName);
+  return isLiteralValue(literals, attrValue) ? attrValue : defaultValue;
+}
+
+const applyRange = (value, range) => {
+  let result = value;
+
+  if (typeof range.min === 'number') {
+    result = Math.max(range.min, result);
+  }
+
+  if (typeof range.max === 'number') {
+    result = Math.min(range.max, result);
+  }
+
+  return result;
+};
+
+export const attrValueToInteger = function (value) {
+  let range = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (value === null) {
+    return null;
+  }
+
+  const int = parseInt(value);
+
+  if (!Number.isInteger(int)) {
+    return null;
+  }
+
+  return applyRange(int, range);
+};
+export const attrValueToPixels = function (value) {
+  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const int = attrValueToInteger(value, {
+    min: options.min ?? 0,
+    max: options.max
+  });
+  return int === null ? 'unset' : `${int * (options.multiplier ?? 1)}px`;
+};
+export const updateIntegerAttribute = function ($element, attrName, attrValue) {
+  let range = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+
+  if (attrValue == null) {
+    $element.removeAttribute(attrName);
+    return;
+  }
+
+  const intValue = typeof attrValue === 'string' ? attrValueToInteger(attrValue, range) : applyRange(attrValue, range);
+
+  if (intValue === null) {
+    return;
+  }
+
+  $element.setAttribute(attrName, intValue.toFixed(0));
+};
+export function getIntegerAttribute($element, attrName, defaultValue) {
+  return attrValueToInteger($element.getAttribute(attrName)) ?? defaultValue;
+}
+export const updateCSV = (acc, value, setActive) => {
+  const values = acc === '' ? [] : acc.split(',');
+  const i = values.indexOf(value);
+
+  if (setActive) {
+    i === -1 && values.push(value);
+  } else {
+    i >= 0 && values.splice(i, 1);
+  }
+
+  return values.join(',');
+};
+export const getCSVSet = acc => {
+  if (acc === '') {
+    return new Set();
+  }
+
+  return new Set(acc.split(','));
+};
+export const getFirstCSValue = acc => {
+  return acc.split(',')[0];
+};