@nectary/components 0.36.0 → 0.37.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/alert/index.js +1 -1
- package/avatar-badge/index.js +1 -1
- package/avatar-status/index.js +1 -1
- package/button/types.d.ts +6 -0
- package/chat-avatar/index.js +1 -1
- package/dialog/index.js +1 -1
- package/dropdown-text-option/index.js +1 -1
- package/field/index.d.ts +11 -0
- package/field/index.js +144 -0
- package/field/types.d.ts +35 -0
- package/field/types.js +1 -0
- package/illustrations/create-illustration-class.js +1 -1
- package/inline-alert/index.js +1 -1
- package/input/index.js +10 -82
- package/input/types.d.ts +10 -24
- package/link/index.d.ts +1 -0
- package/link/index.js +19 -12
- package/link/types.d.ts +29 -0
- package/package.json +2 -2
- package/popover/index.js +102 -70
- package/search/index.js +1 -1
- package/select/index.d.ts +1 -0
- package/select/index.js +12 -94
- package/select/types.d.ts +10 -24
- package/select-option/types.d.ts +26 -3
- package/tag/index.js +1 -1
- package/textarea/index.js +15 -83
- package/textarea/types.d.ts +28 -12
- package/time-picker/index.js +8 -0
- package/utils.d.ts +1 -0
- package/utils.js +8 -0
- package/vertical-stepper-item/index.js +1 -1
package/alert/index.js
CHANGED
|
@@ -12,7 +12,7 @@ import '../icons/report';
|
|
|
12
12
|
import '../icons/info';
|
|
13
13
|
import '../text';
|
|
14
14
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
|
|
15
|
-
const templateHTML = '<style
|
|
15
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:0 16px;box-sizing:border-box;width:100%;height:48px}#text{color:var(--sinch-color-stormy-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
|
|
16
16
|
import { assertType, typeValues } from './utils';
|
|
17
17
|
const template = document.createElement('template');
|
|
18
18
|
template.innerHTML = templateHTML;
|
package/avatar-badge/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, NectaryElement, setClass, updateAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style
|
|
11
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#text{width:var(--sinch-avatar-badge-size);height:var(--sinch-avatar-badge-size);border:1px solid var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);text-align:center;box-sizing:border-box;color:var(--sinch-color-snow-100);font:var(--sinch-avatar-badge-font);background-color:var(--sinch-color-raspberry-500)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="text"></div>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
defineCustomElement('sinch-avatar-badge', (_$text = new WeakMap(), class extends NectaryElement {
|
package/avatar-status/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style
|
|
2
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#circle{width:10px;height:10px;border:1px solid var(--sinch-color-snow-100);border-radius:50%;box-sizing:border-box}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="circle"></div>';
|
|
3
3
|
import { assertColor, colorValues } from './utils';
|
|
4
4
|
const template = document.createElement('template');
|
|
5
5
|
template.innerHTML = templateHTML;
|
package/button/types.d.ts
CHANGED
|
@@ -9,8 +9,11 @@ export declare type TSinchButtonElement = HTMLElement & {
|
|
|
9
9
|
disabled: boolean;
|
|
10
10
|
/** Small */
|
|
11
11
|
small: boolean;
|
|
12
|
+
/** Click event */
|
|
12
13
|
addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
|
|
14
|
+
/** Focus event */
|
|
13
15
|
addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
|
|
16
|
+
/** Blur event */
|
|
14
17
|
addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
|
|
15
18
|
/** Type */
|
|
16
19
|
setAttribute(attr: 'type', value: TSinchButtonType): void;
|
|
@@ -32,7 +35,10 @@ export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement>
|
|
|
32
35
|
disabled?: boolean;
|
|
33
36
|
/** Small */
|
|
34
37
|
small?: boolean;
|
|
38
|
+
/** Click event handler */
|
|
35
39
|
'on-click'?: (e: CustomEvent<void>) => void;
|
|
40
|
+
/** Focus event handler */
|
|
36
41
|
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
42
|
+
/** Blur event handler */
|
|
37
43
|
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
38
44
|
};
|
package/chat-avatar/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
|
|
|
9
9
|
|
|
10
10
|
import '../avatar';
|
|
11
11
|
import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
|
|
12
|
-
const templateHTML = '<style
|
|
12
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}sinch-avatar{display:block}</style><sinch-avatar background="blue" size="l"></sinch-avatar>';
|
|
13
13
|
const template = document.createElement('template');
|
|
14
14
|
template.innerHTML = templateHTML;
|
|
15
15
|
defineCustomElement('sinch-chat-avatar', (_$avatar = new WeakMap(), class extends NectaryElement {
|
package/dialog/index.js
CHANGED
|
@@ -16,7 +16,7 @@ import '../icon-button';
|
|
|
16
16
|
import '../icons/close';
|
|
17
17
|
import '../stop-events';
|
|
18
18
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
|
|
19
|
-
const templateHTML = '<style
|
|
19
|
+
const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
|
|
20
20
|
const template = document.createElement('template');
|
|
21
21
|
template.innerHTML = templateHTML;
|
|
22
22
|
defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
|
|
@@ -7,7 +7,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
|
|
|
7
7
|
|
|
8
8
|
import '../icons/check';
|
|
9
9
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
|
|
10
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;--sinch-size-icon:24px}#content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><sinch-icon-check id="check"></sinch-icon-check></div>';
|
|
10
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><sinch-icon-check id="check"></sinch-icon-check></div>';
|
|
11
11
|
const template = document.createElement('template');
|
|
12
12
|
template.innerHTML = templateHTML;
|
|
13
13
|
|
package/field/index.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchFieldElement, TSinchFieldReact } from './types';
|
|
2
|
+
declare global {
|
|
3
|
+
namespace JSX {
|
|
4
|
+
interface IntrinsicElements {
|
|
5
|
+
'sinch-field': TSinchFieldReact;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
interface HTMLElementTagNameMap {
|
|
9
|
+
'sinch-field': TSinchFieldElement;
|
|
10
|
+
}
|
|
11
|
+
}
|
package/field/index.js
ADDED
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
|
|
2
|
+
import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
|
|
3
|
+
|
|
4
|
+
var _$label, _$optionalText, _$additionalText, _$invalidText, _$inputSlot, _onLabelClick;
|
|
5
|
+
|
|
6
|
+
function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
|
|
7
|
+
|
|
8
|
+
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
|
+
|
|
10
|
+
import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);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);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::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])) #top{--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><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
|
|
12
|
+
const template = document.createElement('template');
|
|
13
|
+
template.innerHTML = templateHTML;
|
|
14
|
+
defineCustomElement('sinch-field', (_$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$inputSlot = new WeakMap(), _onLabelClick = new WeakMap(), class extends NectaryElement {
|
|
15
|
+
constructor() {
|
|
16
|
+
super();
|
|
17
|
+
|
|
18
|
+
_classPrivateFieldInitSpec(this, _$label, {
|
|
19
|
+
writable: true,
|
|
20
|
+
value: void 0
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
_classPrivateFieldInitSpec(this, _$optionalText, {
|
|
24
|
+
writable: true,
|
|
25
|
+
value: void 0
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
_classPrivateFieldInitSpec(this, _$additionalText, {
|
|
29
|
+
writable: true,
|
|
30
|
+
value: void 0
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
_classPrivateFieldInitSpec(this, _$invalidText, {
|
|
34
|
+
writable: true,
|
|
35
|
+
value: void 0
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
_classPrivateFieldInitSpec(this, _$inputSlot, {
|
|
39
|
+
writable: true,
|
|
40
|
+
value: void 0
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
_classPrivateFieldInitSpec(this, _onLabelClick, {
|
|
44
|
+
writable: true,
|
|
45
|
+
value: () => {
|
|
46
|
+
_classPrivateFieldGet(this, _$inputSlot).assignedElements()[0]?.focus?.();
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
const shadowRoot = this.attachShadow();
|
|
51
|
+
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
52
|
+
|
|
53
|
+
_classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
|
|
54
|
+
|
|
55
|
+
_classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
|
|
56
|
+
|
|
57
|
+
_classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
|
|
58
|
+
|
|
59
|
+
_classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
|
|
60
|
+
|
|
61
|
+
_classPrivateFieldSet(this, _$inputSlot, shadowRoot.querySelector('slot[name="input"]'));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
connectedCallback() {
|
|
65
|
+
_classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
disconnectedCallback() {
|
|
69
|
+
_classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
static get observedAttributes() {
|
|
73
|
+
return ['label', 'optionaltext', 'additionaltext', 'invalidtext'];
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
set label(value) {
|
|
77
|
+
updateAttribute(this, 'label', value);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
get label() {
|
|
81
|
+
return getAttribute(this, 'label', '');
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
set optionalText(value) {
|
|
85
|
+
updateAttribute(this, 'optionaltext', value);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
get optionalText() {
|
|
89
|
+
return getAttribute(this, 'optionaltext', null);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
set additionalText(value) {
|
|
93
|
+
updateAttribute(this, 'additionaltext', value);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
get additionalText() {
|
|
97
|
+
return getAttribute(this, 'additionaltext', null);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
set invalidText(value) {
|
|
101
|
+
updateAttribute(this, 'invalidtext', value);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
get invalidText() {
|
|
105
|
+
return getAttribute(this, 'invalidtext', null);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
set disabled(isDisabled) {
|
|
109
|
+
updateBooleanAttribute(this, 'disabled', isDisabled);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
get disabled() {
|
|
113
|
+
return getBooleanAttribute(this, 'disabled');
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
attributeChangedCallback(name, _, newVal) {
|
|
117
|
+
switch (name) {
|
|
118
|
+
case 'label':
|
|
119
|
+
{
|
|
120
|
+
_classPrivateFieldGet(this, _$label).textContent = newVal;
|
|
121
|
+
break;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
case 'optionaltext':
|
|
125
|
+
{
|
|
126
|
+
_classPrivateFieldGet(this, _$optionalText).textContent = newVal;
|
|
127
|
+
break;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
case 'additionaltext':
|
|
131
|
+
{
|
|
132
|
+
_classPrivateFieldGet(this, _$additionalText).textContent = newVal;
|
|
133
|
+
break;
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
case 'invalidtext':
|
|
137
|
+
{
|
|
138
|
+
_classPrivateFieldGet(this, _$invalidText).textContent = newVal;
|
|
139
|
+
break;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
}));
|
package/field/types.d.ts
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import type { TSinchElementReact } from '../types';
|
|
2
|
+
export declare type TSinchFieldElement = HTMLElement & {
|
|
3
|
+
/** Label */
|
|
4
|
+
label: string;
|
|
5
|
+
/** Optional text */
|
|
6
|
+
optionalText: string | null;
|
|
7
|
+
/** Additional text */
|
|
8
|
+
additionalText: string | null;
|
|
9
|
+
/** Invalid text, controls the overall invalid state of the text field */
|
|
10
|
+
invalidText: string | null;
|
|
11
|
+
/** Disabled */
|
|
12
|
+
disabled: boolean;
|
|
13
|
+
/** Label */
|
|
14
|
+
setAttribute(name: 'label', value: string): void;
|
|
15
|
+
/** Optional text */
|
|
16
|
+
setAttribute(name: 'optionaltext', value: string): void;
|
|
17
|
+
/** Additional text */
|
|
18
|
+
setAttribute(name: 'additionaltext', value: string): void;
|
|
19
|
+
/** Invalid text, controls the overall invalid state of the text field */
|
|
20
|
+
setAttribute(name: 'invalidtext', value: string): void;
|
|
21
|
+
/** Disabled */
|
|
22
|
+
setAttribute(name: 'disabled', value: ''): void;
|
|
23
|
+
};
|
|
24
|
+
export declare type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
|
|
25
|
+
/** Label that shows in UI */
|
|
26
|
+
label: string;
|
|
27
|
+
/** Optional text */
|
|
28
|
+
optionalText?: string;
|
|
29
|
+
/** Additional text */
|
|
30
|
+
additionalText?: string;
|
|
31
|
+
/** Invalid text, controls the overall invalid state of the text field */
|
|
32
|
+
invalidText?: string;
|
|
33
|
+
/** Disabled */
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
};
|
package/field/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getIntegerAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
|
|
2
|
-
const illustrationStylesHtml = '<style
|
|
2
|
+
const illustrationStylesHtml = '<style>:host{display:block}svg{display:block;pointer-events:none}#wrapper{display:flex;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden}#wrapper>*{flex-shrink:0}:host([valign=top]) #wrapper{align-items:flex-start}:host([valign=bottom]) #wrapper{align-items:flex-end}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-background-yellow)}:host([background=green]) #wrapper{background-color:var(--sinch-color-background-green)}:host([background=blue]) #wrapper{background-color:var(--sinch-color-background-blue)}:host([background=grey]) #wrapper{background-color:var(--sinch-color-background-grey)}:host([background=white]) #wrapper{background-color:var(--sinch-color-background-white)}</style>';
|
|
3
3
|
import { backgroundValues, valignValues } from './utils';
|
|
4
4
|
const DEFAULT_SIZE = 256;
|
|
5
5
|
const MIN_SIZE = 16;
|
package/inline-alert/index.js
CHANGED
|
@@ -14,7 +14,7 @@ import '../icons/info';
|
|
|
14
14
|
import '../title';
|
|
15
15
|
import '../text';
|
|
16
16
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
|
|
17
|
-
const templateHTML = '<style
|
|
17
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500)}#text{color:var(--sinch-color-stormy-500);margin-top:4px}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
|
|
18
18
|
import { assertType, typeValues } from './utils';
|
|
19
19
|
const template = document.createElement('template');
|
|
20
20
|
template.innerHTML = templateHTML;
|
package/input/index.js
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
|
|
2
2
|
import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
|
|
3
3
|
|
|
4
|
-
var _$input, _$
|
|
4
|
+
var _$input, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
|
|
5
5
|
|
|
6
6
|
function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
|
|
7
7
|
|
|
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, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle
|
|
11
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon{display:flex;position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.empty{display:none}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
|
|
12
12
|
import { inputTypes } from './utils';
|
|
13
13
|
const template = document.createElement('template');
|
|
14
14
|
template.innerHTML = templateHTML;
|
|
15
|
-
defineCustomElement('sinch-input', (_$input = new WeakMap(), _$
|
|
15
|
+
defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
|
|
16
16
|
constructor() {
|
|
17
17
|
super();
|
|
18
18
|
|
|
@@ -21,26 +21,6 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
|
|
|
21
21
|
value: void 0
|
|
22
22
|
});
|
|
23
23
|
|
|
24
|
-
_classPrivateFieldInitSpec(this, _$label, {
|
|
25
|
-
writable: true,
|
|
26
|
-
value: void 0
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
_classPrivateFieldInitSpec(this, _$optionalText, {
|
|
30
|
-
writable: true,
|
|
31
|
-
value: void 0
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
_classPrivateFieldInitSpec(this, _$additionalText, {
|
|
35
|
-
writable: true,
|
|
36
|
-
value: void 0
|
|
37
|
-
});
|
|
38
|
-
|
|
39
|
-
_classPrivateFieldInitSpec(this, _$invalidText, {
|
|
40
|
-
writable: true,
|
|
41
|
-
value: void 0
|
|
42
|
-
});
|
|
43
|
-
|
|
44
24
|
_classPrivateFieldInitSpec(this, _$iconSlot, {
|
|
45
25
|
writable: true,
|
|
46
26
|
value: void 0
|
|
@@ -178,14 +158,6 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
|
|
|
178
158
|
|
|
179
159
|
_classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
|
|
180
160
|
|
|
181
|
-
_classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
|
|
182
|
-
|
|
183
|
-
_classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
|
|
184
|
-
|
|
185
|
-
_classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
|
|
186
|
-
|
|
187
|
-
_classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
|
|
188
|
-
|
|
189
161
|
_classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot[name="icon"]'));
|
|
190
162
|
|
|
191
163
|
_classPrivateFieldSet(this, _$iconWrapper, shadowRoot.querySelector('#icon'));
|
|
@@ -246,7 +218,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
|
|
|
246
218
|
}
|
|
247
219
|
|
|
248
220
|
static get observedAttributes() {
|
|
249
|
-
return ['type', 'value', 'placeholder', '
|
|
221
|
+
return ['type', 'value', 'placeholder', 'invalid', 'disabled'];
|
|
250
222
|
}
|
|
251
223
|
|
|
252
224
|
get nodeName() {
|
|
@@ -277,36 +249,12 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
|
|
|
277
249
|
return getAttribute(this, 'placeholder', null);
|
|
278
250
|
}
|
|
279
251
|
|
|
280
|
-
set
|
|
281
|
-
|
|
282
|
-
}
|
|
283
|
-
|
|
284
|
-
get label() {
|
|
285
|
-
return getAttribute(this, 'label', '');
|
|
252
|
+
set invalid(isInvalid) {
|
|
253
|
+
updateBooleanAttribute(this, 'invalid', isInvalid);
|
|
286
254
|
}
|
|
287
255
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
}
|
|
291
|
-
|
|
292
|
-
get optionalText() {
|
|
293
|
-
return getAttribute(this, 'optionaltext', null);
|
|
294
|
-
}
|
|
295
|
-
|
|
296
|
-
set additionalText(value) {
|
|
297
|
-
updateAttribute(this, 'additionaltext', value);
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
get additionalText() {
|
|
301
|
-
return getAttribute(this, 'additionaltext', null);
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
set invalidText(value) {
|
|
305
|
-
updateAttribute(this, 'invalidtext', value);
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
get invalidText() {
|
|
309
|
-
return getAttribute(this, 'invalidtext', null);
|
|
256
|
+
get invalid() {
|
|
257
|
+
return getBooleanAttribute(this, 'invalid');
|
|
310
258
|
}
|
|
311
259
|
|
|
312
260
|
set disabled(isDisabled) {
|
|
@@ -369,12 +317,6 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
|
|
|
369
317
|
break;
|
|
370
318
|
}
|
|
371
319
|
|
|
372
|
-
case 'label':
|
|
373
|
-
{
|
|
374
|
-
_classPrivateFieldGet(this, _$label).textContent = newVal;
|
|
375
|
-
break;
|
|
376
|
-
}
|
|
377
|
-
|
|
378
320
|
case 'placeholder':
|
|
379
321
|
{
|
|
380
322
|
_classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
|
|
@@ -382,23 +324,9 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$label = new WeakM
|
|
|
382
324
|
break;
|
|
383
325
|
}
|
|
384
326
|
|
|
385
|
-
case '
|
|
386
|
-
{
|
|
387
|
-
_classPrivateFieldGet(this, _$optionalText).textContent = newVal;
|
|
388
|
-
break;
|
|
389
|
-
}
|
|
390
|
-
|
|
391
|
-
case 'additionaltext':
|
|
392
|
-
{
|
|
393
|
-
_classPrivateFieldGet(this, _$additionalText).textContent = newVal;
|
|
394
|
-
break;
|
|
395
|
-
}
|
|
396
|
-
|
|
397
|
-
case 'invalidtext':
|
|
327
|
+
case 'invalid':
|
|
398
328
|
{
|
|
399
|
-
|
|
400
|
-
_classPrivateFieldGet(this, _$invalidText).textContent = newVal;
|
|
401
|
-
updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
|
|
329
|
+
updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
|
|
402
330
|
break;
|
|
403
331
|
}
|
|
404
332
|
|
package/input/types.d.ts
CHANGED
|
@@ -6,16 +6,10 @@ export declare type TSinchInputElement = HTMLElement & {
|
|
|
6
6
|
type: TSinchInputType;
|
|
7
7
|
/** Value */
|
|
8
8
|
value: string;
|
|
9
|
-
/** Label */
|
|
10
|
-
label: string;
|
|
11
9
|
/** Text that appears in the text field when it has no value set */
|
|
12
10
|
placeholder: string | null;
|
|
13
|
-
/**
|
|
14
|
-
|
|
15
|
-
/** Additional text */
|
|
16
|
-
additionalText: string | null;
|
|
17
|
-
/** Invalid text, controls the overall invalid state of the text field */
|
|
18
|
-
invalidText: string | null;
|
|
11
|
+
/** Invalid state */
|
|
12
|
+
invalid: boolean;
|
|
19
13
|
/** Disabled */
|
|
20
14
|
disabled: boolean;
|
|
21
15
|
selectionStart: number | null;
|
|
@@ -23,48 +17,40 @@ export declare type TSinchInputElement = HTMLElement & {
|
|
|
23
17
|
selectionDirection: 'forward' | 'backward' | 'none' | null;
|
|
24
18
|
/** Change value event */
|
|
25
19
|
addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
|
|
20
|
+
/** Focus event */
|
|
26
21
|
addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
|
|
22
|
+
/** Blur event */
|
|
27
23
|
addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
|
|
28
24
|
/** Text field type, `text` by default */
|
|
29
25
|
setAttribute(name: 'type', value: TSinchInputType): void;
|
|
30
26
|
/** Value */
|
|
31
27
|
setAttribute(name: 'value', value: string): void;
|
|
32
|
-
/** Label */
|
|
33
|
-
setAttribute(name: 'label', value: string): void;
|
|
34
28
|
/** Text that appears in the text field when it has no value set */
|
|
35
29
|
setAttribute(name: 'placeholder', value: string): void;
|
|
36
|
-
/**
|
|
37
|
-
setAttribute(name: '
|
|
38
|
-
/** Additional text */
|
|
39
|
-
setAttribute(name: 'additionaltext', value: string): void;
|
|
40
|
-
/** Invalid text, controls the overall invalid state of the text field */
|
|
41
|
-
setAttribute(name: 'invalidtext', value: string): void;
|
|
30
|
+
/** Invalid state */
|
|
31
|
+
setAttribute(name: 'invalid', value: ''): void;
|
|
42
32
|
/** Disabled */
|
|
43
33
|
setAttribute(name: 'disabled', value: ''): void;
|
|
44
34
|
};
|
|
45
35
|
export declare type TSinchInputReact = TSinchElementReact<TSinchInputElement> & {
|
|
46
36
|
/** Controlled value, doesn't change on its own and requres an onChange-value state loop */
|
|
47
37
|
value: string;
|
|
48
|
-
/** Label that shows in UI */
|
|
49
|
-
label: string;
|
|
50
38
|
/** Label that is used for a11y – might be different from `label` */
|
|
51
39
|
'aria-label': string;
|
|
52
40
|
/** Text field type, `text` by default */
|
|
53
41
|
type?: TSinchInputType;
|
|
54
42
|
/** Text that appears in the text field when it has no value set */
|
|
55
43
|
placeholder?: string;
|
|
56
|
-
/**
|
|
57
|
-
|
|
58
|
-
/** Additional text */
|
|
59
|
-
additionalText?: string;
|
|
60
|
-
/** Invalid text, controls the overall invalid state of the text field */
|
|
61
|
-
invalidText?: string;
|
|
44
|
+
/** Invalid state */
|
|
45
|
+
invalid?: boolean;
|
|
62
46
|
/** Disabled */
|
|
63
47
|
disabled?: boolean;
|
|
64
48
|
/** @deprecated Change value handler */
|
|
65
49
|
onChange?: (e: SyntheticEvent<TSinchInputElement, CustomEvent<string>>) => void;
|
|
66
50
|
/** Change value handler */
|
|
67
51
|
'on-change'?: (e: CustomEvent<string>) => void;
|
|
52
|
+
/** Focus handler */
|
|
68
53
|
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
54
|
+
/** Blur handler */
|
|
69
55
|
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
70
56
|
};
|