@nectary/components 4.10.2 → 4.10.4

package/avatar/index.js

@@ -1,6 +1,6 @@
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
 import { DEFAULT_SIZE, sizeValues } from '../utils/size';
-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);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:50%;-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);opacity:.15}: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>';
+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);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:50%;-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>';
 import { getAvatarColorBg, getAvatarColorFg, statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.10.2",
+  "version": "4.10.4",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -20,7 +20,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "2.4.1"
+    "@nectary/assets": "2.4.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -34,6 +34,6 @@
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.4.3"
+    "@nectary/theme-base": "1.4.4"
   }
 }

package/radio/index.js

@@ -129,22 +129,33 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
     }));
   };
   #onValueChange(value) {
-    for (const $option of this.#$slot.assignedElements()) {
-      const isChecked = value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'checked', isChecked);
+    for (const node of this.#$slot.assignedElements()) {
+      const $option = this.#findRadioOptionElement(node);
+      if ($option != null) {
+        const isChecked = value === getAttribute($option, 'value', '');
+        updateBooleanAttribute($option, 'checked', isChecked);
+      }
+    }
+  }
+  #findRadioOptionElement(node) {
+    if (node.tagName === 'SINCH-RADIO-OPTION') {
+      return node;
     }
+    return node.querySelector?.('sinch-radio-option') ?? null;
   }
   #getFirstOption() {
-    for (const $option of this.#$slot.assignedElements()) {
-      if ($option.disabled !== true) {
+    for (const node of this.#$slot.assignedElements()) {
+      const $option = this.#findRadioOptionElement(node);
+      if ($option?.disabled !== true) {
         return $option;
       }
     }
     return null;
   }
   #getLastOption() {
-    for (const $option of this.#$slot.assignedElements().reverse()) {
-      if ($option.disabled !== true) {
+    for (const node of this.#$slot.assignedElements().reverse()) {
+      const $option = this.#findRadioOptionElement(node);
+      if ($option?.disabled !== true) {
         return $option;
       }
     }
@@ -169,14 +180,17 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
     return $options[(currentIndex - 1 + $options.length) % $options.length];
   }
   #getEnabledRadioElements() {
-    return this.#$slot.assignedElements().filter(el => !el.hasAttribute('disabled'));
+    return this.#$slot.assignedElements().map(el => this.#findRadioOptionElement(el)).filter(Boolean).filter(el => !el.hasAttribute('disabled'));
   }
   #findSelectedOption(elements) {
     return elements.find(el => el.checked) ?? null;
   }
   #updateInvalid(isInvalid) {
-    for (const opt of this.#$slot.assignedElements()) {
-      updateBooleanAttribute(opt, 'data-invalid', isInvalid);
+    for (const node of this.#$slot.assignedElements()) {
+      const $option = this.#findRadioOptionElement(node);
+      if ($option != null) {
+        updateBooleanAttribute($option, 'data-invalid', isInvalid);
+      }
     }
   }
   #onChangeReactHandler = e => {

package/radio-option/types.d.ts

@@ -1,11 +1,19 @@
 import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
-export type TSinchRadioOptionProps = {
+export type TSinchRadioOptionProps = ({
     value: string;
     checked?: boolean;
     disabled?: boolean;
-    text: string;
+    text?: string;
     'aria-label': string;
-};
+    'aria-labelledby'?: never;
+}) | ({
+    value: string;
+    checked?: boolean;
+    disabled?: boolean;
+    text?: string;
+    'aria-label'?: never;
+    'aria-labelledby': string;
+});
 export type TSinchRadioOptionStyle = {
     '--sinch-comp-radio-color-default-background-initial'?: string;
     '--sinch-comp-radio-color-default-background-hover'?: string;