@nectary/components 0.8.0

package/index.js

@@ -0,0 +1,56 @@
+import './theme.css';
+import './accordion';
+import './accordion-item';
+import './alert';
+import './alert-button';
+import './alert-close';
+import './button';
+import './checkbox';
+import './input';
+import './help-tooltip';
+import './link';
+import './select';
+import './select-option';
+import './radio';
+import './radio-option';
+import './tabs';
+import './tag';
+import './tag-close';
+import './textarea';
+import './toggle';
+import './tooltip';
+import './icon/cancel';
+import './icon/close';
+import './icon/east';
+import './icon/help-outline';
+import './icon/more-horiz';
+import './icon/more-vert';
+import './icon/north';
+import './icon/north-east';
+import './icon/north-west';
+import './icon/open-in-new';
+import './icon/south';
+import './icon/south-east';
+import './icon/south-west';
+import './icon/west';
+import './table';
+import './table-cell';
+import './table-head';
+import './table-head-cell';
+import './table-head-sort';
+import './table-body';
+import './table-row';
+import './spinner';
+import './logo/sinch-icon';
+import './logo/sinch-icon-wordmark';
+import './icon-branded/barchart-down';
+import './icon-branded/barchart-up';
+import './icon-branded/campaigns';
+import './icon-branded/chatbot';
+import './icon-branded/contact';
+import './icon-branded/home';
+import './icon-branded/multiple-channels';
+import './icon-branded/rocket';
+import './icon-branded/settings';
+import './icon-branded/user';
+import './icon-branded/users';

package/input/index.d.ts

@@ -0,0 +1,35 @@
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, SyntheticEvent } from 'react';
+export declare type TSinchInputElement = HTMLElement & {
+    value: string;
+    label: string;
+    placeholder: string | null;
+    optionalText: string | null;
+    invalidText: string | null;
+    additionalText: string | null;
+    disabled: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
+    value: string;
+    label: string;
+    placeholder?: string;
+    optionalText?: string;
+    invalidText?: string;
+    additionalText?: string;
+    disabled?: boolean;
+    onChange: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
+    onFocus?: (e: FocusEvent<TSinchInputElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchInputElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-input': TSinchInputReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-input': TSinchInputElement;
+    }
+}

package/input/index.js

@@ -0,0 +1,203 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$input, _$label, _$optionalText, _$additionalText, _$invalidText, _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{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:2px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-300)}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) ::slotted(sinch-help-tooltip){fill:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = 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, _$optionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$additionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$invalidText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onInput, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const value = e.target.value;
+        _classPrivateFieldGet(this, _$input).value = this.value;
+        this.dispatchEvent(new CustomEvent('change', {
+          detail: value,
+          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'));
+
+    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
+
+    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
+
+    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'placeholder', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
+  }
+
+  get type() {
+    return 'text';
+  }
+
+  get nodeName() {
+    return 'input';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder', null);
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set optionalText(value) {
+    updateAttribute(this, 'optionaltext', value);
+  }
+
+  get optionalText() {
+    return getAttribute(this, 'optionaltext', null);
+  }
+
+  set additionalText(value) {
+    updateAttribute(this, 'additionaltext', value);
+  }
+
+  get additionalText() {
+    return getAttribute(this, 'additionaltext', null);
+  }
+
+  set invalidText(value) {
+    updateAttribute(this, 'invalidtext', value);
+  }
+
+  get invalidText() {
+    return getAttribute(this, 'invalidtext', null);
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          _classPrivateFieldGet(this, _$input).value = newVal ?? '';
+          break;
+        }
+
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'placeholder':
+        {
+          _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          break;
+        }
+
+      case 'optionaltext':
+        {
+          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
+          break;
+        }
+
+      case 'additionaltext':
+        {
+          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
+          break;
+        }
+
+      case 'invalidtext':
+        {
+          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _$input).disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$input).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$input).blur();
+  }
+
+}));

package/link/index.d.ts

@@ -0,0 +1,30 @@
+import '../icon/cancel';
+import type { TSinchElementReact } from '../types';
+import type { FocusEvent, MouseEvent } from 'react';
+export declare type TSinchLinkElement = HTMLElement & {
+    text: string;
+    href: string;
+    disabled: boolean;
+    external: boolean;
+    focus(): void;
+    blur(): void;
+};
+export declare type TSinchLinkReact = TSinchElementReact<TSinchLinkElement> & {
+    text: string;
+    href: string;
+    disabled?: boolean;
+    external?: boolean;
+    onClick?: (e: MouseEvent<TSinchLinkElement>) => void;
+    onFocus?: (e: FocusEvent<TSinchLinkElement>) => void;
+    onBlur?: (e: FocusEvent<TSinchLinkElement>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-link': TSinchLinkReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-link': TSinchLinkElement;
+    }
+}

package/link/index.js

@@ -0,0 +1,118 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$anchor, _$text, _onClick;
+
+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 '../icon/cancel';
+import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline;outline:0}a{font:var(--sinch-font-body);font-size:inherit;line-height:inherit;color:var(--sinch-color-text-link);fill:var(--sinch-color-text-link)}svg{display:none;transform:translateY(.15em);margin-left:.4em;width:.8em;pointer-events:none}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;fill:var(--sinch-color-tropical-200)}:host([external]:not([external=false])) svg{display:inline-block}</style><a><span></span><svg viewBox="0 0 16 16"><path d="M14.222 14.222H1.778V1.778H8V0H1.778C.79 0 0 .8 0 1.778v12.444C0 15.2.791 16 1.778 16h12.444C15.2 16 16 15.2 16 14.222V8h-1.778v6.222ZM9.778 0v1.778h3.19l-8.737 8.738 1.253 1.253 8.738-8.738v3.191H16V0H9.778Z"/></svg></a>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onClick = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$anchor, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onClick, {
+      writable: true,
+      value: e => {
+        if (this.disabled) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('span'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get href() {
+    return getAttribute(this, 'href', '');
+  }
+
+  set href(value) {
+    updateAttribute(this, 'href', value);
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set external(isExternal) {
+    updateBooleanAttribute(this, 'external', isExternal);
+  }
+
+  get external() {
+    return getBooleanAttribute(this, 'external');
+  }
+
+  static get observedAttributes() {
+    return ['text', 'href'];
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          break;
+        }
+
+      case 'href':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
+          break;
+        }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$anchor).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$anchor).blur();
+  }
+
+}));