@nectary/components 5.30.0 → 5.31.0

package/bundle.js

@@ -12599,7 +12599,7 @@ class SelectButton extends NectaryElement {
   };
 }
 defineCustomElement("sinch-select-button", SelectButton);
-const templateHTML$i = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
+const templateHTML$i = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]:not([action])) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
 const template$i = document.createElement("template");
 template$i.innerHTML = templateHTML$i;
 class SelectMenuOption extends NectaryElement {
@@ -12665,6 +12665,12 @@ class SelectMenuOption extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
+  set action(isAction) {
+    updateBooleanAttribute(this, "action", isAction);
+  }
+  get action() {
+    return getBooleanAttribute(this, "action");
+  }
   matchesSearch(searchValue) {
     return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }
@@ -12736,6 +12742,7 @@ class SelectMenu extends NectaryElement {
       options
     );
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-action", this.#onActionReactHandler, options);
     subscribeContext(
       this,
       "keydown",
@@ -12894,7 +12901,7 @@ class SelectMenu extends NectaryElement {
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, "disabled")) {
       this.#selectOption($elem);
-      this.#dispatchChangeEvent($elem);
+      this.#handleDispatch($elem);
     }
   };
   #onSearchChange = (e) => {
@@ -12959,7 +12966,7 @@ class SelectMenu extends NectaryElement {
         const $option = this.#findSelectedOption();
         if ($option !== null) {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#handleDispatch($option);
         }
         break;
       }
@@ -12975,6 +12982,13 @@ class SelectMenu extends NectaryElement {
       }
     }
   }
+  #handleDispatch = (option) => {
+    if (getBooleanAttribute(option, "action")) {
+      this.#dispatchActionEvent(option);
+    } else {
+      this.#dispatchChangeEvent(option);
+    }
+  };
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
     const options = this.#getOptionElements();
@@ -12990,7 +13004,7 @@ class SelectMenu extends NectaryElement {
     if (this.multiple) {
       const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && values.includes(getAttribute($option, "value", ""));
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && values.includes(getAttribute($option, "value", ""));
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       const formData = new FormData();
@@ -13001,7 +13015,7 @@ class SelectMenu extends NectaryElement {
     } else {
       const value = getFirstCsvValue(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && value === getAttribute($option, "value", "");
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       setFormValue(this.#internals, value ?? "");
@@ -13090,7 +13104,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
     for (const $el of elements) {
-      if (!getBooleanAttribute($el, "disabled") && getAttribute($el, "value") === value) {
+      if (!getBooleanAttribute($el, "disabled") && !getBooleanAttribute($el, "action") && getAttribute($el, "value") === value) {
         return $el;
       }
     }
@@ -13108,10 +13122,17 @@ class SelectMenu extends NectaryElement {
     ) : value;
     this.dispatchEvent(new CustomEvent("-change", { detail: result }));
   }
+  #dispatchActionEvent($opt) {
+    this.dispatchEvent(new CustomEvent("-action", { detail: $opt.value }));
+  }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onActionReactHandler = (e) => {
+    getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
+  };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
     getReactEventHandler(this, "onSearchChange")?.(e);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.30.0",
+  "version": "5.31.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/select-menu/index.js

@@ -71,6 +71,7 @@ class SelectMenu extends NectaryElement {
       options
     );
     this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-action", this.#onActionReactHandler, options);
     subscribeContext(
       this,
       "keydown",
@@ -229,7 +230,7 @@ class SelectMenu extends NectaryElement {
     this.focus();
     if (!isTargetEqual(e, this.#$listbox) && !getBooleanAttribute($elem, "disabled")) {
       this.#selectOption($elem);
-      this.#dispatchChangeEvent($elem);
+      this.#handleDispatch($elem);
     }
   };
   #onSearchChange = (e) => {
@@ -294,7 +295,7 @@ class SelectMenu extends NectaryElement {
         const $option = this.#findSelectedOption();
         if ($option !== null) {
           e.preventDefault();
-          this.#dispatchChangeEvent($option);
+          this.#handleDispatch($option);
         }
         break;
       }
@@ -310,6 +311,13 @@ class SelectMenu extends NectaryElement {
       }
     }
   }
+  #handleDispatch = (option) => {
+    if (getBooleanAttribute(option, "action")) {
+      this.#dispatchActionEvent(option);
+    } else {
+      this.#dispatchChangeEvent(option);
+    }
+  };
   #onOptionSlotChange = () => {
     const searchable = this.searchable;
     const options = this.#getOptionElements();
@@ -325,7 +333,7 @@ class SelectMenu extends NectaryElement {
     if (this.multiple) {
       const values = unpackCsv(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && values.includes(getAttribute($option, "value", ""));
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && values.includes(getAttribute($option, "value", ""));
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       const formData = new FormData();
@@ -336,7 +344,7 @@ class SelectMenu extends NectaryElement {
     } else {
       const value = getFirstCsvValue(csv);
       for (const $option of this.#getOptionElements()) {
-        const isChecked = !getBooleanAttribute($option, "disabled") && value === getAttribute($option, "value", "");
+        const isChecked = !getBooleanAttribute($option, "disabled") && !getBooleanAttribute($option, "action") && value === getAttribute($option, "value", "");
         updateBooleanAttribute($option, "data-checked", isChecked);
       }
       setFormValue(this.#internals, value ?? "");
@@ -425,7 +433,7 @@ class SelectMenu extends NectaryElement {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
     for (const $el of elements) {
-      if (!getBooleanAttribute($el, "disabled") && getAttribute($el, "value") === value) {
+      if (!getBooleanAttribute($el, "disabled") && !getBooleanAttribute($el, "action") && getAttribute($el, "value") === value) {
         return $el;
       }
     }
@@ -443,10 +451,17 @@ class SelectMenu extends NectaryElement {
     ) : value;
     this.dispatchEvent(new CustomEvent("-change", { detail: result }));
   }
+  #dispatchActionEvent($opt) {
+    this.dispatchEvent(new CustomEvent("-action", { detail: $opt.value }));
+  }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
     getReactEventHandler(this, "onChange")?.(e);
   };
+  #onActionReactHandler = (e) => {
+    getReactEventHandler(this, "on-action")?.(e);
+    getReactEventHandler(this, "onAction")?.(e);
+  };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
     getReactEventHandler(this, "onSearchChange")?.(e);

package/select-menu/types.d.ts

@@ -24,6 +24,8 @@ export type TSinchSelectMenuEvents = {
     '-search-change'?: (e: CustomEvent<string>) => void;
     /** Change value handler */
     '-change'?: (e: CustomEvent<string>) => void;
+    /** Action option activated handler — detail is the action option's value */
+    '-action'?: (e: CustomEvent<string>) => void;
 };
 export type TSinchSelectMenuStyle = {
     '--sinch-comp-select-menu-color-default-title-initial'?: string;

package/select-menu-option/index.d.ts

@@ -14,5 +14,7 @@ export declare class SelectMenuOption extends NectaryElement {
     get text(): string;
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
+    set action(isAction: boolean);
+    get action(): boolean;
     matchesSearch(searchValue: string): boolean;
 }

package/select-menu-option/index.js

@@ -2,7 +2,7 @@ import "../icon/index.js";
 import "../text/index.js";
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;min-height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;background-color:var(--sinch-comp-select-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-select-menu-size-icon)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-option)}#icon-check{display:none;margin-right:-6px}:host([data-checked]:not([action])) #icon-check{display:block}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-select-menu-color-default-background-hover)}:host([disabled])>#wrapper{cursor:initial;pointer-events:none;background-color:var(--sinch-comp-select-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-select-menu-color-disabled-option-initial);--sinch-global-color-icon:var(--sinch-comp-select-menu-color-disabled-icon-initial)}::slotted([slot=icon]){margin-left:-6px}::slotted([slot=content]){pointer-events:none;flex:1}</style><div id="wrapper"><slot name="icon"></slot><slot name="content"></slot><sinch-text id="content" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-check" id="icon-check"></sinch-icon></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SelectMenuOption extends NectaryElement {
@@ -68,6 +68,12 @@ class SelectMenuOption extends NectaryElement {
   get disabled() {
     return getBooleanAttribute(this, "disabled");
   }
+  set action(isAction) {
+    updateBooleanAttribute(this, "action", isAction);
+  }
+  get action() {
+    return getBooleanAttribute(this, "action");
+  }
   matchesSearch(searchValue) {
     return this.text.toLowerCase().includes(searchValue.toLowerCase());
   }

package/select-menu-option/types.d.ts

@@ -6,6 +6,8 @@ export type TSinchSelectMenuOptionProps = {
     text: string;
     /** Disabled state */
     disabled?: boolean;
+    /** Marks this option as an action — activating it triggers an action event instead of changing the select value */
+    action?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
 };