@devopmaat/badaboom 1.1.1 → 1.2.1

package/lib/styles/material/_stepper-m3-theme.scss

@@ -0,0 +1,44 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$material-palettes {
+    .#{$palette-name}.mat-stepper-horizontal {
+      @include mat.stepper-color($theme, $color-variant: $palette-name);
+    }
+  }
+
+  @each $palette-name in bdb.$badaboom-palettes {
+    .#{$palette-name}.mat-stepper-horizontal {
+      --mat-stepper-header-icon-foreground-color: var(--sys-surface);
+      --mat-stepper-header-selected-state-icon-background-color: var(--sys-#{$palette-name});
+      --mat-stepper-header-selected-state-icon-foreground-color: var(--sys-on-#{$palette-name});
+      --mat-stepper-header-edit-state-icon-background-color: var(--sys-#{$palette-name});
+      --mat-stepper-header-edit-state-icon-foreground-color: var(--sys-on-#{$palette-name});
+      --mat-stepper-container-color: var(--sys-surface);
+      --mat-stepper-line-color: var(--sys-outline);
+      --mat-stepper-header-hover-state-layer-color: color-mix(in srgb, var(--sys-inverse-surface) 8%, transparent);
+      --mat-stepper-header-focus-state-layer-color: color-mix(in srgb, var(--sys-inverse-surface) 12%, transparent);
+      --mat-stepper-header-label-text-color: var(--sys-on-surface-variant);
+      --mat-stepper-header-optional-label-text-color: var(--sys-on-surface-variant);
+      --mat-stepper-header-selected-state-label-text-color: var(--sys-on-surface-variant);
+      --mat-stepper-header-error-state-label-text-color: var(--sys-error);
+      --mat-stepper-header-icon-background-color: var(--sys-on-surface-variant);
+      --mat-stepper-header-error-state-icon-foreground-color: var(--sys-error);
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_tabs-m3-theme.scss

@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$material-palettes {
+    .#{$palette-name}.mat-mdc-tab-group {
+      @include mat.tabs-color($theme, $color-variant: $palette-name);
+    }
+  }
+
+  @each $palette-name in bdb.$badaboom-palettes {
+    .#{$palette-name}.mat-mdc-tab-group {
+      --mdc-tab-indicator-active-indicator-color: var(--sys-#{$palette-name});
+      --mat-tab-header-active-focus-indicator-color: var(--sys-#{$palette-name});
+      --mat-tab-header-active-hover-indicator-color: var(--sys-#{$palette-name});
+    }
+  }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/lib/styles/material/_toolbar-m3-theme.scss

@@ -0,0 +1,63 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  .mat-toolbar {
+    @if mat.get-theme-type($theme) == dark {
+      --mat-toolbar-container-background-color: var(--sys-surface-container);
+    } @else {
+      --mat-toolbar-container-background-color: var(--sys-surface-container-low);
+    }
+    --mat-toolbar-container-text-color: var(--sys-on-surface);
+
+    @each $palette-name in bdb.$palette-names {
+      &.#{$palette-name} {
+        --mat-toolbar-container-background-color: var(--sys-#{$palette-name});
+        --mat-toolbar-container-text-color: var(--sys-on-#{$palette-name});
+
+        &.container {
+          --mat-toolbar-container-background-color: var(--sys-#{$palette-name}-container);
+          --mat-toolbar-container-text-color: var(--sys-on-#{$palette-name}-container);
+        }
+      }
+    }
+  }
+
+  //   @if mat.get-theme-type($theme) == dark {
+
+  //     // --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, info, 10)};
+  //     // --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, info, 90)};
+  //     @each $palette-name in bdb.$palette-names {
+  //       &.#{$palette-name} {
+  //         --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
+  //         --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 90)};
+  //       }
+  //     }
+  //   } @else {
+  //     --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, info, 95)};
+  //     --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, info, 10)};
+  //     @each $palette-name in bdb.$palette-names {
+  //       &.#{$palette-name} {
+  //         --mat-toolbar-container-background-color: var(--sys-#{$palette-name}-container);
+  //         --mat-toolbar-container-text-color: var(--sys-on-#{$palette-name}-container);
+  //         // --mat-toolbar-container-background-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 95)};
+  //         // --mat-toolbar-container-text-color: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
+  //       }
+  //     }
+  //   }
+  // }
+}
+
+@mixin typography($theme) {
+}
+
+@mixin theme($theme) {
+  @if mat.theme-has($theme, color) {
+    @include color($theme);
+  }
+
+  @if mat.theme-has($theme, typography) {
+    @include typography($theme);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devopmaat/badaboom",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "peerDependencies": {
     "@angular/common": "^18.1.1",
     "@angular/core": "^18.1.1",

package/public-api.d.ts

@@ -12,6 +12,7 @@ export * from './lib/application/common/table/bdb-column-options';
 export * from './lib/application/common/table/bdb-column-type';
 export * from './lib/application/common/table/bdb-context-action';
 export * from './lib/application/common/table/bdb-table.component';
+export * from './lib/application/common/full-table/bdb-full-table.component';
 export * from './lib/application/exception-log/exception-log-table/exception-log-table.component';
 export * from './lib/application/task-log/task-log-status.pipe';
 export * from './lib/application/task-log/task-log-outcome.pipe';
@@ -26,7 +27,9 @@ export * from './lib/common/bdb-palette';
 export * from './lib/common/alert/bdb-alert.component';
 export * from './lib/common/alert-error-response/bdb-alert-error-response.component';
 export * from './lib/common/boolean-display/bdb-boolean-display.component';
+export * from './lib/common/collapse-row/collapse-row.component';
 export * from './lib/common/field/bdb-field.component';
+export * from './lib/common/plain-number-pipe';
 export * from './lib/domain/auth/auth.service';
 export * from './lib/domain/auth/account-info';
 export * from './lib/domain/auth/reset-password-token';

package/lib/_theme.scss

@@ -1,32 +0,0 @@
-@use 'sass:map';
-@use './common/alert/bdb-alert-theme';
-@use './common/boolean-display/bdb-boolean-display-theme';
-@use './application/common/query-input/bdb-query-input-theme';
-@use './application/common/search/bdb-search-theme';
-@use './application/common/table/bdb-table-theme';
-@use './common/button-theme';
-@use './common/icon-theme';
-
-@function define-light-theme($mat-theme, $warn-palette, $danger-palette, $success-palette, $info-palette) {
-  @return map.deep-merge(
-    $mat-theme,
-    (
-      color: (
-        warn: $warn-palette,
-        danger: $danger-palette,
-        success: $success-palette,
-        info: $info-palette,
-      ),
-    )
-  );
-}
-
-@mixin all-component-themes($bdb-theme) {
-  @include bdb-alert-theme.theme($bdb-theme);
-  @include bdb-boolean-display-theme.theme($bdb-theme);
-  @include bdb-query-input-theme.theme($bdb-theme);
-  @include bdb-search-theme.theme($bdb-theme);
-  @include bdb-table-theme.theme($bdb-theme);
-  @include button-theme.theme($bdb-theme);
-  @include icon-theme.theme($bdb-theme);
-}