@nectary/components 5.26.1 → 5.27.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.
Files changed (9) hide show
  1. package/avatar/index.js +1 -1
  2. package/avatar/types.d.ts +4 -0
  3. package/bundle.d.ts +4 -0
  4. package/bundle.js +722 -276
  5. package/bundle.ts +4 -0
  6. package/package.json +3 -3
  7. package/standalone.d.ts +4 -0
  8. package/standalone.js +4 -0
  9. package/standalone.ts +4 -0
package/avatar/index.js CHANGED
@@ -2,7 +2,7 @@ import { getAttribute, updateAttribute, getLiteralAttribute, updateLiteralAttrib
2
2
  import { defineCustomElement, NectaryElement } from "../utils/element.js";
3
3
  import { DEFAULT_SIZE, sizeValues } from "../utils/size.js";
4
4
  import { statusValues, getAvatarColorBg, getAvatarColorFg } from "./utils.js";
5
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:var(--sinch-comp-avatar-shape-radius);-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#person{display:none;position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--sinch-comp-avatar-container-color-default-foreground)}:host(:not([src]):is(:not([alt]),[alt=""])) #person{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-status-color-border);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span> <img id="image" alt=""> <svg id="person" viewBox="0 0 40 40" fill="none"><path d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z"/></svg></div><div id="status-wrapper"><div id="status"></div></div></div>';
5
+ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);outline:var(--sinch-comp-avatar-container-size-border,1px) solid var(--sinch-comp-avatar-container-color-border,transparent);border-radius:var(--sinch-comp-avatar-shape-radius);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:var(--sinch-comp-avatar-shape-radius);-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#person{display:none;position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--sinch-comp-avatar-container-color-default-foreground)}:host(:not([src]):is(:not([alt]),[alt=""])) #person{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-status-color-border);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span> <img id="image" alt=""> <svg id="person" viewBox="0 0 40 40" fill="none"><path d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z"/></svg></div><div id="status-wrapper"><div id="status"></div></div></div>';
6
6
  const template = document.createElement("template");
7
7
  template.innerHTML = templateHTML;
8
8
  class Avatar extends NectaryElement {
package/avatar/types.d.ts CHANGED
@@ -18,6 +18,7 @@ export type TSinchAvatarProps = {
18
18
  style?: {
19
19
  '--sinch-comp-avatar-container-color-default-background'?: string;
20
20
  '--sinch-comp-avatar-container-color-default-foreground'?: string;
21
+ '--sinch-comp-avatar-container-color-border'?: string;
21
22
  '--sinch-comp-avatar-status-color-border'?: string;
22
23
  '--sinch-comp-avatar-status-color-online-default-background'?: string;
23
24
  '--sinch-comp-avatar-status-color-away-default-background'?: string;
@@ -27,6 +28,7 @@ export type TSinchAvatarProps = {
27
28
  '--sinch-comp-avatar-size-s'?: string;
28
29
  '--sinch-comp-avatar-size-m'?: string;
29
30
  '--sinch-comp-avatar-size-l'?: string;
31
+ '--sinch-comp-avatar-container-size-border'?: string;
30
32
  '--sinch-comp-avatar-container-font-size-s-text'?: string;
31
33
  '--sinch-comp-avatar-container-font-size-m-text'?: string;
32
34
  '--sinch-comp-avatar-container-font-size-l-text'?: string;
@@ -36,6 +38,7 @@ export type TSinchAvatarProps = {
36
38
  export type TSinchAvatarStyle = {
37
39
  '--sinch-comp-avatar-container-color-default-background'?: string;
38
40
  '--sinch-comp-avatar-container-color-default-foreground'?: string;
41
+ '--sinch-comp-avatar-container-color-border'?: string;
39
42
  '--sinch-comp-avatar-status-color-border'?: string;
40
43
  '--sinch-comp-avatar-status-color-online-default-background'?: string;
41
44
  '--sinch-comp-avatar-status-color-away-default-background'?: string;
@@ -45,6 +48,7 @@ export type TSinchAvatarStyle = {
45
48
  '--sinch-comp-avatar-size-s'?: string;
46
49
  '--sinch-comp-avatar-size-m'?: string;
47
50
  '--sinch-comp-avatar-size-l'?: string;
51
+ '--sinch-comp-avatar-container-size-border'?: string;
48
52
  '--sinch-comp-avatar-container-font-size-s-text'?: string;
49
53
  '--sinch-comp-avatar-container-font-size-m-text'?: string;
50
54
  '--sinch-comp-avatar-container-font-size-l-text'?: string;
package/bundle.d.ts CHANGED
@@ -22,6 +22,7 @@ export * from './dialog/index.js';
22
22
  export * from './emoji-picker/index.js';
23
23
  export * from './emoji/index.js';
24
24
  export * from './field/index.js';
25
+ export * from './field-v2/index.js';
25
26
  export * from './file-drop/index.js';
26
27
  export * from './file-picker/index.js';
27
28
  export * from './file-status/index.js';
@@ -46,6 +47,7 @@ export * from './radio-option/index.js';
46
47
  export * from './radio/index.js';
47
48
  export * from './rich-text/index.js';
48
49
  export * from './rich-textarea/index.js';
50
+ export * from './rich-textarea-chip/index.js';
49
51
  export * from './segment-collapse/index.js';
50
52
  export * from './segmented-control-option/index.js';
51
53
  export * from './segmented-control/index.js';
@@ -54,6 +56,8 @@ export * from './segmented-icon-control/index.js';
54
56
  export * from './select-button/index.js';
55
57
  export * from './select-menu-option/index.js';
56
58
  export * from './select-menu/index.js';
59
+ export * from './sheet/index.js';
60
+ export * from './sheet-title/index.js';
57
61
  export * from './skeleton-item/index.js';
58
62
  export * from './skeleton/index.js';
59
63
  export * from './spinner/index.js';