@smartbit4all/ng-client 7.3.36 → 7.3.38

package/fesm2022/smartbit4all-ng-client.mjs

@@ -4320,6 +4320,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ selector: '[smartEmbeddedSlot]' }]
         }], propDecorators: { containerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "smartEmbeddedSlot", required: true }] }], containerUuid: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerUuid", required: false }] }] } });
 
+/** Uri text as RFC 3986 gives it, the URI_PATTERN of UriUtils on the server. */
+const URI_PATTERN = new RegExp('^(?:(?:[a-zA-Z][a-zA-Z0-9+.-]*):)' + // scheme
+    "(?://(?:[\\w\\-._~%!$&'()*+,;=:]+@)?" + // userinfo
+    '(?:\\[[0-9A-Fa-f:.]+\\]|[\\w\\-._~%]+)' + // host (IP-literal / IPv4 / name)
+    '(?::\\d{2,5})?)?' + // port
+    "(?:/[\\w\\-._~%!$&'()*+,;=:@]*)*" + // path
+    "(?:\\?[\\w\\-._~%!$&'()*+,;=:@/?]*)?" + // query
+    "(?:#[\\w\\-._~%!$&'()*+,;=:@/?]*)?$" // fragment
+);
+/** The version suffix of the storage at the end of a path. */
+const VERSION_SUFFIX = /\.v(?:0|[1-9]\d*)$/;
 /**
  * The key and display property of a valueSet's values: the preferred name if the values carry it,
  * then the GenericValue name (`uri` / `name`), then the Value name (`objectUri` / `displayValue`).
@@ -4331,26 +4342,66 @@ function valueSetKeyProperty(values, preferred) {
 function valueSetDisplayProperty(values, preferred) {
     return firstExisting(values, [preferred ?? 'displayValue', 'name', 'displayValue']);
 }
+/**
+ * The property of a value: a key the value has as it is, else a dotted path navigated part by
+ * part (`data.name`); undefined when a part is missing.
+ */
+function readValueSetProperty(value, property) {
+    if (value === null || typeof value !== 'object' || property in value) {
+        return value?.[property];
+    }
+    return property.split('.').reduce((part, name) => part?.[name], value);
+}
 /** The label of a code in a valueSet, or undefined when the valueSet does not know the code. */
 function valueSetLabelOf(valueSetData, code) {
     const values = valueSetData.values ?? [];
     const keyProperty = valueSetKeyProperty(values, valueSetData.keyProperty);
-    const hit = values.find((value) => String(value[keyProperty]) === String(code));
-    return hit?.[valueSetDisplayProperty(values)];
+    const hit = values.find((value) => isSameKey(readValueSetProperty(value, keyProperty), code, valueSetData.versionedKeys));
+    return hit && readValueSetProperty(hit, valueSetDisplayProperty(values));
 }
 function firstExisting(values, candidates) {
     if (!values?.length) {
         return candidates[0];
     }
-    return candidates.find((c) => c in values[0]) ?? candidates[candidates.length - 1];
+    // A candidate exists when the first value reads it, also as a dotted path, or has it as a key.
+    return (candidates.find((c) => readValueSetProperty(values[0], c) !== undefined || c in values[0]) ??
+        candidates[candidates.length - 1]);
 }
 /** Whether a field holds no value: `''`, null, undefined or an empty list. */
 function isEmptyValue(value) {
     return value === '' || value == null || (Array.isArray(value) && value.length === 0);
 }
-/** Whether two keys are equal; compared as text, as a control holds a boolean key as text. */
-function isSameKey(key1, key2) {
-    return String(key1) === String(key2);
+/**
+ * The key as the keys of a set compare: as text, a uri text (RFC 3986) without the version suffix
+ * at the end of its path unless the set has Versioned Keys. Any other text stays as it is, a code
+ * ending in a version too.
+ */
+function createReferenceKey(key, versionedKeys) {
+    const text = String(key);
+    return versionedKeys || !URI_PATTERN.test(text) ? text : removeVersion(text);
+}
+/**
+ * The uri text without the version suffix at the end of its path, as removeVersion of UriUtils on
+ * the server; the scheme, the authority, the query and the fragment stay as they are.
+ */
+function removeVersion(uri) {
+    const schemeEnd = uri.indexOf(':');
+    const queryOrFragment = uri.slice(schemeEnd + 1).search(/[?#]/);
+    const pathEnd = queryOrFragment < 0 ? uri.length : schemeEnd + 1 + queryOrFragment;
+    let pathStart = schemeEnd + 1;
+    if (uri.startsWith('//', pathStart)) {
+        const slash = uri.indexOf('/', pathStart + 2);
+        pathStart = slash < 0 || slash > pathEnd ? pathEnd : slash;
+    }
+    const version = VERSION_SUFFIX.exec(uri.slice(pathStart, pathEnd));
+    return version ? uri.slice(0, pathStart + version.index) + uri.slice(pathEnd) : uri;
+}
+/**
+ * Whether two keys of a set are equal as {@link createReferenceKey} gives them; as text, as a
+ * control holds a boolean key as text.
+ */
+function isSameKey(key1, key2, versionedKeys) {
+    return createReferenceKey(key1, versionedKeys) === createReferenceKey(key2, versionedKeys);
 }
 
 /**
@@ -4456,7 +4507,7 @@ class SmartValueSetMemoryStore extends SmartValueSetStore {
             }
             const held = this.viewEntries.get(viewUuid)?.get(key);
             const extras = {
-                extras: addReceivedExtras(held?.extras, valueSet.extraValues),
+                extras: addReceivedExtras(held?.extras, valueSet.extraValues, this.findVersionedKeys(viewUuid, key, valueSet, held)),
                 excludedKeys: valueSet.excludedKeys,
             };
             // A version alone keeps the values held on screen until the fetch brings the new ones.
@@ -4879,6 +4930,18 @@ class SmartValueSetMemoryStore extends SmartValueSetStore {
         });
         changedNames.forEach((name) => this.changeSource.next(name));
     }
+    /**
+     * The Versioned Keys of the view's set of the key: of the values it receives or holds, else of
+     * the explicit set its selection reads; undefined while the client has none of them.
+     */
+    findVersionedKeys(viewUuid, key, valueSet, held) {
+        const selection = this.viewSelections.get(viewUuid)?.get(key);
+        const data = valueSet.valueSetData ??
+            held?.data ??
+            (selection &&
+                this.findExplicitEntry(viewUuid, selection.valueSetNamespace, key)?.data);
+        return data ? !!data.versionedKeys : undefined;
+    }
     mergeViewExtras(data, viewEntry, selection) {
         return viewEntry?.extras?.length || viewEntry?.excludedKeys?.length
             ? mergeExtraValues(data, viewEntry, selection)
@@ -4911,31 +4974,46 @@ class SmartValueSetMemoryStore extends SmartValueSetStore {
         this.changeSource.next(key);
     }
 }
-/** The held extras followed by the received ones of a code not held yet. */
-function addReceivedExtras(held, received) {
-    const heldCodes = new Set((held ?? []).map((extra) => extra.value.code));
+/**
+ * The held extras followed by the received ones of a code not held yet, compared as
+ * {@link createReferenceKey} gives it. While the Versioned Keys of the set are unknown the codes
+ * compare exactly, the merge with the set drops the second version of an object then.
+ */
+function addReceivedExtras(held, received, versionedKeys) {
+    const keepsVersion = versionedKeys !== false;
+    const heldCodes = new Set((held ?? []).map((extra) => createReferenceKey(extra.value.code, keepsVersion)));
     const added = (received ?? [])
-        .filter((value) => !heldCodes.has(value.code))
+        .filter((value) => !heldCodes.has(createReferenceKey(value.code, keepsVersion)))
         .map((value) => ({ value }));
     return [...(held ?? []), ...added];
 }
 /**
- * The set without the values whose text at the set's key property is an excluded key, then the
- * view's extras keyed by their code under the selection's key property, none the set has.
+ * The set without the values whose key at the set's key property is an excluded key, then the
+ * view's extras keyed by their code under the selection's key property, none the set or an extra
+ * before has; the keys compare as {@link createReferenceKey} gives them.
  */
 function mergeExtraValues(data, extras, selection) {
     const values = data.values ?? [];
     const keyProperty = valueSetKeyProperty(values, selection.keyProperty ?? data.keyProperty);
     const displayProperty = valueSetDisplayProperty(values, selection.displayProperty);
-    const excludedKeys = new Set(extras.excludedKeys ?? []);
+    const versionedKeys = data.versionedKeys;
+    const excludedKeys = new Set((extras.excludedKeys ?? []).map((key) => createReferenceKey(key, versionedKeys)));
     const keptValues = values.filter((value) => {
-        const key = data.keyProperty ? value?.[data.keyProperty] : undefined;
-        return key === undefined || key === null || !excludedKeys.has(String(key));
+        const key = data.keyProperty &&
+            findReferenceKey(readValueSetProperty(value, data.keyProperty), versionedKeys);
+        return key === undefined || !excludedKeys.has(key);
     });
-    const keys = new Set(keptValues.map((value) => convertKeyToText(value?.[keyProperty])));
+    const keys = new Set(keptValues.map((value) => findReferenceKey(readValueSetProperty(value, keyProperty), versionedKeys)));
     const extraValues = (extras.extras ?? [])
         .map((extra) => extra.value)
-        .filter((extra) => extra.code !== undefined && !keys.has(extra.code))
+        .filter((extra) => {
+        const key = findReferenceKey(extra.code, versionedKeys);
+        if (key === undefined || keys.has(key)) {
+            return false;
+        }
+        keys.add(key);
+        return true;
+    })
         .map((extra) => {
         const merged = {
             ...extra,
@@ -4953,8 +5031,9 @@ const mergedExtras = new WeakSet();
 function isMergedExtra(value) {
     return typeof value === "object" && value !== null && mergedExtras.has(value);
 }
-function convertKeyToText(key) {
-    return key === undefined || key === null ? undefined : String(key);
+/** The key as {@link createReferenceKey} gives it, undefined for no key. */
+function findReferenceKey(key, versionedKeys) {
+    return key === undefined || key === null ? undefined : createReferenceKey(key, versionedKeys);
 }
 function createExplicitKey(module, namespace, name, branchUri) {
     return JSON.stringify([module ?? "", namespace ?? "", name, branchUri ?? ""]);
@@ -8045,6 +8124,13 @@ class SmartFormService {
          * mutating. See ADR-0007, decision 4.
          */
         this.revision = this.revisionState.asReadonly();
+        this.controlRevisionState = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "controlRevisionState" }] : /* istanbul ignore next */ []));
+        /**
+         * Counts the value changes of the form's controls, which reach the data only at submit. A
+         * widget showing the model as edited (the html widget) reads it to follow the user's edits.
+         */
+        this.controlRevision = this.controlRevisionState.asReadonly();
         this.emptyKey = 'e#m%p@t*y';
         this.group = {};
         /** The previous build's controls during a rebuild: a widget still shown keeps its control. */
@@ -8080,6 +8166,10 @@ class SmartFormService {
     widgetsChanged() {
         this.revisionState.update((revision) => revision + 1);
     }
+    /** Whether the set the selection widget lists has Versioned Keys. */
+    hasVersionedKeys(widget) {
+        return !!this.filledValueSets.get(widget)?.versionedKeys;
+    }
     /** Forgets the agreed values; the form is being rebuilt from the model. */
     resetExchangedValues() {
         this.exchanged.clear();
@@ -8318,8 +8408,9 @@ class SmartFormService {
     }
     /**
      * The values of the set the widget's parent fields admit: each dependency compares the parent
-     * control's value with the value object's property. A parent with no control in the form admits
-     * every value. An extra of the view is listed only while the parents hold the keys of its tag.
+     * control's value with the value object's property, by the Versioned Keys of the widget's set. A
+     * parent with no control in the form admits every value. An extra of the view is listed only
+     * while the parents hold the keys of its tag.
      */
     narrowValueSetData(widget, valueSetData, form) {
         const dependencies = this.getDependencies(widget);
@@ -8327,16 +8418,18 @@ class SmartFormService {
             return valueSetData;
         }
         const keyProperty = this.readKeyProperty(widget, valueSetData);
+        const versionedKeys = valueSetData.versionedKeys;
         const extras = this.viewExtras.get(widget) ?? [];
         const parentKeys = this.readDependencyKeys(widget, form);
         const values = valueSetData.values.filter((value) => {
+            const key = readValueSetProperty(value, keyProperty);
             const sameKeyExtras = isMergedExtra(value)
-                ? extras.filter((extra) => isSameKey(extra.value.code, value[keyProperty]))
+                ? extras.filter((extra) => isSameKey(extra.value.code, key, versionedKeys))
                 : [];
             if (sameKeyExtras.length) {
-                return sameKeyExtras.some((extra) => !!extra.tag && this.isTaggedWith(extra.tag, parentKeys));
+                return sameKeyExtras.some((extra) => !!extra.tag && this.isTaggedWith(extra.tag, parentKeys, versionedKeys));
             }
-            return dependencies.every((dependency) => this.isAdmittedBy(dependency, value, form));
+            return dependencies.every((dependency) => this.isAdmittedBy(dependency, value, form, versionedKeys));
         });
         return { ...valueSetData, values };
     }
@@ -8349,17 +8442,17 @@ class SmartFormService {
                 : this.readParentKeys(dependency.modelPath, control.value);
         });
     }
-    isTaggedWith(tag, parentKeys) {
+    isTaggedWith(tag, parentKeys, versionedKeys) {
         return (tag.length === parentKeys.length &&
             tag.every((keys, index) => keys.length === parentKeys[index].length &&
-                keys.every((key, keyIndex) => isSameKey(key, parentKeys[index][keyIndex]))));
+                keys.every((key, keyIndex) => isSameKey(key, parentKeys[index][keyIndex], versionedKeys))));
     }
-    isAdmittedBy(dependency, value, form) {
+    isAdmittedBy(dependency, value, form, versionedKeys) {
         const control = form.controls[dependency.modelPath];
         if (!control || isEmptyValue(control.value)) {
             return !this.isBlockedByEmptyParent(dependency, form);
         }
-        return this.readParentKeys(dependency.modelPath, control.value).some((key) => isSameKey(key, value[dependency.property]));
+        return this.readParentKeys(dependency.modelPath, control.value).some((key) => isSameKey(key, value[dependency.property], versionedKeys));
     }
     /**
      * The keys a parent field holds: an object value, the whole entry of an OBJECT selection, gives
@@ -8371,7 +8464,7 @@ class SmartFormService {
                 return value;
             }
             const parent = this.findWidgetByKey(modelPath);
-            return value[valueSetKeyProperty([value], parent?.selection?.keyProperty)];
+            return readValueSetProperty(value, valueSetKeyProperty([value], parent?.selection?.keyProperty));
         });
     }
     /**
@@ -8403,7 +8496,7 @@ class SmartFormService {
         }
         const keyProperty = this.readKeyProperty(widget, valueSetData);
         const readKey = this.createKeyReader(widget, valueSetData);
-        const isAdmitted = (item) => valueSetData.values.some((admitted) => isSameKey(admitted[keyProperty], readKey(item)));
+        const isAdmitted = (item) => valueSetData.values.some((admitted) => isSameKey(readValueSetProperty(admitted, keyProperty), readKey(item), valueSetData.versionedKeys));
         if (Array.isArray(value)) {
             return value.filter(isAdmitted);
         }
@@ -8413,7 +8506,7 @@ class SmartFormService {
     createKeyReader(widget, valueSetData) {
         const keyProperty = this.readKeyProperty(widget, valueSetData);
         return (item) => widget.selection.type === SelectionDefinitionTypeEnum.OBJECT
-            ? item?.[keyProperty]
+            ? readValueSetProperty(item, keyProperty)
             : item;
     }
     readKeyProperty(widget, valueSetData) {
@@ -8445,11 +8538,12 @@ class SmartFormService {
             !selection.mapping?.length) {
             let keyProperty = valueSetKeyProperty(values, selection.keyProperty ?? valueSetData?.keyProperty);
             select.valueList = values.map((value) => {
+                const key = readValueSetProperty(value, keyProperty);
                 return {
-                    key: value[keyProperty],
-                    label: value[displayProperty],
+                    key,
+                    label: readValueSetProperty(value, displayProperty),
                     type: SmartFormWidgetType.ITEM,
-                    value: value[keyProperty],
+                    value: key,
                 };
             });
             if (!isRequired(select)) {
@@ -8461,7 +8555,7 @@ class SmartFormService {
             select.valueList = values.map((value, index) => {
                 return {
                     key: `${index}`,
-                    label: value[displayProperty],
+                    label: readValueSetProperty(value, displayProperty),
                     type: SmartFormWidgetType.ITEM,
                     value: value,
                 };
@@ -8493,6 +8587,8 @@ class SmartFormService {
         }
         else {
             this.formGroup = new UntypedFormGroup(this.group);
+            // The group lives as long as this service: a rebuild reuses it, so one subscription holds.
+            this.formGroup.valueChanges.subscribe(() => this.controlRevisionState.update((revision) => revision + 1));
         }
         if (this.smartForm.validators && this.smartForm.validators.length) {
             this.formGroup.setValidators(this.smartForm.validators.map((validator) => {
@@ -8638,24 +8734,40 @@ class SmartFormService {
             this.copyValueFromFormToWidgetBeans(this.smartForm.widgets, group);
             const data = this.smartForm.componentModel?.data;
             if (data) {
-                for (const key of this.getPropertyNamesDeeply(data)) {
-                    if (!group.controls[key]) {
-                        continue;
-                    }
-                    const agreed = this.exchanged.has(key)
-                        ? this.exchanged.get(key)
-                        : this.getValueDeeply(data, key);
-                    const value = coerceToTypeOf(agreed, group.controls[key].value);
-                    if (this.exchanged.has(key) && deepEqual(value, agreed)) {
-                        continue;
-                    }
-                    this.setValueDeeply(data, key, value);
-                    this.exchanged.set(key, structuredClone(this.getValueDeeply(data, key)));
-                }
+                this.copyControlsIntoData(data, group, this.exchanged);
             }
         }
         return this.smartForm;
     }
+    /**
+     * The form's data with the controls' edits applied as the next submit would copy them (a
+     * MATRIX widget excepted: its submit changes the data through the widget beans). The result is
+     * read-only: it is a copy, but the live data itself when the form has no controls; undefined
+     * without a data.
+     */
+    buildModelWithEdits() {
+        const data = this.smartForm?.componentModel?.data;
+        if (!data || !this.formGroup) {
+            return data;
+        }
+        const model = structuredClone(data);
+        this.copyControlsIntoData(model, this.formGroup, new Map(this.exchanged));
+        return model;
+    }
+    copyControlsIntoData(data, group, exchanged) {
+        for (const key of this.getPropertyNamesDeeply(data)) {
+            if (!group.controls[key]) {
+                continue;
+            }
+            const agreed = exchanged.has(key) ? exchanged.get(key) : this.getValueDeeply(data, key);
+            const value = coerceToTypeOf(agreed, group.controls[key].value);
+            if (exchanged.has(key) && deepEqual(value, agreed)) {
+                continue;
+            }
+            this.setValueDeeply(data, key, value);
+            exchanged.set(key, structuredClone(this.getValueDeeply(data, key)));
+        }
+    }
     getModel(group) {
         if (!this.smartForm?.componentModel) {
             return {};
@@ -9075,11 +9187,11 @@ class SmartfileuploaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n              >add_circle</mat-icon\n            >\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n              >add_circle</mat-icon\n            >\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n              >add_circle</mat-icon\n            >\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n>\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n    />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon fontSet=\"material-symbols-outlined\" color=\"primary\" class=\"addCircle\"\n              >add_circle</mat-icon\n            >\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warn-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warn-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -9620,6 +9732,7 @@ class SmartFileEditorComponent {
         // ---- ControlValueAccessor implementation ----
         this.onChange = (value) => { };
         this.onTouched = () => { };
+        /** The editor's disabled state: the widget's at creation, then the form control's. */
         this.isDisabled = false;
     }
     get widgetInstance() {
@@ -9635,6 +9748,7 @@ class SmartFileEditorComponent {
             typeof structuredClone === 'function'
                 ? structuredClone(value)
                 : JSON.parse(JSON.stringify(value));
+        this.isDisabled = !!value.isDisabled;
         if (!this._widgetInstance.fileUploaderProperties?.undoIcon) {
             this._widgetInstance.fileUploaderProperties = {
                 ...(this._widgetInstance.fileUploaderProperties ?? {}),
@@ -9658,6 +9772,17 @@ class SmartFileEditorComponent {
         });
         this.onChange(this._widgetInstance.value);
         this.fileToChange = undefined;
+        this.clearedFile = undefined;
+    }
+    clear() {
+        this.clearedFile = this._widgetInstance.value;
+        this._widgetInstance.value = null;
+        this.onChange(null);
+    }
+    undoClear() {
+        this._widgetInstance.value = this.clearedFile;
+        this.onChange(this.clearedFile);
+        this.clearedFile = undefined;
     }
     change(file) {
         this.fileToChange = file;
@@ -9701,6 +9826,10 @@ class SmartFileEditorComponent {
     writeValue(value) {
         if (value !== undefined && this._widgetInstance) {
             this._widgetInstance.value = value;
+            // A file written over a clear makes the undo obsolete; a written null or '' is the clear itself.
+            if (value) {
+                this.clearedFile = undefined;
+            }
             this.cdr.markForCheck();
         }
     }
@@ -9712,8 +9841,17 @@ class SmartFileEditorComponent {
     }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
+        // A disable ends the editing (Save or Discard), so a clear is no longer undoable.
+        if (isDisabled) {
+            this.clearedFile = undefined;
+        }
+        this.cdr.markForCheck();
     }
     // ---- UI getters ----
+    /** An absent clearEnabled offers the clear, as its default in the form definition. */
+    get isClearEnabled() {
+        return this._widgetInstance.fileUploaderProperties?.clearEnabled !== false;
+    }
     get fileIcon() {
         return 'insert_drive_file';
     }
@@ -9730,6 +9868,17 @@ class SmartFileEditorComponent {
         };
         return changeDescriptor;
     }
+    /** The delete icon's own descriptor: nothing of the change or upload action, so no tooltip. */
+    get deleteButton() {
+        var changeButton = this.changeButton;
+        return {
+            title: '',
+            color: 'warn',
+            type: changeButton.type,
+            icon: 'delete',
+            iconPosition: changeButton.iconPosition,
+        };
+    }
     get removeButton() {
         var changeButton = this.changeButton;
         return {
@@ -9750,7 +9899,7 @@ class SmartFileEditorComponent {
                 useExisting: forwardRef(() => SmartFileEditorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"widgetInstance.isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"widgetInstance.isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
             type: Component,
@@ -9760,7 +9909,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => SmartFileEditorComponent),
                             multi: true,
                         },
-                    ], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"widgetInstance.isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"widgetInstance.isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"] }]
+                    ], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
             }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
@@ -10607,9 +10756,10 @@ function injectSmartHtmlRenderer(container) {
 
 /**
  * The HTML widget: server-sent HTML whose client placeholders are resolved against the model of
- * the form it sits on, the widget's `root` applied. It has no control, no label and no value of
- * its own; it follows the form's revision and the value sets it reads and re-resolves, which
- * rewrites the html only when the result differs. See HTML-WIDGET.md.
+ * the form it sits on, its controls' unsubmitted edits included, the widget's `root` applied. It
+ * has no control, no label and no value of its own; it follows the form's revision, every edit of
+ * a control and the value sets it reads and re-resolves, which rewrites the html only when the
+ * result differs. See HTML-WIDGET.md.
  */
 class SmartHtmlWidgetComponent {
     constructor() {
@@ -10622,13 +10772,14 @@ class SmartHtmlWidgetComponent {
         ...(ngDevMode ? [{ debugName: "widgetInstance" }] : /* istanbul ignore next */ []));
         effect(() => {
             this.service.revision();
+            this.service.controlRevision();
             this.valueSetReads.changed();
             const properties = this.widgetInstance().htmlProperties;
             const model = this.service.smartForm?.componentModel;
             this.warnUnloaded(properties);
             this.renderer.useCss(properties?.css);
             this.renderer.render(properties?.html ?? '', {
-                data: this.scope(model?.data, properties?.root, properties?.html),
+                data: this.scope(this.service.buildModelWithEdits(), properties?.root, properties?.html),
                 findValueSetData: this.valueSetReads.track(createValueSetLookup(model?.valueSets, this.valueSetStore, this.smartComponent?.uuid)),
                 icons: properties?.icons,
             });
@@ -10672,6 +10823,7 @@ class SmartMultiFileEditorComponent {
         // ---- ControlValueAccessor implementation ----
         this.onChange = (value) => { };
         this.onTouched = () => { };
+        /** The editor's disabled state: the widget's at creation, then the form control's. */
         this.isDisabled = false;
     }
     get widgetInstance() {
@@ -10687,6 +10839,7 @@ class SmartMultiFileEditorComponent {
             typeof structuredClone === 'function'
                 ? structuredClone(value)
                 : JSON.parse(JSON.stringify(value));
+        this.isDisabled = !!value.isDisabled;
         this.cdr.markForCheck();
     }
     upload(event) {
@@ -10773,6 +10926,7 @@ class SmartMultiFileEditorComponent {
     }
     setDisabledState(isDisabled) {
         this.isDisabled = isDisabled;
+        this.cdr.markForCheck();
     }
     // ---- UI getters ----
     get removeIcon() {
@@ -10791,7 +10945,7 @@ class SmartMultiFileEditorComponent {
                 useExisting: forwardRef(() => SmartMultiFileEditorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"widgetInstance.isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"!isDisabled && file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon *{opacity:.4!important;pointer-events:none!important}:host ::ng-deep .disabledWidget ::ng-deep .changeButton:hover,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon:hover{cursor:not-allowed}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
+        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMultiFileEditorComponent, decorators: [{
             type: Component,
@@ -10801,7 +10955,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => SmartMultiFileEditorComponent),
                             multi: true,
                         },
-                    ], imports: [NgClass, NgStyle, UiActionToolbarComponent, SmartIconComponent, UploadWidgetComponent], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"widgetInstance.isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"!isDisabled && file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon *{opacity:.4!important;pointer-events:none!important}:host ::ng-deep .disabledWidget ::ng-deep .changeButton:hover,:host ::ng-deep .disabledWidget ::ng-deep .removeIcon:hover{cursor:not-allowed}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
+                    ], imports: [NgClass, NgStyle, UiActionToolbarComponent, SmartIconComponent, UploadWidgetComponent], template: "@if (widgetInstance && widgetInstance.multiFileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.multiFileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"true\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"scrollable\">\n        @for (file of widgetInstance.value; track file; let i = $index) {\n          <div class=\"uploadedFile\">\n            <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n            <div class=\"fileData\">\n              <div class=\"fileDataContainer\">\n                <span class=\"fileName\">{{ file?.fileName }}</span>\n                <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(file?.size)) }}</span>\n              </div>\n            </div>\n            <div class=\"fileActions\">\n              <!--\n                One toolbar per file, each resolving the widget's actions for itself and\n                carrying its own file. The hidden sibling whose list these used to read is\n                gone with the collection machinery (ADR-0006).\n              -->\n              <smart-ui-action-toolbar\n                [id]=\"widgetInstance.toolbarId\"\n                [actionParams]=\"{ _dataUri: file.dataUri }\"\n              ></smart-ui-action-toolbar>\n              <smart-icon\n                class=\"downloadIcon\"\n                icon=\"download\"\n                (click)=\"downloadFile(file.dataUri)\"\n              ></smart-icon>\n              @if (!file.readOnly && !isDisabled) {\n                <smart-icon\n                  class=\"removeIcon\"\n                  [icon]=\"removeIcon\"\n                  (click)=\"file.readOnly === false && deleteFile(file.dataUri)\"\n                ></smart-icon>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius);overflow:hidden}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column;border-top:1px solid #e0e0e0}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.scrollable{max-height:30vh;overflow-y:auto}.scrollable>div:not(:last-child){border-bottom:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 6px,#f1f1f1 6px 12px)}\n"] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
             }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }], fileEvent: [{ type: i0.Output, args: ["fileEvent"] }] } });
@@ -11190,6 +11344,16 @@ class SmartformwidgetComponent {
         this.addOnBlur = true;
         this.separatorKeysCodes = [ENTER, COMMA];
         this.emptySeparatorKeysCodes = [];
+        /**
+         * The mat-select comparison of the widget's keys, by the Versioned Keys of its set. An arrow
+         * property, as the template hands it to mat-select unbound.
+         */
+        this.compareItems = (o1, o2) => {
+            const versionedKeys = this.service.hasVersionedKeys(this.widgetInstance);
+            const v1 = o1 && typeof o1 === 'string' ? createReferenceKey(o1, versionedKeys) : o1;
+            const v2 = o2 && typeof o2 === 'string' ? createReferenceKey(o2, versionedKeys) : o2;
+            return deepEqual(v1, v2);
+        };
         // The form changes the widget objects it has already handed to this template — values,
         // constraints, the touched state of the controls — and a mutation of a plain object is
         // invisible to change detection. Registering here rather than being found by a view query
@@ -12036,19 +12200,6 @@ class SmartformwidgetComponent {
         }
         this.setDateFormControl(control, yearMonthValue, '00:00');
     }
-    compareItems(o1, o2) {
-        function convert(obj) {
-            if (obj && typeof obj === 'string') {
-                return obj.replace(/\.v[0-9]+$/, '');
-            }
-            return obj;
-        }
-        // calling this.truncateUri didn't work
-        // TODO: use widget.selection.parameter for ignoreUriVersion / strictUriComparison;
-        let v1 = convert(o1);
-        let v2 = convert(o2);
-        return deepEqual(v1, v2);
-    }
     truncateUri(uri) {
         if (uri && typeof uri === 'string') {
             return uri.replace(/\.v[0-9]+$/, '');