@smartbit4all/ng-client 7.3.44 → 7.3.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smartbit4all/ng-client",
-  "version": "7.3.44",
+  "version": "7.3.45",
   "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;
+      }
+    }
+  }
+}