@nectary/components 0.8.0 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion-item/index.js +1 -1
- package/checkbox/index.js +1 -1
- package/icon/arrow-back-ios/index.d.ts +11 -0
- package/icon/arrow-back-ios/index.js +4 -0
- package/icon/arrow-forward-ios/index.d.ts +11 -0
- package/icon/arrow-forward-ios/index.js +4 -0
- package/icon/chevron-left/index.d.ts +11 -0
- package/icon/chevron-left/index.js +4 -0
- package/icon/chevron-right/index.d.ts +11 -0
- package/icon/chevron-right/index.js +4 -0
- package/icon/expand-less/index.d.ts +11 -0
- package/icon/expand-less/index.js +4 -0
- package/icon/expand-more/index.d.ts +11 -0
- package/icon/expand-more/index.js +4 -0
- package/icon/keyboard-arrow-down/index.d.ts +11 -0
- package/icon/keyboard-arrow-down/index.js +4 -0
- package/icon/keyboard-arrow-left/index.d.ts +11 -0
- package/icon/keyboard-arrow-left/index.js +4 -0
- package/icon/keyboard-arrow-right/index.d.ts +11 -0
- package/icon/keyboard-arrow-right/index.js +4 -0
- package/icon/keyboard-arrow-up/index.d.ts +11 -0
- package/icon/keyboard-arrow-up/index.js +4 -0
- package/index.d.ts +11 -0
- package/index.js +11 -0
- package/input/index.js +1 -1
- package/package.json +1 -1
- package/pagination/index.d.ts +27 -0
- package/pagination/index.js +224 -0
- package/radio-option/index.js +1 -1
- package/select/index.js +1 -1
- package/select-option/index.js +1 -1
- package/table/index.js +1 -1
- package/table-head-cell/index.js +1 -1
- package/tabs-option/index.js +1 -1
- package/textarea/index.js +1 -1
- package/toggle/index.js +1 -1
- package/readme.md +0 -172
package/accordion-item/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200)}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#box{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#box{display:block}</style><div id="wrapper"><button id="button" aria-haspopup="box" aria-expanded="false" aria-labelledby="button"><slot name="icon"></slot><span id="content"></span> <svg id="dropdown-icon" width="12" height="8"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="box"><slot name="content"></slot></div></div>';
|
|
11
|
+
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200)}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-4);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#box{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#box{display:block}</style><div id="wrapper"><button id="button" aria-haspopup="box" aria-expanded="false" aria-labelledby="button"><slot name="icon"></slot><span id="content"></span> <svg id="dropdown-icon" width="12" height="8"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="box"><slot name="content"></slot></div></div>';
|
|
12
12
|
export const isAccordionItemElement = element => {
|
|
13
13
|
return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
|
|
14
14
|
};
|
package/checkbox/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
9
9
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
10
10
|
|
|
11
11
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
12
|
-
const templateHTML = '<style>:host{--sinch-color-icon:var(--sinch-color-snow-100);--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px
|
|
12
|
+
const templateHTML = '<style>:host{--sinch-color-icon:var(--sinch-color-snow-100);--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-800);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:2px;pointer-events:none;background-color:var(--sinch-color-checkbox-background);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border) inset;transition:background-color .1s linear}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0%;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0%;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-stormy-200)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:100%}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:100%}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-checked) inset}#checkbox:focus::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus::after{background-color:var(--sinch-color-checkbox-background-focus);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus) inset}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover) inset}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active) inset}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled) inset}#checkbox:focus:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-focus-checked) inset}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-hover-checked) inset}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-active-checked) inset}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);box-shadow:0 0 0 2px var(--sinch-color-checkbox-border-disabled-checked) inset}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/> <svg id="icon-checkmark" width="14" height="11"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg> <svg id="icon-indeterminate" width="12" height="2"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
|
|
13
13
|
const template = document.createElement('template');
|
|
14
14
|
template.innerHTML = templateHTML;
|
|
15
15
|
defineCustomElement('sinch-checkbox', (_$input = new WeakMap(), _$label = new WeakMap(), class extends HTMLElement {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-arrow-back-ios': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-arrow-back-ios': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M16.62 2.99a1.25 1.25 0 0 0-1.77 0L6.54 11.3a.996.996 0 0 0 0 1.41l8.31 8.31c.49.49 1.28.49 1.77 0s.49-1.28 0-1.77L9.38 12l7.25-7.25c.48-.48.48-1.28-.01-1.76Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-arrow-back-ios', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-arrow-forward-ios': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-arrow-forward-ios': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98a1.25 1.25 0 0 0-1.77 0 1.25 1.25 0 0 0 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-arrow-forward-ios', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-chevron-left': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-chevron-left': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M14.71 6.71a.996.996 0 0 0-1.41 0L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59a.996.996 0 1 0 1.41-1.41L10.83 12l3.88-3.88c.39-.39.38-1.03 0-1.41Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-chevron-left', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-chevron-right': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-chevron-right': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-chevron-right', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-expand-less': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-expand-less': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M11.29 8.71 6.7 13.3a.996.996 0 1 0 1.41 1.41L12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-expand-less', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-expand-more': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-expand-more': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M15.88 9.29 12 13.17 8.12 9.29a.996.996 0 1 0-1.41 1.41l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59a.996.996 0 0 0 0-1.41c-.39-.38-1.03-.39-1.42 0Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-expand-more', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-keyboard-arrow-down': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-keyboard-arrow-down': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M8.12 9.29 12 13.17l3.88-3.88a.996.996 0 1 1 1.41 1.41l-4.59 4.59a.996.996 0 0 1-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-keyboard-arrow-down', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-keyboard-arrow-left': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-keyboard-arrow-left': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M14.71 15.88 10.83 12l3.88-3.88a.996.996 0 1 0-1.41-1.41L8.71 11.3a.996.996 0 0 0 0 1.41l4.59 4.59c.39.39 1.02.39 1.41 0 .38-.39.39-1.03 0-1.42Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-keyboard-arrow-left', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-keyboard-arrow-right': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-keyboard-arrow-right': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M9.29 15.88 13.17 12 9.29 8.12a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3a.996.996 0 0 1-1.41 0c-.38-.39-.39-1.03 0-1.42Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-keyboard-arrow-right', createIconClass(templateHTML));
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchIconElement, TSinchIconReact } from '../types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-icon-keyboard-arrow-up': TSinchIconReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-icon-keyboard-arrow-up': TSinchIconElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { defineCustomElement } from '../../utils';
|
|
2
|
+
import { createIconClass } from '../create-icon-class';
|
|
3
|
+
const templateHTML = '<svg viewBox="0 0 24 24"><path d="M8.12 14.71 12 10.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 8.71a.996.996 0 0 0-1.41 0L6.7 13.3a.996.996 0 0 0 0 1.41c.39.38 1.03.39 1.42 0Z"/></svg>';
|
|
4
|
+
defineCustomElement('sinch-icon-keyboard-arrow-up', createIconClass(templateHTML));
|
package/index.d.ts
CHANGED
|
@@ -19,6 +19,16 @@ import './tag-close';
|
|
|
19
19
|
import './textarea';
|
|
20
20
|
import './toggle';
|
|
21
21
|
import './tooltip';
|
|
22
|
+
import './icon/keyboard-arrow-down';
|
|
23
|
+
import './icon/keyboard-arrow-left';
|
|
24
|
+
import './icon/keyboard-arrow-right';
|
|
25
|
+
import './icon/keyboard-arrow-up';
|
|
26
|
+
import './icon/chevron-left';
|
|
27
|
+
import './icon/chevron-right';
|
|
28
|
+
import './icon/expand-less';
|
|
29
|
+
import './icon/expand-more';
|
|
30
|
+
import './icon/arrow-back-ios';
|
|
31
|
+
import './icon/arrow-forward-ios';
|
|
22
32
|
import './icon/cancel';
|
|
23
33
|
import './icon/close';
|
|
24
34
|
import './icon/east';
|
|
@@ -33,6 +43,7 @@ import './icon/south';
|
|
|
33
43
|
import './icon/south-east';
|
|
34
44
|
import './icon/south-west';
|
|
35
45
|
import './icon/west';
|
|
46
|
+
import './pagination';
|
|
36
47
|
import './table';
|
|
37
48
|
import './table-cell';
|
|
38
49
|
import './table-head';
|
package/index.js
CHANGED
|
@@ -19,6 +19,16 @@ import './tag-close';
|
|
|
19
19
|
import './textarea';
|
|
20
20
|
import './toggle';
|
|
21
21
|
import './tooltip';
|
|
22
|
+
import './icon/keyboard-arrow-down';
|
|
23
|
+
import './icon/keyboard-arrow-left';
|
|
24
|
+
import './icon/keyboard-arrow-right';
|
|
25
|
+
import './icon/keyboard-arrow-up';
|
|
26
|
+
import './icon/chevron-left';
|
|
27
|
+
import './icon/chevron-right';
|
|
28
|
+
import './icon/expand-less';
|
|
29
|
+
import './icon/expand-more';
|
|
30
|
+
import './icon/arrow-back-ios';
|
|
31
|
+
import './icon/arrow-forward-ios';
|
|
22
32
|
import './icon/cancel';
|
|
23
33
|
import './icon/close';
|
|
24
34
|
import './icon/east';
|
|
@@ -33,6 +43,7 @@ import './icon/south';
|
|
|
33
43
|
import './icon/south-east';
|
|
34
44
|
import './icon/south-west';
|
|
35
45
|
import './icon/west';
|
|
46
|
+
import './pagination';
|
|
36
47
|
import './table';
|
|
37
48
|
import './table-cell';
|
|
38
49
|
import './table-head';
|
package/input/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
-
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]))
|
|
11
|
+
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])){--sinch-color-icon: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>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
|
package/package.json
CHANGED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import '../icon/keyboard-arrow-left';
|
|
2
|
+
import '../icon/keyboard-arrow-right';
|
|
3
|
+
import type { TSinchElementReact } from '../types';
|
|
4
|
+
import type { FocusEvent, SyntheticEvent } from 'react';
|
|
5
|
+
export declare type TSinchPaginationElement = HTMLElement & {
|
|
6
|
+
value: number;
|
|
7
|
+
max: number;
|
|
8
|
+
focus(): void;
|
|
9
|
+
blur(): void;
|
|
10
|
+
};
|
|
11
|
+
export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
|
|
12
|
+
value: number;
|
|
13
|
+
max: number;
|
|
14
|
+
onChange: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
|
|
15
|
+
onFocus?: (e: FocusEvent<TSinchPaginationElement>) => void;
|
|
16
|
+
onBlur?: (e: FocusEvent<TSinchPaginationElement>) => void;
|
|
17
|
+
};
|
|
18
|
+
declare global {
|
|
19
|
+
namespace JSX {
|
|
20
|
+
interface IntrinsicElements {
|
|
21
|
+
'sinch-pagination': TSinchPaginationReact;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
interface HTMLElementTagNameMap {
|
|
25
|
+
'sinch-pagination': TSinchPaginationElement;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
|
|
2
|
+
import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
|
|
3
|
+
|
|
4
|
+
var _$left, _$right, _$buttons, _$wrapper, _onValueChange, _onButtonClick, _clamp, _dispatchChangeEvent;
|
|
5
|
+
|
|
6
|
+
function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
|
|
7
|
+
|
|
8
|
+
function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
|
|
9
|
+
|
|
10
|
+
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
11
|
+
|
|
12
|
+
function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
|
|
13
|
+
|
|
14
|
+
import '../icon/keyboard-arrow-left';
|
|
15
|
+
import '../icon/keyboard-arrow-right';
|
|
16
|
+
import { defineCustomElement, updateAttribute, getIntegerAttribute } from '../utils';
|
|
17
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;box-sizing:border-box}button{all:initial;width:28px;height:28px;box-sizing:border-box;cursor:pointer;text-align:center;contain:strict;--sinch-color-icon:var(--sinch-color-stormy-500)}button:disabled{--sinch-color-icon:var(--sinch-color-stormy-100);cursor:initial}button>*{pointer-events:none}.page{border-radius:50%;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500)}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-font-emphasized-body);background-color:var(--sinch-color-snow-600);pointer-events:none;cursor:initial}.page.hidden{display:none}</style><div id="wrapper"><button id="left"><sinch-icon-keyboard-arrow-left></sinch-icon-keyboard-arrow-left></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon-keyboard-arrow-right></sinch-icon-keyboard-arrow-right></button></div>';
|
|
18
|
+
const NUM_BUTTONS = 7;
|
|
19
|
+
const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
|
|
20
|
+
const FIRST_BTN_INDEX = 0;
|
|
21
|
+
const LAST_BTN_INDEX = NUM_BUTTONS - 1;
|
|
22
|
+
const DOTS_LEFT_INDEX = 1;
|
|
23
|
+
const DOTS_RIGHT_INDEX = LAST_BTN_INDEX - 1;
|
|
24
|
+
|
|
25
|
+
const setClass = (elem, name, isSet) => {
|
|
26
|
+
isSet ? elem.classList.add(name) : elem.classList.remove(name);
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
const template = document.createElement('template');
|
|
30
|
+
template.innerHTML = templateHTML;
|
|
31
|
+
defineCustomElement('sinch-pagination', (_$left = new WeakMap(), _$right = new WeakMap(), _$buttons = new WeakMap(), _$wrapper = new WeakMap(), _onValueChange = new WeakSet(), _onButtonClick = new WeakMap(), _clamp = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends HTMLElement {
|
|
32
|
+
constructor() {
|
|
33
|
+
super();
|
|
34
|
+
|
|
35
|
+
_classPrivateMethodInitSpec(this, _dispatchChangeEvent);
|
|
36
|
+
|
|
37
|
+
_classPrivateMethodInitSpec(this, _clamp);
|
|
38
|
+
|
|
39
|
+
_classPrivateMethodInitSpec(this, _onValueChange);
|
|
40
|
+
|
|
41
|
+
_classPrivateFieldInitSpec(this, _$left, {
|
|
42
|
+
writable: true,
|
|
43
|
+
value: void 0
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
_classPrivateFieldInitSpec(this, _$right, {
|
|
47
|
+
writable: true,
|
|
48
|
+
value: void 0
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
_classPrivateFieldInitSpec(this, _$buttons, {
|
|
52
|
+
writable: true,
|
|
53
|
+
value: void 0
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
_classPrivateFieldInitSpec(this, _$wrapper, {
|
|
57
|
+
writable: true,
|
|
58
|
+
value: void 0
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
_classPrivateFieldInitSpec(this, _onButtonClick, {
|
|
62
|
+
writable: true,
|
|
63
|
+
value: e => {
|
|
64
|
+
e.stopPropagation();
|
|
65
|
+
const value = getIntegerAttribute(this, 'value', 0) - 1;
|
|
66
|
+
const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
|
|
67
|
+
|
|
68
|
+
if (e.target === _classPrivateFieldGet(this, _$left)) {
|
|
69
|
+
return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value - 1);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
if (e.target === _classPrivateFieldGet(this, _$right)) {
|
|
73
|
+
return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, value + 1);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
const btnIndex = Array.prototype.indexOf.call(_classPrivateFieldGet(this, _$wrapper).children, e.target) - 1;
|
|
77
|
+
|
|
78
|
+
if (btnIndex >= 0 && btnIndex < _classPrivateFieldGet(this, _$buttons).length) {
|
|
79
|
+
if (btnIndex === FIRST_BTN_INDEX) {
|
|
80
|
+
return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, 0);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
if (btnIndex === _classPrivateFieldGet(this, _$buttons).length - 1) {
|
|
84
|
+
return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, max - 1);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (btnIndex === DOTS_LEFT_INDEX && max > NUM_BUTTONS && value > MIDDLE_BTN_INDEX) {
|
|
88
|
+
return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor(value / 2));
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
if (btnIndex === DOTS_RIGHT_INDEX && max > NUM_BUTTONS && value <= max - DOTS_RIGHT_INDEX) {
|
|
92
|
+
return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, Math.floor((max - value) / 2 + value));
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
return _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, btnIndex + Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS)));
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
|
|
100
|
+
const shadowRoot = this.attachShadow({
|
|
101
|
+
mode: 'production' === 'development' ? 'open' : 'closed',
|
|
102
|
+
delegatesFocus: true
|
|
103
|
+
});
|
|
104
|
+
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
105
|
+
|
|
106
|
+
_classPrivateFieldSet(this, _$left, shadowRoot.querySelector('#left'));
|
|
107
|
+
|
|
108
|
+
_classPrivateFieldSet(this, _$right, shadowRoot.querySelector('#right'));
|
|
109
|
+
|
|
110
|
+
_classPrivateFieldSet(this, _$buttons, shadowRoot.querySelectorAll('.page'));
|
|
111
|
+
|
|
112
|
+
_classPrivateFieldSet(this, _$wrapper, shadowRoot.querySelector('#wrapper'));
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
connectedCallback() {
|
|
116
|
+
_classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
|
|
117
|
+
|
|
118
|
+
_classPrivateFieldGet(this, _$wrapper).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
disconnectedCallback() {
|
|
122
|
+
_classPrivateFieldGet(this, _$wrapper).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
static get observedAttributes() {
|
|
126
|
+
return ['max', 'value'];
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
attributeChangedCallback(name, _) {
|
|
130
|
+
switch (name) {
|
|
131
|
+
case 'value':
|
|
132
|
+
{
|
|
133
|
+
_classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
|
|
134
|
+
|
|
135
|
+
break;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
case 'max':
|
|
139
|
+
{
|
|
140
|
+
_classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this);
|
|
141
|
+
|
|
142
|
+
break;
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
get nodeName() {
|
|
148
|
+
return 'select';
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
set value(val) {
|
|
152
|
+
updateAttribute(this, 'value', val);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
get value() {
|
|
156
|
+
return getIntegerAttribute(this, 'value', 0);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
set max(val) {
|
|
160
|
+
updateAttribute(this, 'max', val);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
get max() {
|
|
164
|
+
return getIntegerAttribute(this, 'value', 0);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
focus() {
|
|
168
|
+
_classPrivateFieldGet(this, _$left).focus();
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
blur() {
|
|
172
|
+
_classPrivateFieldGet(this, _$left).blur();
|
|
173
|
+
|
|
174
|
+
_classPrivateFieldGet(this, _$right).blur();
|
|
175
|
+
|
|
176
|
+
_classPrivateFieldGet(this, _$buttons).forEach($b => $b.blur());
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
}));
|
|
180
|
+
|
|
181
|
+
function _onValueChange2() {
|
|
182
|
+
const value = getIntegerAttribute(this, 'value', 0) - 1;
|
|
183
|
+
const max = Math.max(0, getIntegerAttribute(this, 'max', 0));
|
|
184
|
+
const valueOffset = Math.min(Math.max(0, value - MIDDLE_BTN_INDEX), Math.max(0, max - NUM_BUTTONS));
|
|
185
|
+
|
|
186
|
+
for (let i = 0; i < _classPrivateFieldGet(this, _$buttons).length; i++) {
|
|
187
|
+
const $b = _classPrivateFieldGet(this, _$buttons)[i];
|
|
188
|
+
|
|
189
|
+
if (value < 3) {
|
|
190
|
+
setClass($b, 'active', value === i);
|
|
191
|
+
} else if (value >= max - MIDDLE_BTN_INDEX) {
|
|
192
|
+
setClass($b, 'active', i + valueOffset === value);
|
|
193
|
+
} else {
|
|
194
|
+
setClass($b, 'active', i === MIDDLE_BTN_INDEX);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
if (max > NUM_BUTTONS) {
|
|
198
|
+
setClass($b, 'dots', i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
setClass($b, 'hidden', i >= max);
|
|
202
|
+
const btnText = $b.firstElementChild;
|
|
203
|
+
|
|
204
|
+
if (btnText != null) {
|
|
205
|
+
btnText.textContent = i === FIRST_BTN_INDEX ? '1' : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
|
|
206
|
+
}
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
const isValueBad = value < 0 || value >= max;
|
|
210
|
+
_classPrivateFieldGet(this, _$left).disabled = isValueBad || value === 0;
|
|
211
|
+
_classPrivateFieldGet(this, _$right).disabled = isValueBad || value === max - 1;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
function _clamp2(value, max) {
|
|
215
|
+
return Math.max(0, Math.min(max - 1, value));
|
|
216
|
+
}
|
|
217
|
+
|
|
218
|
+
function _dispatchChangeEvent2(value) {
|
|
219
|
+
const max = getIntegerAttribute(this, 'max', 0);
|
|
220
|
+
this.dispatchEvent(new CustomEvent('change', {
|
|
221
|
+
detail: _classPrivateMethodGet(this, _clamp, _clamp2).call(this, value, max) + 1,
|
|
222
|
+
bubbles: true
|
|
223
|
+
}));
|
|
224
|
+
}
|
package/radio-option/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
-
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;
|
|
11
|
+
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:100%;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:100%;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:100%;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:100%;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:100%;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>';
|
|
12
12
|
export const isRadioOptionElement = element => {
|
|
13
13
|
return element instanceof Element && element.tagName === 'SINCH-RADIO-OPTION';
|
|
14
14
|
};
|
package/select/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
|
|
|
9
9
|
|
|
10
10
|
import { isSelectOptionElement } from '../select-option';
|
|
11
11
|
import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
|
|
12
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:2px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)
|
|
12
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:2px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}#button:focus{border-color:var(--sinch-color-stormy-300)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#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])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox>*{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><button id="button" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="label button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div><div id="listbox" tabindex="-1"><div><slot name="select"></slot></div></div></div>';
|
|
13
13
|
const ITEM_HEIGHT = 36;
|
|
14
14
|
|
|
15
15
|
const getEnabledOptionElements = $slot => {
|
package/select-option/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;padding:6px 12px;width:100%;align-items:center}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(*){margin-right:12px}:host(:hover)>#wrapper,:host([selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:10px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100)
|
|
11
|
+
const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;padding:6px 12px;width:100%;align-items:center}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(*){margin-right:12px}:host(:hover)>#wrapper,:host([selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:10px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}: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><span id="content"></span></div>';
|
|
12
12
|
export const isSelectOptionElement = element => {
|
|
13
13
|
return element instanceof Element && element.tagName === 'SINCH-SELECT-OPTION';
|
|
14
14
|
};
|
package/table/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body)}</style><slot></slot>';
|
|
2
|
+
const templateHTML = '<style>:host{display:table;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}</style><slot></slot>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-table', class extends HTMLElement {
|
package/table-head-cell/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
|
|
11
|
-
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{width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-200);
|
|
11
|
+
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:4px;width:100%;height:100%;box-sizing:border-box}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-4);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
const alignValues = ['start', 'center', 'end'];
|
package/tabs-option/index.js
CHANGED
|
@@ -7,7 +7,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
7
7
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
8
8
|
|
|
9
9
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
10
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{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);font:var(--sinch-font-body)}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500);font:var(--sinch-font-emphasized-body)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span> <input type="radio"/></div>';
|
|
10
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{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);font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500);font:var(--sinch-font-emphasized-body)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span> <input type="radio"/></div>';
|
|
11
11
|
export const isTabsOptionElement = element => {
|
|
12
12
|
return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
|
|
13
13
|
};
|
package/textarea/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
-
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%;min-height:86px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:vertical}#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]))
|
|
11
|
+
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%;min-height:86px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:vertical}#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])){--sinch-color-icon: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><textarea id="input" rows="3"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
|
package/toggle/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
-
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>';
|
|
11
|
+
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>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
defineCustomElement('sinch-toggle', (_$input = new WeakMap(), _$label = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
|
package/readme.md
DELETED
|
@@ -1,172 +0,0 @@
|
|
|
1
|
-
# 🐝 Nectary
|
|
2
|
-
|
|
3
|
-
Design System's framework-agnostic Component Library implementation.
|
|
4
|
-
|
|
5
|
-
>Nectaries are specialized nectar-producing structures of the flower.
|
|
6
|
-
|
|
7
|
-
>Bumblebees eat nectar and pollen made by flowers. The sugary nectar provides the bees with energy while the pollen provides them with protein.
|
|
8
|
-
|
|
9
|
-
## Install
|
|
10
|
-
|
|
11
|
-
Add the following line to `.npmrc` in the project root:
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
//registry.npmjs.org/:_authToken=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
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
Add the component library dependency to `package.json`:
|
|
18
|
-
|
|
19
|
-
```
|
|
20
|
-
npm install @sinch-engage/nectary
|
|
21
|
-
# or
|
|
22
|
-
yarn add @sinch-engage/nectary
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
⚠️ VPN is required.
|
|
26
|
-
|
|
27
|
-
## Usage
|
|
28
|
-
|
|
29
|
-
### Theme
|
|
30
|
-
|
|
31
|
-
Import CSS file with [custom properties](./theme.css) (variables):
|
|
32
|
-
|
|
33
|
-
```js
|
|
34
|
-
import '@sinch-engage/nectary/theme.css'
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
Use color palette or custom font face:
|
|
38
|
-
|
|
39
|
-
```css
|
|
40
|
-
span {
|
|
41
|
-
color: var(--sinch-color-honey-700);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
h2 {
|
|
45
|
-
font: var(--sinch-font-title-2);
|
|
46
|
-
}
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### Components
|
|
50
|
-
|
|
51
|
-
Import component:
|
|
52
|
-
|
|
53
|
-
```js
|
|
54
|
-
import '@sinch-engage/nectary/button'
|
|
55
|
-
```
|
|
56
|
-
|
|
57
|
-
Use it in React/Vue/Angular/etc, for example:
|
|
58
|
-
|
|
59
|
-
```jsx
|
|
60
|
-
<sinch-button value="Click me" onClick={() => console.log('click')}></sinch-button>
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
⚠️ Note that it's not allowed to self-close custom element tags.
|
|
64
|
-
|
|
65
|
-
## Testing
|
|
66
|
-
|
|
67
|
-
If you are testing your application using Nectary components with Jest, you might run into some problems, as it does not work out of the box. Here are the common pitfalls and their solutions.
|
|
68
|
-
|
|
69
|
-
### Example configuration
|
|
70
|
-
|
|
71
|
-
jest.config.js
|
|
72
|
-
|
|
73
|
-
```js
|
|
74
|
-
/** @type {import("ts-jest/dist/types").InitialOptionsTsJest} */
|
|
75
|
-
module.exports = {
|
|
76
|
-
preset: "ts-jest",
|
|
77
|
-
testEnvironment: "jsdom",
|
|
78
|
-
moduleNameMapper: {
|
|
79
|
-
"\\.(css)$": "identity-obj-proxy"
|
|
80
|
-
},
|
|
81
|
-
transform: {
|
|
82
|
-
"^.+\\.(ts|tsx)?$": "ts-jest",
|
|
83
|
-
"^.+\\.(js|jsx)$": "babel-jest"
|
|
84
|
-
},
|
|
85
|
-
transformIgnorePatterns: [
|
|
86
|
-
"node_modules/(?!@nectary)"
|
|
87
|
-
]
|
|
88
|
-
}
|
|
89
|
-
```
|
|
90
|
-
|
|
91
|
-
babel.config.js
|
|
92
|
-
|
|
93
|
-
```js
|
|
94
|
-
module.exports = {presets: ['@babel/preset-env']}
|
|
95
|
-
```
|
|
96
|
-
|
|
97
|
-
### CSS
|
|
98
|
-
|
|
99
|
-
If you already have a babel loader for CSS, you might not need this part. If you do not, you can use [identity-obj-proxy](https://www.npmjs.com/package/identity-obj-proxy) to mock your CSS imports:
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
npm install identity-obj-proxy
|
|
103
|
-
# or
|
|
104
|
-
yarn add identity-obj-proxy
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
Then add this part to your jest.config.js file:
|
|
108
|
-
|
|
109
|
-
```
|
|
110
|
-
moduleNameMapper: {
|
|
111
|
-
"\\.(css)$": "identity-obj-proxy"
|
|
112
|
-
},
|
|
113
|
-
```
|
|
114
|
-
|
|
115
|
-
It lets Jest know how to mock the css imports in your codebase, like for example when you import the theme:
|
|
116
|
-
|
|
117
|
-
```js
|
|
118
|
-
import '@sinch-engage/nectary/theme.css'
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
This import should not throw an error now.
|
|
122
|
-
|
|
123
|
-
### JS and TS
|
|
124
|
-
|
|
125
|
-
You are going to need to install [babel-jest](https://www.npmjs.com/package/babel-jest) if it is not already done:
|
|
126
|
-
|
|
127
|
-
```
|
|
128
|
-
npm install babel-jest
|
|
129
|
-
# or
|
|
130
|
-
yarn add babel-jest
|
|
131
|
-
```
|
|
132
|
-
|
|
133
|
-
Then add this lines to your jest.config.js file:
|
|
134
|
-
|
|
135
|
-
```
|
|
136
|
-
transform: {
|
|
137
|
-
"^.+\\.(ts|tsx)?$": "ts-jest", // if you are using Typescript and ts-jest
|
|
138
|
-
"^.+\\.(js|jsx)$": "babel-jest"
|
|
139
|
-
},
|
|
140
|
-
transformIgnorePatterns: [
|
|
141
|
-
"node_modules/(?!@nectary)"
|
|
142
|
-
]
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
It is necessary to export the env preset in the babel.js.config file:
|
|
146
|
-
|
|
147
|
-
```js
|
|
148
|
-
module.exports = {presets: ['@babel/preset-env']}
|
|
149
|
-
```
|
|
150
|
-
|
|
151
|
-
If you import any component:
|
|
152
|
-
|
|
153
|
-
```js
|
|
154
|
-
import '@sinch-engage/nectary/input'
|
|
155
|
-
```
|
|
156
|
-
|
|
157
|
-
It should not throw the error:
|
|
158
|
-
|
|
159
|
-
```Jest encountered an unexpected token```
|
|
160
|
-
|
|
161
|
-
## TODO
|
|
162
|
-
|
|
163
|
-
- [x] [Storybook](https://saas.pages.sinch.com/engage/engage/) (VPN is required)
|
|
164
|
-
- [x] Follow the WCAG 2.1 guidelines
|
|
165
|
-
- [x] Tests
|
|
166
|
-
- [x] (in progress) Cross-browser Chromium/Firefox/WebKit visual regression tests
|
|
167
|
-
- [x] Cross-framework React/Vue/Angular tests
|
|
168
|
-
- [x] a11y tests using [Axe](https://www.deque.com/axe/) library
|
|
169
|
-
- [ ] CI/CD
|
|
170
|
-
- [x] Auto-publish on Git tag
|
|
171
|
-
- [x] Send message/changelog to Slack
|
|
172
|
-
- [ ] Provide unique Storybook preview link in PRs
|