@targoninc/jess-components 0.0.10 → 0.0.12

package/dist/index.js

@@ -697,7 +697,7 @@ function getDisabledClass(config) {
 }
 function button(config) {
   config.classes ??= [];
-  return create("button").applyGenericConfig(config).onclick(config.onclick).classes(getDisabledClass(config)).attributes("tabindex", config.tabindex ?? "0").children(when(config.icon, () => icon(config.icon)), when(config.text, () => text({
+  return create("button").applyGenericConfig(config).onclick(config.onclick).classes(getDisabledClass(config)).attributes("tabindex", config.tabindex ?? "0").children(when(config.icon, () => create("div").children(icon(config.icon)).build()), when(config.text, () => text({
     text: config.text
   }))).build();
 }
@@ -837,13 +837,14 @@ function heading(config) {
 }
 function icon(config) {
   const icon2 = config.icon;
-  const isMaterial = !config.isUrl;
   const iconClass = config.adaptive ? "adaptive-icon" : "static-icon";
   const pointerClass = config.title ? "_" : "no-pointer";
-  if (isMaterial) {
-    return create("i").applyGenericConfig(config).classes(iconClass, "material-symbols-outlined", pointerClass).text(icon2).onclick(config.onclick).build();
-  }
-  return create("img").applyGenericConfig(config).classes(iconClass, pointerClass).attributes("src", icon2).onclick(config.onclick).build();
+  return compute((isImage) => {
+    if (!isImage) {
+      return create("i").applyGenericConfig(config).classes(iconClass, "material-symbols-outlined", pointerClass).text(icon2).onclick(config.onclick).build();
+    }
+    return create("img").applyGenericConfig(config).classes(iconClass, pointerClass).attributes("src", icon2).onclick(config.onclick).build();
+  }, asSignal(config.isUrl ?? false));
 }
 function searchableSelect(config) {
   const options = config.options ?? signal([]);
@@ -921,11 +922,11 @@ function searchSelectOption(config) {
     config.value.value = config.option.id;
     config.search.value = config.option.name;
     config.optionsVisible.value = false;
-  }).children(when(config.option.image, icon({
+  }).children(when(config.option.image, create("div").children(icon({
     icon: config.option.image ?? "",
     isUrl: config.option.imageIsUrl,
     adaptive: true
-  })), create("span").text(config.option.name).build()).build();
+  })).build()), create("span").text(config.option.name).build()).build();
   return element;
 }
 function checkbox(config) {

package/dist/src/Components.d.ts

@@ -10,7 +10,7 @@ export declare function area(config: ContainerConfig): AnyElement;
 export declare function container(config: ContainerConfig): AnyElement;
 export declare function text(config: TextConfig): AnyElement;
 export declare function heading(config: HeadingConfig): AnyElement;
-export declare function icon(config: IconConfig): AnyElement;
+export declare function icon(config: IconConfig): Signal<AnyElement>;
 export declare function searchableSelect(config: SearchableSelectConfig): AnyElement;
 export declare function searchSelectOption(config: SelectOptionConfig): any;
 export declare function checkbox(config: BooleanConfig): AnyElement;

package/dist/src/Types.d.ts

@@ -54,7 +54,7 @@ export interface TextConfig extends BaseComponentConfig {
 export interface IconConfig extends BaseComponentConfig {
     icon: StringOrSignal;
     adaptive?: boolean;
-    isUrl?: boolean;
+    isUrl?: TypeOrSignal<boolean>;
     onclick?: Function;
 }
 export interface SelectOption extends BaseComponentConfig {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@targoninc/jess-components",
   "type": "module",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [