@smartbit4all/ng-client 7.3.46 → 7.3.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartbit4all/ng-client",
-  "version": "7.3.46",
+  "version": "7.3.47",
   "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

@@ -7971,6 +7971,12 @@ interface SmartTableInterface<T> {
     };
     /** The accessible name of the column of the row states. */
     rowStateColumnLabel?: string;
+    /** Whether the table shows the number of each row in a column of its own, before the others. */
+    showRowNumbers?: boolean;
+    /** The number of the rows before the first row of the table, on the pages before it. */
+    rowNumberOffset?: number;
+    /** The accessible name of the row number column, which shows no header text. */
+    rowNumberColumnLabel?: string;
     /** Called with every action a toolbar of the row menu fires, and the promise of its execution. */
     onRowAction?: (row: T, code: string | undefined, execution: Promise<void>) => void;
 }
@@ -8052,6 +8058,9 @@ declare class SmartTable<T> implements SmartTableInterface<T> {
         [key: string]: string;
     };
     rowStateColumnLabel?: string;
+    showRowNumbers?: boolean;
+    rowNumberOffset?: number;
+    rowNumberColumnLabel?: string;
     onRowAction?: (row: T, code: string | undefined, execution: Promise<void>) => void;
     constructor(config: SmartTableInterface<T>, gridId?: string | undefined);
     getPropertyNamesDeeply(element: any): string[];
@@ -8265,11 +8274,11 @@ interface GridRow {
  */
 interface GridPage {
     /**
-     * The index of the first row in the current page. Startes from 1 and inclusive.
+     * The index of the first row in the current page. Starts from 0 and inclusive.
      */
     lowerBound?: number;
     /**
-     * The index of the last row in the current page inclusive.
+     * The index after the last row in the current page, exclusive.
      */
     upperBound?: number;
     rows?: Array<GridRow>;
@@ -8431,6 +8440,14 @@ interface GridViewDescriptor {
      * The accessible name of the column of the row states, which shows no header text. The platform fills it in the locale of the session when the grid shows the column and it is not set.
      */
     rowStateColumnLabel?: string;
+    /**
+     * True when the table shows the number of each row, counted from 1 across the pages, in a column of its own before the columns of the descriptor. The export of the grid writes it as its first column. When not set, the platform sets it from the grid.showRowNumbers application property, false by default.
+     */
+    showRowNumbers?: boolean;
+    /**
+     * The name of the row number column: its header in the export and its accessible name in the table, which shows no header text. The platform fills it in the locale of the session when the grid shows the column and it is not set.
+     */
+    rowNumberColumnLabel?: string;
     preserveSelectionOnPageChange?: boolean;
     showEditColumns?: boolean;
     highlightProperty?: string;
@@ -8862,10 +8879,14 @@ declare class Table implements OnInit, OnDestroy {
     get showRowStateColumn(): boolean;
     private displayedColumnsCache?;
     /**
-     * The columns of the table: the row state column, when the table shows it, and the headers. The
-     * array is kept while the headers are, so the table does not diff its columns at every check.
+     * The columns of the table: the row state column and the row number column, when the table shows
+     * them, and the headers. The array is kept while these are, so the table does not diff its
+     * columns at every check.
      */
     get displayedColumns(): string[];
+    readonly rowNumberColumn = "sm-row-number";
+    /** The number of the row at the index on its page, counted from 1 across the pages. */
+    rowNumber(index: number): number;
     rowStateIcon(row: any): string | undefined;
     rowStateIconClass(row: any): string | undefined;
     rowStateLabel(row: any): string | undefined;