@smartbit4all/ng-client 7.3.50 → 7.3.52

package/MIGRATION-7.0.md

@@ -2265,6 +2265,12 @@ font in parallel with the application, and a production build inlines the styles
   in p009) has its pair in the `material-symbols` package: `@import
   'material-symbols/outlined.css';`. Set `iconFont: false` next to it: a stylesheet that loads
   after the application started is not seen, and the library would reach for Google.
+- **The small self-hosted font** is `@fontsource/material-symbols-outlined/400.css` (≈320 KB,
+  where `material-symbols` brings the full 4 MB range). It declares the font face only, so the
+  `.material-symbols-outlined` class has to stand next to the import. The playground's
+  `offline` configuration (`npm run startPlaygroundOffline`,
+  `projects/app-playground/src/css/offline-fonts.css`) is the working example: with it no
+  request leaves for Google Fonts.
 - **A Content Security Policy** has to allow the stylesheet and the font
   (`style-src https://fonts.googleapis.com`, `font-src https://fonts.gstatic.com`) whichever
   side links them.

package/README.md

@@ -137,6 +137,15 @@ this.viewContext.setActionDescriptors(ACTION_DESCRIPTORS);
 this.viewContext.commonFeedbackText = 'Done.';
 ```
 
+When the validation of a submitting action (`submit`) fails, a snackbar names the problem. Its text
+is `descriptor.invalidFieldsText` of the action (set by the backend), else
+`viewContext.commonInvalidFieldsText`, else "Hiányos vagy hibás adatok!". `{fields}` in the text is
+replaced by the names of the invalid fields, comma separated:
+
+```ts
+this.viewContext.commonInvalidFieldsText = 'Hiányos vagy hibás adatok: {fields}';
+```
+
 A toolbar renders the actions **addressed to its `id`** (`uiAction.toolbar == id`), pulling
 them from the screen component above it; an explicit `[uiActionModels]` binding wins. Without
 an `id` and without a binding it shows nothing.

package/fesm2022/smartbit4all-ng-client.mjs

@@ -5267,6 +5267,9 @@ class UiActionDescriptorService {
         if (server.feedbackText) {
             client.feedbackText = server.feedbackText;
         }
+        if (server.invalidFieldsText) {
+            client.invalidFieldsText = server.invalidFieldsText;
+        }
     }
     // TODO use prop name to handle all dialogs
     // private mergeActionDescriptorDialog(
@@ -5449,18 +5452,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ selector: "app-success-snack-bar", template: "<span class=\"successSnakBarContainer\" matSnackBarLabel> {{ text }} </span>\n", styles: ["::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.successSnakBarContainer{color:#fff}\n"] }]
         }], ctorParameters: () => [] });
 
+/** Shown when neither the action's descriptor nor the view context gives a text. */
+const DEFAULT_INVALID_FIELDS_TEXT = 'Hiányos vagy hibás adatok!';
+/** Replaced by the names of the invalid fields in the text the backend sends. */
+const INVALID_FIELDS_PLACEHOLDER = '{fields}';
+/**
+ * The text of the invalid fields snackbar.
+ *
+ * `{fields}` in the template becomes the names of the invalid fields (each once, comma
+ * separated). When there is no name to put in, the placeholder goes away together with the
+ * separator before it, so "Hibás adatok: {fields}" turns into "Hibás adatok". A template without
+ * the placeholder is shown as it is; no template gives the default text.
+ */
+function resolveInvalidFieldsText(template, invalidFieldNames) {
+    if (!template?.trim()) {
+        return DEFAULT_INVALID_FIELDS_TEXT;
+    }
+    const names = [...new Set((invalidFieldNames ?? []).map((name) => name?.trim()).filter(Boolean))];
+    const text = names.length
+        ? template.split(INVALID_FIELDS_PLACEHOLDER).join(names.join(', '))
+        : template.replace(/[\s:;,\-–]*\{fields\}/g, '');
+    return text.trim() || DEFAULT_INVALID_FIELDS_TEXT;
+}
+
 class InvalidFieldsSnackBarComponent {
     constructor() {
         this.data = inject(MAT_SNACK_BAR_DATA);
+        this.viewContext = inject(SmartViewContextService);
+        this.manager = inject(UiActionDescriptorService);
+        const descriptorText = this.data.uiAction
+            ? this.manager.getActionDescriptor(this.data.uiAction).invalidFieldsText
+            : undefined;
+        this.text = resolveInvalidFieldsText(descriptorText ?? this.viewContext.commonInvalidFieldsText, this.data.invalidFieldNames);
     }
-    ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InvalidFieldsSnackBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: InvalidFieldsSnackBarComponent, isStandalone: true, selector: "app-invalid-fields-snack-bar", ngImport: i0, template: "<div class=\"invalidFieldsSnackBar\">\n  <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\n    <span class=\"successSnakBarContainer\" matSnackBarLabel>\n      {{ data.message }}\n    </span>\n  </div> -->\n  <div class=\"invalidFieldsSnackBarContainer\">\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\n  </div>\n</div>\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"], dependencies: [{ kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: InvalidFieldsSnackBarComponent, isStandalone: true, selector: "app-invalid-fields-snack-bar", ngImport: i0, template: "<div class=\"invalidFieldsSnackBar\">\n  <div class=\"invalidFieldsSnackBarContainer\">\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> {{ text }} </span>\n  </div>\n</div>\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"], dependencies: [{ kind: "directive", type: MatSnackBarLabel, selector: "[matSnackBarLabel]" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: InvalidFieldsSnackBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-invalid-fields-snack-bar', imports: [MatSnackBarLabel], template: "<div class=\"invalidFieldsSnackBar\">\n  <!-- <div class=\"invalidFieldsSnackBarContainer\" *ngIf=\"data.message\">\n    <span class=\"successSnakBarContainer\" matSnackBarLabel>\n      {{ data.message }}\n    </span>\n  </div> -->\n  <div class=\"invalidFieldsSnackBarContainer\">\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> Hi\u00E1nyos vagy hib\u00E1s adatok! </span>\n  </div>\n</div>\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"] }]
-        }] });
+            args: [{ selector: 'app-invalid-fields-snack-bar', imports: [MatSnackBarLabel], template: "<div class=\"invalidFieldsSnackBar\">\n  <div class=\"invalidFieldsSnackBarContainer\">\n    <span class=\"invalidFieldsMessage\" matSnackBarLabel> {{ text }} </span>\n  </div>\n</div>\n", styles: [".invalidFieldsSnackBar ::ng-deep .mat-mdc-snack-bar-container{text-align:center;border-radius:2rem}.invalidFieldsMessage{color:#fff}\n"] }]
+        }], ctorParameters: () => [] });
 
 /**
  * Tokens for the three ui-action dialog services.
@@ -5535,7 +5566,7 @@ class UiActionService {
                 };
             }
             if (invalidFields.invalidFieldKeys.length) {
-                this.showInvalidFieldsSnackbar(invalidFields);
+                this.showInvalidFieldsSnackbar(invalidFields, uiAction);
                 return;
             }
         }
@@ -5673,11 +5704,16 @@ class UiActionService {
             data: uiAction,
         });
     }
-    showInvalidFieldsSnackbar(invalidFields) {
+    /**
+     * @param uiAction the submitting action: its descriptor may carry the text of the snackbar
+     * (`invalidFieldsText`). Without it the default text is shown.
+     */
+    showInvalidFieldsSnackbar(invalidFields, uiAction) {
+        const data = { ...invalidFields, uiAction };
         this._snackBar.openFromComponent(InvalidFieldsSnackBarComponent, {
             duration: 5 * 1000,
             panelClass: ['backgroundColor-warn'],
-            data: invalidFields,
+            data,
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -13272,7 +13308,9 @@ class SmartformwidgetComponent {
     }
     executeUiAction(uiAction) {
         let type = this.widgetInstance.type;
-        if (type !== SmartFormWidgetType.MULTI_FILE_UPLOADER && type !== SmartFormWidgetType.DIV) {
+        if (type !== SmartFormWidgetType.FILE_UPLOADER &&
+            type !== SmartFormWidgetType.MULTI_FILE_UPLOADER &&
+            type !== SmartFormWidgetType.DIV) {
             return;
         }
         this.smartComponent.executeUiAction(uiAction);