@smartbit4all/ng-client 7.3.20 → 7.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartbit4all/ng-client",
-  "version": "7.3.20",
+  "version": "7.3.21",
   "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": {
@@ -27,9 +27,10 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "module": "fesm2022/smartbit4all-ng-client.mjs",
-  "typings": "types/smartbit4all-ng-client.d.ts",
   "exports": {
+    "./styles": {
+      "sass": "./src/styles/_ng-client-styles.scss"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -38,5 +39,7 @@
       "default": "./fesm2022/smartbit4all-ng-client.mjs"
     }
   },
+  "module": "fesm2022/smartbit4all-ng-client.mjs",
+  "typings": "types/smartbit4all-ng-client.d.ts",
   "type": "module"
 }

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

@@ -0,0 +1,192 @@
+@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;
+      }
+    }
+  }
+}

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

@@ -5,7 +5,7 @@ import { ComponentType as ComponentType$1 } from '@angular/cdk/portal';
 import { ValidatorFn, UntypedFormGroup, ControlValueAccessor } from '@angular/forms';
 import { Observable, Subject as Subject$1, Subscription } from 'rxjs';
 import { QuillModules } from 'ngx-quill';
-import { MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
 import { MatDateFormats, ThemePalette } from '@angular/material/core';
 import { Locale } from 'date-fns';
@@ -9154,7 +9154,7 @@ declare abstract class SmartdialogService {
         maxWidth: number;
         minWidth: number;
     };
-    createDialog(smartDialog: SmartDialogData, component: ComponentType$1<any>): MatDialogRef<any, any>;
+    createDialog(smartDialog: SmartDialogData, component: ComponentType$1<any>, config?: MatDialogConfig): MatDialogRef<any, any>;
     createDialogRef(smartDialog: SmartDialogData, component: ComponentType$1<any>): MatDialogRef<any, any>;
     openComponentAsDialog(component: ComponentType$1<any>, viewName: string): MatDialogRef<any, any>;
     handleAfterClosed(result: any): void;
@@ -9885,7 +9885,7 @@ declare class SmartKeybindingService {
     private readonly injector;
     private readonly isMac;
     private readonly hosts;
-    /** The elements of no view whose keys go to a view: a dialog's header to the page it shows. */
+    /** The elements of no view whose keys go to a view: a dialog's container to the page it shows. */
     private readonly forwards;
     /** The view that held the focus last; it keeps the keys after the focus fell to the body. */
     private lastActive?;
@@ -9893,8 +9893,8 @@ declare class SmartKeybindingService {
     /** Lets the view take keys; returns the function that stops it. */
     register(entry: KeybindingHost): () => void;
     /**
-     * Sends the keys pressed with the focus in `from`, an element outside every view (the header
-     * of a dialog), to the view whose host is `to`; returns the function that stops it.
+     * Sends the keys pressed with the focus in `from`, an element enclosing no view of its own (the
+     * container of a dialog), to the view whose host is `to`; returns the function that stops it.
      */
     forwardKeys(from: HTMLElement, to: HTMLElement): () => void;
     private onFocusin;