@smartbit4all/ng-client 7.2.4 → 7.2.6

package/HTML-WIDGET.md

@@ -38,6 +38,7 @@ A `DIV` widget változatlanul megmarad; a HTML widget annak a használatnak a re
 | `root` | dot-path a kontextus `data`-jához képest, amihez minden helyőrző relatív; **objektumot** nevez; üres = a `data` maga |
 | `fields` | a widget által olvasott abszolút pathok — a builder származtatja a helyőrzőkből, a kliens **nem** olvassa |
 | `css` | a widget stíluslapja, a html mellett utazik — lásd *Stíluslap* |
+| `icons` | az **ikon-szótár**: `kulcs → ImageResource`, amit az ikon-slotok `data-sb4-icon-key`-jel címeznek — lásd *Ikon-slot* |
 
 A **feloldási kontextus** nézeten a `ComponentModel` (`data` + `valueSets`), grid-kártyán a sor
 (`GridRow.data`) a gridet mutató oldal `valueSets`-ével. Ha a `root` listát, egyetlen értéket vagy
@@ -55,6 +56,20 @@ layoutBuilder(view).vForm(f -> f
 vagy template-kulcsból (`h.template(ctx, "CONTACT_ENTRY_LIST")`): a kulcs a szerveren oldódik fel,
 a dróton nem utazik.
 
+A html sima szöveg, tehát a `Tag` builder helyett **text blockként** is írható — így a sablon
+ugyanúgy néz ki, ahogy a kliens megkapja:
+
+```java
+.html("""
+    <div class="card">
+      <smart-icon data-sb4-icon="{{typeIcon}}"></smart-icon>
+      <b>{{name}}</b>
+    </div>""")
+```
+
+A `html(String, Object...)` `String.format`-tal illeszti be az argumentumokat (akciókód,
+toolbar-id), ilyenkor a szövegben a `%` `%%`.
+
 ## Stíluslap
 
 A widget a kinézetét is hozhatja: a `css` mezőben egy CSS-szöveget, amit a kliens a dokumentum
@@ -217,7 +232,9 @@ Logika-mentes Mustache-részhalmaz. Ugyanezt a nyelvtant olvassa a Java-oldali
 
 - Hiányzó, `null` vagy `null`-on átvezető path → **üres string, csendben**.
 - Primitív → `String(v)` (`false` → `false`, `0` → `0`).
-- Objektum vagy lista `{{p}}`-ként → üres + `console.warn`.
+- Objektum vagy lista `{{p}}`-ként → üres + `console.warn`. Egyetlen kivétel: egy **ikon-slot**
+  név-attribútumának teljes értékeként az objektum az ikon `ImageResource`-a lesz — lásd
+  *Ikon-slot*.
 - Minden behelyettesített érték HTML-escape (`& < > " '`). URL-attribútumban (`href="{{url}}"`)
   nincs séma-szűrés: az érték a szerver saját modelljéből jön, a szerző felel érte.
 
@@ -300,7 +317,9 @@ escape-pel), a pipe-ok balról jobbra láncolhatók, a kimenetük is escape-en m
 
 | Hol | Mi történik |
 |---|---|
-| Java-builder (`build()`) | `IllegalArgumentException`: párosítatlan / keresztezett szekció, raw tag, érvénytelen path vagy `root`, a `root` fölé mutató `../`, ismeretlen pipe, rossz pipe-szintaxis, üres `data-sb4-toolbar` / `data-sb4-action` |
+| Java-builder (`build()`) | `IllegalArgumentException`: párosítatlan / keresztezett szekció, raw tag, érvénytelen path vagy `root`, a `root` fölé mutató `../`, ismeretlen pipe, rossz pipe-szintaxis, üres `data-sb4-toolbar` / `data-sb4-action` /
+`data-sb4-icon` / `data-sb4-icon-key`, `data-sb4-icon` és `data-sb4-icon-key` ugyanazon az elemen |
+| Java-builder (`build()`) | `IllegalStateException`: a sablonban álló literál ikon-kulcs, amit az ikon-szótár nem tartalmaz |
 | Java-builder (`build()`), `resolveHtml` | `IllegalStateException`: feloldatlan szerver-helyőrző (`${alias:/`), lásd *A szerver-fázis* |
 | kliens | nem dob: `console.error`, és a html **feloldatlanul** kerül ki — látható hiba, nem üres kártya |
 
@@ -344,6 +363,92 @@ nézeten az oldalét). Java: `Tag.toolbar(id)` / `Tag.toolbar(id, toolbarPropert
 - A kliens csak akkor írja újra a html-t, ha a feloldás eredménye **megváltozott**; változatlan
   eredménynél a hidratált toolbarok élnek tovább.
 
+## Ikon-slot
+
+```html
+<smart-icon data-sb4-icon="mail" data-sb4-icon-color="warn"></smart-icon>
+<smart-icon data-sb4-icon="{{typeIcon}}"></smart-icon>
+<smart-icon data-sb4-icon-key="{{type}}"></smart-icon>
+```
+
+A kliens a marker-elembe egy **valódi `smart-icon`-t hidratál**, ugyanazt a komponenst, amit a
+gomb, a grid-cella és a form használ. Java: `Tag.icon(name)`, `Tag.icon(name, color)`,
+`Tag.icon(imageResource)`, `Tag.iconKey(key)`, a szótár a widget-builderen: `h.icon(key, resource)`
+/ `h.icons(map)`.
+
+Az ikon címe négyféle lehet, és mindegyiknek megvan a maga esete:
+
+| Forma | Mit ad az ikonnak | Mikor |
+|---|---|---|
+| `data-sb4-icon="mail"` | `icon` input: a név előbb a regisztrált svg-névterekben, aztán Material-ligatúraként | fix ikon, vagy adatból jövő **ikonnév** |
+| `data-sb4-icon="{{typeIcon}}"`, az érték **objektum** | `imageResource` input | soronként más erőforrás (feltöltött kép, `ImageSettingApi` a modellben) |
+| `data-sb4-icon="{…}"` (JSON) | `imageResource` input | a page által **egyszer** feloldott erőforrás (`Tag.icon(resource)`) |
+| `data-sb4-icon-key="{{type}}"` | `imageResource` input a **szótárból** | véges típus → ikon leképezés |
+
+- **`data-sb4-icon-color`**: a `color` input, vagyis téma- vagy host-osztálynév (`primary`,
+  `text-primary`, `warn` …), **nem** CSS-szín. Csak a név-formához való: az `ImageResource` a saját
+  `color`-ját hozza. Elhagyva a komponens alapértelmezése (`primary`) marad.
+- **Objektum csak ott**, ahol az attribútum értéke pontosan egy helyőrző. Szöveggel keverve
+  (`data-sb4-icon="ic-{{typeIcon}}"`), pipe-pal vagy listán az érték a nyelvtan általános szabálya
+  szerint üres marad, warninggal. A feloldó az objektumot egy **renderelésenként újrahúzott,
+  véletlen tokennel** adja át a hidratálásnak, hogy adatból ne lehessen másik ikon erőforrására
+  hivatkozni.
+- **Üres cím** (nincs ikonja ennek a sornak) → néma kihagyás, az elem üresen marad. A sablonban
+  **szó szerint üres** marker (`data-sb4-icon=""`) viszont `build()`-hiba, ahogy a toolbarnál.
+- **Ismeretlen szótárkulcs** → nincs ikon, egy warning. A sablonban álló **literál** kulcsot, ami
+  nincs a szótárban, már a `build()` elutasítja.
+- Egy elemen **nem állhat** a `data-sb4-icon` és a `data-sb4-icon-key` egyszerre: `build()`-hiba, a
+  kliens a kulcsot használja és warningot ír.
+- A marker `class` és `style` attribútuma a helyén marad (a hidratálás a marker-elembe rendereli a
+  komponenst), a méretezés a widget CSS-éből megy: `.card-icon mat-icon { font-size: … }`.
+- Az ikon a nevét a regiszterben keresi meg, ezért **egy microtaskkal később** jelenik meg — a
+  kliens ettől még ugyanabban a renderelésben írja ki a html-t.
+
+### Példa: típus szerinti ikon egy ImageResource-ból
+
+A szerveren az `ImageSettingApi` képezi le a típust ikonra (`images-*.properties`):
+
+```properties
+ContactType.EMAIL={"identifier":"mail","color":"accent","tooltip":{"tooltip":"E-mail cím"}}
+ContactType.PHONE={"identifier":"call","color":"primary","tooltip":{"tooltip":"Telefonszám"}}
+```
+
+**Soronként más erőforrás** — az objektum az adatban utazik:
+
+```java
+row.getData().put("typeIcon", imageSettingApi.get("ContactType", type.name()));
+```
+
+```html
+<div class="pg-row">
+  <smart-icon data-sb4-icon="{{typeIcon}}"></smart-icon>
+  <b>{{name}}</b>
+</div>
+```
+
+**Véges leképezés** — az erőforrás egyszer utazik, a sor csak a kódot viszi:
+
+```java
+.htmlColumn("type", h -> h
+    .icon("EMAIL", imageSettingApi.get("ContactType", "EMAIL"))
+    .icon("PHONE", imageSettingApi.get("ContactType", "PHONE"))
+    .html("""
+        <div class="pg-row">
+          <smart-icon data-sb4-icon-key="{{type}}"></smart-icon>
+          <b>{{name}}</b>
+        </div>"""))
+```
+
+Mindkettőből ugyanaz lesz a DOM-ban:
+
+```html
+<smart-icon data-sb4-icon="…"><mat-icon class="mat-accent material-icons">mail</mat-icon></smart-icon>
+```
+
+A szótár a **sablon** része (`HtmlProperties.icons`), nem a soré: a sima HTML widgetnél is egyszer
+megy le, és egy újra-feloldás már a leküldött erőforrások közül választ. Nem tévesztendő össze a
+`GridRow.icons`-szal, ami a **cella értéke mellé** rajzolt ikonokat írja le.
+
 ## Akció-trigger
 
 ```html
@@ -468,7 +573,7 @@ gridBuilder.htmlColumn("name", h -> h.html(t -> t
     .toolbar("ROW_TOOLBAR")))
 ```
 
-- **Ugyanaz a bean, mint a widgeté** (`HtmlProperties`): `html`, `root`, `fields`, `css`, és
+- **Ugyanaz a bean, mint a widgeté** (`HtmlProperties`): `html`, `root`, `fields`, `css`, `icons`, és
   ugyanaz a nyelvtan, pipe-készlet, escape, stíluslap- és hibakezelés. A `root` a **sor `data`-jához** relatív; a
   `valueSets` a gridet mutató oldalé.
 - A sablon az oszlop **minden érték-renderelését** kiváltja, a `typeClass` szerinti dátum-,
@@ -518,7 +623,8 @@ gridBuilder.htmlColumn("name", h -> h.html(t -> t
 `root = "card"`, ha a sor `data`-jában a kártya a `card` oszlop alatt van. Amit a kliens-dialektus
 szándékosan nem tud, annak a helye:
 
-- **ikon / értékfüggő megjelenés**: szerver-származtatott mező, vagy érték-alapú CSS-osztály
+- **ikon**: ikon-slot (`data-sb4-icon` / `data-sb4-icon-key`), a leképezés az `ImageSettingApi`-ban;
+  értékfüggő megjelenés egyébként: szerver-származtatott mező, vagy érték-alapú CSS-osztály
   (`contact-card-icon-{{channelType}}`);
 - **feltétel egy érték egyenlőségére**: sor-layout kulcs (`row.rowLayout`), vagy szerver-származtatott
   logikai mező + `{{?…}}` őr;

package/MIGRATION-7.0.md

@@ -1874,6 +1874,15 @@ Additive, with **one behaviour change** and one removed field. The reference is
   going out.
   Inside a `{{#section}}` a placeholder reads the surrounding scope only when it says so,
   `{{../title}}`: one step per entering section, never above the widget's root.
+- **Icon slots (in the tree, released after 7.2.4)**: an element in the html marked with
+  `data-sb4-icon` hydrates into a
+  `smart-icon` — the same component a button or a cell uses. The marker addresses a name
+  (`data-sb4-icon="mail"`, coloured by `data-sb4-icon-color`, a theme or host class name), an
+  `ImageResource` (a placeholder that resolves to one, or the json `Tag.icon(resource)` writes
+  in), or a key of the template's icon dictionary (`data-sb4-icon-key`,
+  `HtmlProperties.icons`), which sends a finite type-to-icon mapping once with the template
+  rather than once per row. An address that resolves to nothing renders no icon and says
+  nothing; an unknown dictionary key warns. Nothing changes for a host that sends no icon slot.
 - **Row layouts**: a cards grid can carry its card layouts once per grid
   (`GridViewDescriptor.rowLayouts`, picked per row by `GridRow.rowLayout`) instead of once per
   row. The per-row `layoutDescriptor.GRID_ROW_LAYOUT` still works and wins over them; a

package/WIDGETS.md

@@ -155,7 +155,9 @@ toolbar slot of the html the backend sent (`<smart-ui-action-toolbar data-sb4-to
 such a toolbar resolves by the very same pull: a `SmartActionHost` above it if one has a list, the
 screen component otherwise. That is why a row layout's html gets the row's actions on a grid card
 with no code of its own, and a table cell rendered from a column template gets them the same way.
-An action trigger (`data-sb4-action`) looks its action up in the same list. See `HTML-WIDGET.md`.
+An action trigger (`data-sb4-action`) looks its action up in the same list, and an icon slot
+(`data-sb4-icon`, `data-sb4-icon-key`) hydrates into a `smart-icon` the same way. See
+`HTML-WIDGET.md`.
 
 **A `UiActionModel` is frozen.** Every field is `readonly`, and `[uiActionModels]` takes
 `readonly UiActionModel[]`. Build a new entry; never edit one. Writing into an entry a

package/fesm2022/smartbit4all-ng-client.mjs

@@ -6162,18 +6162,6 @@ const APIS$4 = [DefaultService$1];
  * Do not edit the class manually.
  */
 
-/**
- * Form layout definition
- * Contains form layout definition objects.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-
 var RecordingUploaderPropertiesOpenDirectionEnum;
 (function (RecordingUploaderPropertiesOpenDirectionEnum) {
     RecordingUploaderPropertiesOpenDirectionEnum["RIGHT"] = "RIGHT";
@@ -9653,6 +9641,79 @@ function enumAttribute(marker, name, values, ctx) {
     }
     return value;
 }
+/**
+ * Turns every icon slot under the container into a live `smart-icon` rendered into the marker
+ * element itself. A slot addresses its icon in one of three ways, and an empty address — the
+ * ordinary case of a row that has no icon — is skipped without a word:
+ *
+ * - `data-sb4-icon` with a name, which the icon resolves against the registered svg namespaces
+ *   and falls back to a material ligature, optionally coloured by `data-sb4-icon-color`;
+ * - `data-sb4-icon` with an image resource, either as the token the resolver left for an object
+ *   valued placeholder or as the JSON a backend builder wrote in;
+ * - `data-sb4-icon-key` with a key of the template's icon dictionary, which travels once however
+ *   many rows read it.
+ *
+ * The refs are the caller's, like the toolbars': destroy them before the html is rewritten.
+ */
+function hydrateIcons(container, ctx, icons) {
+    const refs = [];
+    container
+        .querySelectorAll('[data-sb4-icon], [data-sb4-icon-key]')
+        .forEach((marker) => {
+        const key = marker.getAttribute('data-sb4-icon-key');
+        const name = marker.getAttribute('data-sb4-icon');
+        if (key !== null && name !== null) {
+            ctx.warn('an icon slot addresses both a name and a dictionary key, the key is used');
+        }
+        const ref = createComponent(SmartIconComponent, {
+            hostElement: marker,
+            elementInjector: ctx.elementInjector,
+            environmentInjector: ctx.environmentInjector,
+        });
+        if (key !== null) {
+            const resource = icons.dictionary?.[key];
+            if (key && !resource) {
+                ctx.warn(`the icon dictionary has no '${key}'`);
+            }
+            ref.setInput('imageResource', resource);
+        }
+        else {
+            const resource = imageResource(name, icons, ctx);
+            if (resource) {
+                ref.setInput('imageResource', resource);
+            }
+            else {
+                ref.setInput('icon', name || undefined);
+                ref.setInput('color', marker.getAttribute('data-sb4-icon-color') ?? undefined);
+            }
+        }
+        // Without a zone nothing else would ever refresh a view that is in no template.
+        ctx.appRef.attachView(ref.hostView);
+        ref.changeDetectorRef.detectChanges();
+        refs.push(ref);
+    });
+    return refs;
+}
+/** The resource an address stands for, undefined when it is a plain icon name. */
+function imageResource(address, icons, ctx) {
+    if (icons.objects.has(address)) {
+        return icons.objects.get(address);
+    }
+    if (address.startsWith('sb4-img:')) {
+        ctx.warn(`the image resource of '${address}' is not from this render, the icon is left empty`);
+        return {};
+    }
+    if (!address.startsWith('{')) {
+        return undefined;
+    }
+    try {
+        return JSON.parse(address);
+    }
+    catch {
+        ctx.warn(`an icon slot holds html that is not an image resource: ${address.substring(0, 40)}`);
+        return {};
+    }
+}
 
 /** Pipes that must have an argument, and pipes that must not; the Java scanner checks the same. */
 const PIPES_REQUIRING_ARGUMENT = ['label'];
@@ -9730,6 +9791,8 @@ function formatNumber(v, digitsInfo, ctx) {
 }
 
 const IDENTIFIER = '[A-Za-z_][A-Za-z0-9_]*';
+/** The whole value of an icon slot's name attribute: only there may a placeholder give an object. */
+const ICON_ATTRIBUTE = /data-sb4-icon\s*=\s*"$/i;
 const PATH = new RegExp(`^((?:\\.\\./)*)(${IDENTIFIER}(?:\\.${IDENTIFIER})*)$`);
 const PIPE_NAME = new RegExp(IDENTIFIER, 'y');
 function resolveTemplate(template, scope, ctx) {
@@ -9738,11 +9801,33 @@ function resolveTemplate(template, scope, ctx) {
         nodes = parse(template);
     }
     catch (e) {
-        return { html: template, errors: [e.message] };
+        return { html: template, errors: [e.message], objects: new Map(), identity: template };
     }
     const out = [];
-    render(nodes, [scope], ctx, out);
-    return { html: out.join(''), errors: [] };
+    const sink = { prefix: `sb4-img:${nonce()}:`, objects: new Map() };
+    render(nodes, [scope], ctx, out, sink);
+    const html = out.join('');
+    return { html, errors: [], objects: sink.objects, identity: identityOf(html, sink) };
+}
+/** The html with each token replaced by its object, so an unchanged render stays unchanged. */
+function identityOf(html, sink) {
+    let identity = html;
+    sink.objects.forEach((value, token) => {
+        let written;
+        try {
+            written = JSON.stringify(value) ?? '';
+        }
+        catch {
+            written = token.substring(sink.prefix.length);
+        }
+        identity = identity.split(token).join(written);
+    });
+    return identity;
+}
+function nonce() {
+    return typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : String(Math.random()).substring(2);
 }
 /** Walks a dot-path; a missing, null or non-object step anywhere gives undefined. */
 function lookupPath(scope, path) {
@@ -9823,6 +9908,9 @@ function parse(template) {
                 ...(path === '.' ? { parents: 0, path } : parsePath(path, tag, open)),
                 pipes: pipe < 0 ? [] : parsePipes(content.substring(pipe + 1), tag),
                 tag,
+                resource: pipe < 0 &&
+                    template[end + 2] === '"' &&
+                    ICON_ATTRIBUTE.test(template.substring(pos, start)),
             });
         }
         pos = end + 2;
@@ -9909,38 +9997,38 @@ function skipSpaces(s, i) {
  * `scopes` holds one entry per open entering section above the root scope, the innermost last;
  * the parser has already checked that no `../` reaches below its bottom.
  */
-function render(nodes, scopes, ctx, out) {
+function render(nodes, scopes, ctx, out, sink) {
     const scope = scopes[scopes.length - 1];
     for (const node of nodes) {
         if (node.kind === 'text') {
             out.push(node.text);
         }
         else if (node.kind === 'value') {
-            out.push(renderValue(node, scopes, ctx));
+            out.push(renderValue(node, scopes, ctx, sink));
         }
         else {
             const value = lookup(scopes, node);
             if (node.sigil === '^') {
                 if (!truthy(value)) {
-                    render(node.children, scopes, ctx, out);
+                    render(node.children, scopes, ctx, out, sink);
                 }
             }
             else if (!truthy(value)) {
                 continue;
             }
             else if (node.sigil === '?') {
-                render(node.children, scopes, ctx, out);
+                render(node.children, scopes, ctx, out, sink);
             }
             else if (Array.isArray(value)) {
-                value.forEach((item) => render(node.children, [...scopes, item], ctx, out));
+                value.forEach((item) => render(node.children, [...scopes, item], ctx, out, sink));
             }
             else if (typeof value === 'object') {
-                render(node.children, [...scopes, value], ctx, out);
+                render(node.children, [...scopes, value], ctx, out, sink);
             }
             else {
                 ctx.warn(`{{#${node.source}}} entered a single value; use {{?${node.source}}} to guard on it`);
                 // Still a level, so `../` inside counts the same as the server's field derivation does.
-                render(node.children, [...scopes, scope], ctx, out);
+                render(node.children, [...scopes, scope], ctx, out, sink);
             }
         }
     }
@@ -9948,7 +10036,7 @@ function render(nodes, scopes, ctx, out) {
 function lookup(scopes, path) {
     return lookupPath(scopes[scopes.length - 1 - path.parents], path.path);
 }
-function renderValue(node, scopes, ctx) {
+function renderValue(node, scopes, ctx, sink) {
     let value = node.path === '.' ? scopes[scopes.length - 1] : lookup(scopes, node);
     for (const pipe of node.pipes) {
         // Own names only: `constructor` and the like must not reach Object.prototype.
@@ -9963,6 +10051,12 @@ function renderValue(node, scopes, ctx) {
         return '';
     }
     if (typeof value === 'object') {
+        // An icon slot takes an image resource as it stands; everywhere else an object is nothing.
+        if (node.resource && !Array.isArray(value)) {
+            const token = `${sink.prefix}${sink.objects.size}`;
+            sink.objects.set(token, value);
+            return token;
+        }
         ctx.warn(`${node.tag} names an object or a list, rendered empty`);
         return '';
     }
@@ -10203,17 +10297,23 @@ function injectSmartHtmlRenderer(container) {
         untracked(() => triggers.mark());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "marking" }] : /* istanbul ignore next */ []));
-    const destroyToolbars = () => {
+    const destroyHydrated = () => {
         refs.forEach((ref) => ref.destroy());
         refs = [];
     };
-    const write = (html) => {
-        current = html;
-        // Rewriting the html does not destroy the toolbars hydrated into it.
-        destroyToolbars();
+    const write = (resolved) => {
+        current = resolved;
+        // Rewriting the html does not destroy the toolbars and icons hydrated into it.
+        destroyHydrated();
         // Trusted as authored by the backend; every value the resolver put in is escaped.
-        container.innerHTML = html;
-        refs = hydrateToolbars(container, hydration);
+        container.innerHTML = resolved.html;
+        refs = [
+            ...hydrateToolbars(container, hydration),
+            ...hydrateIcons(container, hydration, {
+                dictionary: resolved.icons,
+                objects: resolved.objects,
+            }),
+        ];
         triggers.mark();
     };
     const cancelLeave = () => {
@@ -10222,7 +10322,7 @@ function injectSmartHtmlRenderer(container) {
         container.classList.remove(LEAVING_CLASS);
     };
     /** Plays what the style sheets give the leaving class, then writes the latest pending html. */
-    const leaveThenWrite = (html) => {
+    const leaveThenWrite = (resolved) => {
         // Only what the class starts counts; an entry or endless animation already running does not.
         const running = new Set(container.getAnimations({ subtree: true }));
         container.classList.add(LEAVING_CLASS);
@@ -10231,10 +10331,10 @@ function injectSmartHtmlRenderer(container) {
             .filter((animation) => !running.has(animation));
         if (!leaving.length) {
             container.classList.remove(LEAVING_CLASS);
-            write(html);
+            write(resolved);
             return;
         }
-        pending = html;
+        pending = resolved;
         const token = ++leave;
         Promise.race([
             Promise.allSettled(leaving.map((animation) => animation.finished)),
@@ -10253,30 +10353,32 @@ function injectSmartHtmlRenderer(container) {
         // the action list the triggers read.
         render: (newTemplate, context) => untracked(() => {
             template = newTemplate;
-            const { html, errors } = resolveTemplate(template, context.data, {
+            const result = resolveTemplate(template, context.data, {
                 valueSets: context.valueSets,
                 locale: locale(),
                 warn,
             });
-            errors.forEach((error) => report(`the html is left unresolved: ${error}`, console.error));
+            const resolved = { ...result, icons: context.icons };
+            result.errors.forEach((error) => report(`the html is left unresolved: ${error}`, console.error));
+            const unchanged = resolved.identity === current?.identity;
             if (pending !== undefined) {
                 // Mid-leave the latest html wins; back to the one on screen, nothing leaves after all.
-                if (html === current) {
+                if (unchanged) {
                     cancelLeave();
                 }
                 else {
-                    pending = html;
+                    pending = resolved;
                 }
                 return;
             }
-            if (html === current) {
+            if (unchanged) {
                 return;
             }
             if (current === undefined) {
-                write(html);
+                write(resolved);
                 return;
             }
-            leaveThenWrite(html);
+            leaveThenWrite(resolved);
         }),
         useCss: (newCss) => {
             const next = newCss || undefined;
@@ -10291,7 +10393,7 @@ function injectSmartHtmlRenderer(container) {
             disposed = true;
             releaseCss();
             marking.destroy();
-            destroyToolbars();
+            destroyHydrated();
             triggers.dispose();
         },
     };
@@ -10319,6 +10421,7 @@ class SmartHtmlWidgetComponent {
             this.renderer.render(properties?.html ?? '', {
                 data: this.scope(model?.data, properties?.root, properties?.html),
                 valueSets: model?.valueSets,
+                icons: properties?.icons,
             });
         });
     }
@@ -13111,7 +13214,7 @@ class SmartHtmlCellComponent {
     }
     ngOnChanges() {
         this.actionHost.actionModels.set(rowActionModels(this.row, this.gridIdentifier));
-        const { html, root, css } = this.template;
+        const { html, root, css, icons } = this.template;
         const scope = rootScope(this.row.data, root);
         if (scope === undefined && root && this.warnedRoot !== root) {
             this.warnedRoot = root;
@@ -13122,6 +13225,7 @@ class SmartHtmlCellComponent {
         this.renderer.render(html ?? '', {
             data: scope,
             valueSets: this.smartComponent?.model?.valueSets,
+            icons,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -22468,11 +22572,11 @@ class SmartFilterParamsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterParamsComponent, isStandalone: true, selector: "smart-filter-group-params", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (service().model?.showGroups && !service().model?.readOnly) {\r\n  <div\r\n    class=\"targetGroupFilterParamsContainer\"\r\n    >\r\n    <!-- <ng-template #smartFilter></ng-template> -->\r\n    <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    @if (expandableSectionsFromExcel) {\r\n      <smart-expandable-section\r\n        class=\"excel\"\r\n        [data]=\"expandableSectionsFromExcel!\"\r\n      ></smart-expandable-section>\r\n    }\r\n    @for (data of expandableSections; track data) {\r\n      <smart-expandable-section\r\n        [data]=\"data\"\r\n      ></smart-expandable-section>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterParamsComponent, isStandalone: true, selector: "smart-filter-group-params", inputs: { service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "filterVcRef", first: true, predicate: ["smartFilter"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "@if (service().model?.showGroups && !service().model?.readOnly) {\r\n  <div\r\n    class=\"targetGroupFilterParamsContainer\"\r\n    >\r\n    <!-- <ng-template #smartFilter></ng-template> -->\r\n    <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    @if (expandableSectionsFromExcel) {\r\n      <smart-expandable-section\r\n        class=\"excel\"\r\n        [data]=\"expandableSectionsFromExcel!\"\r\n      ></smart-expandable-section>\r\n    }\r\n    @for (data of expandableSections; track data) {\r\n      <smart-expandable-section\r\n        [data]=\"data\"\r\n      ></smart-expandable-section>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--sb4-expansion-panel-expanded-bg-color, var(--accent-color))!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:var(--sb4-expansion-panel-expanded-title-color, #fff)!important}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-filter-group-params', imports: [ExpandableSectionComponent], template: "@if (service().model?.showGroups && !service().model?.readOnly) {\r\n  <div\r\n    class=\"targetGroupFilterParamsContainer\"\r\n    >\r\n    <!-- <ng-template #smartFilter></ng-template> -->\r\n    <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    @if (expandableSectionsFromExcel) {\r\n      <smart-expandable-section\r\n        class=\"excel\"\r\n        [data]=\"expandableSectionsFromExcel!\"\r\n      ></smart-expandable-section>\r\n    }\r\n    @for (data of expandableSections; track data) {\r\n      <smart-expandable-section\r\n        [data]=\"data\"\r\n      ></smart-expandable-section>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--accent-color)!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:#fff}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
+            args: [{ selector: 'smart-filter-group-params', imports: [ExpandableSectionComponent], template: "@if (service().model?.showGroups && !service().model?.readOnly) {\r\n  <div\r\n    class=\"targetGroupFilterParamsContainer\"\r\n    >\r\n    <!-- <ng-template #smartFilter></ng-template> -->\r\n    <!-- <div class=\"dataSource-options\" *ngIf=\"service.model?.extarnalDatabase\">\r\n    <div class=\"dataSource-btns\">\r\n      <div class=\"dataSource-btn\">K\u00FCls\u0151 adatb\u00E1zis</div>\r\n      <div class=\"dataSource-btn dataSource-btn-disabled\">Bels\u0151 adatb\u00E1zis</div>\r\n    </div>\r\n    <div class=\"dataSource-add-database\">\r\n      <div class=\"dataSource-add-database-title\">\r\n        <smart-icon icon=\"Ic24_View_Table\" color=\"sucess\"></smart-icon>\r\n        Adatb\u00E1zis\r\n      </div>\r\n      <button title=\"add\" mat-icon-button (click)=\"addDataSource()\">\r\n        <smart-icon icon=\"Ic24_Plus_Circle\" color=\"success\"></smart-icon>\r\n      </button>\r\n    </div>\r\n  </div> -->\r\n  <div class=\"sections\">\r\n    @if (expandableSectionsFromExcel) {\r\n      <smart-expandable-section\r\n        class=\"excel\"\r\n        [data]=\"expandableSectionsFromExcel!\"\r\n      ></smart-expandable-section>\r\n    }\r\n    @for (data of expandableSections; track data) {\r\n      <smart-expandable-section\r\n        [data]=\"data\"\r\n      ></smart-expandable-section>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n", styles: [".targetGroupFilterParamsContainer{padding:1.5rem;display:flex;flex-direction:column;gap:2.5rem;height:calc(100% - 3rem);overflow:auto;border-right:2px solid var(--primary-dark-color)}.sections{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-body{background-color:var(--success-lighter-color)}.targetGroupFilterParamsContainer .excel::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--success-color)!important}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-body{padding:0 0 0 1rem!important;background-color:var(--light-blue-color)}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header{background-color:var(--primary-light-color);padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header-title{color:var(--primary-lighter-color);font-weight:600}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded{background-color:var(--sb4-expansion-panel-expanded-bg-color, var(--accent-color))!important;padding:.75rem;height:auto}.targetGroupFilterParamsContainer::ng-deep .mat-expansion-panel-header.mat-expanded .mat-expansion-panel-header-title{color:var(--sb4-expansion-panel-expanded-title-color, #fff)!important}.dataSource-btns{display:flex;flex-direction:row;justify-content:space-around;background-color:var(--success-lighter-color);height:44px;padding:8px 12px;align-items:center;border:1.5px solid var(--success-color);border-left:6px solid var(--success-color);border-radius:4px}.dataSource-btn{display:flex;padding:1rem 2rem;justify-content:center;align-items:center;background-color:var(--success-color);border-radius:4px;cursor:pointer}.dataSource-btn-disabled{background-color:var(--success-lighter-color);cursor:auto}.dataSource-add-database{display:flex;flex-direction:row;justify-content:space-between;background-color:var(--success-lighter-color);padding:8px;border-radius:4px}.dataSource-add-database-title{display:flex;flex-direction:row;gap:1rem;align-items:center}.dataSource-options{display:flex;flex-direction:column;gap:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }], filterVcRef: [{
                 type: ViewChild,
                 args: ['smartFilter', { read: ViewContainerRef }]