@nectary/components 2.2.2 → 2.3.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/avatar/index.js +1 -1
- package/avatar/types.d.ts +1 -1
- package/package.json +1 -1
- package/segmented-control/index.js +42 -18
- package/segmented-control-option/index.js +22 -30
- package/segmented-icon-control/index.js +46 -23
- package/segmented-icon-control-option/index.js +24 -32
- package/toast/index.js +1 -1
package/avatar/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
|
|
2
2
|
import { DEFAULT_SIZE, sizeValues } from '../utils/size';
|
|
3
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);background-color:var(--sinch-comp-avatar-border-color-default-initial);border-radius:var(--sinch-comp-avatar-shape-radius);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-border-color-default-initial);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/></div><div id="status-wrapper"><div id="status"></div></div></div>';
|
|
3
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);background-color:var(--sinch-comp-avatar-border-color-default-initial);border-radius:var(--sinch-comp-avatar-shape-radius);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#person{display:none;position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--sinch-comp-avatar-container-color-default-foreground);opacity:.15}:host(:not([src]):is(:not([alt]),[alt=""])) #person{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-border-color-default-initial);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span><img id="image" alt=""/><svg id="person" viewBox="0 0 40 40" fill="none"><path d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z"/></svg></div><div id="status-wrapper"><div id="status"></div></div></div>';
|
|
4
4
|
import { getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
|
|
5
5
|
const template = document.createElement('template');
|
|
6
6
|
template.innerHTML = templateHTML;
|
package/avatar/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
|
|
1
|
+
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getTargetByAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
2
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-segmented-control', class extends NectaryElement {
|
|
6
6
|
#$slot;
|
|
7
|
+
#controller = null;
|
|
7
8
|
constructor() {
|
|
8
9
|
super();
|
|
9
10
|
const shadowRoot = this.attachShadow();
|
|
@@ -11,25 +12,26 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
|
|
|
11
12
|
this.#$slot = shadowRoot.querySelector('slot');
|
|
12
13
|
}
|
|
13
14
|
connectedCallback() {
|
|
14
|
-
this
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
this.#controller = new AbortController();
|
|
16
|
+
const {
|
|
17
|
+
signal
|
|
18
|
+
} = this.#controller;
|
|
19
|
+
const options = {
|
|
20
|
+
signal
|
|
21
|
+
};
|
|
22
|
+
this.role = 'tablist';
|
|
23
|
+
this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
|
|
24
|
+
this.#$slot.addEventListener('click', this.#onOptionClick, options);
|
|
25
|
+
this.#$slot.addEventListener('keydown', this.#onOptionKeydown, options);
|
|
17
26
|
this.addEventListener('-change', this.#onChangeReactHandler);
|
|
18
27
|
}
|
|
19
28
|
disconnectedCallback() {
|
|
20
|
-
this
|
|
21
|
-
this
|
|
22
|
-
this.removeEventListener('-change', this.#onChangeReactHandler);
|
|
29
|
+
this.#controller.abort();
|
|
30
|
+
this.#controller = null;
|
|
23
31
|
}
|
|
24
32
|
static get observedAttributes() {
|
|
25
33
|
return ['value'];
|
|
26
34
|
}
|
|
27
|
-
set value(value) {
|
|
28
|
-
updateAttribute(this, 'value', value);
|
|
29
|
-
}
|
|
30
|
-
get value() {
|
|
31
|
-
return getAttribute(this, 'value', '');
|
|
32
|
-
}
|
|
33
35
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
34
36
|
switch (name) {
|
|
35
37
|
case 'value':
|
|
@@ -39,16 +41,38 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
|
|
|
39
41
|
}
|
|
40
42
|
}
|
|
41
43
|
}
|
|
44
|
+
set value(value) {
|
|
45
|
+
updateAttribute(this, 'value', value);
|
|
46
|
+
}
|
|
47
|
+
get value() {
|
|
48
|
+
return getAttribute(this, 'value', '');
|
|
49
|
+
}
|
|
42
50
|
#onSlotChange = () => {
|
|
43
51
|
this.#onValueChange(this.value);
|
|
44
52
|
};
|
|
45
|
-
#
|
|
46
|
-
e
|
|
47
|
-
|
|
53
|
+
#onOptionClick = e => {
|
|
54
|
+
const target = getTargetByAttribute(e, 'value');
|
|
55
|
+
if (target === null || getBooleanAttribute(target, 'disabled')) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
const value = getAttribute(target, 'value', '');
|
|
48
59
|
this.dispatchEvent(new CustomEvent('-change', {
|
|
49
|
-
detail
|
|
60
|
+
detail: value
|
|
50
61
|
}));
|
|
51
62
|
};
|
|
63
|
+
#onOptionKeydown = e => {
|
|
64
|
+
switch (e.code) {
|
|
65
|
+
case 'Space':
|
|
66
|
+
case 'Enter':
|
|
67
|
+
{
|
|
68
|
+
e.preventDefault();
|
|
69
|
+
const target = getTargetByAttribute(e, 'value');
|
|
70
|
+
if (target !== null) {
|
|
71
|
+
target.click();
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
};
|
|
52
76
|
#onValueChange(value) {
|
|
53
77
|
for (const $option of this.#$slot.assignedElements()) {
|
|
54
78
|
const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
|
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;color:var(--sinch-local-color-text);background-color:var(--sinch-local-color-background);--sinch-local-color-text:var(--sinch-comp-segmented-control-color-default-text-initial);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon)}
|
|
2
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;color:var(--sinch-local-color-text);background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-local-color-text:var(--sinch-comp-segmented-control-color-default-text-initial);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial)}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}#content{font:var(--sinch-comp-segmented-control-font-label);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><div id="border"></div><div id="outline"></div></div>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-segmented-control-option', class extends NectaryElement {
|
|
6
|
-
#$button;
|
|
7
6
|
#$label;
|
|
7
|
+
#controller = null;
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
10
10
|
const shadowRoot = this.attachShadow();
|
|
11
11
|
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
12
|
-
this.#$button = shadowRoot.querySelector('#button');
|
|
13
12
|
this.#$label = shadowRoot.querySelector('#content');
|
|
14
13
|
}
|
|
15
14
|
connectedCallback() {
|
|
16
|
-
this
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
this.#controller = new AbortController();
|
|
16
|
+
const {
|
|
17
|
+
signal
|
|
18
|
+
} = this.#controller;
|
|
19
|
+
const options = {
|
|
20
|
+
signal
|
|
21
|
+
};
|
|
22
|
+
this.role = 'tab';
|
|
23
|
+
this.addEventListener('focus', this.#onButtonFocus, options);
|
|
24
|
+
this.addEventListener('blur', this.#onButtonBlur, options);
|
|
20
25
|
this.addEventListener('-focus', this.#onFocusReactHandler);
|
|
21
26
|
this.addEventListener('-blur', this.#onBlurReactHandler);
|
|
27
|
+
this.#updateTabIndex();
|
|
22
28
|
}
|
|
23
29
|
disconnectedCallback() {
|
|
24
|
-
this
|
|
25
|
-
this
|
|
26
|
-
this.#$button.removeEventListener('blur', this.#onButtonBlur);
|
|
27
|
-
this.removeEventListener('-focus', this.#onFocusReactHandler);
|
|
28
|
-
this.removeEventListener('-blur', this.#onBlurReactHandler);
|
|
30
|
+
this.#controller.abort();
|
|
31
|
+
this.#controller = null;
|
|
29
32
|
}
|
|
30
33
|
static get observedAttributes() {
|
|
31
34
|
return ['data-checked', 'disabled', 'text'];
|
|
32
35
|
}
|
|
33
36
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
34
|
-
if (isAttrEqual(oldVal, newVal)) {
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
37
|
switch (name) {
|
|
38
38
|
case 'text':
|
|
39
39
|
{
|
|
@@ -47,9 +47,11 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
|
|
|
47
47
|
}
|
|
48
48
|
case 'disabled':
|
|
49
49
|
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
if (isAttrEqual(oldVal, newVal)) {
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
this.#updateTabIndex();
|
|
54
|
+
updateBooleanAttribute(this, name, isAttrTrue(newVal));
|
|
53
55
|
break;
|
|
54
56
|
}
|
|
55
57
|
}
|
|
@@ -75,19 +77,9 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
|
|
|
75
77
|
get focusable() {
|
|
76
78
|
return true;
|
|
77
79
|
}
|
|
78
|
-
|
|
79
|
-
this
|
|
80
|
-
}
|
|
81
|
-
blur() {
|
|
82
|
-
this.#$button.blur();
|
|
80
|
+
#updateTabIndex() {
|
|
81
|
+
this.tabIndex = this.disabled ? -1 : 0;
|
|
83
82
|
}
|
|
84
|
-
#onButtonClick = e => {
|
|
85
|
-
e.stopPropagation();
|
|
86
|
-
this.dispatchEvent(new CustomEvent('option-change', {
|
|
87
|
-
detail: this.value,
|
|
88
|
-
bubbles: true
|
|
89
|
-
}));
|
|
90
|
-
};
|
|
91
83
|
#onButtonFocus = () => {
|
|
92
84
|
this.dispatchEvent(new CustomEvent('-focus'));
|
|
93
85
|
};
|
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
|
|
1
|
+
import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, getTargetByAttribute } from '../utils';
|
|
2
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement {
|
|
6
6
|
#$slot;
|
|
7
|
+
#controller = null;
|
|
7
8
|
constructor() {
|
|
8
9
|
super();
|
|
9
10
|
const shadowRoot = this.attachShadow();
|
|
@@ -11,19 +12,35 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
|
|
|
11
12
|
this.#$slot = shadowRoot.querySelector('slot');
|
|
12
13
|
}
|
|
13
14
|
connectedCallback() {
|
|
14
|
-
this
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
this.#controller = new AbortController();
|
|
16
|
+
const {
|
|
17
|
+
signal
|
|
18
|
+
} = this.#controller;
|
|
19
|
+
const options = {
|
|
20
|
+
signal
|
|
21
|
+
};
|
|
22
|
+
this.role = 'tablist';
|
|
23
|
+
this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
|
|
24
|
+
this.#$slot.addEventListener('click', this.#onOptionClick, options);
|
|
25
|
+
this.#$slot.addEventListener('keydown', this.#onOptionKeydown, options);
|
|
26
|
+
this.addEventListener('-change', this.#onChangeReactHandler, options);
|
|
18
27
|
}
|
|
19
28
|
disconnectedCallback() {
|
|
20
|
-
this
|
|
21
|
-
this
|
|
22
|
-
this.removeEventListener('-change', this.#onChangeReactHandler);
|
|
29
|
+
this.#controller.abort();
|
|
30
|
+
this.#controller = null;
|
|
23
31
|
}
|
|
24
32
|
static get observedAttributes() {
|
|
25
33
|
return ['value'];
|
|
26
34
|
}
|
|
35
|
+
attributeChangedCallback(name, oldVal, newVal) {
|
|
36
|
+
switch (name) {
|
|
37
|
+
case 'value':
|
|
38
|
+
{
|
|
39
|
+
this.#onValueChange(newVal ?? '');
|
|
40
|
+
break;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
27
44
|
set value(value) {
|
|
28
45
|
updateAttribute(this, 'value', value);
|
|
29
46
|
}
|
|
@@ -36,27 +53,33 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
|
|
|
36
53
|
get multiple() {
|
|
37
54
|
return getBooleanAttribute(this, 'multiple');
|
|
38
55
|
}
|
|
39
|
-
attributeChangedCallback(name, oldVal, newVal) {
|
|
40
|
-
switch (name) {
|
|
41
|
-
case 'value':
|
|
42
|
-
{
|
|
43
|
-
this.#onValueChange(newVal ?? '');
|
|
44
|
-
break;
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
56
|
#onSlotChange = () => {
|
|
49
57
|
this.#onValueChange(this.value);
|
|
50
58
|
};
|
|
51
|
-
#
|
|
52
|
-
e
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
#onOptionClick = e => {
|
|
60
|
+
const target = getTargetByAttribute(e, 'value');
|
|
61
|
+
if (target === null || getBooleanAttribute(target, 'disabled')) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
const value = getAttribute(target, 'value', '');
|
|
65
|
+
const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute(target, 'data-checked')) : value;
|
|
56
66
|
this.dispatchEvent(new CustomEvent('-change', {
|
|
57
67
|
detail
|
|
58
68
|
}));
|
|
59
69
|
};
|
|
70
|
+
#onOptionKeydown = e => {
|
|
71
|
+
switch (e.code) {
|
|
72
|
+
case 'Space':
|
|
73
|
+
case 'Enter':
|
|
74
|
+
{
|
|
75
|
+
e.preventDefault();
|
|
76
|
+
const target = getTargetByAttribute(e, 'value');
|
|
77
|
+
if (target !== null) {
|
|
78
|
+
target.click();
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
};
|
|
60
83
|
#onValueChange(csv) {
|
|
61
84
|
if (this.multiple) {
|
|
62
85
|
const values = unpackCsv(csv);
|
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;background-color:var(--sinch-local-color-background);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial)}
|
|
2
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial);cursor:initial}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><div id="border"></div><div id="outline"></div></div>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {
|
|
6
|
-
|
|
6
|
+
#controller = null;
|
|
7
7
|
constructor() {
|
|
8
8
|
super();
|
|
9
9
|
const shadowRoot = this.attachShadow();
|
|
10
10
|
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
11
|
-
this.#$button = shadowRoot.querySelector('#button');
|
|
12
11
|
}
|
|
13
12
|
connectedCallback() {
|
|
14
|
-
this
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
this.#controller = new AbortController();
|
|
14
|
+
const {
|
|
15
|
+
signal
|
|
16
|
+
} = this.#controller;
|
|
17
|
+
const options = {
|
|
18
|
+
signal
|
|
19
|
+
};
|
|
20
|
+
this.role = 'tab';
|
|
21
|
+
this.addEventListener('focus', this.#onButtonFocus, options);
|
|
22
|
+
this.addEventListener('blur', this.#onButtonBlur, options);
|
|
23
|
+
this.addEventListener('-focus', this.#onFocusReactHandler, options);
|
|
24
|
+
this.addEventListener('-blur', this.#onBlurReactHandler, options);
|
|
25
|
+
this.#updateTabIndex();
|
|
20
26
|
}
|
|
21
27
|
disconnectedCallback() {
|
|
22
|
-
this
|
|
23
|
-
this
|
|
24
|
-
this.#$button.removeEventListener('blur', this.#onButtonBlur);
|
|
25
|
-
this.removeEventListener('-focus', this.#onFocusReactHandler);
|
|
26
|
-
this.removeEventListener('-blur', this.#onBlurReactHandler);
|
|
28
|
+
this.#controller.abort();
|
|
29
|
+
this.#controller = null;
|
|
27
30
|
}
|
|
28
31
|
static get observedAttributes() {
|
|
29
32
|
return ['data-checked', 'disabled'];
|
|
30
33
|
}
|
|
31
34
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
32
|
-
if (isAttrEqual(oldVal, newVal)) {
|
|
33
|
-
return;
|
|
34
|
-
}
|
|
35
35
|
switch (name) {
|
|
36
36
|
case 'data-checked':
|
|
37
37
|
{
|
|
@@ -40,9 +40,11 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
|
|
|
40
40
|
}
|
|
41
41
|
case 'disabled':
|
|
42
42
|
{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
43
|
+
if (isAttrEqual(oldVal, newVal)) {
|
|
44
|
+
break;
|
|
45
|
+
}
|
|
46
|
+
this.#updateTabIndex();
|
|
47
|
+
updateBooleanAttribute(this, name, isAttrTrue(newVal));
|
|
46
48
|
break;
|
|
47
49
|
}
|
|
48
50
|
}
|
|
@@ -62,19 +64,9 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
|
|
|
62
64
|
get focusable() {
|
|
63
65
|
return true;
|
|
64
66
|
}
|
|
65
|
-
|
|
66
|
-
this
|
|
67
|
-
}
|
|
68
|
-
blur() {
|
|
69
|
-
this.#$button.blur();
|
|
67
|
+
#updateTabIndex() {
|
|
68
|
+
this.tabIndex = this.disabled ? -1 : 0;
|
|
70
69
|
}
|
|
71
|
-
#onButtonClick = e => {
|
|
72
|
-
e.stopPropagation();
|
|
73
|
-
this.dispatchEvent(new CustomEvent('option-change', {
|
|
74
|
-
detail: this.value,
|
|
75
|
-
bubbles: true
|
|
76
|
-
}));
|
|
77
|
-
};
|
|
78
70
|
#onButtonFocus = () => {
|
|
79
71
|
this.dispatchEvent(new CustomEvent('-focus'));
|
|
80
72
|
};
|
package/toast/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import '../icon';
|
|
|
2
2
|
import '../title';
|
|
3
3
|
import '../text';
|
|
4
4
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
|
|
5
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;padding:
|
|
5
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
|
|
6
6
|
import { typeValues } from './utils';
|
|
7
7
|
const TIMEOUT = 5000;
|
|
8
8
|
const template = document.createElement('template');
|