@devopmaat/badaboom 1.3.0 → 1.3.2

package/lib/styles/material/_option-theme.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    $fg-container: bdb.on-palette-color($palette-name, true);
+    .#{$palette-name}.mat-mdc-option {
+      @include mat.option-overrides(
+        (
+          selected-state-label-text-color: $bg-container,
+          label-text-color: $bg,
+          hover-state-layer-color: $bg-container,
+          focus-state-layer-color: $bg,
+          selected-state-layer-color: $bg,
+        )
+      );
+    }
+  }
+
+  // @each $palette-name in bdb.$badaboom-palettes {
+  //   .#{$palette-name}.mat-mdc-option {
+  //     --mat-option-selected-state-label-text-color: var(--mat-sys-on-#{$palette-name}-container);
+  //     --mat-option-label-text-color: var(--mat-sys-on-surface);
+  //     --mat-option-hover-state-layer-color: color-mix(in srgb, var(--mat-sys-on-surface) 8%, transparent);
+  //     --mat-option-focus-state-layer-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
+  //     --mat-option-selected-state-layer-color: var(--mat-sys-#{$palette-name}-container);
+  //   }
+  // }
+}
+
+@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/_progress-bar-theme.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    .mat-mdc-progress-bar.#{$palette-name} {
+      @include mat.progress-bar-overrides(
+        (
+          active-indicator-color: $bg,
+          track-color: $bg,
+        )
+      );
+    }
+    .mat-mdc-progress-bar.#{$palette-name}-container {
+      @include mat.progress-bar-overrides(
+        (
+          active-indicator-color: $bg-container,
+          track-color: $bg-container,
+        )
+      );
+    }
+  }
+}
+
+@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/_progress-spinner-theme.scss

@@ -0,0 +1,35 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    .mat-mdc-progress-spinner.#{$palette-name} {
+      @include mat.progress-spinner-overrides(
+        (
+          active-indicator-color: bdb.palette-color($palette-name),
+        )
+      );
+    }
+    .mat-mdc-progress-spinner.#{$palette-name}-container {
+      @include mat.progress-spinner-overrides(
+        (
+          active-indicator-color: bdb.palette-color($palette-name, true),
+        )
+      );
+    }
+  }
+}
+
+@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/_radio-theme.scss

@@ -0,0 +1,47 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    .mat-mdc-radio-button.#{$palette-name} {
+      @include mat.radio-overrides(
+        (
+          selected-focus-icon-color: $bg,
+          selected-hover-icon-color: $bg,
+          selected-icon-color: $bg,
+          selected-pressed-icon-color: $bg,
+          ripple-color: $bg,
+          checked-ripple-color: $bg,
+        )
+      );
+    }
+    .mat-mdc-radio-button.#{$palette-name}-container {
+      @include mat.radio-overrides(
+        (
+          selected-focus-icon-color: $bg-container,
+          selected-hover-icon-color: $bg-container,
+          selected-icon-color: $bg-container,
+          selected-pressed-icon-color: $bg-container,
+          ripple-color: $bg-container,
+          checked-ripple-color: $bg-container,
+        )
+      );
+    }
+  }
+}
+
+@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/_slide-toggle-theme.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    .mat-mdc-slide-toggle.#{$palette-name} {
+      @include mat.slide-toggle-overrides(
+        (
+          selected-focus-state-layer-color: $bg,
+          selected-hover-state-layer-color: $bg,
+          selected-pressed-state-layer-color: $bg,
+          selected-focus-handle-color: $bg-container,
+          selected-hover-handle-color: $bg-container,
+          selected-pressed-handle-color: $bg-container,
+          selected-focus-track-color: $bg,
+          selected-hover-track-color: $bg,
+          selected-pressed-track-color: $bg,
+          selected-track-color: $bg,
+        )
+      );
+    }
+  }
+}
+
+@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/_slider-theme.scss

@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    $fg: bdb.on-palette-color($palette-name);
+    $fg-container: bdb.on-palette-color($palette-name, true);
+    .mat-mdc-slider.#{$palette-name} {
+      @include mat.slider-overrides(
+        (
+          ripple-color: $bg,
+          hover-state-layer-color: color-mix(in srgb, $bg 8%, transparent),
+          focus-state-layer-color: color-mix(in srgb, $bg 8%, transparent),
+          handle-color: $bg,
+          focus-handle-color: $bg,
+          hover-handle-color: $bg,
+          active-track-color: $bg,
+          label-container-color: $bg,
+          with-tick-marks-active-container-color: $fg,
+          label-label-text-color: $fg,
+          with-overlap-handle-outline-color: $bg-container,
+        )
+      );
+    }
+    .mat-mdc-slider.#{$palette-name}-container {
+      @include mat.slider-overrides(
+        (
+          ripple-color: $bg-container,
+          hover-state-layer-color: $bg-container,
+          focus-state-layer-color: $bg-container,
+          handle-color: $bg-container,
+          focus-handle-color: $bg-container,
+          hover-handle-color: $bg-container,
+          active-track-color: $bg-container,
+          label-container-color: $bg-container,
+          with-tick-marks-active-container-color: $fg-container,
+          label-label-text-color: $fg-container,
+          with-overlap-handle-outline-color: $fg-container,
+        )
+      );
+    }
+  }
+}
+
+@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/_stepper-theme.scss

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    $fg: bdb.on-palette-color($palette-name);
+    $fg-container: bdb.on-palette-color($palette-name, true);
+    .mat-stepper-horizontal.#{$palette-name} {
+      @include mat.stepper-overrides(
+        (
+          header-selected-state-icon-background-color: $bg,
+          header-edit-state-icon-background-color: $bg,
+          header-selected-state-icon-foreground-color: $fg,
+          header-edit-state-icon-foreground-color: $fg,
+        )
+      );
+    }
+    .mat-stepper-horizontal.#{$palette-name}-container {
+      @include mat.stepper-overrides(
+        (
+          header-selected-state-icon-background-color: $bg-container,
+          header-edit-state-icon-background-color: $bg-container,
+          header-selected-state-icon-foreground-color: $fg-container,
+          header-edit-state-icon-foreground-color: $fg-container,
+        )
+      );
+    }
+  }
+}
+
+@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-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.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+
+    .mat-mdc-tab-group.#{$palette-name} {
+      @include mat.tabs-overrides(
+        (
+          active-indicator-color: $bg,
+          active-focus-indicator-color: $bg,
+          active-hover-indicator-color: $bg,
+        )
+      );
+    }
+  }
+}
+
+@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-theme.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../core-theme' as bdb;
+
+@mixin color($theme) {
+  @each $palette-name in bdb.$palette-names {
+    $bg: bdb.palette-color($palette-name);
+    $bg-container: bdb.palette-color($palette-name, true);
+    $fg: bdb.on-palette-color($palette-name);
+    $fg-container: bdb.on-palette-color($palette-name, true);
+    .mat-toolbar.#{$palette-name} {
+      @include mat.toolbar-overrides(
+        (
+          container-background-color: $bg,
+          container-text-color: $fg,
+        )
+      );
+    }
+    .mat-toolbar.#{$palette-name}-container {
+      @include mat.toolbar-overrides(
+        (
+          container-background-color: $bg-container,
+          container-text-color: $fg-container,
+        )
+      );
+    }
+  }
+}
+
+@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,10 +1,11 @@
 {
   "name": "@devopmaat/badaboom",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "peerDependencies": {
     "@angular/common": "^19.0.0",
     "@angular/core": "^19.0.0",
-    "@angular/material": "^19.0.0"
+    "@angular/material": "^19.0.0",
+    "@angular/youtube-player": "^19.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"

package/public-api.d.ts

@@ -14,6 +14,12 @@ 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/media/media-full-table/media-full-table.component';
+export * from './lib/application/media/media-table/media-table.component';
+export * from './lib/application/media/media-display/media-display.component';
+export * from './lib/application/media/media-upload/media-upload.component';
+export * from './lib/application/media/media-upload/media-drop.directive';
+export * from './lib/application/media/media-type.pipe';
 export * from './lib/application/task-log/task-log-status.pipe';
 export * from './lib/application/task-log/task-log-outcome.pipe';
 export * from './lib/application/task-log-parameter/task-log-parameter-value.pipe';
@@ -27,9 +33,10 @@ 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/collapse-row/bdb-collapse-row.component';
 export * from './lib/common/field/bdb-field.component';
-export * from './lib/common/plain-number-pipe';
+export * from './lib/common/plain-number.pipe';
+export * from './lib/common/file-size.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/application/common/query-input/_bdb-query-input-m2-theme.scss

@@ -1,17 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  $color-config: mat.m2-get-color-config($theme);
-
-  $background-palette: map.get($color-config, background);
-  $primary-palette: map.get($color-config, primary);
-
-  .khi-query-input {
-    background: mat.m2-get-color-from-palette($background-palette, card);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    &:focus-within {
-      border-color: mat.m2-get-color-from-palette($primary-palette, default);
-    }
-  }
-}

package/lib/application/common/query-input/_bdb-query-input-m3-theme.scss

@@ -1,30 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../styles/core-theme' as bdb;
-
-@mixin color($theme) {
-  .bdb-query-input {
-    background: var(--mdc-filled-text-field-container-color);
-    border: 1px solid rgba(0, 0, 0, 0.12);
-    &:focus-within {
-      border-color: var(--sys-info);
-    }
-
-    input {
-      color: var(--mdc-filled-text-field-input-text-color);
-    }
-  }
-}
-
-@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/application/common/search/_bdb-search-m2-theme.scss

@@ -1,12 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  $color-config: mat.m2-get-color-config($theme);
-
-  $foreground-palette: map.get($color-config, foreground);
-
-  .search-icon-disabled {
-    color: mat.m2-get-color-from-palette($foreground-palette, disabled-button);
-  }
-}

package/lib/application/common/table/_bdb-table-m2-theme.scss

@@ -1,48 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin theme($theme) {
-  $color-config: mat.m2-get-color-config($theme);
-  $paletteNames: (primary, accent, warn, danger, success, info);
-  $info-default: mat.m2-get-color-from-palette(map.get($color-config, info), default);
-
-  .bdb-table {
-    tbody tr {
-      &.selected {
-        background-color: rgba($info-default, 0.12);
-      }
-
-      @each $paletteName in $paletteNames {
-        $bg: mat.m2-get-color-from-palette(map.get($color-config, $paletteName), default);
-        &.bdb-#{$paletteName} {
-          background-color: rgba($bg, 0.04);
-          &.selected {
-            background-color: rgba($bg, 0.12);
-          }
-        }
-      }
-    }
-
-    &.is-clickable tbody tr {
-      &:hover {
-        background-color: rgba($info-default, 0.08);
-      }
-      &.selected:hover {
-        background-color: rgba($info-default, 0.16);
-      }
-
-      @each $paletteName in $paletteNames {
-        $bg: mat.m2-get-color-from-palette(map.get($color-config, $paletteName), default);
-
-        &.bdb-#{$paletteName} {         
-          &:hover {
-            background-color: rgba($bg, 0.08);
-          }
-          &.selected:hover {
-            background-color: rgba($bg, 0.16);
-          }
-        }
-      }
-    }
-  }
-}

package/lib/application/common/table/_bdb-table-m3-theme.scss

@@ -1,70 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../../../styles/core-theme' as bdb;
-
-@mixin color($theme) {
-  & {
-    @each $palette-name in bdb.$palette-names {
-      @if mat.get-theme-type($theme) == dark {
-        --bdb-table-row-#{$palette-name}: #{bdb.bdb-get-theme-color($theme, $palette-name, 10)};
-        --bdb-table-row-#{$palette-name}-selected-hover: #{bdb.bdb-get-theme-color($theme, $palette-name, 40)};
-      } @else {
-        --bdb-table-row-#{$palette-name}: #{bdb.bdb-get-theme-color($theme, $palette-name, 95)};
-        --bdb-table-row-#{$palette-name}-selected-hover: #{bdb.bdb-get-theme-color($theme, $palette-name, 80)};
-      }
-    }
-  }
-
-  .bdb-table {
-    tbody tr {
-      &.selected {
-        background-color: var(--sys-info-container);
-        color: var(--sys-on-info-container);
-      }
-
-      @each $palette-name in bdb.$palette-names {
-        &.bdb-#{$palette-name} {
-          background-color: var(--bdb-table-row-#{$palette-name});
-          color: var(--sys-on-#{$palette-name}-container);
-          &.selected {
-            background-color: var(--sys-#{$palette-name}-container);
-          }
-        }
-      }
-    }
-
-    &.is-clickable tbody tr {
-      &:hover {
-        background-color: var(--sys-info-container);
-      }
-      &.selected:hover {
-        background-color: var(--bdb-table-row-info-selected-hover);
-      }
-
-      @each $palette-name in bdb.$palette-names {
-        &.bdb-#{$palette-name} {
-          &:hover {
-            background-color: var(--sys-#{$palette-name}-container);
-            color: var(--sys-on-#{$palette-name}-container);
-          }
-          &.selected:hover {
-            background-color: var(--bdb-table-row-#{$palette-name}-selected-hover);
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin typography($theme) {
-}
-
-@mixin theme($theme) {
-  @if mat.theme-has($theme, color) {
-    @include color($theme);
-  }
-
-  @if mat.theme-has($theme, typography) {
-    @include typography($theme);
-  }
-}