@nectary/components 5.10.2 → 5.11.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 (13) hide show
  1. package/bundle.js +173 -104
  2. package/inline-alert/index.d.ts +3 -0
  3. package/inline-alert/index.js +38 -2
  4. package/inline-alert/types.d.ts +2 -0
  5. package/package.json +1 -1
  6. package/pagination/index.js +21 -10
  7. package/popover/index.d.ts +2 -0
  8. package/popover/index.js +12 -0
  9. package/popover/types.d.ts +2 -0
  10. package/progress-stepper/index.js +8 -3
  11. package/tabs-option/index.js +2 -2
  12. package/toast/index.js +0 -1
  13. package/toast-manager/index.js +8 -1
package/bundle.js CHANGED
@@ -6110,6 +6110,7 @@ class Popover extends NectaryElement {
6110
6110
  "orientation",
6111
6111
  "open",
6112
6112
  "modal",
6113
+ "allow-scroll",
6113
6114
  "tip",
6114
6115
  "aria-label",
6115
6116
  "aria-description"
@@ -6135,6 +6136,11 @@ class Popover extends NectaryElement {
6135
6136
  updateBooleanAttribute(this, name, hasTip);
6136
6137
  break;
6137
6138
  }
6139
+ case "allow-scroll": {
6140
+ updateAttribute(this.#$pop, name, newVal);
6141
+ updateBooleanAttribute(this, name, isAttrTrue(newVal));
6142
+ break;
6143
+ }
6138
6144
  case "modal":
6139
6145
  case "open": {
6140
6146
  updateAttribute(this.#$pop, name, newVal);
@@ -6158,6 +6164,12 @@ class Popover extends NectaryElement {
6158
6164
  get modal() {
6159
6165
  return getBooleanAttribute(this, "modal");
6160
6166
  }
6167
+ set allowScroll(allow) {
6168
+ updateBooleanAttribute(this, "allow-scroll", allow);
6169
+ }
6170
+ get allowScroll() {
6171
+ return getBooleanAttribute(this, "allow-scroll");
6172
+ }
6161
6173
  set open(isOpen) {
6162
6174
  updateBooleanAttribute(this, "open", isOpen);
6163
6175
  }
@@ -7520,7 +7532,7 @@ class HelpTooltip extends NectaryElement {
7520
7532
  }
7521
7533
  defineCustomElement("sinch-help-tooltip", HelpTooltip);
7522
7534
  const typeValues$1 = ["info", "success", "warn", "error"];
7523
- const templateHTML$w = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-comp-inline-alert-shape-radius);box-sizing:border-box;width:100%}:host([type=success]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-inline-alert-color-info-default-background)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top: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="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></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>';
7535
+ const templateHTML$w = '<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>';
7524
7536
  const template$w = document.createElement("template");
7525
7537
  template$w.innerHTML = templateHTML$w;
7526
7538
  class InlineAlert extends NectaryElement {
@@ -7530,6 +7542,7 @@ class InlineAlert extends NectaryElement {
7530
7542
  #$closeSlot;
7531
7543
  #$actionWrapper;
7532
7544
  #$actionSlot;
7545
+ #$icon;
7533
7546
  constructor() {
7534
7547
  super();
7535
7548
  const shadowRoot = this.attachShadow();
@@ -7540,6 +7553,7 @@ class InlineAlert extends NectaryElement {
7540
7553
  this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
7541
7554
  this.#$actionWrapper = shadowRoot.querySelector("#action");
7542
7555
  this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
7556
+ this.#$icon = shadowRoot.querySelector("#icon");
7543
7557
  }
7544
7558
  connectedCallback() {
7545
7559
  super.connectedCallback();
@@ -7565,7 +7579,7 @@ class InlineAlert extends NectaryElement {
7565
7579
  );
7566
7580
  }
7567
7581
  static get observedAttributes() {
7568
- return ["text", "caption"];
7582
+ return ["text", "caption", "type", "icon"];
7569
7583
  }
7570
7584
  attributeChangedCallback(name, _, newVal) {
7571
7585
  switch (name) {
@@ -7577,6 +7591,14 @@ class InlineAlert extends NectaryElement {
7577
7591
  updateAttribute(this.#$caption, "text", newVal);
7578
7592
  break;
7579
7593
  }
7594
+ case "type": {
7595
+ this.#updateDefaultIcon(newVal);
7596
+ break;
7597
+ }
7598
+ case "icon": {
7599
+ updateAttribute(this.#$icon, "name", newVal);
7600
+ break;
7601
+ }
7580
7602
  }
7581
7603
  }
7582
7604
  get type() {
@@ -7597,6 +7619,12 @@ class InlineAlert extends NectaryElement {
7597
7619
  set caption(value) {
7598
7620
  updateAttribute(this, "caption", value);
7599
7621
  }
7622
+ get icon() {
7623
+ return getAttribute(this, "icon", "");
7624
+ }
7625
+ set icon(value) {
7626
+ updateAttribute(this, "icon", value);
7627
+ }
7600
7628
  #onCloseSlotChange = () => {
7601
7629
  setClass(
7602
7630
  this.#$closeWrapper,
@@ -7611,6 +7639,26 @@ class InlineAlert extends NectaryElement {
7611
7639
  this.#$actionSlot.assignedElements().length === 0
7612
7640
  );
7613
7641
  };
7642
+ #updateDefaultIcon = (type) => {
7643
+ const iconValue = this.icon;
7644
+ const hasCustomIcon = Boolean(iconValue);
7645
+ if (!hasCustomIcon) {
7646
+ switch (type) {
7647
+ case "info":
7648
+ updateAttribute(this.#$icon, "name", "circle-info");
7649
+ break;
7650
+ case "success":
7651
+ updateAttribute(this.#$icon, "name", "circle-check");
7652
+ break;
7653
+ case "warn":
7654
+ updateAttribute(this.#$icon, "name", "triangle-exclamation");
7655
+ break;
7656
+ case "error":
7657
+ updateAttribute(this.#$icon, "name", "octagon-exclamation");
7658
+ break;
7659
+ }
7660
+ }
7661
+ };
7614
7662
  }
7615
7663
  defineCustomElement("sinch-inline-alert", InlineAlert);
7616
7664
  const templateHTML$v = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
@@ -7641,7 +7689,7 @@ class List extends NectaryElement {
7641
7689
  }
7642
7690
  }
7643
7691
  defineCustomElement("sinch-list", List);
7644
- const templateHTML$t = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
7692
+ const templateHTML$t = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><nav id="wrapper"><button id="left" aria-label="Go back"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right" aria-label="Go forward"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></nav>';
7645
7693
  const NUM_BUTTONS = 7;
7646
7694
  const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
7647
7695
  const FIRST_BTN_INDEX = 0;
@@ -7706,24 +7754,35 @@ class Pagination extends NectaryElement {
7706
7754
  );
7707
7755
  for (let i = 0; i < this.#$buttons.length; i++) {
7708
7756
  const $b = this.#$buttons[i];
7757
+ let isActive = false;
7709
7758
  if (value < 3) {
7710
- setClass($b, "active", value === i);
7759
+ isActive = value === i;
7711
7760
  } else if (value >= max - MIDDLE_BTN_INDEX) {
7712
- setClass($b, "active", i + valueOffset === value);
7761
+ isActive = i + valueOffset === value;
7762
+ } else {
7763
+ isActive = i === MIDDLE_BTN_INDEX;
7764
+ }
7765
+ setClass($b, "active", isActive);
7766
+ if (isActive) {
7767
+ $b.setAttribute("aria-current", "page");
7713
7768
  } else {
7714
- setClass($b, "active", i === MIDDLE_BTN_INDEX);
7769
+ $b.removeAttribute("aria-current");
7715
7770
  }
7716
7771
  if (max > NUM_BUTTONS) {
7717
- setClass(
7718
- $b,
7719
- "dots",
7720
- i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX
7721
- );
7772
+ const isEllipsis = i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
7773
+ setClass($b, "dots", isEllipsis);
7774
+ if (isEllipsis) {
7775
+ $b.setAttribute("aria-hidden", "true");
7776
+ } else {
7777
+ $b.removeAttribute("aria-hidden");
7778
+ }
7722
7779
  }
7723
7780
  setClass($b, "hidden", i >= max);
7724
7781
  const btnText = $b.firstElementChild;
7725
7782
  if (btnText != null) {
7726
- btnText.textContent = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
7783
+ const page = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
7784
+ btnText.textContent = page;
7785
+ $b.setAttribute("aria-label", `Go to page ${page}`);
7727
7786
  }
7728
7787
  }
7729
7788
  const isValueBad = value < 0 || value >= max;
@@ -8028,7 +8087,7 @@ class ProgressStepper extends NectaryElement {
8028
8087
  attributeChangedCallback(name, _, newVal) {
8029
8088
  switch (name) {
8030
8089
  case "value": {
8031
- this.#onValueChange(newVal);
8090
+ this.#onValueChange(newVal, true);
8032
8091
  break;
8033
8092
  }
8034
8093
  case "progressvalue": {
@@ -8058,7 +8117,7 @@ class ProgressStepper extends NectaryElement {
8058
8117
  }
8059
8118
  #onSlotChange = () => {
8060
8119
  this.#$items = this.#$slot.assignedElements();
8061
- this.#onValueChange(this.value);
8120
+ this.#onValueChange(this.value, false);
8062
8121
  this.#updateProgressValue();
8063
8122
  };
8064
8123
  #onOptionClick = (e) => {
@@ -8069,9 +8128,14 @@ class ProgressStepper extends NectaryElement {
8069
8128
  }));
8070
8129
  }
8071
8130
  };
8072
- #onValueChange(value) {
8131
+ #onValueChange(value, shouldFocus) {
8073
8132
  for (const $item of this.#$items) {
8074
8133
  const isChecked = value === getAttribute($item, "value");
8134
+ if (shouldFocus && isChecked) {
8135
+ requestAnimationFrame(() => {
8136
+ $item.focus();
8137
+ });
8138
+ }
8075
8139
  setProgressStepperItemChecked($item, isChecked);
8076
8140
  }
8077
8141
  this.#resetActiveDescendant();
@@ -12213,10 +12277,10 @@ class TabsOption extends NectaryElement {
12213
12277
  }
12214
12278
  connectedCallback() {
12215
12279
  this.setAttribute("role", "tab");
12216
- this.#$button.addEventListener("click", this.#onClick);
12280
+ this.addEventListener("click", this.#onClick);
12217
12281
  }
12218
12282
  disconnectedCallback() {
12219
- this.#$button.removeEventListener("click", this.#onClick);
12283
+ this.removeEventListener("click", this.#onClick);
12220
12284
  }
12221
12285
  static get observedAttributes() {
12222
12286
  return ["data-checked", "disabled", "text"];
@@ -13011,13 +13075,95 @@ class TimePicker extends NectaryElement {
13011
13075
  };
13012
13076
  }
13013
13077
  defineCustomElement("sinch-time-picker", TimePicker);
13078
+ const typeValues = ["info", "success", "warn", "error"];
13079
+ const templateHTML$2 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
13080
+ const TIMEOUT = 5e3;
13081
+ const template$2 = document.createElement("template");
13082
+ template$2.innerHTML = templateHTML$2;
13083
+ class Toast extends NectaryElement {
13084
+ #$text;
13085
+ #tid = null;
13086
+ constructor() {
13087
+ super();
13088
+ const shadowRoot = this.attachShadow();
13089
+ shadowRoot.appendChild(template$2.content.cloneNode(true));
13090
+ this.#$text = shadowRoot.querySelector("#text");
13091
+ }
13092
+ connectedCallback() {
13093
+ super.connectedCallback();
13094
+ this.setAttribute("aria-atomic", "true");
13095
+ this.addEventListener("-timeout", this.#onTimeoutReactHandler);
13096
+ this.#updateTimeout();
13097
+ }
13098
+ disconnectedCallback() {
13099
+ super.disconnectedCallback();
13100
+ this.removeEventListener("-timeout", this.#onTimeoutReactHandler);
13101
+ this.#clearTimeout();
13102
+ }
13103
+ static get observedAttributes() {
13104
+ return ["text", "persistent"];
13105
+ }
13106
+ attributeChangedCallback(name, oldVal, newVal) {
13107
+ switch (name) {
13108
+ case "text": {
13109
+ updateAttribute(this.#$text, name, newVal);
13110
+ break;
13111
+ }
13112
+ case "persistent": {
13113
+ this.#updateTimeout();
13114
+ break;
13115
+ }
13116
+ }
13117
+ }
13118
+ get type() {
13119
+ return getLiteralAttribute(this, typeValues, "type");
13120
+ }
13121
+ set type(value) {
13122
+ updateLiteralAttribute(this, typeValues, "type", value);
13123
+ }
13124
+ get text() {
13125
+ return getAttribute(this, "text", "");
13126
+ }
13127
+ set text(value) {
13128
+ updateAttribute(this, "text", value);
13129
+ }
13130
+ get persistent() {
13131
+ return getBooleanAttribute(this, "persistent");
13132
+ }
13133
+ set persistent(isPersistent) {
13134
+ updateBooleanAttribute(this, "persistent", isPersistent);
13135
+ }
13136
+ #updateTimeout() {
13137
+ if (this.persistent) {
13138
+ this.#clearTimeout();
13139
+ return;
13140
+ }
13141
+ if (this.#tid === null) {
13142
+ this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
13143
+ }
13144
+ }
13145
+ #onTimeout = () => {
13146
+ this.dispatchEvent(new CustomEvent("-timeout"));
13147
+ };
13148
+ #clearTimeout() {
13149
+ if (this.#tid !== null) {
13150
+ window.clearTimeout(this.#tid);
13151
+ this.#tid = null;
13152
+ }
13153
+ }
13154
+ #onTimeoutReactHandler = (e) => {
13155
+ getReactEventHandler(this, "on-timeout")?.(e);
13156
+ getReactEventHandler(this, "onTimeout")?.(e);
13157
+ };
13158
+ }
13159
+ defineCustomElement("sinch-toast", Toast);
13014
13160
  const originValues = ["bottom-right", "top-right"];
13015
- const templateHTML$2 = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
13161
+ const templateHTML$1 = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" aria-live="polite"></div>';
13016
13162
  const DURATION_ADD = 250;
13017
13163
  const DURATION_REMOVE = 250;
13018
13164
  const ITEMS_GAP = 16;
13019
- const template$2 = document.createElement("template");
13020
- template$2.innerHTML = templateHTML$2;
13165
+ const template$1 = document.createElement("template");
13166
+ template$1.innerHTML = templateHTML$1;
13021
13167
  class ToastManager extends NectaryElement {
13022
13168
  #$slot;
13023
13169
  #$list;
@@ -13027,7 +13173,7 @@ class ToastManager extends NectaryElement {
13027
13173
  constructor() {
13028
13174
  super();
13029
13175
  const shadowRoot = this.attachShadow();
13030
- shadowRoot.appendChild(template$2.content.cloneNode(true));
13176
+ shadowRoot.appendChild(template$1.content.cloneNode(true));
13031
13177
  this.#$slot = shadowRoot.querySelector("slot");
13032
13178
  this.#$list = shadowRoot.querySelector("#list");
13033
13179
  this.#shouldReduceMotion = shouldReduceMotion();
@@ -13131,6 +13277,12 @@ class ToastManager extends NectaryElement {
13131
13277
  const cloned = cloneNode(item, true);
13132
13278
  const rect = item.getBoundingClientRect();
13133
13279
  const wrapper = document.createElement("div");
13280
+ if (item instanceof Toast) {
13281
+ if (item.hasAttribute("type")) {
13282
+ const type = item.type;
13283
+ this.#$list.setAttribute("aria-live", type === "error" || type === "warn" ? "assertive" : "polite");
13284
+ }
13285
+ }
13134
13286
  wrapper.className = "item-wrapper";
13135
13287
  wrapper.appendChild(cloned);
13136
13288
  this.#$list.appendChild(wrapper);
@@ -13188,89 +13340,6 @@ class ToastManager extends NectaryElement {
13188
13340
  };
13189
13341
  }
13190
13342
  defineCustomElement("sinch-toast-manager", ToastManager);
13191
- const typeValues = ["info", "success", "warn", "error"];
13192
- const templateHTML$1 = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
13193
- const TIMEOUT = 5e3;
13194
- const template$1 = document.createElement("template");
13195
- template$1.innerHTML = templateHTML$1;
13196
- class Toast extends NectaryElement {
13197
- #$text;
13198
- #tid = null;
13199
- constructor() {
13200
- super();
13201
- const shadowRoot = this.attachShadow();
13202
- shadowRoot.appendChild(template$1.content.cloneNode(true));
13203
- this.#$text = shadowRoot.querySelector("#text");
13204
- }
13205
- connectedCallback() {
13206
- super.connectedCallback();
13207
- this.setAttribute("aria-atomic", "true");
13208
- this.setAttribute("aria-live", "polite");
13209
- this.addEventListener("-timeout", this.#onTimeoutReactHandler);
13210
- this.#updateTimeout();
13211
- }
13212
- disconnectedCallback() {
13213
- super.disconnectedCallback();
13214
- this.removeEventListener("-timeout", this.#onTimeoutReactHandler);
13215
- this.#clearTimeout();
13216
- }
13217
- static get observedAttributes() {
13218
- return ["text", "persistent"];
13219
- }
13220
- attributeChangedCallback(name, oldVal, newVal) {
13221
- switch (name) {
13222
- case "text": {
13223
- updateAttribute(this.#$text, name, newVal);
13224
- break;
13225
- }
13226
- case "persistent": {
13227
- this.#updateTimeout();
13228
- break;
13229
- }
13230
- }
13231
- }
13232
- get type() {
13233
- return getLiteralAttribute(this, typeValues, "type");
13234
- }
13235
- set type(value) {
13236
- updateLiteralAttribute(this, typeValues, "type", value);
13237
- }
13238
- get text() {
13239
- return getAttribute(this, "text", "");
13240
- }
13241
- set text(value) {
13242
- updateAttribute(this, "text", value);
13243
- }
13244
- get persistent() {
13245
- return getBooleanAttribute(this, "persistent");
13246
- }
13247
- set persistent(isPersistent) {
13248
- updateBooleanAttribute(this, "persistent", isPersistent);
13249
- }
13250
- #updateTimeout() {
13251
- if (this.persistent) {
13252
- this.#clearTimeout();
13253
- return;
13254
- }
13255
- if (this.#tid === null) {
13256
- this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
13257
- }
13258
- }
13259
- #onTimeout = () => {
13260
- this.dispatchEvent(new CustomEvent("-timeout"));
13261
- };
13262
- #clearTimeout() {
13263
- if (this.#tid !== null) {
13264
- window.clearTimeout(this.#tid);
13265
- this.#tid = null;
13266
- }
13267
- }
13268
- #onTimeoutReactHandler = (e) => {
13269
- getReactEventHandler(this, "on-timeout")?.(e);
13270
- getReactEventHandler(this, "onTimeout")?.(e);
13271
- };
13272
- }
13273
- defineCustomElement("sinch-toast", Toast);
13274
13343
  const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .15s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
13275
13344
  const template = document.createElement("template");
13276
13345
  template.innerHTML = templateHTML;
package/inline-alert/index.d.ts CHANGED
@@ -4,6 +4,7 @@ import '../text';
4
4
  import '../title';
5
5
  import { NectaryElement } from '../utils';
6
6
  import type { TSinchInlineAlertType } from './types';
7
+ import type { TSinchIcons } from '../icon';
7
8
  export * from './types';
8
9
  export declare class InlineAlert extends NectaryElement {
9
10
  #private;
@@ -18,4 +19,6 @@ export declare class InlineAlert extends NectaryElement {
18
19
  set text(value: string);
19
20
  get caption(): string;
20
21
  set caption(value: string);
22
+ get icon(): TSinchIcons;
23
+ set icon(value: TSinchIcons);
21
24
  }
package/inline-alert/index.js CHANGED
@@ -5,7 +5,7 @@ import "../title/index.js";
5
5
  import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute, setClass } from "../utils/dom.js";
6
6
  import { defineCustomElement, NectaryElement } from "../utils/element.js";
7
7
  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)}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-inline-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{align-self:stretch;--sinch-comp-title-font:var(--sinch-comp-inline-alert-font-title)}:host([type=success]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-success-default-text)}:host([type=warn]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-warning-default-text)}:host([type=error]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-error-default-text)}:host([type=info]) #caption{--sinch-global-color-text:var(--sinch-comp-inline-alert-color-info-default-text)}#text{display:flex;flex-direction:column;gap:8px;margin-top: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="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></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>';
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
9
  const template = document.createElement("template");
10
10
  template.innerHTML = templateHTML;
11
11
  class InlineAlert extends NectaryElement {
@@ -15,6 +15,7 @@ class InlineAlert extends NectaryElement {
15
15
  #$closeSlot;
16
16
  #$actionWrapper;
17
17
  #$actionSlot;
18
+ #$icon;
18
19
  constructor() {
19
20
  super();
20
21
  const shadowRoot = this.attachShadow();
@@ -25,6 +26,7 @@ class InlineAlert extends NectaryElement {
25
26
  this.#$closeSlot = shadowRoot.querySelector('slot[name="close"]');
26
27
  this.#$actionWrapper = shadowRoot.querySelector("#action");
27
28
  this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
29
+ this.#$icon = shadowRoot.querySelector("#icon");
28
30
  }
29
31
  connectedCallback() {
30
32
  super.connectedCallback();
@@ -50,7 +52,7 @@ class InlineAlert extends NectaryElement {
50
52
  );
51
53
  }
52
54
  static get observedAttributes() {
53
- return ["text", "caption"];
55
+ return ["text", "caption", "type", "icon"];
54
56
  }
55
57
  attributeChangedCallback(name, _, newVal) {
56
58
  switch (name) {
@@ -62,6 +64,14 @@ class InlineAlert extends NectaryElement {
62
64
  updateAttribute(this.#$caption, "text", newVal);
63
65
  break;
64
66
  }
67
+ case "type": {
68
+ this.#updateDefaultIcon(newVal);
69
+ break;
70
+ }
71
+ case "icon": {
72
+ updateAttribute(this.#$icon, "name", newVal);
73
+ break;
74
+ }
65
75
  }
66
76
  }
67
77
  get type() {
@@ -82,6 +92,12 @@ class InlineAlert extends NectaryElement {
82
92
  set caption(value) {
83
93
  updateAttribute(this, "caption", value);
84
94
  }
95
+ get icon() {
96
+ return getAttribute(this, "icon", "");
97
+ }
98
+ set icon(value) {
99
+ updateAttribute(this, "icon", value);
100
+ }
85
101
  #onCloseSlotChange = () => {
86
102
  setClass(
87
103
  this.#$closeWrapper,
@@ -96,6 +112,26 @@ class InlineAlert extends NectaryElement {
96
112
  this.#$actionSlot.assignedElements().length === 0
97
113
  );
98
114
  };
115
+ #updateDefaultIcon = (type) => {
116
+ const iconValue = this.icon;
117
+ const hasCustomIcon = Boolean(iconValue);
118
+ if (!hasCustomIcon) {
119
+ switch (type) {
120
+ case "info":
121
+ updateAttribute(this.#$icon, "name", "circle-info");
122
+ break;
123
+ case "success":
124
+ updateAttribute(this.#$icon, "name", "circle-check");
125
+ break;
126
+ case "warn":
127
+ updateAttribute(this.#$icon, "name", "triangle-exclamation");
128
+ break;
129
+ case "error":
130
+ updateAttribute(this.#$icon, "name", "octagon-exclamation");
131
+ break;
132
+ }
133
+ }
134
+ };
99
135
  }
100
136
  defineCustomElement("sinch-inline-alert", InlineAlert);
101
137
  export {
package/inline-alert/types.d.ts CHANGED
@@ -1,9 +1,11 @@
1
+ import type { TSinchIcons } from '../icon';
1
2
  import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
3
  export type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
3
4
  export type TSinchInlineAlertProps = {
4
5
  type: TSinchInlineAlertType;
5
6
  text?: string | null;
6
7
  caption?: string;
8
+ icon?: TSinchIcons;
7
9
  };
8
10
  export type TSinchInlineAlertStyle = {
9
11
  '--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.10.2",
3
+ "version": "5.11.0",
4
4
  "files": [
5
5
  "**/*/*.css",
6
6
  "**/*/*.json",
package/pagination/index.js CHANGED
@@ -4,7 +4,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
4
4
  import { getRect } from "../utils/rect.js";
5
5
  import { getReactEventHandler } from "../utils/get-react-event-handler.js";
6
6
  import { isTargetEqual, getTargetIndexInParent } from "../utils/event-target.js";
7
- const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
7
+ const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><nav id="wrapper"><button id="left" aria-label="Go back"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right" aria-label="Go forward"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></nav>';
8
8
  const NUM_BUTTONS = 7;
9
9
  const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
10
10
  const FIRST_BTN_INDEX = 0;
@@ -69,24 +69,35 @@ class Pagination extends NectaryElement {
69
69
  );
70
70
  for (let i = 0; i < this.#$buttons.length; i++) {
71
71
  const $b = this.#$buttons[i];
72
+ let isActive = false;
72
73
  if (value < 3) {
73
- setClass($b, "active", value === i);
74
+ isActive = value === i;
74
75
  } else if (value >= max - MIDDLE_BTN_INDEX) {
75
- setClass($b, "active", i + valueOffset === value);
76
+ isActive = i + valueOffset === value;
76
77
  } else {
77
- setClass($b, "active", i === MIDDLE_BTN_INDEX);
78
+ isActive = i === MIDDLE_BTN_INDEX;
79
+ }
80
+ setClass($b, "active", isActive);
81
+ if (isActive) {
82
+ $b.setAttribute("aria-current", "page");
83
+ } else {
84
+ $b.removeAttribute("aria-current");
78
85
  }
79
86
  if (max > NUM_BUTTONS) {
80
- setClass(
81
- $b,
82
- "dots",
83
- i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX
84
- );
87
+ const isEllipsis = i === DOTS_LEFT_INDEX && value > MIDDLE_BTN_INDEX || i === DOTS_RIGHT_INDEX && value <= max - DOTS_RIGHT_INDEX;
88
+ setClass($b, "dots", isEllipsis);
89
+ if (isEllipsis) {
90
+ $b.setAttribute("aria-hidden", "true");
91
+ } else {
92
+ $b.removeAttribute("aria-hidden");
93
+ }
85
94
  }
86
95
  setClass($b, "hidden", i >= max);
87
96
  const btnText = $b.firstElementChild;
88
97
  if (btnText != null) {
89
- btnText.textContent = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
98
+ const page = i === FIRST_BTN_INDEX ? "1" : i === LAST_BTN_INDEX ? String(max) : String(i + 1 + valueOffset);
99
+ btnText.textContent = page;
100
+ $b.setAttribute("aria-label", `Go to page ${page}`);
90
101
  }
91
102
  }
92
103
  const isValueBad = value < 0 || value >= max;
package/popover/index.d.ts CHANGED
@@ -11,6 +11,8 @@ export declare class Popover extends NectaryElement {
11
11
  attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
12
12
  set modal(isModal: boolean);
13
13
  get modal(): boolean;
14
+ set allowScroll(allow: boolean);
15
+ get allowScroll(): boolean;
14
16
  set open(isOpen: boolean);
15
17
  get open(): boolean;
16
18
  set tip(hasTip: boolean);
package/popover/index.js CHANGED
@@ -64,6 +64,7 @@ class Popover extends NectaryElement {
64
64
  "orientation",
65
65
  "open",
66
66
  "modal",
67
+ "allow-scroll",
67
68
  "tip",
68
69
  "aria-label",
69
70
  "aria-description"
@@ -89,6 +90,11 @@ class Popover extends NectaryElement {
89
90
  updateBooleanAttribute(this, name, hasTip);
90
91
  break;
91
92
  }
93
+ case "allow-scroll": {
94
+ updateAttribute(this.#$pop, name, newVal);
95
+ updateBooleanAttribute(this, name, isAttrTrue(newVal));
96
+ break;
97
+ }
92
98
  case "modal":
93
99
  case "open": {
94
100
  updateAttribute(this.#$pop, name, newVal);
@@ -112,6 +118,12 @@ class Popover extends NectaryElement {
112
118
  get modal() {
113
119
  return getBooleanAttribute(this, "modal");
114
120
  }
121
+ set allowScroll(allow) {
122
+ updateBooleanAttribute(this, "allow-scroll", allow);
123
+ }
124
+ get allowScroll() {
125
+ return getBooleanAttribute(this, "allow-scroll");
126
+ }
115
127
  set open(isOpen) {
116
128
  updateBooleanAttribute(this, "open", isOpen);
117
129
  }
package/popover/types.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
2
2
  export type TSinchPopoverOrientation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom' | 'top' | 'left' | 'right';
3
3
  export type TSinchPopoverProps = {
4
+ /** Allow scrolling of the page when popover is open */
5
+ 'allow-scroll'?: boolean;
4
6
  /** Open/close state */
5
7
  open: boolean;
6
8
  /** Orientation, where it *points to* from origin */
package/progress-stepper/index.js CHANGED
@@ -43,7 +43,7 @@ class ProgressStepper extends NectaryElement {
43
43
  attributeChangedCallback(name, _, newVal) {
44
44
  switch (name) {
45
45
  case "value": {
46
- this.#onValueChange(newVal);
46
+ this.#onValueChange(newVal, true);
47
47
  break;
48
48
  }
49
49
  case "progressvalue": {
@@ -73,7 +73,7 @@ class ProgressStepper extends NectaryElement {
73
73
  }
74
74
  #onSlotChange = () => {
75
75
  this.#$items = this.#$slot.assignedElements();
76
- this.#onValueChange(this.value);
76
+ this.#onValueChange(this.value, false);
77
77
  this.#updateProgressValue();
78
78
  };
79
79
  #onOptionClick = (e) => {
@@ -84,9 +84,14 @@ class ProgressStepper extends NectaryElement {
84
84
  }));
85
85
  }
86
86
  };
87
- #onValueChange(value) {
87
+ #onValueChange(value, shouldFocus) {
88
88
  for (const $item of this.#$items) {
89
89
  const isChecked = value === getAttribute($item, "value");
90
+ if (shouldFocus && isChecked) {
91
+ requestAnimationFrame(() => {
92
+ $item.focus();
93
+ });
94
+ }
90
95
  setProgressStepperItemChecked($item, isChecked);
91
96
  }
92
97
  this.#resetActiveDescendant();
package/tabs-option/index.js CHANGED
@@ -16,10 +16,10 @@ class TabsOption extends NectaryElement {
16
16
  }
17
17
  connectedCallback() {
18
18
  this.setAttribute("role", "tab");
19
- this.#$button.addEventListener("click", this.#onClick);
19
+ this.addEventListener("click", this.#onClick);
20
20
  }
21
21
  disconnectedCallback() {
22
- this.#$button.removeEventListener("click", this.#onClick);
22
+ this.removeEventListener("click", this.#onClick);
23
23
  }
24
24
  static get observedAttributes() {
25
25
  return ["data-checked", "disabled", "text"];
package/toast/index.js CHANGED
@@ -20,7 +20,6 @@ class Toast extends NectaryElement {
20
20
  connectedCallback() {
21
21
  super.connectedCallback();
22
22
  this.setAttribute("aria-atomic", "true");
23
- this.setAttribute("aria-live", "polite");
24
23
  this.addEventListener("-timeout", this.#onTimeoutReactHandler);
25
24
  this.#updateTimeout();
26
25
  }
package/toast-manager/index.js CHANGED
@@ -1,10 +1,11 @@
1
1
  import "../title/index.js";
2
2
  import "../text/index.js";
3
+ import { Toast } from "../toast/index.js";
3
4
  import { shouldReduceMotion, getLiteralAttribute, updateLiteralAttribute, cloneNode } from "../utils/dom.js";
4
5
  import { defineCustomElement, NectaryElement } from "../utils/element.js";
5
6
  import { getRect } from "../utils/rect.js";
6
7
  import { originValues } from "./utils.js";
7
- const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
8
+ const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list" aria-live="polite"></div>';
8
9
  const DURATION_ADD = 250;
9
10
  const DURATION_REMOVE = 250;
10
11
  const ITEMS_GAP = 16;
@@ -123,6 +124,12 @@ class ToastManager extends NectaryElement {
123
124
  const cloned = cloneNode(item, true);
124
125
  const rect = item.getBoundingClientRect();
125
126
  const wrapper = document.createElement("div");
127
+ if (item instanceof Toast) {
128
+ if (item.hasAttribute("type")) {
129
+ const type = item.type;
130
+ this.#$list.setAttribute("aria-live", type === "error" || type === "warn" ? "assertive" : "polite");
131
+ }
132
+ }
126
133
  wrapper.className = "item-wrapper";
127
134
  wrapper.appendChild(cloned);
128
135
  this.#$list.appendChild(wrapper);