@nectary/components 0.19.0 → 0.20.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/alert/index.js +1 -1
- package/avatar/index.js +1 -1
- package/avatar-badge/index.d.ts +18 -0
- package/avatar-badge/index.js +55 -0
- package/avatar-status/index.d.ts +21 -0
- package/avatar-status/index.js +49 -0
- package/button/index.js +1 -1
- package/card/index.js +1 -1
- package/chat-avatar/index.js +1 -1
- package/chat-block/index.js +1 -1
- package/dialog/index.js +1 -1
- package/index.d.ts +3 -0
- package/index.js +4 -1
- package/input/index.js +1 -1
- package/package.json +1 -1
- package/search/index.d.ts +3 -0
- package/search/index.js +49 -4
- package/segment/index.js +1 -1
- package/select/index.js +1 -1
- package/table-head-cell/index.js +1 -1
- package/tabs-option/index.js +1 -1
- package/textarea/index.js +1 -1
- package/theme.css +5 -5
- package/title/index.d.ts +26 -0
- package/title/index.js +96 -0
- package/utils.d.ts +1 -1
- package/utils.js +10 -1
package/accordion-item/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
|
|
|
9
9
|
|
|
10
10
|
import '../icon/keyboard-arrow-down';
|
|
11
11
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
|
|
12
|
-
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-
|
|
12
|
+
const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-small-text);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span> <span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
|
|
13
13
|
export const isAccordionItemElement = element => {
|
|
14
14
|
return element instanceof Element && element.tagName === 'SINCH-ACCORDION-ITEM';
|
|
15
15
|
};
|
package/alert/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{--sinch-color-alert-info-background:#D5E5F8;--sinch-color-alert-success-background:#D7F1D8;--sinch-color-alert-warn-background:#FFE8D6;--sinch-color-alert-error-background:#FCD7D4;display:block}#wrapper{display:flex;flex-direction:row;column-gap:12px;align-items:center;position:relative;padding:12px 18px;border-radius:4px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-600);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%;min-height:56px}#body-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:12px;flex:1;min-width:0}#title{display:none;font:var(--sinch-font-title-
|
|
11
|
+
const templateHTML = '<style>:host{--sinch-color-alert-info-background:#D5E5F8;--sinch-color-alert-success-background:#D7F1D8;--sinch-color-alert-warn-background:#FFE8D6;--sinch-color-alert-error-background:#FCD7D4;display:block}#wrapper{display:flex;flex-direction:row;column-gap:12px;align-items:center;position:relative;padding:12px 18px;border-radius:4px;font:var(--sinch-font-body);color:var(--sinch-color-stormy-600);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%;min-height:56px}#body-wrapper{display:flex;flex-direction:row;align-items:center;column-gap:12px;flex:1;min-width:0}#title{display:none;font:var(--sinch-font-title-s);margin:0;margin-bottom:4px}#text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;flex:1;min-width:0}:is(#icon-info,#icon-success,#icon-warn,#icon-error){display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-alert-success-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-alert-warn-background)}:host([type=error]) #wrapper{background-color:var(--sinch-color-alert-error-background)}:host([type=info]) #wrapper{background-color:var(--sinch-color-alert-info-background)}:host([type=success]) #icon-success{display:block}:host([type=warn]) #icon-warn{display:block}:host([type=error]) #icon-error{display:block}:host(:is([type=info],:not([type]))) #icon-info{display:block}:host([multiline]:not([multiline=false])) #wrapper{align-items:flex-start;padding:16px 18px}:host([multiline]:not([multiline=false])) #body-wrapper{flex-direction:column;align-items:flex-start}:host([multiline]:not([multiline=false])) #title{display:block}:host([multiline]:not([multiline=false])) :is(#icon-info,#icon-success,#icon-warn,#icon-error){margin-top:2px}:host([multiline]:not([multiline=false])) #text{overflow:unset;text-overflow:unset;white-space:unset}:host([multiline]:not([multiline=false])) ::slotted(sinch-alert-button){margin-top:10px}</style><div id="wrapper"><svg id="icon-info" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0Zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Zm1-8H9V5h2v2Z" fill="#2071CE"/></svg> <svg id="icon-success" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0ZM7.29 14.29 3.7 10.7a.996.996 0 1 1 1.41-1.41L8 12.17l6.88-6.88a.996.996 0 1 1 1.41 1.41L8.7 14.29a.996.996 0 0 1-1.41 0Z" fill="#2E8540"/></svg> <svg id="icon-warn" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true"><path d="M2.47 18h15.06c1.54 0 2.5-1.67 1.73-3L11.73 1.99c-.77-1.33-2.69-1.33-3.46 0L.74 15c-.77 1.33.19 3 1.73 3ZM10 11c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v2c0 .55-.45 1-1 1Zm1 4H9v-2h2v2Z" fill="#FF8C34"/></svg> <svg id="icon-error" width="20" height="20" viewBox="0 0 18 18" aria-hidden="true"><path d="M12.32 0H5.68c-.26 0-.52.11-.7.29L.29 4.98c-.18.18-.29.44-.29.7v6.63c0 .27.11.52.29.71l4.68 4.68c.19.19.45.3.71.3h6.63c.27 0 .52-.11.71-.29l4.68-4.68a.99.99 0 0 0 .29-.71V5.68c0-.27-.11-.52-.29-.71L13.02.29c-.18-.18-.44-.29-.7-.29ZM9 14.3c-.72 0-1.3-.58-1.3-1.3 0-.72.58-1.3 1.3-1.3.72 0 1.3.58 1.3 1.3 0 .72-.58 1.3-1.3 1.3ZM9 10c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1Z" fill="#E31C3D"/></svg><div id="body-wrapper"><p id="title"></p><p id="text"></p><slot name="button"></slot></div><slot name="close"></slot></div>';
|
|
12
12
|
const typeValues = ['info', 'success', 'warn', 'error'];
|
|
13
13
|
const template = document.createElement('template');
|
|
14
14
|
template.innerHTML = templateHTML;
|
package/avatar/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
|
|
|
9
9
|
|
|
10
10
|
import '../icon/cancel';
|
|
11
11
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
|
|
12
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:
|
|
12
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:40px;height:40px;font:var(--sinch-font-title-s);line-height:38px;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-700);text-align:center;border-radius:50%;border:1px solid var(--sinch-color-snow-100);box-sizing:border-box;text-transform:uppercase;--sinch-avatar-badge-size:16px;--sinch-avatar-badge-font:700 12px/14px "Gilroy","Arial","sans-serif"}:host([background=blue]) #wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100)}:host([background=yellow]) #wrapper{background-color:var(--sinch-color-honey-500)}:host([size="l"]) #wrapper{width:56px;height:56px;font:var(--sinch-font-title-m);line-height:54px;--sinch-avatar-badge-size:20px;--sinch-avatar-badge-font:700 12px/18px "Gilroy","Arial","sans-serif"}:host([size="s"]) #wrapper{width:24px;height:24px;font:var(--sinch-font-extra-small-text);line-height:22px;--sinch-avatar-badge-size:11px;--sinch-avatar-badge-font:500 8px/9px "Gilroy","Arial","sans-serif"}#text{display:block;width:100%;height:100%;box-sizing:border-box}#image{display:none;width:100%;height:100%;object-fit:contain;position:absolute;left:0;top:0;border-radius:50%}:host([src]:not([src=""])) #image{display:block}::slotted(sinch-avatar-badge){position:absolute;top:-2px;left:calc(100% - 15px)}:host([size="l"]) ::slotted(sinch-avatar-badge){left:calc(100% - 19px)}:host([size="s"]) ::slotted(sinch-avatar-badge){left:calc(100% - 9px)}::slotted(sinch-avatar-status){position:absolute;bottom:-2px;right:-2px}:host([size="l"]) ::slotted(sinch-avatar-status){bottom:2px;right:2px}</style><div id="wrapper"><span id="text"></span> <img id="image" alt=""/><slot name="badge"></slot><slot name="status"></slot></div>';
|
|
13
13
|
const backgroundValues = ['grey', 'yellow', 'blue'];
|
|
14
14
|
const sizeValues = ['l', 'm', 's'];
|
|
15
15
|
const template = document.createElement('template');
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import '../icon/cancel';
|
|
2
|
+
import type { TSinchElementReact } from '../types';
|
|
3
|
+
export declare type TSinchAvatarBadgeElement = HTMLElement & {
|
|
4
|
+
text: string;
|
|
5
|
+
};
|
|
6
|
+
export declare type TSinchAvatarBadgeReact = TSinchElementReact<TSinchAvatarBadgeElement> & {
|
|
7
|
+
text: string;
|
|
8
|
+
};
|
|
9
|
+
declare global {
|
|
10
|
+
namespace JSX {
|
|
11
|
+
interface IntrinsicElements {
|
|
12
|
+
'sinch-avatar-badge': TSinchAvatarBadgeReact;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
interface HTMLElementTagNameMap {
|
|
16
|
+
'sinch-avatar-badge': TSinchAvatarBadgeElement;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
|
|
2
|
+
import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
|
|
3
|
+
|
|
4
|
+
var _$text;
|
|
5
|
+
|
|
6
|
+
function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
|
|
7
|
+
|
|
8
|
+
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
|
+
|
|
10
|
+
import '../icon/cancel';
|
|
11
|
+
import { defineCustomElement, getAttribute, setClass, updateAttribute } from '../utils';
|
|
12
|
+
const templateHTML = '<style>#text{width:var(--sinch-avatar-badge-size);height:var(--sinch-avatar-badge-size);border:1px solid var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);text-align:center;box-sizing:border-box;color:var(--sinch-color-snow-100);font:var(--sinch-avatar-badge-font);background-color:var(--sinch-color-raspberry-500)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="text"></div>';
|
|
13
|
+
const template = document.createElement('template');
|
|
14
|
+
template.innerHTML = templateHTML;
|
|
15
|
+
defineCustomElement('sinch-avatar-badge', (_$text = new WeakMap(), class extends HTMLElement {
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
|
|
19
|
+
_classPrivateFieldInitSpec(this, _$text, {
|
|
20
|
+
writable: true,
|
|
21
|
+
value: void 0
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
const shadowRoot = this.attachShadow({
|
|
25
|
+
mode: 'closed'
|
|
26
|
+
});
|
|
27
|
+
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
28
|
+
|
|
29
|
+
_classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
get text() {
|
|
33
|
+
return getAttribute(this, 'text', '');
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
set text(value) {
|
|
37
|
+
updateAttribute(this, 'text', value);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
static get observedAttributes() {
|
|
41
|
+
return ['text'];
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
attributeChangedCallback(name, _, newVal) {
|
|
45
|
+
switch (name) {
|
|
46
|
+
case 'text':
|
|
47
|
+
{
|
|
48
|
+
_classPrivateFieldGet(this, _$text).textContent = newVal;
|
|
49
|
+
setClass(_classPrivateFieldGet(this, _$text), 'long', newVal !== null && newVal.length > 1);
|
|
50
|
+
break;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
}));
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import '../icon/cancel';
|
|
2
|
+
import type { TSinchElementReact } from '../types';
|
|
3
|
+
declare const colorValues: readonly ["red", "yellow", "green", "grey"];
|
|
4
|
+
export declare type TSinchAvatarStatusColor = typeof colorValues[number];
|
|
5
|
+
export declare type TSinchAvatarStatusElement = HTMLElement & {
|
|
6
|
+
color: TSinchAvatarStatusColor;
|
|
7
|
+
};
|
|
8
|
+
export declare type TSinchAvatarStatusReact = TSinchElementReact<TSinchAvatarStatusElement> & {
|
|
9
|
+
color: TSinchAvatarStatusColor;
|
|
10
|
+
};
|
|
11
|
+
declare global {
|
|
12
|
+
namespace JSX {
|
|
13
|
+
interface IntrinsicElements {
|
|
14
|
+
'sinch-avatar-status': TSinchAvatarStatusReact;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
interface HTMLElementTagNameMap {
|
|
18
|
+
'sinch-avatar-status': TSinchAvatarStatusElement;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import '../icon/cancel';
|
|
2
|
+
import { defineCustomElement, getLiteralAttribute, updateLiteralAttribute } from '../utils';
|
|
3
|
+
const templateHTML = '<style>#circle{width:10px;height:10px;border:1px solid var(--sinch-color-snow-100);border-radius:50%;box-sizing:border-box}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="circle"></div>';
|
|
4
|
+
const colorValues = ['red', 'yellow', 'green', 'grey'];
|
|
5
|
+
|
|
6
|
+
const assertColor = value => {
|
|
7
|
+
if (value === null || !colorValues.includes(value)) {
|
|
8
|
+
throw new Error(`sinch-avatar-status: invalid color attribute: ${value}`);
|
|
9
|
+
}
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const template = document.createElement('template');
|
|
13
|
+
template.innerHTML = templateHTML;
|
|
14
|
+
defineCustomElement('sinch-avatar-status', class extends HTMLElement {
|
|
15
|
+
constructor() {
|
|
16
|
+
super();
|
|
17
|
+
const shadowRoot = this.attachShadow({
|
|
18
|
+
mode: 'closed'
|
|
19
|
+
});
|
|
20
|
+
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
connectedCallback() {
|
|
24
|
+
assertColor(this.getAttribute('color'));
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
static get observedAttributes() {
|
|
28
|
+
return ['color'];
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
attributeChangedCallback(name, _, newVal) {
|
|
32
|
+
switch (name) {
|
|
33
|
+
case 'color':
|
|
34
|
+
{
|
|
35
|
+
assertColor(newVal);
|
|
36
|
+
break;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
get color() {
|
|
42
|
+
return getLiteralAttribute(this, colorValues, 'color');
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
set color(value) {
|
|
46
|
+
updateLiteralAttribute(this, colorValues, 'color', value);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
});
|
package/button/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta-primary]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta-primary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-snow-500);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-snow-500);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-stormy-500);--sinch-color-button-text-disabled:var(--sinch-color-stormy-200);--sinch-color-button-border:var(--sinch-color-stormy-500);--sinch-color-button-border-hover:var(--sinch-color-stormy-500);--sinch-color-button-border-focus:var(--sinch-color-stormy-500);--sinch-color-button-border-active:var(--sinch-color-stormy-500);--sinch-color-button-border-disabled:var(--sinch-color-stormy-200);--sinch-color-spinner-bg:var(--sinch-color-snow-800);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=cta-secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-600);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-200)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;display:flex;align-items:center;justify-content:center;gap:15px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:4px;font:var(--sinch-font-title-
|
|
11
|
+
const templateHTML = '<style>:host{--sinch-color-button-background:var(--sinch-color-tropical-500);--sinch-color-button-background-hover:var(--sinch-color-tropical-400);--sinch-color-button-background-focus:var(--sinch-color-tropical-500);--sinch-color-button-background-active:var(--sinch-color-tropical-600);--sinch-color-button-background-disabled:var(--sinch-color-tropical-100);--sinch-color-button-text:var(--sinch-color-text-inverted);--sinch-color-button-text-disabled:var(--sinch-color-text-inverted);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-text-inverted);display:inline-block;vertical-align:middle;outline:0}:host([type=secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-tropical-100);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-tropical-100);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-tropical-500);--sinch-color-button-text-disabled:var(--sinch-color-tropical-100);--sinch-color-button-border:var(--sinch-color-tropical-500);--sinch-color-button-border-hover:var(--sinch-color-tropical-500);--sinch-color-button-border-focus:var(--sinch-color-tropical-700);--sinch-color-button-border-active:var(--sinch-color-tropical-500);--sinch-color-button-border-disabled:var(--sinch-color-tropical-100);--sinch-color-spinner-bg:var(--sinch-color-tropical-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([type=secondary]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-tropical-300);--sinch-color-spinner-fg:var(--sinch-color-snow-100)}:host([type=secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-tropical-200);--sinch-color-spinner-fg:var(--sinch-color-tropical-400)}:host([type=cta-primary]){--sinch-color-button-background:var(--sinch-color-honey-500);--sinch-color-button-background-hover:var(--sinch-color-honey-400);--sinch-color-button-background-focus:var(--sinch-color-honey-500);--sinch-color-button-background-active:var(--sinch-color-honey-600);--sinch-color-button-background-disabled:var(--sinch-color-honey-100);--sinch-color-button-text:var(--sinch-color-text-default);--sinch-color-button-text-disabled:var(--sinch-color-stormy-300);--sinch-color-button-border:var(--sinch-color-transparent);--sinch-color-button-border-hover:var(--sinch-color-transparent);--sinch-color-button-border-focus:var(--sinch-color-text-default);--sinch-color-button-border-active:var(--sinch-color-transparent);--sinch-color-button-border-disabled:var(--sinch-color-transparent);--sinch-color-spinner-bg:var(--sinch-color-honey-700);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-text-default)}:host([type=cta-primary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-stormy-300)}:host([type=cta-secondary]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-snow-500);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-snow-500);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-stormy-500);--sinch-color-button-text-disabled:var(--sinch-color-stormy-200);--sinch-color-button-border:var(--sinch-color-stormy-500);--sinch-color-button-border-hover:var(--sinch-color-stormy-500);--sinch-color-button-border-focus:var(--sinch-color-stormy-500);--sinch-color-button-border-active:var(--sinch-color-stormy-500);--sinch-color-button-border-disabled:var(--sinch-color-stormy-200);--sinch-color-spinner-bg:var(--sinch-color-snow-800);--sinch-color-spinner-fg:var(--sinch-color-stormy-600);--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=cta-secondary]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-snow-600);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-200)}:host([type=destructive]){--sinch-color-button-background:var(--sinch-color-snow-100);--sinch-color-button-background-hover:var(--sinch-color-error-200);--sinch-color-button-background-focus:var(--sinch-color-snow-100);--sinch-color-button-background-active:var(--sinch-color-error-200);--sinch-color-button-background-disabled:var(--sinch-color-snow-100);--sinch-color-button-text:var(--sinch-color-text-invalid);--sinch-color-button-text-disabled:var(--sinch-color-error-200);--sinch-color-button-border:var(--sinch-color-error-500);--sinch-color-button-border-hover:var(--sinch-color-error-500);--sinch-color-button-border-focus:var(--sinch-color-error-800);--sinch-color-button-border-active:var(--sinch-color-error-500);--sinch-color-button-border-disabled:var(--sinch-color-error-200);--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500);--sinch-color-icon:var(--sinch-color-text-invalid)}:host([type=destructive]) button:is(:hover,:active){--sinch-color-spinner-bg:var(--sinch-color-raspberry-200);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}:host([type=destructive]) button:disabled{--sinch-color-spinner-bg:var(--sinch-color-raspberry-100);--sinch-color-spinner-fg:var(--sinch-color-raspberry-500)}button{all:initial;display:flex;align-items:center;justify-content:center;gap:15px;box-sizing:border-box;width:100%;height:48px;padding:12px;border-radius:4px;font:var(--sinch-font-title-s);color:var(--sinch-color-button-text);background-color:var(--sinch-color-button-background);box-shadow:0 0 0 1px var(--sinch-color-button-border) inset;cursor:pointer;--sinch-size-icon:24px}button:focus{background-color:var(--sinch-color-button-background-focus);box-shadow:0 0 0 2px var(--sinch-color-button-border-focus) inset}button:hover{background-color:var(--sinch-color-button-background-hover);box-shadow:0 0 0 1px var(--sinch-color-button-border-hover) inset}button:active{background-color:var(--sinch-color-button-background-active);box-shadow:0 0 0 2px var(--sinch-color-button-border-active) inset}button:disabled{color:var(--sinch-color-button-text-disabled);background-color:var(--sinch-color-button-background-disabled);box-shadow:0 0 0 1px var(--sinch-color-button-border-disabled) inset;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-100);--sinch-color-spinner-fg:var(--sinch-color-tropical-200);--sinch-color-icon:var(--sinch-color-button-text-disabled)}button>*{pointer-events:none}#text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}:host([text]:not([text=""])) #text{display:initial}:host([text]:not([text=""])) button{padding:12px 24px}:host([small]:not([small=false]))>button{height:32px;padding:8px;line-height:16px;font-size:14px;gap:8px;--sinch-size-icon:16px}:host([text]:not([text=""])[small]:not([small=false])) button{padding:8px 16px}</style><button><slot name="icon"></slot><span id="text"></span></button>';
|
|
12
12
|
const buttonTypes = ['primary', 'secondary', 'cta-primary', 'cta-secondary', 'destructive'];
|
|
13
13
|
const template = document.createElement('template');
|
|
14
14
|
template.innerHTML = templateHTML;
|
package/card/index.js
CHANGED
|
@@ -10,7 +10,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
|
|
|
10
10
|
import { isSinchCardButtonElement } from '../card-button';
|
|
11
11
|
import { isSinchCardLinkElement } from '../card-link';
|
|
12
12
|
import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, setClass } from '../utils';
|
|
13
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);height:240px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-
|
|
13
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative}#card-body{padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;background-color:var(--sinch-color-snow-100);border-radius:8px;border:1px solid var(--sinch-color-snow-700)}#illustration-wrapper{display:none;flex-direction:column;align-items:center;border-top-left-radius:8px;border-top-right-radius:8px;overflow:hidden;background-color:var(--sinch-color-stormy-500);height:240px}#illustration-wrapper.active{display:flex}#illustration-wrapper.active+#card-body{border-top-left-radius:0;border-top-right-radius:0;border-top:none}#label{margin:0;font:var(--sinch-font-title-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#label:empty{display:none}#header{display:flex;flex-direction:row;align-items:center;gap:8px;--sinch-size-icon:48px}#title{font:var(--sinch-font-title-m);color:var(--sinch-color-stormy-500);flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{margin:0;font:var(--sinch-font-body);color:var(--sinch-color-stormy-500);flex:1;min-height:0;max-height:120px;overflow-y:auto}#description:empty{display:none}:host([disabled]:not([disabled=false])) :is(#illustration-wrapper,#description,#header,#label){opacity:.6}::slotted(sinch-card-button),::slotted(sinch-card-link){margin-top:20px;align-self:flex-start;max-width:100%}</style><div id="wrapper"><div id="illustration-wrapper"><slot name="illustration"></slot></div><div id="card-body"><p id="label"></p><div id="header"><slot name="icon"></slot><span id="title"></span></div><p id="description"></p><slot name="action"></slot></div></div>';
|
|
14
14
|
const template = document.createElement('template');
|
|
15
15
|
template.innerHTML = templateHTML;
|
|
16
16
|
defineCustomElement('sinch-card', (_$text = new WeakMap(), _$label = new WeakMap(), _$title = new WeakMap(), _$illustrationSlot = new WeakMap(), _$actionSlot = new WeakMap(), _$illustrationSlotWrapper = new WeakMap(), _onIllustrationSlotChange = new WeakMap(), _updateDisabledAttributeInChildren = new WeakMap(), class extends HTMLElement {
|
package/chat-avatar/index.js
CHANGED
|
@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
|
|
|
9
9
|
|
|
10
10
|
import '../avatar';
|
|
11
11
|
import { defineCustomElement, getAttribute, updateAttribute } from '../utils';
|
|
12
|
-
const templateHTML = '<style
|
|
12
|
+
const templateHTML = '<style>sinch-avatar{display:block}</style><sinch-avatar background="blue" size="l"></sinch-avatar>';
|
|
13
13
|
const template = document.createElement('template');
|
|
14
14
|
template.innerHTML = templateHTML;
|
|
15
15
|
defineCustomElement('sinch-chat-avatar', (_$avatar = new WeakMap(), class extends HTMLElement {
|
package/chat-block/index.js
CHANGED
|
@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
|
|
|
13
13
|
|
|
14
14
|
import { typeValues } from '../chat-bubble';
|
|
15
15
|
import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute } from '../utils';
|
|
16
|
-
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:
|
|
16
|
+
const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-end;padding-left:72px}#stamp{display:flex;gap:4px;margin:0;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-stormy-400)}#avatar{display:none;position:absolute;left:0;top:24px}:host([type=customer])>#wrapper{align-items:flex-start}:host([type=customer]) #avatar{display:block}</style><div id="wrapper"><div id="avatar"><slot name="avatar"></slot></div><p id="stamp"><span id="firstname"></span><span id="lastname"></span>•<span id="time"></span></p><slot name="bubble"></slot></div>';
|
|
17
17
|
const template = document.createElement('template');
|
|
18
18
|
template.innerHTML = templateHTML;
|
|
19
19
|
defineCustomElement('sinch-chat-block', (_$firstName = new WeakMap(), _$lastName = new WeakMap(), _$timeStamp = new WeakMap(), _$bubbleSlot = new WeakMap(), _onBubbleSlotChange = new WeakMap(), _updateBubbleTypes = new WeakSet(), class extends HTMLElement {
|
package/dialog/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import dialogPolyfill from 'dialog-polyfill';
|
|
|
15
15
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute } from '../utils';
|
|
16
16
|
import '../icon-button';
|
|
17
17
|
import '../icon/close';
|
|
18
|
-
const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}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-content:center;margin-bottom:16px}#caption{font:var(--sinch-font-title-
|
|
18
|
+
const templateHTML = '<style>dialog{position:absolute;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;width:100%;max-width:512px;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}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-content:center;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default)}#content-wrapper{max-height:50vh;overflow-y:auto}#close{all:initial;cursor:pointer;--sinch-size-icon:24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}</style><dialog><div id="header"><span id="caption"></span> <button id="close"><sinch-icon-close></sinch-icon-close></button></div><div id="content-wrapper"><slot name="content"></slot></div><div id="buttons"><slot name="buttons"></slot></div></dialog>';
|
|
19
19
|
const template = document.createElement('template');
|
|
20
20
|
template.innerHTML = templateHTML;
|
|
21
21
|
|
package/index.d.ts
CHANGED
|
@@ -139,7 +139,10 @@ import './search-option';
|
|
|
139
139
|
import './segment';
|
|
140
140
|
import './segment-collapse';
|
|
141
141
|
import './avatar';
|
|
142
|
+
import './avatar-badge';
|
|
143
|
+
import './avatar-status';
|
|
142
144
|
import './chat-avatar';
|
|
143
145
|
import './chat-bubble';
|
|
144
146
|
import './chat-block';
|
|
145
147
|
import './chat';
|
|
148
|
+
import './title';
|
package/index.js
CHANGED
|
@@ -139,7 +139,10 @@ import './search-option';
|
|
|
139
139
|
import './segment';
|
|
140
140
|
import './segment-collapse';
|
|
141
141
|
import './avatar';
|
|
142
|
+
import './avatar-badge';
|
|
143
|
+
import './avatar-status';
|
|
142
144
|
import './chat-avatar';
|
|
143
145
|
import './chat-bubble';
|
|
144
146
|
import './chat-block';
|
|
145
|
-
import './chat';
|
|
147
|
+
import './chat';
|
|
148
|
+
import './title';
|
package/input/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-
|
|
11
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
|
|
12
12
|
const inputTypes = ['text', 'password'];
|
|
13
13
|
const template = document.createElement('template');
|
|
14
14
|
template.innerHTML = templateHTML;
|
package/package.json
CHANGED
package/search/index.d.ts
CHANGED
|
@@ -8,6 +8,9 @@ export declare type TSinchSearchElement = HTMLElement & {
|
|
|
8
8
|
label: string | null;
|
|
9
9
|
placeholder: string | null;
|
|
10
10
|
maxVisibleItems: number | null;
|
|
11
|
+
selectionStart: HTMLInputElement['selectionStart'];
|
|
12
|
+
selectionEnd: HTMLInputElement['selectionEnd'];
|
|
13
|
+
selectionDirection: HTMLInputElement['selectionDirection'];
|
|
11
14
|
readonly dropdownRect: TRect;
|
|
12
15
|
focus(): void;
|
|
13
16
|
blur(): void;
|
package/search/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
|
|
2
2
|
import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
|
|
3
3
|
|
|
4
|
-
var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements;
|
|
4
|
+
var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _isPendingDk, _onCompositionStart, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionElements;
|
|
5
5
|
|
|
6
6
|
function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
|
|
7
7
|
|
|
@@ -13,7 +13,7 @@ function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(
|
|
|
13
13
|
|
|
14
14
|
import { isSearchOptionElement } from '../search-option';
|
|
15
15
|
import { attrValueToPixels, defineCustomElement, getAttribute, getIntegerAttribute, getRect, updateAttribute, updateIntegerAttribute } from '../utils';
|
|
16
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-
|
|
16
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
|
|
17
17
|
import '../icon/search';
|
|
18
18
|
import '../icon/close';
|
|
19
19
|
import '../icon-button';
|
|
@@ -31,7 +31,7 @@ const findSelectedOption = elements => {
|
|
|
31
31
|
|
|
32
32
|
const template = document.createElement('template');
|
|
33
33
|
template.innerHTML = templateHTML;
|
|
34
|
-
defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), class extends HTMLElement {
|
|
34
|
+
defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionElements = new WeakSet(), class extends HTMLElement {
|
|
35
35
|
constructor() {
|
|
36
36
|
super();
|
|
37
37
|
|
|
@@ -88,6 +88,18 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
|
|
|
88
88
|
value: void 0
|
|
89
89
|
});
|
|
90
90
|
|
|
91
|
+
_classPrivateFieldInitSpec(this, _isPendingDk, {
|
|
92
|
+
writable: true,
|
|
93
|
+
value: false
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
_classPrivateFieldInitSpec(this, _onCompositionStart, {
|
|
97
|
+
writable: true,
|
|
98
|
+
value: () => {
|
|
99
|
+
_classPrivateFieldSet(this, _isPendingDk, true);
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
91
103
|
_classPrivateFieldInitSpec(this, _onInput, {
|
|
92
104
|
writable: true,
|
|
93
105
|
value: e => {
|
|
@@ -229,6 +241,8 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
|
|
|
229
241
|
|
|
230
242
|
_classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
|
|
231
243
|
|
|
244
|
+
_classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
|
|
245
|
+
|
|
232
246
|
_classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
|
|
233
247
|
|
|
234
248
|
_classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
|
|
@@ -249,6 +263,8 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
|
|
|
249
263
|
disconnectedCallback() {
|
|
250
264
|
_classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
|
|
251
265
|
|
|
266
|
+
_classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
|
|
267
|
+
|
|
252
268
|
_classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
|
|
253
269
|
|
|
254
270
|
_classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
|
|
@@ -314,6 +330,30 @@ defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new Weak
|
|
|
314
330
|
return getRect(_classPrivateFieldGet(this, _$listbox));
|
|
315
331
|
}
|
|
316
332
|
|
|
333
|
+
get selectionStart() {
|
|
334
|
+
return _classPrivateFieldGet(this, _$input).selectionStart;
|
|
335
|
+
}
|
|
336
|
+
|
|
337
|
+
set selectionStart(value) {
|
|
338
|
+
_classPrivateFieldGet(this, _$input).selectionStart = value;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
get selectionEnd() {
|
|
342
|
+
return _classPrivateFieldGet(this, _$input).selectionEnd;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
set selectionEnd(value) {
|
|
346
|
+
_classPrivateFieldGet(this, _$input).selectionEnd = value;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
get selectionDirection() {
|
|
350
|
+
return _classPrivateFieldGet(this, _$input).selectionDirection;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
set selectionDirection(value) {
|
|
354
|
+
_classPrivateFieldGet(this, _$input).selectionDirection = value;
|
|
355
|
+
}
|
|
356
|
+
|
|
317
357
|
attributeChangedCallback(name, oldVal, newVal) {
|
|
318
358
|
switch (name) {
|
|
319
359
|
case 'value':
|
|
@@ -384,7 +424,12 @@ function _onValueChange2(nextValue) {
|
|
|
384
424
|
const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
|
|
385
425
|
|
|
386
426
|
const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
|
|
387
|
-
|
|
427
|
+
|
|
428
|
+
if (!_classPrivateFieldGet(this, _isPendingDk)) {
|
|
429
|
+
_classPrivateFieldGet(this, _$input).value = prevValue;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
_classPrivateFieldSet(this, _isPendingDk, false);
|
|
388
433
|
|
|
389
434
|
if (!isPrevCursorEnd) {
|
|
390
435
|
_classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
|
package/segment/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-
|
|
11
|
+
const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%;border-radius:4px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:1px 2px 8px rgb(0 0 0 / 10%)}#header{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;height:32px;padding:24px 32px 16px;--sinch-size-icon:32px}#caption{font:var(--sinch-font-title-l);color:var(--sinch-color-text-default);flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#content-wrapper{padding:0 32px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:16px 32px 24px}#info{position:relative;display:flex;flex-direction:row;align-items:center;gap:16px;z-index:1}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #header{padding-bottom:24px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><span id="caption"></span><div id="info"><slot name="info"></slot></div><slot name="collapse"></slot></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
defineCustomElement('sinch-segment', (_$caption = new WeakMap(), class extends HTMLElement {
|
package/select/index.js
CHANGED
|
@@ -15,7 +15,7 @@ import { isDropdownOptionElement } from '../dropdown-option';
|
|
|
15
15
|
import '../select-option';
|
|
16
16
|
import '../dropdown';
|
|
17
17
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
|
|
18
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-
|
|
18
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{position:relative}sinch-dropdown{display:block}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:4px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);cursor:pointer}#button:focus{border-color:var(--sinch-color-stormy-600)}#dropdown-icon{fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);cursor:initial}#button:disabled #dropdown-icon{fill:var(--sinch-color-stormy-100)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0;z-index:1}#listbox-body{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="dropdown"></label><slot name="tooltip"></slot><span id="optional"></span></div><sinch-dropdown id="dropdown"><button slot="target" id="button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8" aria-hidden="true"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><slot name="option" slot="option"></slot></sinch-dropdown><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
|
|
19
19
|
const template = document.createElement('template');
|
|
20
20
|
template.innerHTML = templateHTML;
|
|
21
21
|
defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$dropdown = new WeakMap(), _$optionSlot = new WeakMap(), _updateButtonContent = new WeakSet(), _onValueChange = new WeakMap(), _getOptionWithValue = new WeakSet(), _onLabelClick = new WeakMap(), class extends HTMLElement {
|
package/table-head-cell/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-
|
|
11
|
+
const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-color-stormy-200);height:48px;vertical-align:middle;padding:0 6px;--sinch-color-icon:var(--sinch-color-stormy-200)}:host(:first-child){padding-left:8px}:host(:last-child){padding-right:8px}#wrapper{position:relative;width:100%;height:100%;box-sizing:border-box;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-300);display:flex;align-items:center;gap:4px}#text{flex-shrink:1;min-width:0;font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host([align=center])>#wrapper{justify-content:center}:host([align=end]) #text{margin-left:auto}:host(:is([text=""],:not([text])))>#wrapper{display:none}:host([fit]:not([fit=false])){width:1px}::slotted(sinch-help-tooltip){position:relative;z-index:1}</style><slot name="checkbox"></slot><div id="wrapper"><span id="text"></span><slot name="tooltip"></slot><slot name="sort"></slot></div>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
const alignValues = ['start', 'center', 'end'];
|
package/tabs-option/index.js
CHANGED
|
@@ -7,7 +7,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
7
7
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
8
8
|
|
|
9
9
|
import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
10
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-
|
|
10
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}input{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}input:disabled{cursor:unset}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content" aria-hidden="true"></label> <input id="input" type="radio" aria-hidden="true"/></div>';
|
|
11
11
|
export const isTabsOptionElement = element => {
|
|
12
12
|
return element instanceof Element && element.tagName === 'SINCH-TABS-OPTION';
|
|
13
13
|
};
|
package/textarea/index.js
CHANGED
|
@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
|
|
|
8
8
|
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
9
|
|
|
10
10
|
import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute } from '../utils';
|
|
11
|
-
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-
|
|
11
|
+
const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto);resize:none}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><textarea id="input"></textarea><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
|
|
12
12
|
const template = document.createElement('template');
|
|
13
13
|
template.innerHTML = templateHTML;
|
|
14
14
|
defineCustomElement('sinch-textarea', (_$input = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), class extends HTMLElement {
|
package/theme.css
CHANGED
|
@@ -70,11 +70,11 @@
|
|
|
70
70
|
--sinch-color-bolt-200: #FFE6B3;
|
|
71
71
|
--sinch-color-transparent: transparent;
|
|
72
72
|
--sinch-font-hero: 700 56px/72px "Gilroy", "Arial", "sans-serif";
|
|
73
|
-
--sinch-font-title-
|
|
74
|
-
--sinch-font-title-
|
|
75
|
-
--sinch-font-title-
|
|
76
|
-
--sinch-font-title-
|
|
77
|
-
--sinch-font-title-
|
|
73
|
+
--sinch-font-title-xl: 600 40px/48px "Gilroy", "Arial", "sans-serif";
|
|
74
|
+
--sinch-font-title-l: 600 24px/32px "Gilroy", "Arial", "sans-serif";
|
|
75
|
+
--sinch-font-title-m: 600 20px/24px "Gilroy", "Arial", "sans-serif";
|
|
76
|
+
--sinch-font-title-s: 600 16px/24px "Gilroy", "Arial", "sans-serif";
|
|
77
|
+
--sinch-font-title-xs: 600 14px/22px "Gilroy", "Arial", "sans-serif";
|
|
78
78
|
--sinch-font-body: 400 16px/24px "Gilroy", "Arial", "sans-serif";
|
|
79
79
|
--sinch-font-emphasized-body: 600 16px/24px "Gilroy", "Arial", "sans-serif";
|
|
80
80
|
--sinch-font-small-text: 400 14px/22px "Gilroy", "Arial", "sans-serif";
|
package/title/index.d.ts
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import '../icon/cancel';
|
|
2
|
+
import type { TSinchElementReact } from '../types';
|
|
3
|
+
declare const typeValues: readonly ["xl", "l", "m", "s", "xs"];
|
|
4
|
+
declare const levelValues: readonly ["1", "2", "3", "4", "5", "6"];
|
|
5
|
+
export declare type TSinchTitleType = typeof typeValues[number];
|
|
6
|
+
export declare type TSinchTitleLevel = typeof levelValues[number];
|
|
7
|
+
export declare type TSinchTitleElement = HTMLElement & {
|
|
8
|
+
text: string;
|
|
9
|
+
type: TSinchTitleType;
|
|
10
|
+
};
|
|
11
|
+
export declare type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
|
|
12
|
+
text: string;
|
|
13
|
+
type: TSinchTitleType;
|
|
14
|
+
'aria-level': TSinchTitleLevel;
|
|
15
|
+
};
|
|
16
|
+
declare global {
|
|
17
|
+
namespace JSX {
|
|
18
|
+
interface IntrinsicElements {
|
|
19
|
+
'sinch-title': TSinchTitleReact;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
interface HTMLElementTagNameMap {
|
|
23
|
+
'sinch-title': TSinchTitleElement;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
export {};
|
package/title/index.js
ADDED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
|
|
2
|
+
import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
|
|
3
|
+
|
|
4
|
+
var _$text;
|
|
5
|
+
|
|
6
|
+
function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
|
|
7
|
+
|
|
8
|
+
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
|
|
9
|
+
|
|
10
|
+
import '../icon/cancel';
|
|
11
|
+
import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute } from '../utils';
|
|
12
|
+
const templateHTML = '<style>:host{display:block}:host([type=xl])>*{font:var(--sinch-font-title-xl)}:host([type="l"])>*{font:var(--sinch-font-title-l)}:host([type="m"])>*{font:var(--sinch-font-title-m)}:host([type="s"])>*{font:var(--sinch-font-title-s)}:host([type=xs])>*{font:var(--sinch-font-title-xs)}</style><span id="text"></span>';
|
|
13
|
+
const typeValues = ['xl', 'l', 'm', 's', 'xs'];
|
|
14
|
+
const levelValues = ['1', '2', '3', '4', '5', '6'];
|
|
15
|
+
|
|
16
|
+
const assertLevel = value => {
|
|
17
|
+
if (value === null || !levelValues.includes(value)) {
|
|
18
|
+
throw new Error(`sinch-title: invalid aria-level attribute: ${value}`);
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
const assertType = value => {
|
|
23
|
+
if (value === null || !typeValues.includes(value)) {
|
|
24
|
+
throw new Error(`sinch-title: invalid type attribute: ${value}`);
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const template = document.createElement('template');
|
|
29
|
+
template.innerHTML = templateHTML;
|
|
30
|
+
defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends HTMLElement {
|
|
31
|
+
constructor() {
|
|
32
|
+
super();
|
|
33
|
+
|
|
34
|
+
_classPrivateFieldInitSpec(this, _$text, {
|
|
35
|
+
writable: true,
|
|
36
|
+
value: void 0
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
const shadowRoot = this.attachShadow({
|
|
40
|
+
mode: 'closed',
|
|
41
|
+
delegatesFocus: true
|
|
42
|
+
});
|
|
43
|
+
shadowRoot.appendChild(template.content.cloneNode(true));
|
|
44
|
+
|
|
45
|
+
_classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
connectedCallback() {
|
|
49
|
+
this.setAttribute('role', 'heading');
|
|
50
|
+
assertLevel(this.getAttribute('aria-level'));
|
|
51
|
+
assertType(this.getAttribute('type'));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
get text() {
|
|
55
|
+
return getAttribute(this, 'text', '');
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
set text(value) {
|
|
59
|
+
updateAttribute(this, 'text', value);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
set type(value) {
|
|
63
|
+
updateLiteralAttribute(this, typeValues, 'type', value);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
get type() {
|
|
67
|
+
return getLiteralAttribute(this, typeValues, 'type');
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
static get observedAttributes() {
|
|
71
|
+
return ['text', 'type', 'aria-level'];
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
attributeChangedCallback(name, _, newVal) {
|
|
75
|
+
switch (name) {
|
|
76
|
+
case 'text':
|
|
77
|
+
{
|
|
78
|
+
_classPrivateFieldGet(this, _$text).textContent = newVal;
|
|
79
|
+
break;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
case 'aria-level':
|
|
83
|
+
{
|
|
84
|
+
assertLevel(newVal);
|
|
85
|
+
break;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
case 'type':
|
|
89
|
+
{
|
|
90
|
+
assertType(newVal);
|
|
91
|
+
break;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
}));
|
package/utils.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export declare function getAttribute($element: Element, attrName: string, defaul
|
|
|
12
12
|
export declare function getAttribute($element: Element, attrName: string, defaultValue: string): string;
|
|
13
13
|
export declare const isLiteralValue: <T extends readonly string[]>(literals: T, value: string | null | undefined) => value is T[number];
|
|
14
14
|
export declare const updateLiteralAttribute: <T extends readonly string[]>($element: Element, literals: T, attrName: string, attrValue: string | null | undefined) => void;
|
|
15
|
-
export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number]
|
|
15
|
+
export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string): T[number];
|
|
16
16
|
export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
|
|
17
17
|
export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
|
|
18
18
|
declare type TRange = {
|
package/utils.js
CHANGED
|
@@ -66,7 +66,16 @@ export const updateLiteralAttribute = ($element, literals, attrName, attrValue)
|
|
|
66
66
|
};
|
|
67
67
|
export function getLiteralAttribute($element, literals, attrName, defaultValue) {
|
|
68
68
|
const attrValue = $element.getAttribute(attrName);
|
|
69
|
-
|
|
69
|
+
|
|
70
|
+
if (isLiteralValue(literals, attrValue)) {
|
|
71
|
+
return attrValue;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (typeof defaultValue === 'undefined') {
|
|
75
|
+
throw new Error(`Invalid attribute value: ${attrName} = ${attrValue}`);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return defaultValue;
|
|
70
79
|
}
|
|
71
80
|
|
|
72
81
|
const applyRange = (value, range) => {
|