@nectary/components 0.44.1 → 0.45.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/accordion-item/index.js +1 -1
- package/action-menu/index.js +3 -11
- package/alert/index.js +3 -1
- package/avatar/index.js +12 -13
- package/avatar/types.d.ts +4 -4
- package/avatar/utils.d.ts +1 -4
- package/avatar/utils.js +4 -7
- package/badge/index.js +9 -7
- package/badge/types.d.ts +4 -4
- package/badge/utils.d.ts +1 -4
- package/badge/utils.js +0 -6
- package/button/index.js +88 -23
- package/button/types.d.ts +12 -11
- package/button/utils.d.ts +4 -1
- package/button/utils.js +9 -1
- package/card-container/index.js +1 -1
- package/chat-block/index.js +1 -1
- package/chat-bubble/index.js +1 -1
- package/checkbox/index.js +4 -2
- package/chip/index.js +7 -6
- package/color-menu/index.js +9 -18
- package/color-swatch/index.js +5 -7
- package/date-picker/index.js +1 -1
- package/dialog/index.js +4 -7
- package/emoji/index.js +2 -6
- package/emoji-picker/index.js +6 -14
- package/field/index.js +1 -1
- package/file-status/index.js +4 -2
- package/flag/index.d.ts +11 -0
- package/flag/index.js +43 -0
- package/flag/types.d.ts +11 -0
- package/flag/types.js +1 -0
- package/flag/utils.d.ts +1 -0
- package/flag/utils.js +19 -0
- package/icon/index.js +1 -1
- package/icon-button/index.js +77 -9
- package/icon-button/types.d.ts +14 -6
- package/icon-button/utils.d.ts +5 -0
- package/icon-button/utils.js +9 -0
- package/icons/create-icon-class.js +1 -1
- package/inline-alert/index.js +3 -1
- package/input/index.d.ts +3 -0
- package/input/index.js +148 -71
- package/input/types.d.ts +7 -0
- package/link/index.js +1 -1
- package/package.json +2 -4
- package/pagination/index.js +1 -1
- package/pop/index.js +15 -37
- package/popover/index.js +7 -9
- package/radio-option/index.js +1 -1
- package/segment/index.js +10 -6
- package/segment/types.d.ts +4 -4
- package/segment/utils.d.ts +3 -5
- package/segment/utils.js +14 -4
- package/segment-collapse/index.js +1 -1
- package/segmented-control-option/index.js +1 -1
- package/segmented-icon-control-option/index.js +1 -1
- package/select-button/index.js +93 -28
- package/select-button/types.d.ts +8 -1
- package/select-menu/index.d.ts +5 -0
- package/select-menu/index.js +46 -17
- package/select-menu-option/index.d.ts +1 -0
- package/select-menu-option/index.js +3 -0
- package/select-menu-option/types.d.ts +1 -0
- package/spinner/index.js +52 -7
- package/spinner/types.d.ts +4 -5
- package/stop-events/index.js +9 -5
- package/table/index.js +1 -1
- package/tag/index.js +2 -6
- package/text/index.js +3 -1
- package/textarea/index.js +1 -1
- package/theme/button.css +146 -0
- package/{theme.css → theme/contextual.css} +3 -25
- package/theme/elevation.css +1 -1
- package/theme/flag.css +4 -0
- package/theme/fonts.css +0 -33
- package/theme/fonts.json +0 -33
- package/theme/icon-button.css +68 -0
- package/theme/index.css +4 -0
- package/theme/index.d.ts +21 -0
- package/theme/index.js +21 -0
- package/theme/input.css +7 -0
- package/theme/select-button.css +7 -0
- package/theme/shapes.css +4 -3
- package/theme/size.css +9 -0
- package/theme/spinner.css +7 -0
- package/theme/typography.css +7 -7
- package/tile-control-option/index.js +1 -1
- package/time-picker/index.js +1 -1
- package/title/index.js +7 -3
- package/toast/index.js +3 -1
- package/toggle/index.js +1 -1
- package/tooltip/index.js +8 -6
- package/utils/context.d.ts +14 -9
- package/utils/context.js +60 -26
- package/utils/countries.d.ts +5 -0
- package/utils/countries.js +2 -0
- package/utils/countries.json +998 -0
- package/utils/debounce.d.ts +4 -0
- package/utils/debounce.js +21 -0
- package/utils/element.d.ts +4 -0
- package/utils/element.js +10 -0
- package/utils/index.d.ts +1 -0
- package/utils/index.js +1 -0
- package/utils/size.d.ts +10 -0
- package/utils/size.js +19 -0
- package/utils/throttle.d.ts +2 -2
- package/utils/throttle.js +4 -9
- package/spinner/utils.d.ts +0 -2
- package/spinner/utils.js +0 -1
package/checkbox/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-700);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-text-disabled);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-
|
|
2
|
+
const templateHTML = '<style>:host{--sinch-color-checkbox-circle:var(--sinch-color-transparent);--sinch-color-checkbox-background:var(--sinch-color-snow-100);--sinch-color-checkbox-border:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-hover:var(--sinch-color-snow-500);--sinch-color-checkbox-background-hover:var(--sinch-color-snow-100);--sinch-color-checkbox-border-hover:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-tropical-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-focus:var(--sinch-color-snow-700);--sinch-color-checkbox-background-focus:var(--sinch-color-snow-100);--sinch-color-checkbox-border-focus:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-tropical-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-active:var(--sinch-color-stormy-100);--sinch-color-checkbox-background-active:var(--sinch-color-snow-100);--sinch-color-checkbox-border-active:var(--sinch-color-stormy-300);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-tropical-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-tropical-500);--sinch-color-checkbox-circle-disabled:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled:var(--sinch-color-snow-100);--sinch-color-checkbox-border-disabled:var(--sinch-color-stormy-100);--sinch-color-checkbox-circle-disabled-checked:var(--sinch-color-transparent);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-stormy-100);--sinch-color-checkbox-text:var(--sinch-color-text-default);--sinch-color-checkbox-text-disabled:var(--sinch-color-text-disabled);display:inline-block;vertical-align:middle;outline:0}:host([invalid]:not([invalid=false])){--sinch-color-checkbox-border:var(--sinch-color-raspberry-500);--sinch-color-checkbox-background-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-hover-checked:var(--sinch-color-raspberry-100);--sinch-color-checkbox-background-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-hover-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-focus-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-focus-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active:var(--sinch-color-raspberry-500);--sinch-color-checkbox-circle-active-checked:var(--sinch-color-raspberry-300);--sinch-color-checkbox-background-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-active-checked:var(--sinch-color-raspberry-500);--sinch-color-checkbox-border-disabled:var(--sinch-color-raspberry-200);--sinch-color-checkbox-background-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-border-disabled-checked:var(--sinch-color-raspberry-200);--sinch-color-checkbox-text:var(--sinch-color-text-invalid);--sinch-color-checkbox-text-disabled:var(--sinch-color-raspberry-200)}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;height:32px}#checkbox{all:initial;display:block;width:32px;height:32px;cursor:pointer}#checkbox:disabled{cursor:initial}#icon-container{position:relative;width:32px;height:32px}#checkbox::before{content:"";position:absolute;top:0;left:0;width:32px;height:32px;border-radius:16px;pointer-events:none;background-color:var(--sinch-color-checkbox-circle);transition:background-color .1s linear}#checkbox::after{content:"";position:absolute;top:7px;left:7px;width:18px;height:18px;border-radius:var(--sinch-shape-radius-xs);pointer-events:none;background-color:var(--sinch-color-checkbox-background);border:2px solid var(--sinch-color-checkbox-border);transition:background-color .1s linear;box-sizing:border-box}#icon-checkmark{position:absolute;left:9px;top:10px;transition:opacity .1s linear;opacity:0;pointer-events:none}#icon-indeterminate{position:absolute;left:10px;top:15px;transition:opacity .1s linear;opacity:0;pointer-events:none}@media (prefers-reduced-motion){#checkbox::after,#checkbox::before,#icon-checkmark,#icon-indeterminate{transition:none}}#label{display:none;flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:6px;font:var(--sinch-font-text-m);color:var(--sinch-color-checkbox-text)}:host([text]:not([text=""])) #label{display:block}:host([disabled]:not([disabled=false])) #label{color:var(--sinch-color-checkbox-text-disabled)}:host(:is(:not([indeterminate]),[indeterminate=false])) #checkbox:checked~#icon-checkmark{opacity:1}:host([indeterminate]:not([indeterminate=false])) #checkbox:checked~#icon-indeterminate{opacity:1}#checkbox:checked::before{background-color:var(--sinch-color-checkbox-circle-checked)}#checkbox:checked::after{background-color:var(--sinch-color-checkbox-background-checked);border-color:var(--sinch-color-checkbox-border-checked)}#checkbox:focus-visible::before{background-color:var(--sinch-color-checkbox-circle-focus)}#checkbox:focus-visible::after{background-color:var(--sinch-color-checkbox-background-focus);border-color:var(--sinch-color-checkbox-border-focus)}#checkbox:hover::before{background-color:var(--sinch-color-checkbox-circle-hover)}#checkbox:hover::after{background-color:var(--sinch-color-checkbox-background-hover);border-color:var(--sinch-color-checkbox-border-hover)}#checkbox:active::before{background-color:var(--sinch-color-checkbox-circle-active)}#checkbox:active::after{background-color:var(--sinch-color-checkbox-background-active);border-color:var(--sinch-color-checkbox-border-active)}#checkbox:disabled::before{background-color:var(--sinch-color-checkbox-circle-disabled)}#checkbox:disabled::after{background-color:var(--sinch-color-checkbox-background-disabled);border-color:var(--sinch-color-checkbox-border-disabled)}#checkbox:focus-visible:checked::before{background-color:var(--sinch-color-checkbox-circle-focus-checked)}#checkbox:focus-visible:checked::after{background-color:var(--sinch-color-checkbox-background-focus-checked);border-color:var(--sinch-color-checkbox-border-focus-checked)}#checkbox:hover:checked::before{background-color:var(--sinch-color-checkbox-circle-hover-checked)}#checkbox:hover:checked::after{background-color:var(--sinch-color-checkbox-background-hover-checked);border-color:var(--sinch-color-checkbox-border-hover-checked)}#checkbox:active:checked::before{background-color:var(--sinch-color-checkbox-circle-active-checked)}#checkbox:active:checked::after{background-color:var(--sinch-color-checkbox-background-active-checked);border-color:var(--sinch-color-checkbox-border-active-checked)}#checkbox:disabled:checked::before{background-color:var(--sinch-color-checkbox-circle-disabled-checked)}#checkbox:disabled:checked::after{background-color:var(--sinch-color-checkbox-background-disabled-checked);border-color:var(--sinch-color-checkbox-border-disabled-checked)}</style><div id="wrapper"><div id="icon-container"><input id="checkbox" type="checkbox"/><svg id="icon-checkmark" width="14" height="11" aria-hidden="true"><path d="M14 1.99999L12.59 0.579987L4.98995 8.17L1.49997 4.5L0.0799694 5.91L4.98995 11L14 1.99999Z" fill="white"/></svg><svg id="icon-indeterminate" width="12" height="2" aria-hidden="true"><line y1="1" x2="12" y2="1" stroke="white" stroke-width="2"/></svg></div><label for="checkbox" id="label"></label></div>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-checkbox', class extends NectaryElement {
|
|
@@ -7,7 +7,9 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
|
|
|
7
7
|
#$label;
|
|
8
8
|
constructor() {
|
|
9
9
|
super();
|
|
10
|
-
const shadowRoot = this.attachShadow(
|
|
10
|
+
const shadowRoot = this.attachShadow({
|
|
11
|
+
delegatesFocus: true
|
|
12
|
+
});
|
|
11
13
|
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
12
14
|
this.#$input = shadowRoot.querySelector('input');
|
|
13
15
|
this.#$label = shadowRoot.querySelector('label');
|
package/chip/index.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import '../text';
|
|
2
2
|
import '../icons/cancel';
|
|
3
3
|
import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, getReactEventHandler } from '../utils';
|
|
4
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}
|
|
4
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:0 5px 0 9px;border-radius:12px;background-color:var(--sinch-chip-color-default-bg);color:var(--sinch-chip-color-default-fg);box-sizing:border-box;cursor:pointer;--sinch-color-icon:var(--sinch-chip-color-default-fg);--sinch-size-icon:16px}#button:focus-visible::after{content:"";position:absolute;inset:-4px;border-radius:16px;border:2px solid var(--sinch-color-border-focus);pointer-events:none}#text{flex:1}:host([small]:not([small=false])) #button{height:20px;border-radius:10px;padding:0 3px 0 7px}:host([small]:not([small=false])) #button:focus-visible::after{border-radius:14px}::slotted(*){margin-left:-4px}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><sinch-icon-cancel id="close"></sinch-icon-cancel></button>';
|
|
5
5
|
import { assertChipColor, getChipColorBg, getChipColorFg } from './utils';
|
|
6
6
|
const template = document.createElement('template');
|
|
7
7
|
template.innerHTML = templateHTML;
|
|
8
8
|
defineCustomElement('sinch-chip', class extends NectaryElement {
|
|
9
9
|
#$text;
|
|
10
10
|
#$button;
|
|
11
|
-
#isConnected = false;
|
|
12
11
|
#controller = null;
|
|
13
12
|
constructor() {
|
|
14
13
|
super();
|
|
@@ -18,6 +17,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
|
|
|
18
17
|
this.#$text = shadowRoot.querySelector('#text');
|
|
19
18
|
}
|
|
20
19
|
connectedCallback() {
|
|
20
|
+
super.connectedCallback();
|
|
21
21
|
this.#controller = new AbortController();
|
|
22
22
|
const {
|
|
23
23
|
signal
|
|
@@ -41,12 +41,11 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
|
|
|
41
41
|
this.addEventListener('-blur', this.#onBlurReactHandler, {
|
|
42
42
|
signal
|
|
43
43
|
});
|
|
44
|
-
this.#isConnected = true;
|
|
45
44
|
this.#updateColor();
|
|
46
45
|
}
|
|
47
46
|
disconnectedCallback() {
|
|
47
|
+
super.disconnectedCallback();
|
|
48
48
|
this.#controller.abort();
|
|
49
|
-
this.#isConnected = false;
|
|
50
49
|
}
|
|
51
50
|
get color() {
|
|
52
51
|
return getAttribute(this, 'color');
|
|
@@ -84,12 +83,14 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
|
|
|
84
83
|
}
|
|
85
84
|
}
|
|
86
85
|
#updateColor() {
|
|
87
|
-
if (!this
|
|
86
|
+
if (!this.isConnected) {
|
|
88
87
|
return;
|
|
89
88
|
}
|
|
90
89
|
const colorName = this.color;
|
|
91
90
|
if (colorName !== null && colorName.length > 0) {
|
|
92
|
-
|
|
91
|
+
if ('production' !== 'production') {
|
|
92
|
+
assertChipColor(this, colorName);
|
|
93
|
+
}
|
|
93
94
|
const bg = getChipColorBg(colorName);
|
|
94
95
|
const fg = getChipColorFg(colorName);
|
|
95
96
|
this.#$button.style.setProperty('background-color', bg);
|
package/color-menu/index.js
CHANGED
|
@@ -3,7 +3,7 @@ import '../tooltip';
|
|
|
3
3
|
import '../icons/check';
|
|
4
4
|
import { getSwatchColorFg } from '../color-swatch/utils';
|
|
5
5
|
import { lightColorNames, darkColorNames, vibrantColorNames } from '../theme/colors';
|
|
6
|
-
import { attrValueToPixels, defineCustomElement,
|
|
6
|
+
import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute, subscribeContext } from '../utils';
|
|
7
7
|
const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon-check class="check"></sinch-icon-check></div></sinch-tooltip></div>';
|
|
8
8
|
const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}.option{padding:12px 6px;--sinch-color-icon:var(--sinch-color-stormy-500)}.swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}.swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked]) .swatch-wrapper::after{border-color:var(--sinch-color-border-focus)}.check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-size-icon:24px}.option[data-checked] .check{display:block}</style><div id="listbox" role="presentation"></div>';
|
|
9
9
|
import { getParentOption } from './utils';
|
|
@@ -18,7 +18,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
18
18
|
#$listbox;
|
|
19
19
|
#controller = null;
|
|
20
20
|
#prevColorsValue = '';
|
|
21
|
-
#isConnected = false;
|
|
22
21
|
constructor() {
|
|
23
22
|
super();
|
|
24
23
|
const shadowRoot = this.attachShadow();
|
|
@@ -26,6 +25,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
26
25
|
this.#$listbox = shadowRoot.querySelector('#listbox');
|
|
27
26
|
}
|
|
28
27
|
connectedCallback() {
|
|
28
|
+
super.connectedCallback();
|
|
29
29
|
this.#controller = new AbortController();
|
|
30
30
|
const {
|
|
31
31
|
signal
|
|
@@ -35,9 +35,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
35
35
|
this.addEventListener('keydown', this.#onListboxKeyDown, {
|
|
36
36
|
signal
|
|
37
37
|
});
|
|
38
|
-
this.addEventListener('-keydown', this.#onContexKeydown, {
|
|
39
|
-
signal
|
|
40
|
-
});
|
|
41
38
|
this.addEventListener('blur', this.#onListboxBlur, {
|
|
42
39
|
signal
|
|
43
40
|
});
|
|
@@ -47,18 +44,13 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
47
44
|
this.addEventListener('-change', this.#onChangeReactHandler, {
|
|
48
45
|
signal
|
|
49
46
|
});
|
|
50
|
-
this
|
|
51
|
-
|
|
52
|
-
});
|
|
53
|
-
dispatchContextConnectEvent(this, 'visibility');
|
|
54
|
-
dispatchContextConnectEvent(this, 'keydown');
|
|
47
|
+
subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
|
|
48
|
+
subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
|
|
55
49
|
requestAnimationFrame(this.#onMount);
|
|
56
50
|
}
|
|
57
51
|
disconnectedCallback() {
|
|
58
|
-
|
|
52
|
+
super.disconnectedCallback();
|
|
59
53
|
this.#prevColorsValue = null;
|
|
60
|
-
dispatchContextDisconnectEvent(this, 'visibility');
|
|
61
|
-
dispatchContextDisconnectEvent(this, 'keydown');
|
|
62
54
|
this.#controller.abort();
|
|
63
55
|
}
|
|
64
56
|
static get observedAttributes() {
|
|
@@ -105,14 +97,14 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
105
97
|
switch (name) {
|
|
106
98
|
case 'value':
|
|
107
99
|
{
|
|
108
|
-
if (this
|
|
100
|
+
if (this.isConnected) {
|
|
109
101
|
this.#onValueChange();
|
|
110
102
|
}
|
|
111
103
|
break;
|
|
112
104
|
}
|
|
113
105
|
case 'colors':
|
|
114
106
|
{
|
|
115
|
-
if (this
|
|
107
|
+
if (this.isConnected) {
|
|
116
108
|
this.#updateColors();
|
|
117
109
|
}
|
|
118
110
|
break;
|
|
@@ -124,7 +116,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
124
116
|
}
|
|
125
117
|
case 'cols':
|
|
126
118
|
{
|
|
127
|
-
if (this
|
|
119
|
+
if (this.isConnected) {
|
|
128
120
|
this.#updateColumns();
|
|
129
121
|
}
|
|
130
122
|
break;
|
|
@@ -178,7 +170,6 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
178
170
|
}
|
|
179
171
|
#onMount = () => {
|
|
180
172
|
this.#updateColors();
|
|
181
|
-
this.#isConnected = true;
|
|
182
173
|
};
|
|
183
174
|
#onListboxBlur = () => {
|
|
184
175
|
this.#selectOption(null);
|
|
@@ -199,7 +190,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
|
|
|
199
190
|
this.#selectOption(null);
|
|
200
191
|
}
|
|
201
192
|
};
|
|
202
|
-
#
|
|
193
|
+
#onContextKeyDown = e => {
|
|
203
194
|
this.#handleKeydown(e.detail);
|
|
204
195
|
};
|
|
205
196
|
#onListboxKeyDown = e => {
|
package/color-swatch/index.js
CHANGED
|
@@ -7,7 +7,6 @@ const template = document.createElement('template');
|
|
|
7
7
|
template.innerHTML = templateHTML;
|
|
8
8
|
defineCustomElement('sinch-color-swatch', class extends NectaryElement {
|
|
9
9
|
#$wrapper;
|
|
10
|
-
#isConnected = false;
|
|
11
10
|
constructor() {
|
|
12
11
|
super();
|
|
13
12
|
const shadowRoot = this.attachShadow();
|
|
@@ -15,12 +14,9 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
|
|
|
15
14
|
this.#$wrapper = shadowRoot.querySelector('#wrapper');
|
|
16
15
|
}
|
|
17
16
|
connectedCallback() {
|
|
18
|
-
|
|
17
|
+
super.connectedCallback();
|
|
19
18
|
this.#updateColor();
|
|
20
19
|
}
|
|
21
|
-
disconnectedCallback() {
|
|
22
|
-
this.#isConnected = false;
|
|
23
|
-
}
|
|
24
20
|
get name() {
|
|
25
21
|
return getAttribute(this, 'name');
|
|
26
22
|
}
|
|
@@ -43,12 +39,14 @@ defineCustomElement('sinch-color-swatch', class extends NectaryElement {
|
|
|
43
39
|
}
|
|
44
40
|
}
|
|
45
41
|
#updateColor() {
|
|
46
|
-
if (!this
|
|
42
|
+
if (!this.isConnected) {
|
|
47
43
|
return;
|
|
48
44
|
}
|
|
49
45
|
const colorName = this.name;
|
|
50
46
|
if (colorName !== null && colorName.length > 0) {
|
|
51
|
-
|
|
47
|
+
if ('production' !== 'production') {
|
|
48
|
+
assertSwatchColor(this, colorName);
|
|
49
|
+
}
|
|
52
50
|
const bg = getSwatchColorBg(colorName);
|
|
53
51
|
this.#$wrapper.style.setProperty('background-color', bg);
|
|
54
52
|
setClass(this.#$wrapper, 'no-color', false);
|
package/date-picker/index.js
CHANGED
|
@@ -7,7 +7,7 @@ import '../icons/delete-outline';
|
|
|
7
7
|
import '../icons/today';
|
|
8
8
|
import '../text';
|
|
9
9
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, isAttrTrue, NectaryElement, packCsv, setClass, unpackCsv, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
10
|
-
const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-
|
|
10
|
+
const templateHTML = '<style>:host{display:block;outline:0}#content{width:fit-content;box-sizing:border-box;padding:16px;display:flex;flex-direction:column;gap:8px}#month{display:flex;flex-direction:column;row-gap:8px}.week{display:flex;flex-direction:row;column-gap:8px}.week.empty{display:none}.day{all:initial;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-default);text-align:center;border-radius:var(--sinch-shape-radius-s);width:24px;height:24px;line-height:22px;cursor:pointer;border:1px solid transparent;background-color:transparent;box-sizing:border-box;user-select:none}.day.today{border:1px solid var(--sinch-color-tropical-500)}.day:disabled{cursor:initial;color:var(--sinch-color-snow-700)}.day:focus-visible{outline:1px solid var(--sinch-color-border-focus);outline-offset:1px}.day.range{background-color:var(--sinch-color-tropical-100)}.day.selected{background-color:var(--sinch-color-tropical-500);color:var(--sinch-color-snow-100)}.day:hover:enabled:not(.selected){background-color:var(--sinch-color-tropical-200)}#week-day-names{display:flex;flex-direction:row;gap:8px;height:24px}.week-day-name{font:var(--sinch-font-text-xs);font-weight:var(--sinch-font-weight-emphasized);color:var(--sinch-color-text-default);text-align:center;width:24px;height:24px;line-height:24px;user-select:none;text-transform:uppercase}#content-header{display:flex;flex-direction:row;height:32px;align-items:center}#date{flex:1;text-align:center;text-transform:capitalize}#prev-year{margin-left:-4px}#next-year{margin-right:-4px}</style><div id="content"><div id="content-header"><sinch-icon-button id="prev-year" size="s"><sinch-icon-keyboard-double-arrow-left slot="icon"></sinch-icon-keyboard-double-arrow-left></sinch-icon-button><sinch-icon-button id="prev-month" size="s"><sinch-icon-keyboard-arrow-left slot="icon"></sinch-icon-keyboard-arrow-left></sinch-icon-button><sinch-text id="date" type="m" emphasized aria-live="polite"></sinch-text><sinch-icon-button id="next-month" size="s"><sinch-icon-keyboard-arrow-right slot="icon"></sinch-icon-keyboard-arrow-right></sinch-icon-button><sinch-icon-button id="next-year" size="s"><sinch-icon-keyboard-double-arrow-right slot="icon"></sinch-icon-keyboard-double-arrow-right></sinch-icon-button></div><div id="week-day-names"><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div><div class="week-day-name"></div></div><div id="month"><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div><div class="week"><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button><button class="day"></button></div></div></div>';
|
|
11
11
|
import { areDatesEqual, assertDate, assertLocale, assertMinMax, assertValue, canGoNextMonth, canGoNextYear, canGoPrevMonth, canGoPrevYear, clampMaxDate, clampMinDate, cloneDate, dateToIso, decMonth, decYear, getCalendarMonth, getDayNames, getMonthNames, incMonth, incYear, isDateBetween, isoToDate, isValidDate, sortDates, today } from './utils';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
package/dialog/index.js
CHANGED
|
@@ -2,16 +2,14 @@ import '../icon-button';
|
|
|
2
2
|
import '../icons/close';
|
|
3
3
|
import '../stop-events';
|
|
4
4
|
import '../title';
|
|
5
|
-
import dialogPolyfill from 'dialog-polyfill';
|
|
6
5
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
|
|
7
|
-
const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-
|
|
6
|
+
const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-text-m);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" size="s" tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
|
|
8
7
|
const template = document.createElement('template');
|
|
9
8
|
template.innerHTML = templateHTML;
|
|
10
9
|
defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
11
10
|
#$dialog;
|
|
12
11
|
#$closeButton;
|
|
13
12
|
#$caption;
|
|
14
|
-
#isConnected = false;
|
|
15
13
|
#prevOverflowValue = '';
|
|
16
14
|
constructor() {
|
|
17
15
|
super();
|
|
@@ -20,25 +18,24 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
|
20
18
|
this.#$dialog = shadowRoot.querySelector('dialog');
|
|
21
19
|
this.#$closeButton = shadowRoot.querySelector('#close');
|
|
22
20
|
this.#$caption = shadowRoot.querySelector('#caption');
|
|
23
|
-
dialogPolyfill.registerDialog(this.#$dialog);
|
|
24
21
|
}
|
|
25
22
|
connectedCallback() {
|
|
23
|
+
super.connectedCallback();
|
|
26
24
|
this.setAttribute('role', 'dialog');
|
|
27
25
|
this.#$closeButton.addEventListener('click', this.#onCloseClick);
|
|
28
26
|
this.#$dialog.addEventListener('mousedown', this.#onBackdropClick);
|
|
29
27
|
this.#$dialog.addEventListener('cancel', this.#onCancel);
|
|
30
28
|
this.addEventListener('-close', this.#onCloseReactHandler);
|
|
31
|
-
this.#isConnected = true;
|
|
32
29
|
|
|
33
30
|
this.#setOpen(getBooleanAttribute(this, 'open'));
|
|
34
31
|
}
|
|
35
32
|
disconnectedCallback() {
|
|
33
|
+
super.disconnectedCallback();
|
|
36
34
|
this.#$closeButton.removeEventListener('click', this.#onCloseClick);
|
|
37
35
|
this.#$dialog.removeEventListener('mousedown', this.#onBackdropClick);
|
|
38
36
|
this.#$dialog.removeEventListener('cancel', this.#onCancel);
|
|
39
37
|
this.removeEventListener('-close', this.#onCloseReactHandler);
|
|
40
38
|
this.#setOpen(false);
|
|
41
|
-
this.#isConnected = false;
|
|
42
39
|
}
|
|
43
40
|
static get observedAttributes() {
|
|
44
41
|
return ['caption', 'open', 'close-aria-label'];
|
|
@@ -96,7 +93,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
|
|
|
96
93
|
}
|
|
97
94
|
#setOpen(shouldOpen) {
|
|
98
95
|
if (shouldOpen) {
|
|
99
|
-
if (this
|
|
96
|
+
if (this.isConnected && !getBooleanAttribute(this.#$dialog, 'open')) {
|
|
100
97
|
this.#prevOverflowValue = document.body.style.overflow;
|
|
101
98
|
document.body.style.overflow = 'hidden';
|
|
102
99
|
this.#$dialog.showModal();
|
package/emoji/index.js
CHANGED
|
@@ -5,7 +5,6 @@ const template = document.createElement('template');
|
|
|
5
5
|
template.innerHTML = templateHTML;
|
|
6
6
|
defineCustomElement('sinch-emoji', class extends NectaryElement {
|
|
7
7
|
#$img;
|
|
8
|
-
#isConnected = false;
|
|
9
8
|
constructor() {
|
|
10
9
|
super();
|
|
11
10
|
const shadowRoot = this.attachShadow();
|
|
@@ -13,12 +12,9 @@ defineCustomElement('sinch-emoji', class extends NectaryElement {
|
|
|
13
12
|
this.#$img = shadowRoot.querySelector('#image');
|
|
14
13
|
}
|
|
15
14
|
connectedCallback() {
|
|
16
|
-
|
|
15
|
+
super.connectedCallback();
|
|
17
16
|
this.#updateChar();
|
|
18
17
|
}
|
|
19
|
-
disconnectedCallback() {
|
|
20
|
-
this.#isConnected = false;
|
|
21
|
-
}
|
|
22
18
|
static get observedAttributes() {
|
|
23
19
|
return ['char'];
|
|
24
20
|
}
|
|
@@ -39,7 +35,7 @@ defineCustomElement('sinch-emoji', class extends NectaryElement {
|
|
|
39
35
|
return getAttribute(this, 'char', '');
|
|
40
36
|
}
|
|
41
37
|
#updateChar() {
|
|
42
|
-
if (!this
|
|
38
|
+
if (!this.isConnected) {
|
|
43
39
|
return;
|
|
44
40
|
}
|
|
45
41
|
this.#$img.src = getEmojiUrl(this, this.char);
|
package/emoji-picker/index.js
CHANGED
|
@@ -15,9 +15,9 @@ import '../icons/emoji-objects';
|
|
|
15
15
|
import '../icons/emoji-transportation';
|
|
16
16
|
import '../icons/emoji-events';
|
|
17
17
|
import '../icons/emoji-symbols';
|
|
18
|
-
import { defineCustomElement,
|
|
18
|
+
import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect, subscribeContext } from '../utils';
|
|
19
19
|
import dataJson from './data.json';
|
|
20
|
-
const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" aria-label="Search emojis"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div></div></div>';
|
|
20
|
+
const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" size="l" aria-label="Search emojis"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" size="l" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div></div></div>';
|
|
21
21
|
const groupIconTagNames = ['sinch-icon-sentiment-satisfied', 'sinch-icon-emoji-people', 'sinch-icon-emoji-nature', 'sinch-icon-emoji-food-beverage', 'sinch-icon-emoji-transportation', 'sinch-icon-emoji-events', 'sinch-icon-emoji-objects', 'sinch-icon-emoji-symbols'];
|
|
22
22
|
const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
|
|
23
23
|
const data = dataJson;
|
|
@@ -61,9 +61,6 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
|
|
|
61
61
|
this.addEventListener('keydown', this.#onListboxKeyDown, {
|
|
62
62
|
signal
|
|
63
63
|
});
|
|
64
|
-
this.addEventListener('-keydown', this.#onContexKeydown, {
|
|
65
|
-
signal
|
|
66
|
-
});
|
|
67
64
|
this.#$skinButton.addEventListener('-click', this.#onSkinButtonClick, {
|
|
68
65
|
signal
|
|
69
66
|
});
|
|
@@ -79,17 +76,12 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
|
|
|
79
76
|
this.addEventListener('-change', this.#onChangeReactHandler, {
|
|
80
77
|
signal
|
|
81
78
|
});
|
|
82
|
-
this
|
|
83
|
-
|
|
84
|
-
});
|
|
85
|
-
dispatchContextConnectEvent(this, 'keydown');
|
|
86
|
-
dispatchContextConnectEvent(this, 'visibility');
|
|
79
|
+
subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
|
|
80
|
+
subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
|
|
87
81
|
this.#updateTabs();
|
|
88
82
|
this.#updateEmojis();
|
|
89
83
|
}
|
|
90
84
|
disconnectedCallback() {
|
|
91
|
-
dispatchContextDisconnectEvent(this, 'keydown');
|
|
92
|
-
dispatchContextDisconnectEvent(this, 'visibility');
|
|
93
85
|
this.#controller.abort();
|
|
94
86
|
}
|
|
95
87
|
get skinToneButtonRect() {
|
|
@@ -117,7 +109,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
|
|
|
117
109
|
detail: value
|
|
118
110
|
}));
|
|
119
111
|
};
|
|
120
|
-
#
|
|
112
|
+
#onContextKeyDown = e => {
|
|
121
113
|
this.#handleKeydown(e.detail);
|
|
122
114
|
};
|
|
123
115
|
#onContextVisibility = e => {
|
|
@@ -311,7 +303,7 @@ defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
|
|
|
311
303
|
el.setAttribute('char', emoji.emoji);
|
|
312
304
|
el.setAttribute('label', emoji.label);
|
|
313
305
|
btn.setAttribute('aria-label', emoji.label);
|
|
314
|
-
btn.setAttribute('
|
|
306
|
+
btn.setAttribute('size', 's');
|
|
315
307
|
btn.setAttribute('data-value', emoji.emoji);
|
|
316
308
|
btn.appendChild(el);
|
|
317
309
|
return btn;
|
package/field/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-
|
|
2
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-text-s);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-text-xs);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-text-xs);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-field', class extends NectaryElement {
|
package/file-status/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import '../icons/pending-actions';
|
|
|
5
5
|
import '../icons/text-snippet';
|
|
6
6
|
import '../text';
|
|
7
7
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
|
|
8
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-bg-primary-contrast);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none
|
|
8
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;background-color:var(--sinch-color-bg-primary-contrast);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-success-500)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-error-500)}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
|
|
9
9
|
import { assertType, typeValues } from './utils';
|
|
10
10
|
const template = document.createElement('template');
|
|
11
11
|
template.innerHTML = templateHTML;
|
|
@@ -48,7 +48,9 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
|
|
|
48
48
|
switch (name) {
|
|
49
49
|
case 'type':
|
|
50
50
|
{
|
|
51
|
-
|
|
51
|
+
if ('production' !== 'production') {
|
|
52
|
+
assertType(newVal);
|
|
53
|
+
}
|
|
52
54
|
break;
|
|
53
55
|
}
|
|
54
56
|
case 'filename':
|
package/flag/index.d.ts
ADDED
package/flag/index.js
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
|
|
2
|
+
const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-size-icon,48px);height:var(--sinch-size-icon,48px);object-fit:contain}</style><img id="image" src="" alt="" loading="lazy"/>';
|
|
3
|
+
import { getFlagUrl } from './utils';
|
|
4
|
+
const template = document.createElement('template');
|
|
5
|
+
template.innerHTML = templateHTML;
|
|
6
|
+
defineCustomElement('sinch-flag', class extends NectaryElement {
|
|
7
|
+
#$img;
|
|
8
|
+
constructor() {
|
|
9
|
+
super();
|
|
10
|
+
const shadowRoot = this.attachShadow();
|
|
11
|
+
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
12
|
+
this.#$img = shadowRoot.querySelector('#image');
|
|
13
|
+
}
|
|
14
|
+
connectedCallback() {
|
|
15
|
+
super.connectedCallback();
|
|
16
|
+
this.#updateCode();
|
|
17
|
+
}
|
|
18
|
+
static get observedAttributes() {
|
|
19
|
+
return ['code'];
|
|
20
|
+
}
|
|
21
|
+
attributeChangedCallback(name, _, newVal) {
|
|
22
|
+
switch (name) {
|
|
23
|
+
case 'code':
|
|
24
|
+
{
|
|
25
|
+
this.#$img.alt = newVal ?? '';
|
|
26
|
+
this.#updateCode();
|
|
27
|
+
break;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
set code(value) {
|
|
32
|
+
updateAttribute(this, 'code', value);
|
|
33
|
+
}
|
|
34
|
+
get code() {
|
|
35
|
+
return getAttribute(this, 'code', '');
|
|
36
|
+
}
|
|
37
|
+
#updateCode() {
|
|
38
|
+
if (!this.isConnected) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
this.#$img.src = getFlagUrl(this, this.code);
|
|
42
|
+
}
|
|
43
|
+
});
|
package/flag/types.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TSinchElementReact } from '../types';
|
|
2
|
+
export declare type TSinchFlagElement = HTMLElement & {
|
|
3
|
+
/** Flag country code */
|
|
4
|
+
code: string;
|
|
5
|
+
/** Flag country code */
|
|
6
|
+
setAttribute(code: 'name', value: string): void;
|
|
7
|
+
};
|
|
8
|
+
export declare type TSinchFlagReact = TSinchElementReact<TSinchFlagElement> & {
|
|
9
|
+
/** Flag country code */
|
|
10
|
+
code: string;
|
|
11
|
+
};
|
package/flag/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/flag/utils.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getFlagUrl: (root: Element, code: string | null) => string;
|
package/flag/utils.js
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { getCssVar } from '../utils';
|
|
2
|
+
|
|
3
|
+
let flagUrl = null;
|
|
4
|
+
export const getFlagUrl = (root, code) => {
|
|
5
|
+
if (code === null || code.length === 0) {
|
|
6
|
+
return '';
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
if (flagUrl === null) {
|
|
10
|
+
flagUrl = getCssVar(root, '--sinch-flag-src-url');
|
|
11
|
+
if (flagUrl !== null) {
|
|
12
|
+
flagUrl = flagUrl.replaceAll('"', '').trim();
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
if (flagUrl === null) {
|
|
16
|
+
return '';
|
|
17
|
+
}
|
|
18
|
+
return flagUrl.replace('%s', code);
|
|
19
|
+
};
|
package/icon/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
|
|
2
|
-
const templateHTML = '<style>:host{display:contents}#icon{display:inline-block;font-family:var(--sinch-icon-font-family);font-weight:var(--sinch-icon-font-weight);font-size:var(--sinch-size-icon, 24px);font-feature-settings:var(--sinch-icon-font-feature-settings);font-variation-settings:"FILL" 1;-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-size-icon,24px);height:var(--sinch-size-icon,24px);color:var(--sinch-color-icon,var(--sinch-color-
|
|
2
|
+
const templateHTML = '<style>:host{display:contents}#icon{display:inline-block;font-family:var(--sinch-icon-font-family);font-weight:var(--sinch-icon-font-weight);font-size:var(--sinch-size-icon, 24px);font-feature-settings:var(--sinch-icon-font-feature-settings);font-variation-settings:"FILL" 1;-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-size-icon,24px);height:var(--sinch-size-icon,24px);color:var(--sinch-color-icon,var(--sinch-color-stormy-500));user-select:none}</style><span id="icon" role="img"></span>';
|
|
3
3
|
const template = document.createElement('template');
|
|
4
4
|
template.innerHTML = templateHTML;
|
|
5
5
|
defineCustomElement('sinch-icon', class extends NectaryElement {
|