@nectary/components 5.27.0 → 5.28.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 (5) hide show
  1. package/bundle.js +13 -2
  2. package/inline-alert/index.d.ts +3 -0
  3. package/inline-alert/index.js +15 -3
  4. package/inline-alert/types.d.ts +1 -0
  5. package/package.json +1 -1
package/bundle.js CHANGED
@@ -7948,7 +7948,7 @@ class HelpTooltip extends NectaryElement {
7948
7948
  }
7949
7949
  defineCustomElement("sinch-help-tooltip", HelpTooltip);
7950
7950
  const typeValues$1 = ["info", "success", "warn", "error"];
7951
- const templateHTML$z = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}:host([type=success]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="" id="icon"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
7951
+ const templateHTML$z = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#spinner{display:none}:host([type=success]) #icon,:host([type=success]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon,:host([type=warn]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon,:host([type=error]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon,:host([type=info]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([loading]) #icon{display:none}:host([loading]) #spinner{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-spinner id="spinner" size="m"></sinch-spinner><sinch-icon icons-version="2" name="" id="icon"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
7952
7952
  const template$z = document.createElement("template");
7953
7953
  template$z.innerHTML = templateHTML$z;
7954
7954
  class InlineAlert extends NectaryElement {
@@ -7975,6 +7975,7 @@ class InlineAlert extends NectaryElement {
7975
7975
  super.connectedCallback();
7976
7976
  this.setAttribute("aria-atomic", "true");
7977
7977
  this.setAttribute("aria-live", "polite");
7978
+ updateAttribute(this, "aria-busy", this.loading ? "true" : "false");
7978
7979
  this.#$closeSlot.addEventListener("slotchange", this.#onCloseSlotChange);
7979
7980
  this.#$actionSlot.addEventListener(
7980
7981
  "slotchange",
@@ -7995,7 +7996,7 @@ class InlineAlert extends NectaryElement {
7995
7996
  );
7996
7997
  }
7997
7998
  static get observedAttributes() {
7998
- return ["text", "caption", "type", "icon"];
7999
+ return ["text", "caption", "type", "icon", "loading"];
7999
8000
  }
8000
8001
  attributeChangedCallback(name, _, newVal) {
8001
8002
  switch (name) {
@@ -8015,6 +8016,10 @@ class InlineAlert extends NectaryElement {
8015
8016
  updateAttribute(this.#$icon, "name", newVal);
8016
8017
  break;
8017
8018
  }
8019
+ case "loading": {
8020
+ updateExplicitBooleanAttribute(this, "aria-busy", isAttrTrue(newVal));
8021
+ break;
8022
+ }
8018
8023
  }
8019
8024
  }
8020
8025
  get type() {
@@ -8041,6 +8046,12 @@ class InlineAlert extends NectaryElement {
8041
8046
  set icon(value) {
8042
8047
  updateAttribute(this, "icon", value);
8043
8048
  }
8049
+ get loading() {
8050
+ return getBooleanAttribute(this, "loading");
8051
+ }
8052
+ set loading(value) {
8053
+ updateBooleanAttribute(this, "loading", value);
8054
+ }
8044
8055
  #onCloseSlotChange = () => {
8045
8056
  setClass(
8046
8057
  this.#$closeWrapper,
package/inline-alert/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import '../icon';
2
+ import '../spinner';
2
3
  import '../rich-text';
3
4
  import '../text';
4
5
  import '../title';
@@ -21,4 +22,6 @@ export declare class InlineAlert extends NectaryElement {
21
22
  set caption(value: string);
22
23
  get icon(): TSinchIcons;
23
24
  set icon(value: TSinchIcons);
25
+ get loading(): boolean;
26
+ set loading(value: boolean);
24
27
  }
package/inline-alert/index.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import "../icon/index.js";
2
+ import "../spinner/index.js";
2
3
  import "../rich-text/index.js";
3
4
  import "../text/index.js";
4
5
  import "../title/index.js";
5
- import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute, setClass } from "../utils/dom.js";
6
+ import { updateAttribute, updateExplicitBooleanAttribute, isAttrTrue, getLiteralAttribute, updateLiteralAttribute, getAttribute, getBooleanAttribute, updateBooleanAttribute, setClass } from "../utils/dom.js";
6
7
  import { defineCustomElement, NectaryElement } from "../utils/element.js";
7
8
  import { typeValues } from "./utils.js";
8
- const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}:host([type=success]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon icons-version="2" name="" id="icon"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
9
+ const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#spinner{display:none}:host([type=success]) #icon,:host([type=success]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}:host([type=warn]) #icon,:host([type=warn]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}:host([type=error]) #icon,:host([type=error]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}:host([type=info]) #icon,:host([type=info]) #spinner{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([loading]) #icon{display:none}:host([loading]) #spinner{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top:0;align-self:stretch;--sinch-comp-rich-text-font:var(--sinch-comp-inline-alert-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}:host([caption=""]) #text,:host([caption]) #text{margin-top:4px}#action{width:100%;display:flex;margin-top:16px;min-width:0;gap:16px}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-spinner id="spinner" size="m"></sinch-spinner><sinch-icon icons-version="2" name="" id="icon"></sinch-icon><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-rich-text id="text"></sinch-rich-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
9
10
  const template = document.createElement("template");
10
11
  template.innerHTML = templateHTML;
11
12
  class InlineAlert extends NectaryElement {
@@ -32,6 +33,7 @@ class InlineAlert extends NectaryElement {
32
33
  super.connectedCallback();
33
34
  this.setAttribute("aria-atomic", "true");
34
35
  this.setAttribute("aria-live", "polite");
36
+ updateAttribute(this, "aria-busy", this.loading ? "true" : "false");
35
37
  this.#$closeSlot.addEventListener("slotchange", this.#onCloseSlotChange);
36
38
  this.#$actionSlot.addEventListener(
37
39
  "slotchange",
@@ -52,7 +54,7 @@ class InlineAlert extends NectaryElement {
52
54
  );
53
55
  }
54
56
  static get observedAttributes() {
55
- return ["text", "caption", "type", "icon"];
57
+ return ["text", "caption", "type", "icon", "loading"];
56
58
  }
57
59
  attributeChangedCallback(name, _, newVal) {
58
60
  switch (name) {
@@ -72,6 +74,10 @@ class InlineAlert extends NectaryElement {
72
74
  updateAttribute(this.#$icon, "name", newVal);
73
75
  break;
74
76
  }
77
+ case "loading": {
78
+ updateExplicitBooleanAttribute(this, "aria-busy", isAttrTrue(newVal));
79
+ break;
80
+ }
75
81
  }
76
82
  }
77
83
  get type() {
@@ -98,6 +104,12 @@ class InlineAlert extends NectaryElement {
98
104
  set icon(value) {
99
105
  updateAttribute(this, "icon", value);
100
106
  }
107
+ get loading() {
108
+ return getBooleanAttribute(this, "loading");
109
+ }
110
+ set loading(value) {
111
+ updateBooleanAttribute(this, "loading", value);
112
+ }
101
113
  #onCloseSlotChange = () => {
102
114
  setClass(
103
115
  this.#$closeWrapper,
package/inline-alert/types.d.ts CHANGED
@@ -6,6 +6,7 @@ export type TSinchInlineAlertProps = {
6
6
  text?: string | null;
7
7
  caption?: string;
8
8
  icon?: TSinchIcons;
9
+ loading?: boolean;
9
10
  };
10
11
  export type TSinchInlineAlertStyle = {
11
12
  '--sinch-comp-inline-alert-shape-radius'?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nectary/components",
3
- "version": "5.27.0",
3
+ "version": "5.28.0",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",