@smartbit4all/ng-client 7.3.42 → 7.3.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartbit4all/ng-client",
-  "version": "7.3.42",
+  "version": "7.3.44",
   "description": "Angular client library for the smartbit4all platform — a server-driven UI framework that renders views, pages, forms, grids, trees and dialogs from backend (ViewApi/PageApi) definitions. Provides reactive view-context state management, dynamic component layouts and OpenAPI-generated BFF clients.",
   "sideEffects": false,
   "peerDependencies": {

package/src/styles/_ng-client-styles.scss

@@ -1,188 +1,188 @@
-@use 'sass:map';
-
-$default-colors: (
-  primary: #4763ff,
-  secondary: #a6aabd60,
-  accent: #20b6a8,
-  warn: #d51d1d,
-  success: #16a34a,
-  accent-grey: #6b7280,
-  text: #132033,
-  text-inverted: #ffffff,
-  text-muted: #68778e,
-) !default;
-
-// Text color on the raised variant. A color missing from this map gets white.
-$default-text-colors: (
-  primary: var(--text-inverted-color),
-) !default;
-
-$default-tokens: (
-  // Backgrounds
-  color-bg: #ffffff,
-  color-surface: #f6f8fb,
-  color-surface-alt: #f9fbff,
-
-  // Borders
-  color-border: #e4eaf2,
-
-  // Tree
-  tree-active-background: var(--accent-color),
-  // Semantic
-  color-danger: var(--warn-color),
-  // UI chrome
-  color-chip: #e8f4fd,
-  color-input: #ffffff,
-
-  // Shadows
-  shadow-strong: 0 18px 50px rgba(1, 132, 228, 0.1),
-  shadow-soft: 0 8px 22px rgba(1, 132, 228, 0.07),
-  border-radius: 0.5rem,
-  default-padding: 0.5rem
-) !default;
-
-@function -text-color($text-colors, $name) {
-  $value: map.get($text-colors, $name);
-  @if $value {
-    @return $value;
-  }
-  @return var(--text-color);
-}
-
-// Emits CSS variables only, so the project chooses the selector.
-// Usage: body { @include sb.tokens($colors, $text-colors, $overrides); }
-@mixin tokens($colors: (), $text-colors: (), $overrides: ()) {
-  $all-colors: map.merge($default-colors, $colors);
-  $all-text-colors: map.merge($default-text-colors, $text-colors);
-  $all-tokens: map.merge($default-tokens, $overrides);
-
-  // One --<name>-color and one --<name>-text-color for every color
-  @each $name, $color in $all-colors {
-    --#{$name}-color: #{$color};
-    --#{$name}-text-color: #{-text-color($all-text-colors, $name)};
-  }
-
-  @each $name, $value in $all-tokens {
-    @if $name == font-family {
-      font-family: #{$value} !important;
-    } @else {
-      --#{$name}: #{$value};
-    }
-  }
-}
-
-//   @use '@smartbit4all/ng-client/styles' as sb;
-//   @include sb.buttons;
-//   @include sb.buttons((new-color: #ff5500), (new-color: white));
-@mixin buttons($colors: (), $text-colors: ()) {
-  $all-colors: map.merge($default-colors, $colors);
-  $all-text-colors: map.merge($default-text-colors, $text-colors);
-
-  @each $name, $color in $all-colors {
-    $text: -text-color($all-text-colors, $name);
-    $color: var(--#{$name}-color, #{$color});
-
-    .sb4-raised.sb4-#{$name} {
-      background-color: #{$color} !important;
-      color: #{$text} !important;
-      stroke: #{$text} !important;
-      border: none;
-    }
-
-    .sb4-raised.sb4-#{$name}:hover {
-      background-color: rgb(from #{$color} r g b / 0.8);
-    }
-
-    .sb4-raised.sb4-#{$name} .mdc-button__label {
-      color: #{$text};
-    }
-
-    .sb4-normal.sb4-#{$name} {
-      background-color: transparent;
-      border: 1px solid #{$color};
-      color: #{$color} !important;
-      stroke: #{$color};
-      box-shadow: none;
-    }
-
-    .sb4-flat.sb4-#{$name} {
-      background-color: transparent;
-      border: 1px solid transparent;
-      color: #{$color} !important;
-      stroke: #{$color};
-      box-shadow: none;
-    }
-
-    .sb4-flat.sb4-#{$name}.sb4-view-activated {
-      --sb4-view-activated-bg: transparent !important;
-      --sb4-view-activated-color: #{$color} !important;
-      border-bottom: 1px solid #{$color} !important;
-      border-bottom-right-radius: unset !important;
-      border-bottom-left-radius: unset !important;
-
-      .mat-icon {
-        color: #{$color} !important;
-        fill: #{$color} !important;
-        stroke: #{$color} !important;
-      }
-    }
-
-    .sb4-minifab.sb4-#{$name} {
-      background-color: transparent;
-      border: 1px solid #{$color};
-      color: #{$color};
-      box-shadow: none;
-    }
-
-    .sb4-icon.sb4-#{$name} {
-      background-color: transparent;
-      border: 1px solid transparent;
-      color: #{$color};
-      box-shadow: none;
-    }
-
-    .sb4-minifab.sb4-#{$name}:hover,
-    .sb4-normal.sb4-#{$name}:hover {
-      background-color: rgb(from #{$color} r g b / 0.1);
-      border-color: #{$color};
-    }
-
-    .sb4-flat.sb4-#{$name}:hover {
-      background-color: rgb(from #{$color} r g b / 0.1);
-    }
-
-    .sb4-minifab.sb4-#{$name}:focus,
-    .sb4-minifab.sb4-#{$name}:hover {
-      box-shadow: none;
-    }
-
-    .sb4-minifab.sb4-#{$name},
-    .sb4-normal.sb4-#{$name},
-    .sb4-flat.sb4-#{$name} {
-      .mdc-button__label {
-        color: #{$color};
-      }
-    }
-
-    .sb4-raised.sb4-#{$name} mat-icon,
-    .sb4-raised.sb4-#{$name} .mat-icon,
-    .sb4-raised.sb4-#{$name} .pi {
-      color: #{$text} !important;
-      fill: #{$text} !important;
-      stroke: #{$text} !important;
-    }
-
-    .sb4-icon.sb4-#{$name},
-    .sb4-minifab.sb4-#{$name},
-    .sb4-normal.sb4-#{$name},
-    .sb4-flat.sb4-#{$name} {
-      mat-icon,
-      .mat-icon,
-      .pi {
-        color: #{$color} !important;
-        fill: #{$color} !important;
-        stroke: #{$color} !important;
-      }
-    }
-  }
-}
+@use 'sass:map';
+
+$default-colors: (
+  primary: #4763ff,
+  secondary: #a6aabd60,
+  accent: #20b6a8,
+  warn: #d51d1d,
+  success: #16a34a,
+  accent-grey: #6b7280,
+  text: #132033,
+  text-inverted: #ffffff,
+  text-muted: #68778e,
+) !default;
+
+// Text color on the raised variant. A color missing from this map gets white.
+$default-text-colors: (
+  primary: var(--text-inverted-color),
+) !default;
+
+$default-tokens: (
+  // Backgrounds
+  color-bg: #ffffff,
+  color-surface: #f6f8fb,
+  color-surface-alt: #f9fbff,
+
+  // Borders
+  color-border: #e4eaf2,
+
+  // Tree
+  tree-active-background: var(--accent-color),
+  // Semantic
+  color-danger: var(--warn-color),
+  // UI chrome
+  color-chip: #e8f4fd,
+  color-input: #ffffff,
+
+  // Shadows
+  shadow-strong: 0 18px 50px rgba(1, 132, 228, 0.1),
+  shadow-soft: 0 8px 22px rgba(1, 132, 228, 0.07),
+  border-radius: 0.5rem,
+  default-padding: 0.5rem
+) !default;
+
+@function -text-color($text-colors, $name) {
+  $value: map.get($text-colors, $name);
+  @if $value {
+    @return $value;
+  }
+  @return var(--text-color);
+}
+
+// Emits CSS variables only, so the project chooses the selector.
+// Usage: body { @include sb.tokens($colors, $text-colors, $overrides); }
+@mixin tokens($colors: (), $text-colors: (), $overrides: ()) {
+  $all-colors: map.merge($default-colors, $colors);
+  $all-text-colors: map.merge($default-text-colors, $text-colors);
+  $all-tokens: map.merge($default-tokens, $overrides);
+
+  // One --<name>-color and one --<name>-text-color for every color
+  @each $name, $color in $all-colors {
+    --#{$name}-color: #{$color};
+    --#{$name}-text-color: #{-text-color($all-text-colors, $name)};
+  }
+
+  @each $name, $value in $all-tokens {
+    @if $name == font-family {
+      font-family: #{$value} !important;
+    } @else {
+      --#{$name}: #{$value};
+    }
+  }
+}
+
+//   @use '@smartbit4all/ng-client/styles' as sb;
+//   @include sb.buttons;
+//   @include sb.buttons((new-color: #ff5500), (new-color: white));
+@mixin buttons($colors: (), $text-colors: ()) {
+  $all-colors: map.merge($default-colors, $colors);
+  $all-text-colors: map.merge($default-text-colors, $text-colors);
+
+  @each $name, $color in $all-colors {
+    $text: -text-color($all-text-colors, $name);
+    $color: var(--#{$name}-color, #{$color});
+
+    .sb4-raised.sb4-#{$name} {
+      background-color: #{$color} !important;
+      color: #{$text} !important;
+      stroke: #{$text} !important;
+      border: none;
+    }
+
+    .sb4-raised.sb4-#{$name}:hover {
+      background-color: rgb(from #{$color} r g b / 0.8);
+    }
+
+    .sb4-raised.sb4-#{$name} .mdc-button__label {
+      color: #{$text};
+    }
+
+    .sb4-normal.sb4-#{$name} {
+      background-color: transparent;
+      border: 1px solid #{$color};
+      color: #{$color} !important;
+      stroke: #{$color};
+      box-shadow: none;
+    }
+
+    .sb4-flat.sb4-#{$name} {
+      background-color: transparent;
+      border: 1px solid transparent;
+      color: #{$color} !important;
+      stroke: #{$color};
+      box-shadow: none;
+    }
+
+    .sb4-flat.sb4-#{$name}.sb4-view-activated {
+      --sb4-view-activated-bg: transparent !important;
+      --sb4-view-activated-color: #{$color} !important;
+      border-bottom: 1px solid #{$color} !important;
+      border-bottom-right-radius: unset !important;
+      border-bottom-left-radius: unset !important;
+
+      .mat-icon {
+        color: #{$color} !important;
+        fill: #{$color} !important;
+        stroke: #{$color} !important;
+      }
+    }
+
+    .sb4-minifab.sb4-#{$name} {
+      background-color: transparent;
+      border: 1px solid #{$color};
+      color: #{$color};
+      box-shadow: none;
+    }
+
+    .sb4-icon.sb4-#{$name} {
+      background-color: transparent;
+      border: 1px solid transparent;
+      color: #{$color};
+      box-shadow: none;
+    }
+
+    .sb4-minifab.sb4-#{$name}:hover,
+    .sb4-normal.sb4-#{$name}:hover {
+      background-color: rgb(from #{$color} r g b / 0.1);
+      border-color: #{$color};
+    }
+
+    .sb4-flat.sb4-#{$name}:hover {
+      background-color: rgb(from #{$color} r g b / 0.1);
+    }
+
+    .sb4-minifab.sb4-#{$name}:focus,
+    .sb4-minifab.sb4-#{$name}:hover {
+      box-shadow: none;
+    }
+
+    .sb4-minifab.sb4-#{$name},
+    .sb4-normal.sb4-#{$name},
+    .sb4-flat.sb4-#{$name} {
+      .mdc-button__label {
+        color: #{$color};
+      }
+    }
+
+    .sb4-raised.sb4-#{$name} mat-icon,
+    .sb4-raised.sb4-#{$name} .mat-icon,
+    .sb4-raised.sb4-#{$name} .pi {
+      color: #{$text} !important;
+      fill: #{$text} !important;
+      stroke: #{$text} !important;
+    }
+
+    .sb4-icon.sb4-#{$name},
+    .sb4-minifab.sb4-#{$name},
+    .sb4-normal.sb4-#{$name},
+    .sb4-flat.sb4-#{$name} {
+      mat-icon,
+      .mat-icon,
+      .pi {
+        color: #{$color} !important;
+        fill: #{$color} !important;
+        stroke: #{$color} !important;
+      }
+    }
+  }
+}

package/types/smartbit4all-ng-client.d.ts

@@ -2141,13 +2141,7 @@ interface FileUploaderProperties {
      * Where the widget takes a file from: the file picker, the device camera for a photo or a video, the microphone. Without FILE the widget is capture-only and uploads a capture at once.
      */
     sources?: Array<FileUploaderSource>;
-    /**
-     * Whether the widget shows the stored file itself (image, video player, audio player) on the card.
-     */
     thumbnail?: FileUploaderThumbnail;
-    /**
-     * The widget\'s Capture Settings; absent = the defaults.
-     */
     capture?: CaptureProperties;
 }
 
@@ -2232,13 +2226,7 @@ interface MultiFileUploaderProperties {
      * Where the widget takes a file from: the file picker, the device camera for a photo or a video, the microphone. Without FILE the widget is capture-only and uploads a capture at once.
      */
     sources?: Array<FileUploaderSource>;
-    /**
-     * Whether the widget shows the stored file itself (image, video player, audio player) on the card.
-     */
     thumbnail?: FileUploaderThumbnail;
-    /**
-     * The widget\'s Capture Settings; absent = the defaults.
-     */
     capture?: CaptureProperties;
 }
 
@@ -2254,7 +2242,7 @@ interface MultiFileUploaderProperties {
  * Do not edit the class manually.
  */
 /**
- * When a multi-select lists a select-all box atop its panel: never, only along with the filter input (from the filter's minimum count of options on), or always.
+ * When a multi-select lists a select-all box atop its panel: never, only along with the filter input (from the filter\'s minimum count of options on), or always.
  */
 declare enum SelectAllMode {
     NONE = "NONE",
@@ -2315,6 +2303,9 @@ interface PropertyMapping {
  * Do not edit the class manually.
  */
 
+/**
+ * Properties of the deprecated recording uploader; use a file widget with sources [MICROPHONE].
+ */
 interface RecordingUploaderProperties {
     uploadAction?: UiAction;
     openDirection?: RecordingUploaderPropertiesOpenDirectionEnum;
@@ -5808,6 +5799,10 @@ interface UploadedFile {
     filename?: string;
     size?: number;
     data?: BinaryData;
+    /**
+     * The type the client declared for the file; absent when it declared none. Untrusted: it only picks between the mime types of an ambiguous extension.
+     */
+    contentType?: string;
 }
 
 /**
@@ -7804,6 +7799,9 @@ declare enum GridColumnContentType {
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
+/**
+ * A button in the header of a TREE_GRID: expand every row, expand or collapse one more level, or collapse every row.
+ */
 declare enum TreeGridControl {
     EXPAND_ALL = "EXPAND_ALL",
     EXPAND_LEVEL = "EXPAND_LEVEL",
@@ -8329,7 +8327,7 @@ declare enum GridSelectionType {
  * Do not edit the class manually.
  */
 /**
- * The gesture on a row that fires the default row action. Without a value the kind of the grid decides: a click on a card, a double click on a table row. With an explicit value one applicable default row action fires directly, several open a menu at the pointer. A click trigger takes the click from the selection, so a card selects on click only with the doubleClick trigger or without a default row action. A table row honours an explicit click value too; without a value a table row fires on double click.
+ * The gesture on a row that fires the default row action. Without a value the kind of the grid decides: a click on a card, a double click on a table row. An explicit value holds for a card and a table row alike: one applicable default row action fires directly, several open a menu at the pointer. A click trigger takes the click from the selection, so a row selects on click only when the gesture is a double click or the row has no default row action.
  */
 declare enum GridDefaultRowActionTrigger {
     CLICK = "click",
@@ -8408,6 +8406,7 @@ interface GridColumnMeta {
  */
 interface GridViewDescriptor {
     label?: string;
+    title?: string;
     icon?: string;
     kind?: GridViewDescriptorKindEnum;
     /**
@@ -8446,7 +8445,7 @@ interface GridViewDescriptor {
     /**
      * The controls the header of a TREE_GRID shows, in this order. Absent or null means all four, an empty list means none.
      */
-    treeGridControls?: Array<TreeGridControl> | null;
+    treeGridControls: Array<TreeGridControl> | null;
 }
 declare enum GridViewDescriptorKindEnum {
     TABLE = "TABLE",
@@ -8535,6 +8534,9 @@ interface GridSelectionChange {
     params: {
         [key: string]: any;
     };
+    /**
+     * Model sync, see UiActionRequest.modelSync in view-api.yaml.
+     */
     modelSync?: ModelSync;
 }