@nectary/components 2.8.7 → 2.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/package.json +1 -1
- package/types.d.ts +1 -1
- package/accordion/index.d.ts +0 -11
- package/accordion/index.js +0 -86
- package/accordion/types.d.ts +0 -21
- package/accordion/types.js +0 -1
- package/accordion-item/index.d.ts +0 -14
- package/accordion-item/index.js +0 -95
- package/accordion-item/types.d.ts +0 -36
- package/accordion-item/types.js +0 -1
- package/accordion-item/utils.d.ts +0 -2
- package/accordion-item/utils.js +0 -1
- package/action-menu/index.d.ts +0 -11
- package/action-menu/index.js +0 -195
- package/action-menu/types.d.ts +0 -13
- package/action-menu/types.js +0 -1
- package/action-menu-option/index.d.ts +0 -12
- package/action-menu-option/index.js +0 -82
- package/action-menu-option/types.d.ts +0 -23
- package/action-menu-option/types.js +0 -1
- package/action-menu-option/utils.d.ts +0 -2
- package/action-menu-option/utils.js +0 -3
- package/alert/index.d.ts +0 -14
- package/alert/index.js +0 -48
- package/alert/types.d.ts +0 -18
- package/alert/types.js +0 -1
- package/alert/utils.d.ts +0 -2
- package/alert/utils.js +0 -1
- package/avatar/index.d.ts +0 -11
- package/avatar/index.js +0 -94
- package/avatar/types.d.ts +0 -37
- package/avatar/types.js +0 -1
- package/avatar/utils.d.ts +0 -4
- package/avatar/utils.js +0 -7
- package/badge/index.d.ts +0 -11
- package/badge/index.js +0 -114
- package/badge/types.d.ts +0 -34
- package/badge/types.js +0 -1
- package/badge/utils.d.ts +0 -2
- package/badge/utils.js +0 -1
- package/button/index.d.ts +0 -11
- package/button/index.js +0 -182
- package/button/types.d.ts +0 -53
- package/button/types.js +0 -1
- package/button/utils.d.ts +0 -2
- package/button/utils.js +0 -1
- package/card/index.d.ts +0 -13
- package/card/index.js +0 -133
- package/card/types.d.ts +0 -28
- package/card/types.js +0 -1
- package/card-container/index.d.ts +0 -11
- package/card-container/index.js +0 -11
- package/card-container/types.d.ts +0 -3
- package/card-container/types.js +0 -1
- package/chat/index.d.ts +0 -11
- package/chat/index.js +0 -11
- package/chat/types.d.ts +0 -3
- package/chat/types.js +0 -1
- package/chat-block/index.d.ts +0 -11
- package/chat-block/index.js +0 -86
- package/chat-block/types.d.ts +0 -30
- package/chat-block/types.js +0 -1
- package/chat-bubble/index.d.ts +0 -11
- package/chat-bubble/index.js +0 -41
- package/chat-bubble/types.d.ts +0 -20
- package/chat-bubble/types.js +0 -1
- package/chat-bubble/utils.d.ts +0 -3
- package/chat-bubble/utils.js +0 -2
- package/checkbox/index.d.ts +0 -11
- package/checkbox/index.js +0 -126
- package/checkbox/types.d.ts +0 -49
- package/checkbox/types.js +0 -1
- package/chip/index.d.ts +0 -13
- package/chip/index.js +0 -144
- package/chip/types.d.ts +0 -37
- package/chip/types.js +0 -1
- package/chip/utils.d.ts +0 -2
- package/chip/utils.js +0 -6
- package/code-tag/index.d.ts +0 -11
- package/code-tag/index.js +0 -31
- package/code-tag/types.d.ts +0 -11
- package/code-tag/types.js +0 -1
- package/color-menu/index.d.ts +0 -11
- package/color-menu/index.js +0 -308
- package/color-menu/types.d.ts +0 -32
- package/color-menu/types.js +0 -1
- package/color-menu/utils.d.ts +0 -1
- package/color-menu/utils.js +0 -11
- package/color-menu-option/index.d.ts +0 -13
- package/color-menu-option/index.js +0 -48
- package/color-menu-option/types.d.ts +0 -11
- package/color-menu-option/types.js +0 -1
- package/color-menu-option/utils.d.ts +0 -1
- package/color-menu-option/utils.js +0 -11
- package/color-swatch/index.d.ts +0 -12
- package/color-swatch/index.js +0 -54
- package/color-swatch/types.d.ts +0 -11
- package/color-swatch/types.js +0 -1
- package/color-swatch/utils.d.ts +0 -2
- package/color-swatch/utils.js +0 -6
- package/date-picker/index.d.ts +0 -14
- package/date-picker/index.js +0 -381
- package/date-picker/types.d.ts +0 -70
- package/date-picker/types.js +0 -1
- package/date-picker/utils.d.ts +0 -28
- package/date-picker/utils.js +0 -142
- package/dialog/index.d.ts +0 -15
- package/dialog/index.js +0 -144
- package/dialog/types.d.ts +0 -28
- package/dialog/types.js +0 -1
- package/dialog/utils.d.ts +0 -2
- package/dialog/utils.js +0 -18
- package/emoji/index.d.ts +0 -11
- package/emoji/index.js +0 -46
- package/emoji/types.d.ts +0 -11
- package/emoji/types.js +0 -1
- package/emoji/utils.d.ts +0 -3
- package/emoji/utils.js +0 -47
- package/emoji-picker/index.d.ts +0 -22
- package/emoji-picker/index.js +0 -308
- package/emoji-picker/types.d.ts +0 -26
- package/emoji-picker/types.js +0 -1
- package/field/index.d.ts +0 -11
- package/field/index.js +0 -120
- package/field/types.d.ts +0 -35
- package/field/types.js +0 -1
- package/file-drop/index.d.ts +0 -13
- package/file-drop/index.js +0 -205
- package/file-drop/types.d.ts +0 -50
- package/file-drop/types.js +0 -1
- package/file-drop/utils.d.ts +0 -2
- package/file-drop/utils.js +0 -31
- package/file-picker/index.d.ts +0 -11
- package/file-picker/index.js +0 -103
- package/file-picker/types.d.ts +0 -32
- package/file-picker/types.js +0 -1
- package/file-picker/utils.d.ts +0 -1
- package/file-picker/utils.js +0 -8
- package/file-status/index.d.ts +0 -14
- package/file-status/index.js +0 -61
- package/file-status/types.d.ts +0 -18
- package/file-status/types.js +0 -1
- package/file-status/utils.d.ts +0 -2
- package/file-status/utils.js +0 -1
- package/flag/index.d.ts +0 -11
- package/flag/index.js +0 -46
- package/flag/types.d.ts +0 -11
- package/flag/types.js +0 -1
- package/flag/utils.d.ts +0 -1
- package/flag/utils.js +0 -17
- package/grid/index.d.ts +0 -11
- package/grid/index.js +0 -11
- package/grid/types.d.ts +0 -3
- package/grid/types.js +0 -1
- package/grid-item/index.d.ts +0 -11
- package/grid-item/index.js +0 -35
- package/grid-item/types.d.ts +0 -17
- package/grid-item/types.js +0 -1
- package/help-tooltip/index.d.ts +0 -13
- package/help-tooltip/index.js +0 -74
- package/help-tooltip/types.d.ts +0 -3
- package/help-tooltip/types.js +0 -1
- package/horizontal-stepper/index.d.ts +0 -11
- package/horizontal-stepper/index.js +0 -61
- package/horizontal-stepper/types.d.ts +0 -13
- package/horizontal-stepper/types.js +0 -1
- package/horizontal-stepper-item/index.d.ts +0 -14
- package/horizontal-stepper-item/index.js +0 -61
- package/horizontal-stepper-item/types.d.ts +0 -24
- package/horizontal-stepper-item/types.js +0 -1
- package/horizontal-stepper-item/utils.d.ts +0 -2
- package/horizontal-stepper-item/utils.js +0 -1
- package/icon/index.d.ts +0 -11
- package/icon/index.js +0 -32
- package/icon/types.d.ts +0 -11
- package/icon/types.js +0 -1
- package/icon-button/index.d.ts +0 -12
- package/icon-button/index.js +0 -175
- package/icon-button/types.d.ts +0 -44
- package/icon-button/types.js +0 -1
- package/icon-button/utils.d.ts +0 -2
- package/icon-button/utils.js +0 -1
- package/inline-alert/index.d.ts +0 -15
- package/inline-alert/index.js +0 -83
- package/inline-alert/types.d.ts +0 -15
- package/inline-alert/types.js +0 -1
- package/inline-alert/utils.d.ts +0 -2
- package/inline-alert/utils.js +0 -1
- package/input/index.d.ts +0 -11
- package/input/index.js +0 -637
- package/input/types.d.ts +0 -86
- package/input/types.js +0 -1
- package/input/utils.d.ts +0 -26
- package/input/utils.js +0 -302
- package/link/index.d.ts +0 -12
- package/link/index.js +0 -150
- package/link/types.d.ts +0 -59
- package/link/types.js +0 -1
- package/list/index.d.ts +0 -11
- package/list/index.js +0 -14
- package/list/types.d.ts +0 -3
- package/list/types.js +0 -1
- package/list-item/index.d.ts +0 -11
- package/list-item/index.js +0 -14
- package/list-item/types.d.ts +0 -3
- package/list-item/types.js +0 -1
- package/pagination/index.d.ts +0 -12
- package/pagination/index.js +0 -147
- package/pagination/types.d.ts +0 -16
- package/pagination/types.js +0 -1
- package/pop/index.d.ts +0 -11
- package/pop/index.js +0 -425
- package/pop/types.d.ts +0 -35
- package/pop/types.js +0 -1
- package/pop/utils.d.ts +0 -4
- package/pop/utils.js +0 -16
- package/popover/index.d.ts +0 -12
- package/popover/index.js +0 -146
- package/popover/types.d.ts +0 -40
- package/popover/types.js +0 -1
- package/popover/utils.d.ts +0 -4
- package/popover/utils.js +0 -10
- package/progress/index.d.ts +0 -12
- package/progress/index.js +0 -58
- package/progress/types.d.ts +0 -12
- package/progress/types.js +0 -1
- package/progress-stepper/index.d.ts +0 -11
- package/progress-stepper/index.js +0 -206
- package/progress-stepper/types.d.ts +0 -22
- package/progress-stepper/types.js +0 -1
- package/progress-stepper-item/index.d.ts +0 -12
- package/progress-stepper-item/index.js +0 -82
- package/progress-stepper-item/types.d.ts +0 -23
- package/progress-stepper-item/types.js +0 -1
- package/progress-stepper-item/utils.d.ts +0 -11
- package/progress-stepper-item/utils.js +0 -13
- package/radio/index.d.ts +0 -11
- package/radio/index.js +0 -154
- package/radio/types.d.ts +0 -14
- package/radio/types.js +0 -1
- package/radio-option/index.d.ts +0 -11
- package/radio-option/index.js +0 -79
- package/radio-option/types.d.ts +0 -18
- package/radio-option/types.js +0 -1
- package/rich-text/index.d.ts +0 -14
- package/rich-text/index.js +0 -75
- package/rich-text/types.d.ts +0 -12
- package/rich-text/types.js +0 -1
- package/rich-text/utils.d.ts +0 -7
- package/rich-text/utils.js +0 -107
- package/rich-textarea/index.d.ts +0 -11
- package/rich-textarea/index.js +0 -464
- package/rich-textarea/types.d.ts +0 -48
- package/rich-textarea/types.js +0 -1
- package/rich-textarea/utils.d.ts +0 -39
- package/rich-textarea/utils.js +0 -1730
- package/segment/index.d.ts +0 -12
- package/segment/index.js +0 -109
- package/segment/types.d.ts +0 -16
- package/segment/types.js +0 -1
- package/segment/utils.d.ts +0 -3
- package/segment/utils.js +0 -16
- package/segment-collapse/index.d.ts +0 -13
- package/segment-collapse/index.js +0 -60
- package/segment-collapse/types.d.ts +0 -11
- package/segment-collapse/types.js +0 -1
- package/segmented-control/index.d.ts +0 -11
- package/segmented-control/index.js +0 -85
- package/segmented-control/types.d.ts +0 -11
- package/segmented-control/types.js +0 -1
- package/segmented-control-option/index.d.ts +0 -11
- package/segmented-control-option/index.js +0 -95
- package/segmented-control-option/types.d.ts +0 -19
- package/segmented-control-option/types.js +0 -1
- package/segmented-icon-control/index.d.ts +0 -11
- package/segmented-icon-control/index.js +0 -101
- package/segmented-icon-control/types.d.ts +0 -14
- package/segmented-icon-control/types.js +0 -1
- package/segmented-icon-control-option/index.d.ts +0 -11
- package/segmented-icon-control-option/index.js +0 -82
- package/segmented-icon-control-option/types.d.ts +0 -16
- package/segmented-icon-control-option/types.js +0 -1
- package/select-button/index.d.ts +0 -13
- package/select-button/index.js +0 -202
- package/select-button/types.d.ts +0 -50
- package/select-button/types.js +0 -1
- package/select-menu/index.d.ts +0 -15
- package/select-menu/index.js +0 -332
- package/select-menu/types.d.ts +0 -41
- package/select-menu/types.js +0 -1
- package/select-menu-option/index.d.ts +0 -28
- package/select-menu-option/index.js +0 -65
- package/select-menu-option/types.d.ts +0 -26
- package/select-menu-option/types.js +0 -1
- package/skeleton/index.d.ts +0 -11
- package/skeleton/index.js +0 -108
- package/skeleton/types.d.ts +0 -9
- package/skeleton/types.js +0 -1
- package/skeleton-item/index.d.ts +0 -11
- package/skeleton-item/index.js +0 -11
- package/skeleton-item/types.d.ts +0 -13
- package/skeleton-item/types.js +0 -1
- package/spinner/index.d.ts +0 -11
- package/spinner/index.js +0 -58
- package/spinner/types.d.ts +0 -12
- package/spinner/types.js +0 -1
- package/standalone.d.ts +0 -85
- package/standalone.js +0 -87
- package/stop-events/index.d.ts +0 -1
- package/stop-events/index.js +0 -27
- package/table/index.d.ts +0 -11
- package/table/index.js +0 -14
- package/table/types.d.ts +0 -3
- package/table/types.js +0 -1
- package/table-body/index.d.ts +0 -11
- package/table-body/index.js +0 -14
- package/table-body/types.d.ts +0 -3
- package/table-body/types.js +0 -1
- package/table-cell/index.d.ts +0 -11
- package/table-cell/index.js +0 -21
- package/table-cell/types.d.ts +0 -9
- package/table-cell/types.js +0 -1
- package/table-cell/utils.d.ts +0 -2
- package/table-cell/utils.js +0 -1
- package/table-head/index.d.ts +0 -11
- package/table-head/index.js +0 -14
- package/table-head/types.d.ts +0 -3
- package/table-head/types.js +0 -1
- package/table-head-cell/index.d.ts +0 -12
- package/table-head-cell/index.js +0 -57
- package/table-head-cell/types.d.ts +0 -15
- package/table-head-cell/types.js +0 -1
- package/table-row/index.d.ts +0 -11
- package/table-row/index.js +0 -42
- package/table-row/types.d.ts +0 -11
- package/table-row/types.js +0 -1
- package/tabs/index.d.ts +0 -11
- package/tabs/index.js +0 -80
- package/tabs/types.d.ts +0 -18
- package/tabs/types.js +0 -1
- package/tabs-icon-option/index.d.ts +0 -11
- package/tabs-icon-option/index.js +0 -79
- package/tabs-icon-option/types.d.ts +0 -19
- package/tabs-icon-option/types.js +0 -1
- package/tabs-option/index.d.ts +0 -12
- package/tabs-option/index.js +0 -86
- package/tabs-option/types.d.ts +0 -25
- package/tabs-option/types.js +0 -1
- package/tag/index.d.ts +0 -12
- package/tag/index.js +0 -84
- package/tag/types.d.ts +0 -23
- package/tag/types.js +0 -1
- package/tag/utils.d.ts +0 -2
- package/tag/utils.js +0 -6
- package/text/index.d.ts +0 -11
- package/text/index.js +0 -64
- package/text/types.d.ts +0 -30
- package/text/types.js +0 -1
- package/text/utils.d.ts +0 -2
- package/text/utils.js +0 -1
- package/textarea/index.d.ts +0 -11
- package/textarea/index.js +0 -322
- package/textarea/types.d.ts +0 -60
- package/textarea/types.js +0 -1
- package/tile-control/index.d.ts +0 -11
- package/tile-control/index.js +0 -110
- package/tile-control/types.d.ts +0 -37
- package/tile-control/types.js +0 -1
- package/tile-control-option/index.d.ts +0 -11
- package/tile-control-option/index.js +0 -98
- package/tile-control-option/types.d.ts +0 -37
- package/tile-control-option/types.js +0 -1
- package/time-picker/index.d.ts +0 -15
- package/time-picker/index.js +0 -337
- package/time-picker/types.d.ts +0 -34
- package/time-picker/types.js +0 -1
- package/time-picker/utils.d.ts +0 -11
- package/time-picker/utils.js +0 -75
- package/title/index.d.ts +0 -11
- package/title/index.js +0 -60
- package/title/types.d.ts +0 -31
- package/title/types.js +0 -1
- package/title/utils.d.ts +0 -3
- package/title/utils.js +0 -17
- package/toast/index.d.ts +0 -13
- package/toast/index.js +0 -86
- package/toast/types.d.ts +0 -28
- package/toast/types.js +0 -1
- package/toast/utils.d.ts +0 -2
- package/toast/utils.js +0 -1
- package/toast-manager/index.d.ts +0 -13
- package/toast-manager/index.js +0 -170
- package/toast-manager/types.d.ts +0 -13
- package/toast-manager/types.js +0 -1
- package/toast-manager/utils.d.ts +0 -2
- package/toast-manager/utils.js +0 -1
- package/toggle/index.d.ts +0 -11
- package/toggle/index.js +0 -141
- package/toggle/types.d.ts +0 -23
- package/toggle/types.js +0 -1
- package/tooltip/index.d.ts +0 -13
- package/tooltip/index.js +0 -264
- package/tooltip/tooltip-state.d.ts +0 -19
- package/tooltip/tooltip-state.js +0 -126
- package/tooltip/types.d.ts +0 -35
- package/tooltip/types.js +0 -1
- package/tooltip/utils.d.ts +0 -5
- package/tooltip/utils.js +0 -17
- package/utils/context.d.ts +0 -20
- package/utils/context.js +0 -84
- package/utils/countries.d.ts +0 -6
- package/utils/countries.js +0 -2
- package/utils/csv.d.ts +0 -5
- package/utils/csv.js +0 -22
- package/utils/debounce.d.ts +0 -8
- package/utils/debounce.js +0 -22
- package/utils/dom.d.ts +0 -34
- package/utils/dom.js +0 -154
- package/utils/element.d.ts +0 -16
- package/utils/element.js +0 -48
- package/utils/event-target.d.ts +0 -4
- package/utils/event-target.js +0 -26
- package/utils/get-react-event-handler.d.ts +0 -1
- package/utils/get-react-event-handler.js +0 -8
- package/utils/index.d.ts +0 -12
- package/utils/index.js +0 -12
- package/utils/markdown.d.ts +0 -19
- package/utils/markdown.js +0 -143
- package/utils/rect.d.ts +0 -4
- package/utils/rect.js +0 -28
- package/utils/size.d.ts +0 -5
- package/utils/size.js +0 -3
- package/utils/slot.d.ts +0 -4
- package/utils/slot.js +0 -38
- package/utils/throttle.d.ts +0 -4
- package/utils/throttle.js +0 -20
- package/utils/uid.d.ts +0 -1
- package/utils/uid.js +0 -13
- package/vertical-stepper/index.d.ts +0 -11
- package/vertical-stepper/index.js +0 -57
- package/vertical-stepper/types.d.ts +0 -13
- package/vertical-stepper/types.js +0 -1
- package/vertical-stepper-item/index.d.ts +0 -14
- package/vertical-stepper-item/index.js +0 -61
- package/vertical-stepper-item/types.d.ts +0 -24
- package/vertical-stepper-item/types.js +0 -1
- package/vertical-stepper-item/utils.d.ts +0 -2
- package/vertical-stepper-item/utils.js +0 -1
package/icon/index.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-family:var(--sinch-comp-icon-font-family);font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);font-feature-settings:var(--sinch-comp-icon-font-feature-settings);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none}</style><span id="icon" role="img"></span>';
|
|
3
|
-
const template = document.createElement('template');
|
|
4
|
-
template.innerHTML = templateHTML;
|
|
5
|
-
defineCustomElement('sinch-icon', class extends NectaryElement {
|
|
6
|
-
#$icon;
|
|
7
|
-
constructor() {
|
|
8
|
-
super();
|
|
9
|
-
const shadowRoot = this.attachShadow();
|
|
10
|
-
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
11
|
-
this.#$icon = shadowRoot.querySelector('#icon');
|
|
12
|
-
}
|
|
13
|
-
static get observedAttributes() {
|
|
14
|
-
return ['name'];
|
|
15
|
-
}
|
|
16
|
-
attributeChangedCallback(name, _, newVal) {
|
|
17
|
-
switch (name) {
|
|
18
|
-
case 'name':
|
|
19
|
-
{
|
|
20
|
-
this.#$icon.textContent = newVal;
|
|
21
|
-
updateAttribute(this.#$icon, 'aria-label', newVal);
|
|
22
|
-
break;
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
set name(value) {
|
|
27
|
-
updateAttribute(this, 'name', value);
|
|
28
|
-
}
|
|
29
|
-
get name() {
|
|
30
|
-
return getAttribute(this, 'name', '');
|
|
31
|
-
}
|
|
32
|
-
});
|
package/icon/types.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { TSinchElementReact } from '../types';
|
|
2
|
-
export type TSinchIconElement = HTMLElement & {
|
|
3
|
-
/** Icon name */
|
|
4
|
-
name: string;
|
|
5
|
-
/** Icon name */
|
|
6
|
-
setAttribute(name: 'name', value: string): void;
|
|
7
|
-
};
|
|
8
|
-
export type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
|
|
9
|
-
/** Icon name */
|
|
10
|
-
name: string;
|
|
11
|
-
};
|
package/icon/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/icon-button/index.d.ts
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import '../tooltip';
|
|
2
|
-
import type { TSinchIconButtonElement, TSinchIconButtonReact } from './types';
|
|
3
|
-
declare global {
|
|
4
|
-
namespace JSX {
|
|
5
|
-
interface IntrinsicElements {
|
|
6
|
-
'sinch-icon-button': TSinchIconButtonReact;
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
interface HTMLElementTagNameMap {
|
|
10
|
-
'sinch-icon-button': TSinchIconButtonElement;
|
|
11
|
-
}
|
|
12
|
-
}
|
package/icon-button/index.js
DELETED
|
@@ -1,175 +0,0 @@
|
|
|
1
|
-
import '../tooltip';
|
|
2
|
-
import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, subscribeContext, updateAttribute, updateBooleanAttribute, updateLiteralAttribute, Context, getAttribute, isAttrEqual } from '../utils';
|
|
3
|
-
import { DEFAULT_SIZE, sizeExValues } from '../utils/size';
|
|
4
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{display:block;position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;user-select:none;contain:size;--sinch-global-color-icon:var(--sinch-local-color-icon)}:host([disabled]) #button{cursor:initial}:host([data-size="l"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-l)}#button,:host([data-size="m"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-m)}:host([data-size="s"]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-s)}:host([data-size=xs]) #button{--sinch-local-size:var(--sinch-comp-button-size-container-xs);--sinch-global-size-icon:var(--sinch-comp-button-size-icon-xs);--sinch-local-shape-radius:var(--sinch-comp-button-shape-radius-size-xs)}:host([type=primary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-primary-default-outline-focus)}:host([type=secondary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-secondary-default-outline-focus)}#button,:host([type=tertiary]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-default-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-initial);--sinch-local-color-outline:var(--sinch-comp-button-color-subtle-secondary-default-outline-focus)}:host([type=primary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-primary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-primary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-disabled)}:host([type=secondary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-disabled)}:host([disabled]) #button,:host([type=tertiary][disabled]) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-button-color-subtle-secondary-disabled-border-initial);--sinch-local-color-icon:var(--sinch-comp-button-color-subtle-secondary-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-disabled)}:host([type=primary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-focus)}:host([type=secondary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-focus)}:host(:focus),:host([type=tertiary]:focus) #button{--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-focus)}:host([type=primary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-hover)}:host([type=secondary]:not([disabled]):hover) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-hover)}:host(:not([disabled]):hover) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-hover);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-hover)}:host([type=primary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-primary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-primary-active)}:host([type=secondary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-secondary-active)}:host(:not([disabled]):active) #button,:host([type=tertiary]:not([disabled]):active) #button{--sinch-local-color-background:var(--sinch-comp-button-color-subtle-secondary-default-background-active);--sinch-local-shadow:var(--sinch-comp-button-shadow-subtle-active)}#button::before{content:"";position:absolute;inset:0;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);box-shadow:var(--sinch-local-shadow);pointer-events:none}:host(:focus-visible) #button::after{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-local-color-outline);border-radius:calc(var(--sinch-local-shape-radius) + 3px);pointer-events:none}#content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}</style><sinch-tooltip id="tooltip"><div id="button"><div id="content" inert><slot name="icon"></slot></div></div></sinch-tooltip>';
|
|
5
|
-
import { typeValues } from './utils';
|
|
6
|
-
const template = document.createElement('template');
|
|
7
|
-
template.innerHTML = templateHTML;
|
|
8
|
-
defineCustomElement('sinch-icon-button', class extends NectaryElement {
|
|
9
|
-
#$button;
|
|
10
|
-
#$tooltip;
|
|
11
|
-
#controller = null;
|
|
12
|
-
#sizeContext;
|
|
13
|
-
constructor() {
|
|
14
|
-
super();
|
|
15
|
-
const shadowRoot = this.attachShadow();
|
|
16
|
-
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
17
|
-
this.#$button = shadowRoot.querySelector('#button');
|
|
18
|
-
this.#$tooltip = shadowRoot.querySelector('#tooltip');
|
|
19
|
-
this.#sizeContext = new Context(this.#$button, 'size');
|
|
20
|
-
}
|
|
21
|
-
connectedCallback() {
|
|
22
|
-
super.connectedCallback();
|
|
23
|
-
this.#controller = new AbortController();
|
|
24
|
-
const options = {
|
|
25
|
-
signal: this.#controller.signal
|
|
26
|
-
};
|
|
27
|
-
this.role = 'button';
|
|
28
|
-
this.tabIndex = 0;
|
|
29
|
-
this.addEventListener('click', this.#onButtonClick, options);
|
|
30
|
-
this.addEventListener('focus', this.#onButtonFocus, options);
|
|
31
|
-
this.addEventListener('blur', this.#onButtonBlur, options);
|
|
32
|
-
this.addEventListener('keydown', this.#onButtonKeydown, options);
|
|
33
|
-
this.addEventListener('-click', this.#onClickReactHandler, options);
|
|
34
|
-
this.addEventListener('-focus', this.#onFocusReactHandler, options);
|
|
35
|
-
this.addEventListener('-blur', this.#onBlurReactHandler, options);
|
|
36
|
-
this.#$tooltip.addEventListener('-show', this.#onTooltipShow, options);
|
|
37
|
-
this.#$tooltip.addEventListener('-hide', this.#onTooltipHide, options);
|
|
38
|
-
this.addEventListener('-tooltip-show', this.#onTooltipShowReactHandler, options);
|
|
39
|
-
this.addEventListener('-tooltip-hide', this.#onTooltipHideReactHandler, options);
|
|
40
|
-
subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
|
|
41
|
-
this.#sizeContext.listen(this.#controller.signal);
|
|
42
|
-
this.#onSizeUpdate();
|
|
43
|
-
}
|
|
44
|
-
disconnectedCallback() {
|
|
45
|
-
super.disconnectedCallback();
|
|
46
|
-
this.#controller.abort();
|
|
47
|
-
this.#controller = null;
|
|
48
|
-
}
|
|
49
|
-
static get observedAttributes() {
|
|
50
|
-
return ['size', 'disabled', 'aria-label', 'data-size'];
|
|
51
|
-
}
|
|
52
|
-
attributeChangedCallback(name, oldVal, newVal) {
|
|
53
|
-
switch (name) {
|
|
54
|
-
case 'disabled':
|
|
55
|
-
{
|
|
56
|
-
if (isAttrEqual(oldVal, newVal)) {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
const isDisabled = isAttrTrue(newVal);
|
|
60
|
-
this.ariaDisabled = isDisabled.toString();
|
|
61
|
-
updateBooleanAttribute(this, 'disabled', isDisabled);
|
|
62
|
-
break;
|
|
63
|
-
}
|
|
64
|
-
case 'aria-label':
|
|
65
|
-
{
|
|
66
|
-
updateAttribute(this.#$tooltip, 'text', newVal);
|
|
67
|
-
break;
|
|
68
|
-
}
|
|
69
|
-
case 'size':
|
|
70
|
-
{
|
|
71
|
-
updateAttribute(this, 'data-size', newVal);
|
|
72
|
-
break;
|
|
73
|
-
}
|
|
74
|
-
case 'data-size':
|
|
75
|
-
{
|
|
76
|
-
this.#onSizeUpdate();
|
|
77
|
-
break;
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
set type(value) {
|
|
82
|
-
updateLiteralAttribute(this, typeValues, 'type', value);
|
|
83
|
-
}
|
|
84
|
-
get type() {
|
|
85
|
-
return getLiteralAttribute(this, typeValues, 'type', 'tertiary');
|
|
86
|
-
}
|
|
87
|
-
set disabled(isDisabled) {
|
|
88
|
-
updateBooleanAttribute(this, 'disabled', isDisabled);
|
|
89
|
-
}
|
|
90
|
-
get disabled() {
|
|
91
|
-
return getBooleanAttribute(this, 'disabled');
|
|
92
|
-
}
|
|
93
|
-
set size(size) {
|
|
94
|
-
updateLiteralAttribute(this, sizeExValues, 'size', size);
|
|
95
|
-
}
|
|
96
|
-
get size() {
|
|
97
|
-
return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
|
|
98
|
-
}
|
|
99
|
-
get tooltipRect() {
|
|
100
|
-
return this.#$tooltip.tooltipRect;
|
|
101
|
-
}
|
|
102
|
-
get focusable() {
|
|
103
|
-
return true;
|
|
104
|
-
}
|
|
105
|
-
#onSizeUpdate() {
|
|
106
|
-
if (!this.isDomConnected) {
|
|
107
|
-
return;
|
|
108
|
-
}
|
|
109
|
-
const size = getAttribute(this, 'data-size', DEFAULT_SIZE);
|
|
110
|
-
this.#sizeContext.dispatch(size);
|
|
111
|
-
}
|
|
112
|
-
#onContextSize = e => {
|
|
113
|
-
if (this.hasAttribute('size')) {
|
|
114
|
-
return;
|
|
115
|
-
}
|
|
116
|
-
switch (e.detail) {
|
|
117
|
-
case 'l':
|
|
118
|
-
{
|
|
119
|
-
this.setAttribute('data-size', 'm');
|
|
120
|
-
break;
|
|
121
|
-
}
|
|
122
|
-
case 'm':
|
|
123
|
-
{
|
|
124
|
-
this.setAttribute('data-size', 's');
|
|
125
|
-
break;
|
|
126
|
-
}
|
|
127
|
-
default:
|
|
128
|
-
{
|
|
129
|
-
this.setAttribute('data-size', 'xs');
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
};
|
|
133
|
-
#onButtonClick = () => {
|
|
134
|
-
if (!this.disabled) {
|
|
135
|
-
this.dispatchEvent(new CustomEvent('-click'));
|
|
136
|
-
}
|
|
137
|
-
};
|
|
138
|
-
#onButtonFocus = () => {
|
|
139
|
-
this.dispatchEvent(new CustomEvent('-focus'));
|
|
140
|
-
};
|
|
141
|
-
#onButtonBlur = () => {
|
|
142
|
-
this.dispatchEvent(new CustomEvent('-blur'));
|
|
143
|
-
};
|
|
144
|
-
#onButtonKeydown = e => {
|
|
145
|
-
switch (e.code) {
|
|
146
|
-
case 'Space':
|
|
147
|
-
case 'Enter':
|
|
148
|
-
{
|
|
149
|
-
e.preventDefault();
|
|
150
|
-
this.click();
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
};
|
|
154
|
-
#onTooltipShow = () => {
|
|
155
|
-
this.dispatchEvent(new CustomEvent('-tooltip-show'));
|
|
156
|
-
};
|
|
157
|
-
#onTooltipHide = () => {
|
|
158
|
-
this.dispatchEvent(new CustomEvent('-tooltip-hide'));
|
|
159
|
-
};
|
|
160
|
-
#onFocusReactHandler = () => {
|
|
161
|
-
getReactEventHandler(this, 'on-focus')?.();
|
|
162
|
-
};
|
|
163
|
-
#onBlurReactHandler = () => {
|
|
164
|
-
getReactEventHandler(this, 'on-blur')?.();
|
|
165
|
-
};
|
|
166
|
-
#onClickReactHandler = e => {
|
|
167
|
-
getReactEventHandler(this, 'on-click')?.(e);
|
|
168
|
-
};
|
|
169
|
-
#onTooltipShowReactHandler = () => {
|
|
170
|
-
getReactEventHandler(this, 'on-tooltip-show')?.();
|
|
171
|
-
};
|
|
172
|
-
#onTooltipHideReactHandler = () => {
|
|
173
|
-
getReactEventHandler(this, 'on-tooltip-hide')?.();
|
|
174
|
-
};
|
|
175
|
-
});
|
package/icon-button/types.d.ts
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { TRect, TSinchElementReact } from '../types';
|
|
2
|
-
import type { TSinchSizeEx } from '../utils/size';
|
|
3
|
-
export type TSinchIconButtonType = 'primary' | 'secondary' | 'tertiary';
|
|
4
|
-
export type TSinchIconButtonElement = HTMLElement & {
|
|
5
|
-
/** Type, `tertiary` by default */
|
|
6
|
-
type: TSinchIconButtonType;
|
|
7
|
-
/** Size, `m` by default */
|
|
8
|
-
size: TSinchSizeEx;
|
|
9
|
-
/** Disabled */
|
|
10
|
-
disabled: boolean;
|
|
11
|
-
readonly tooltipRect: TRect;
|
|
12
|
-
/** Click event */
|
|
13
|
-
addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
|
|
14
|
-
/** Focus event */
|
|
15
|
-
addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
|
|
16
|
-
/** Blur event */
|
|
17
|
-
addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
|
|
18
|
-
/** Type, `tertiary` by default */
|
|
19
|
-
setAttribute(name: 'type', value: string): void;
|
|
20
|
-
/** Size, `m` by default */
|
|
21
|
-
setAttribute(name: 'size', value: string): void;
|
|
22
|
-
/** Disabled */
|
|
23
|
-
setAttribute(name: 'disabled', value: ''): void;
|
|
24
|
-
};
|
|
25
|
-
export type TSinchIconButtonReact = TSinchElementReact<TSinchIconButtonElement> & {
|
|
26
|
-
/** Type, `tertiary` by default */
|
|
27
|
-
type?: TSinchIconButtonType;
|
|
28
|
-
/** Size, `m` by default */
|
|
29
|
-
size?: TSinchSizeEx;
|
|
30
|
-
/** Disabled */
|
|
31
|
-
disabled?: boolean;
|
|
32
|
-
/** Label that is used for a11y */
|
|
33
|
-
'aria-label': string;
|
|
34
|
-
/** Click event handler */
|
|
35
|
-
'on-click'?: (e: CustomEvent<void>) => void;
|
|
36
|
-
/** Focus event handler */
|
|
37
|
-
'on-focus'?: (e: CustomEvent<void>) => void;
|
|
38
|
-
/** Blur event handler */
|
|
39
|
-
'on-blur'?: (e: CustomEvent<void>) => void;
|
|
40
|
-
/** Tooltip Show Event */
|
|
41
|
-
'on-tooltip-show'?: (e: CustomEvent<void>) => void;
|
|
42
|
-
/** Tooltip Hide Event */
|
|
43
|
-
'on-tooltip-hide'?: (e: CustomEvent<void>) => void;
|
|
44
|
-
};
|
package/icon-button/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/icon-button/utils.d.ts
DELETED
package/icon-button/utils.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const typeValues = ['primary', 'secondary', 'tertiary'];
|
package/inline-alert/index.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import '../icon';
|
|
2
|
-
import '../rich-text';
|
|
3
|
-
import '../text';
|
|
4
|
-
import '../title';
|
|
5
|
-
import type { TSinchInlineAlertElement, TSinchInlineAlertReact } from './types';
|
|
6
|
-
declare global {
|
|
7
|
-
namespace JSX {
|
|
8
|
-
interface IntrinsicElements {
|
|
9
|
-
'sinch-inline-alert': TSinchInlineAlertReact;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
interface HTMLElementTagNameMap {
|
|
13
|
-
'sinch-inline-alert': TSinchInlineAlertElement;
|
|
14
|
-
}
|
|
15
|
-
}
|
package/inline-alert/index.js
DELETED
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import '../icon';
|
|
2
|
-
import '../rich-text';
|
|
3
|
-
import '../text';
|
|
4
|
-
import '../title';
|
|
5
|
-
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
|
|
6
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-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}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:4px;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#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 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><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
|
|
7
|
-
import { typeValues } from './utils';
|
|
8
|
-
const template = document.createElement('template');
|
|
9
|
-
template.innerHTML = templateHTML;
|
|
10
|
-
defineCustomElement('sinch-inline-alert', class extends NectaryElement {
|
|
11
|
-
#$text;
|
|
12
|
-
#$caption;
|
|
13
|
-
#$closeWrapper;
|
|
14
|
-
#$closeSlot;
|
|
15
|
-
#$actionWrapper;
|
|
16
|
-
#$actionSlot;
|
|
17
|
-
constructor() {
|
|
18
|
-
super();
|
|
19
|
-
const shadowRoot = this.attachShadow();
|
|
20
|
-
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
21
|
-
this.#$text = shadowRoot.querySelector('#text');
|
|
22
|
-
this.#$caption = shadowRoot.querySelector('#caption');
|
|
23
|
-
this.#$closeWrapper = shadowRoot.querySelector('#close');
|
|
24
|
-
this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
|
|
25
|
-
this.#$actionWrapper = shadowRoot.querySelector('#action');
|
|
26
|
-
this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
|
|
27
|
-
}
|
|
28
|
-
connectedCallback() {
|
|
29
|
-
super.connectedCallback();
|
|
30
|
-
this.setAttribute('aria-atomic', 'true');
|
|
31
|
-
this.setAttribute('aria-live', 'polite');
|
|
32
|
-
this.#$closeSlot.addEventListener('slotchange', this.#onCloseSlotChange);
|
|
33
|
-
this.#$actionSlot.addEventListener('slotchange', this.#onActionSlotChange);
|
|
34
|
-
this.#onCloseSlotChange();
|
|
35
|
-
this.#onActionSlotChange();
|
|
36
|
-
}
|
|
37
|
-
disconnectedCallback() {
|
|
38
|
-
super.disconnectedCallback();
|
|
39
|
-
this.#$closeSlot.removeEventListener('slotchange', this.#onCloseSlotChange);
|
|
40
|
-
this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
|
|
41
|
-
}
|
|
42
|
-
static get observedAttributes() {
|
|
43
|
-
return ['text', 'caption'];
|
|
44
|
-
}
|
|
45
|
-
attributeChangedCallback(name, _, newVal) {
|
|
46
|
-
switch (name) {
|
|
47
|
-
case 'text':
|
|
48
|
-
{
|
|
49
|
-
updateAttribute(this.#$text, 'text', newVal);
|
|
50
|
-
break;
|
|
51
|
-
}
|
|
52
|
-
case 'caption':
|
|
53
|
-
{
|
|
54
|
-
updateAttribute(this.#$caption, 'text', newVal);
|
|
55
|
-
break;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
get type() {
|
|
60
|
-
return getLiteralAttribute(this, typeValues, 'type');
|
|
61
|
-
}
|
|
62
|
-
set type(value) {
|
|
63
|
-
updateLiteralAttribute(this, typeValues, 'type', value);
|
|
64
|
-
}
|
|
65
|
-
get text() {
|
|
66
|
-
return getAttribute(this, 'text', '');
|
|
67
|
-
}
|
|
68
|
-
set text(value) {
|
|
69
|
-
updateAttribute(this, 'text', value);
|
|
70
|
-
}
|
|
71
|
-
get caption() {
|
|
72
|
-
return getAttribute(this, 'caption', '');
|
|
73
|
-
}
|
|
74
|
-
set caption(value) {
|
|
75
|
-
updateAttribute(this, 'caption', value);
|
|
76
|
-
}
|
|
77
|
-
#onCloseSlotChange = () => {
|
|
78
|
-
setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);
|
|
79
|
-
};
|
|
80
|
-
#onActionSlotChange = () => {
|
|
81
|
-
setClass(this.#$actionWrapper, 'empty', this.#$actionSlot.assignedElements().length === 0);
|
|
82
|
-
};
|
|
83
|
-
});
|
package/inline-alert/types.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { TSinchElementReact } from '../types';
|
|
2
|
-
export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
|
|
3
|
-
export type TSinchInlineAlertElement = HTMLElement & {
|
|
4
|
-
type: TSinchInlineAlertType;
|
|
5
|
-
text: string | null;
|
|
6
|
-
caption: string;
|
|
7
|
-
setAttribute(name: 'type', value: TSinchInlineAlertType): void;
|
|
8
|
-
setAttribute(name: 'text', value: string): void;
|
|
9
|
-
setAttribute(name: 'caption', value: string): void;
|
|
10
|
-
};
|
|
11
|
-
export type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
|
|
12
|
-
type: TSinchInlineAlertType;
|
|
13
|
-
text?: string;
|
|
14
|
-
caption: string;
|
|
15
|
-
};
|
package/inline-alert/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/inline-alert/utils.d.ts
DELETED
package/inline-alert/utils.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const typeValues = ['info', 'success', 'warn', 'error'];
|
package/input/index.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { TSinchInputElement, TSinchInputReact } from './types';
|
|
2
|
-
declare global {
|
|
3
|
-
namespace JSX {
|
|
4
|
-
interface IntrinsicElements {
|
|
5
|
-
'sinch-input': TSinchInputReact;
|
|
6
|
-
}
|
|
7
|
-
}
|
|
8
|
-
interface HTMLElementTagNameMap {
|
|
9
|
-
'sinch-input': TSinchInputElement;
|
|
10
|
-
}
|
|
11
|
-
}
|