@smartbit4all/ng-client 7.3.27 → 7.3.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartbit4all/ng-client",
-  "version": "7.3.27",
+  "version": "7.3.29",
   "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,192 +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: #f6f8fb,
-  color-surface: #ffffff,
-  color-surface-alt: #f9fbff,
-
-  // Borders
-  color-border: #e4eaf2,
-
-  // Tree
-  tree-active-background: var(--accent-color),
-
-  // Semantic
-  color-danger: var(--warn-color),
-  color-teal: #20b6a8,
-
-  // 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

@@ -1517,6 +1517,10 @@ interface ViewData {
     containerUuid?: string;
     containerId?: string;
     module?: string;
+    /**
+     * Branch the view reads its value sets on; null on the main line.
+     */
+    branchUri?: string;
     windowDescriptor?: WindowDescriptor;
 }
 
@@ -1627,7 +1631,7 @@ interface ViewContextChange {
      */
     result?: object;
     /**
-     * Current version of every value set the open views reference; null when the value set delivery switch is off.
+     * Current version of every value set the open views reference; null when the Value Set Store Switch is off.
      */
     valueSetVersions?: Array<ValueSetVersion>;
 }
@@ -3120,7 +3124,7 @@ interface InvocationRequest {
 interface ValueSet {
     valueSetName?: string;
     /**
-     * Values for a client without a store, or when the delivery switch is off; null otherwise.
+     * Values for a client without a store, or when the Value Set Store Switch is off; null otherwise.
      */
     valueSetData?: ValueSetData;
     /**
@@ -6932,11 +6936,12 @@ declare class SmartViewContextService implements OnDestroy {
      * report of the client reached the server after the close. So a view to be closed in the view
      * context not applied is closed all the same.
      *
-     * The Value Set Version Map of the change goes to the value set store, whose fetches are held
-     * until the change is applied, so one request carries the implicit sets the changed models name.
-     * The fetch is not awaited: the widgets follow the store.
+     * The Value Set Version Map of the change goes to the value set store under the module of
+     * `viewUuid`, the view the request was sent for, as the server built it. The store's fetches are
+     * held until the change is applied, so one request carries the implicit sets the changed models
+     * name. The fetch is not awaited: the widgets follow the store.
      */
-    handlePerformActionResponse(viewContextChange: ViewContextChange | undefined, viewUuid?: string): Promise<any>;
+    handlePerformActionResponse(viewContextChange: ViewContextChange | undefined, viewUuid: string): Promise<any>;
     private applyPerformActionResponse;
     private handleChanges;
     load(uuid: string): Promise<ComponentModel | undefined>;
@@ -9077,23 +9082,24 @@ declare class SmartEmbeddedSlotDirective implements OnInit, OnChanges, OnDestroy
 type ValueSetSelection = Pick<SelectionDefinition, "valueSetNamespace" | "valueSetName" | "keyProperty" | "displayProperty">;
 /**
  * The Global Value Set Store: the value sets of the browser tab shared by every open view,
- * explicit sets by backend module, namespace and name, implicit sets by view uuid and key. It
- * fetches the versions a view context change names and it lacks, keeps what the open views read
+ * explicit sets by backend module, namespace, name and branch, implicit sets by view uuid and key.
+ * It fetches the versions a view context change names and it lacks, keeps what the open views read
  * and empties at a change of the session locale.
  */
 declare abstract class SmartValueSetStore {
     /** @internal The name of every set the store writes, explicit or implicit; readers follow it. */
     abstract readonly changes: Observable<string>;
     /**
-     * The values of an explicit set, emitted at once and again at every new version; `undefined`
-     * while the store has none.
+     * The values of an explicit set on the branch, or on the main line without one, emitted at once
+     * and again at every new version; `undefined` while the store has none.
      */
-    abstract get(module: string | undefined, namespace: string | undefined, name: string): Observable<ValueSetData | undefined>;
+    abstract get(module: string | undefined, namespace: string | undefined, name: string, branchUri?: string): Observable<ValueSetData | undefined>;
     /** @internal The values of an implicit set of a view, like {@link get}. */
     abstract getImplicit(viewUuid: string, key: string): Observable<ValueSetData | undefined>;
     /**
      * The values a widget of the view lists for its selection, like {@link get}: the view's implicit
-     * set of the name, else the explicit set in the view's module, merged with the view's extras.
+     * set of the name, else the explicit set in the view's module on the line the view reads it on,
+     * merged with the view's extras.
      */
     abstract getForSelection(viewUuid: string, selection: ValueSetSelection): Observable<ValueSetData | undefined>;
     /**
@@ -9126,11 +9132,12 @@ declare abstract class SmartValueSetStore {
     abstract holdFetches(): () => void;
     /**
      * Fetches the sets of the change's Value Set Version Map the store lacks in that version from the
-     * backend module of `viewUuid`, the view the request was sent for (else the first changed view).
-     * A branch item fetches again the implicit sets of its name instead, and a set an open view holds
-     * only implicitly is not fetched.
+     * backend module of `viewUuid`, the view the request was sent for. A branch item is fetched on
+     * its branch, which a view on that branch then reads the set on; a set an open view holds only
+     * implicitly is not fetched. An empty map clears the module's branch keys, an absent one changes
+     * nothing.
      */
-    abstract applyVersions(viewContextChange: ViewContextChange | undefined, viewUuid?: string): Promise<void>;
+    abstract applyVersions(viewContextChange: ViewContextChange | undefined, viewUuid: string): Promise<void>;
     /** Fetches the explicit items through a view of the module with the next Value Set Fetch. */
     abstract fetch(module: string | undefined, viewUuid: string, items: ValueSetFetchItem[]): Promise<void>;
     /**