@nectary/components 2.2.2 → 2.2.3
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/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
|
};
|