@acontplus/ng-components 2.3.0 → 2.4.1

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@acontplus/ng-components",
-  "version": "2.3.0",
+  "version": "2.4.1",
   "description": "Comprehensive Angular Material UI component library featuring dynamic Tabulator tables, theme toggle with dark mode, dialog wrappers, autocomplete components, cards, buttons, icons, input chips, spinners, directives, pipes, and SCSS styling utilities.",
   "peerDependencies": {
     "@acontplus/ui-kit": "^1.0.2",
-    "@angular/cdk": "^22.0.0",
-    "@angular/common": "^22.0.0",
-    "@angular/core": "^22.0.0",
-    "@angular/material": "^22.0.0",
-    "tabulator-tables": "^6.3.1",
-    "@formkit/tempo": "1.0.0",
+    "@angular/cdk": "^22.1.0",
+    "@angular/common": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/material": "^22.1.0",
+    "tabulator-tables": "^6.5.2",
+    "@formkit/tempo": "^1.1.0",
     "ngx-datex": "1.0.5"
   },
   "sideEffects": true,

package/src/_index.scss

@@ -1,12 +1,17 @@
 @forward './lib/components/alert/alert-theme' as alert-* show alert-theme, alert-color,
   alert-typography, alert-density, alert-base, alert-overrides;
 
+@forward './lib/components/badge/badge-theme' as badge-* show badge-theme, badge-color,
+  badge-typography, badge-density, badge-base, badge-overrides;
+
 @forward './lib/components/drawer/drawer-theme' as drawer-* show drawer-theme, drawer-color,
   drawer-typography, drawer-density, drawer-base, drawer-overrides;
 @forward './lib/components/grid/grid-theme' as grid-* show grid-theme, grid-color, grid-typography,
   grid-density, grid-base, grid-overrides;
 @forward './lib/components/popover/popover-theme' as popover-* show popover-theme, popover-color,
   popover-typography, popover-density, popover-base, popover-overrides;
+@forward './lib/components/kpi-card/kpi-card-theme' as kpi-card-* show kpi-card-theme,
+  kpi-card-color, kpi-card-typography, kpi-card-density, kpi-card-base, kpi-card-overrides;
 @forward './core/theming/definition' show define-theme, define-colors, define-typography,
   define-density;
 @forward './core/theming/color-api-backwards-compatibility' show

package/src/core/theming/_all-theme.scss

@@ -1,22 +1,28 @@
 @use '@angular/material' as mat;
 @use './../../lib/components/alert/alert-theme';
+@use './../../lib/components/badge/badge-theme';
 @use './../../lib/components/drawer/drawer-theme';
 @use './../../lib/components/grid/grid-theme';
 @use './../../lib/components/popover/popover-theme';
+@use './../../lib/components/kpi-card/kpi-card-theme';
 
 // Create a theme.
 @mixin all-component-themes($theme) {
   @include alert-theme.theme($theme);
+  @include badge-theme.theme($theme);
   @include drawer-theme.theme($theme);
   @include grid-theme.theme($theme);
   @include popover-theme.theme($theme);
+  @include kpi-card-theme.theme($theme);
 }
 
 @mixin all-component-bases($theme) {
   @include alert-theme.base($theme);
+  @include badge-theme.base($theme);
   @include drawer-theme.base($theme);
   @include grid-theme.base($theme);
   @include popover-theme.base($theme);
+  @include kpi-card-theme.base($theme);
 }
 
 // Custom component overrides for all themes

package/src/core/tokens/_system.scss

@@ -173,12 +173,8 @@
     m3.md-sys-color-values-light(palettes.$blue-palette),
     m3.md-sys-typescale-values(
       (
-        brand: (
-          Roboto,
-        ),
-        plain: (
-          Roboto,
-        ),
+        brand: (Roboto),
+        plain: (Roboto),
         bold: 700,
         medium: 500,
         regular: 400,

package/src/lib/components/badge/_badge-theme.scss

@@ -0,0 +1,58 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/token-utils';
+@use './m3-badge';
+
+$fallbacks: m3-badge.get-tokens();
+
+@mixin base($theme) {
+  $tokens: map.get(m3-badge.get-tokens($theme), base);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m3-badge.get-tokens($theme), color);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m3-badge.get-tokens($theme), typography);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m3-badge.get-tokens($theme), density);
+
+  @include token-utils.values($tokens);
+}
+
+@function _define-overrides() {
+  @return ((namespace: badge, tokens: token-utils.get-overrides(m3-badge.get-tokens(), badge)));
+}
+
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+@mixin theme($theme, $color-variant: null) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if mat.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if mat.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if mat.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/src/lib/components/badge/_m3-badge.scss

@@ -0,0 +1,52 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/m3-utils';
+@use '../../../core/tokens/m3';
+
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $semantic-palettes: (
+    success: mat.$green-palette,
+    warning: mat.$orange-palette,
+    danger: mat.$red-palette,
+    info: mat.$azure-palette,
+  );
+
+  $color-tokens: ();
+  @each $name, $palette in $semantic-palettes {
+    $color-tokens: map.merge(
+      $color-tokens,
+      (
+        badge-#{$name}-fg: light-dark(map.get($palette, 95), map.get($palette, 20)),
+        badge-#{$name}-bg: light-dark(map.get($palette, 40), map.get($palette, 80))
+      )
+    );
+  }
+
+  $tokens: (
+    base: (
+      badge-container-shape: map.get($system, corner-small),
+      badge-pill-shape: map.get($system, corner-full),
+    ),
+    color: map.merge(
+        (
+          badge-primary-color: map.get($system, on-primary),
+          badge-primary-bg: map.get($system, primary),
+          badge-secondary-color: map.get($system, on-secondary),
+          badge-secondary-bg: map.get($system, secondary),
+          badge-tertiary-color: map.get($system, on-tertiary),
+          badge-tertiary-bg: map.get($system, tertiary),
+          badge-neutral-color: map.get($system, on-surface-variant),
+          badge-neutral-bg: map.get($system, surface-variant),
+          badge-custom-color: map.get($system, on-surface),
+          badge-custom-bg: map.get($system, surface-container),
+        ),
+        $color-tokens
+      ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/src/lib/components/badge/badge.scss

@@ -0,0 +1,318 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/token-utils';
+@use './m3-badge';
+
+$fallbacks: m3-badge.get-tokens();
+
+.acp-badge {
+  --acp-badge-bg: #{token-utils.slot(badge-primary-bg, $fallbacks)};
+  --acp-badge-fg: #{token-utils.slot(badge-primary-color, $fallbacks)};
+
+  display: inline-flex;
+  vertical-align: middle;
+  max-width: 100%;
+
+  &__set {
+    display: inline-flex;
+    max-width: 100%;
+  }
+
+  &__chip.mat-mdc-chip {
+    position: relative;
+    max-width: 100%;
+  }
+
+  &__label,
+  &__value {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__separator {
+    margin: 0 6px;
+    opacity: 0.6;
+  }
+
+  &__loader {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: inherit;
+    border-radius: inherit;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      width: 16px;
+      height: 16px;
+      border: 2px solid currentColor;
+      border-right-color: transparent;
+      border-radius: 50%;
+      animation: acp-badge-spin 0.75s linear infinite;
+    }
+  }
+
+  &__remove {
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: 2px solid currentColor;
+      outline-offset: 1px;
+    }
+  }
+
+  @keyframes acp-badge-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  // Colors - set CSS variables on host
+  &.acp-badge--primary {
+    --acp-badge-bg: #{token-utils.slot(badge-primary-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-primary-color, $fallbacks)};
+  }
+
+  &.acp-badge--secondary {
+    --acp-badge-bg: #{token-utils.slot(badge-secondary-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-secondary-color, $fallbacks)};
+  }
+
+  &.acp-badge--tertiary {
+    --acp-badge-bg: #{token-utils.slot(badge-tertiary-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-tertiary-color, $fallbacks)};
+  }
+
+  &.acp-badge--success {
+    --acp-badge-bg: #{token-utils.slot(badge-success-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-success-fg, $fallbacks)};
+  }
+
+  &.acp-badge--warning {
+    --acp-badge-bg: #{token-utils.slot(badge-warning-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-warning-fg, $fallbacks)};
+  }
+
+  &.acp-badge--danger {
+    --acp-badge-bg: #{token-utils.slot(badge-danger-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-danger-fg, $fallbacks)};
+  }
+
+  &.acp-badge--info {
+    --acp-badge-bg: #{token-utils.slot(badge-info-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-info-fg, $fallbacks)};
+  }
+
+  &.acp-badge--neutral {
+    --acp-badge-bg: #{token-utils.slot(badge-neutral-bg, $fallbacks)};
+    --acp-badge-fg: #{token-utils.slot(badge-neutral-color, $fallbacks)};
+  }
+
+  &.acp-badge--custom {
+    --acp-badge-bg: var(--acp-badge-custom-bg, #{token-utils.slot(badge-custom-bg, $fallbacks)});
+    --acp-badge-fg: var(--acp-badge-custom-fg, #{token-utils.slot(badge-custom-color, $fallbacks)});
+  }
+
+  // Variants - apply styles based on variant
+  &.acp-badge--filled &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        elevated-container-color: var(--acp-badge-bg),
+        elevated-selected-container-color: var(--acp-badge-bg),
+        label-text-color: var(--acp-badge-fg),
+        selected-label-text-color: var(--acp-badge-fg),
+        with-icon-icon-color: var(--acp-badge-fg),
+        with-icon-selected-icon-color: var(--acp-badge-fg),
+        with-trailing-icon-trailing-icon-color: var(--acp-badge-fg),
+        selected-trailing-icon-color: var(--acp-badge-fg),
+        outline-color: transparent,
+      )
+    );
+  }
+
+  &.acp-badge--outlined &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        elevated-container-color: transparent,
+        elevated-selected-container-color: transparent,
+        label-text-color: var(--acp-badge-bg),
+        selected-label-text-color: var(--acp-badge-bg),
+        with-icon-icon-color: var(--acp-badge-bg),
+        with-icon-selected-icon-color: var(--acp-badge-bg),
+        with-trailing-icon-trailing-icon-color: var(--acp-badge-bg),
+        selected-trailing-icon-color: var(--acp-badge-bg),
+        outline-color: var(--acp-badge-bg),
+        outline-width: 1px,
+      )
+    );
+  }
+
+  &.acp-badge--soft &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent),
+        elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 12%, transparent),
+        label-text-color: var(--acp-badge-bg),
+        selected-label-text-color: var(--acp-badge-bg),
+        with-icon-icon-color: var(--acp-badge-bg),
+        with-icon-selected-icon-color: var(--acp-badge-bg),
+        with-trailing-icon-trailing-icon-color: var(--acp-badge-bg),
+        selected-trailing-icon-color: var(--acp-badge-bg),
+        outline-color: transparent,
+      )
+    );
+  }
+
+  &.acp-badge--tonal &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        elevated-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent),
+        elevated-selected-container-color: color-mix(in srgb, var(--acp-badge-bg) 22%, transparent),
+        label-text-color: var(--acp-badge-bg),
+        selected-label-text-color: var(--acp-badge-bg),
+        with-icon-icon-color: var(--acp-badge-bg),
+        with-icon-selected-icon-color: var(--acp-badge-bg),
+        with-trailing-icon-trailing-icon-color: var(--acp-badge-bg),
+        selected-trailing-icon-color: var(--acp-badge-bg),
+        outline-color: transparent,
+      )
+    );
+  }
+
+  &.acp-badge--text &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        elevated-container-color: transparent,
+        elevated-selected-container-color: transparent,
+        label-text-color: var(--acp-badge-bg),
+        selected-label-text-color: var(--acp-badge-bg),
+        with-icon-icon-color: var(--acp-badge-bg),
+        with-icon-selected-icon-color: var(--acp-badge-bg),
+        with-trailing-icon-trailing-icon-color: var(--acp-badge-bg),
+        selected-trailing-icon-color: var(--acp-badge-bg),
+        outline-color: transparent,
+      )
+    );
+  }
+
+  // Sizes
+  &.acp-badge--xs &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        container-height: 20px,
+        label-text-size: 10px,
+      )
+    );
+
+    .mat-icon {
+      --acp-badge-icon-size: 12px;
+    }
+  }
+
+  &.acp-badge--sm &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        container-height: 24px,
+        label-text-size: 11px,
+      )
+    );
+
+    .mat-icon {
+      --acp-badge-icon-size: 14px;
+    }
+  }
+
+  &.acp-badge--md &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        container-height: 28px,
+        label-text-size: 12px,
+      )
+    );
+
+    .mat-icon {
+      --acp-badge-icon-size: 16px;
+    }
+  }
+
+  &.acp-badge--lg &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        container-height: 32px,
+        label-text-size: 14px,
+      )
+    );
+
+    .mat-icon {
+      --acp-badge-icon-size: 18px;
+    }
+  }
+
+  // Shapes
+  &.acp-badge--rounded &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        container-shape-radius: #{token-utils.slot(badge-container-shape, $fallbacks)},
+      )
+    );
+  }
+
+  &.acp-badge--pill &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        container-shape-radius: #{token-utils.slot(badge-pill-shape, $fallbacks)},
+      )
+    );
+  }
+
+  &.acp-badge--square &__chip.mat-mdc-chip {
+    @include mat.chips-overrides(
+      (
+        container-shape-radius: 0,
+      )
+    );
+  }
+
+  // Icon sizing
+  &__chip.mat-mdc-chip .mat-icon {
+    width: var(--acp-badge-icon-size, 18px);
+    height: var(--acp-badge-icon-size, 18px);
+    font-size: var(--acp-badge-icon-size, 18px);
+    line-height: var(--acp-badge-icon-size, 18px);
+  }
+
+  // States
+  &.acp-badge--interactive &__chip.mat-mdc-chip {
+    cursor: pointer;
+  }
+
+  &.acp-badge--disabled &__chip.mat-mdc-chip {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  &.acp-badge--loading &__chip.mat-mdc-chip {
+    pointer-events: none;
+  }
+
+  &.acp-badge--selected &__chip.mat-mdc-chip.mdc-evolution-chip--selected,
+  &.acp-badge--selected &__chip.mat-mdc-chip.mat-mdc-chip-highlighted {
+    box-shadow: inset 0 0 0 2px currentColor;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &__loader::after {
+      animation: none;
+    }
+  }
+
+  @media (prefers-contrast: more) {
+    &__chip.mat-mdc-chip {
+      outline: 2px solid currentColor;
+      outline-offset: 1px;
+    }
+  }
+}

package/src/lib/components/kpi-card/_kpi-card-theme.scss

@@ -0,0 +1,41 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/token-utils';
+@use './_m3-kpi-card' as m3-kpi-card;
+
+@mixin color($colors) {
+  @include token-utils.batch-create-token-values(
+    $colors,
+    ((namespace: kpi-card, tokens: token-utils.get-overrides(m3-kpi-card.get-tokens(), kpi-card)))
+  );
+}
+
+@mixin typography($typography) {
+  // Typography handled by Material tokens
+}
+
+@mixin density($density) {
+  // Density handled by Material tokens
+}
+
+@mixin base($base) {
+  @include token-utils.batch-create-token-values(
+    $base,
+    ((namespace: kpi-card, tokens: token-utils.get-overrides(m3-kpi-card.get-tokens(), kpi-card)))
+  );
+}
+
+@mixin theme($theme) {
+  @include color(map.get(m3-kpi-card.get-tokens($theme), color));
+  @include typography(map.get(m3-kpi-card.get-tokens($theme), typography));
+  @include density(map.get(m3-kpi-card.get-tokens($theme), density));
+  @include base(map.get(m3-kpi-card.get-tokens($theme), base));
+}
+
+@function color-variants-backwards-compatibility($theme) {
+  @return ();
+}
+
+@function overrides($tokens: ()) {
+  @return $tokens;
+}

package/src/lib/components/kpi-card/_m3-kpi-card.scss

@@ -0,0 +1,98 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/m3-utils';
+@use '../../../core/tokens/m3';
+
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  // Semantic color palettes for professional appearance
+  // Using more subtle tones for enterprise dashboard aesthetics
+  $semantic-palettes: (
+    success-light: mat.$green-palette,
+    warning-light: mat.$orange-palette,
+    error-light: mat.$red-palette,
+    info-light: mat.$azure-palette,
+  );
+
+  $color-tokens: ();
+  @each $name, $palette in $semantic-palettes {
+    $color-tokens: map.merge(
+      $color-tokens,
+      (
+        // Use on-surface for better contrast and professional appearance
+        kpi-card-#{$name}-color: map.get($system, on-surface),
+        // Use subtle background with semantic color accent (95 for light, 25 for dark)
+        kpi-card-#{$name}-bg: light-dark(map.get($palette, 95), map.get($palette, 25))
+      )
+    );
+  }
+
+  // Add success (bright) color using green palette
+  $success-palette: mat.$green-palette;
+  $color-tokens: map.merge(
+    $color-tokens,
+    (
+      // Use white text for bright success color for better contrast
+      kpi-card-success-color: light-dark(#ffffff, map.get($success-palette, 20)),
+      kpi-card-success-bg: light-dark(map.get($success-palette, 50), map.get($success-palette, 70))
+    )
+  );
+
+  // Add warning (bright) color - use Material Design warning/error color
+  // Material Design uses error color for warnings in some contexts, but we'll use orange palette
+  // to match Material button warning color
+  $warning-palette: mat.$orange-palette;
+  $color-tokens: map.merge(
+    $color-tokens,
+    (
+      // Use white text for bright warning color for better contrast
+      kpi-card-warning-color: light-dark(#ffffff, map.get($warning-palette, 20)),
+      // Use orange 60 for light mode (similar to Material button warning), 80 for dark mode
+      kpi-card-warning-bg: light-dark(map.get($warning-palette, 60), map.get($warning-palette, 80))
+    )
+  );
+
+  // Add info (bright) color using azure palette
+  $info-palette: mat.$azure-palette;
+  $color-tokens: map.merge(
+    $color-tokens,
+    (
+      // Use white text for bright info color for better contrast
+      kpi-card-info-color: light-dark(#ffffff, map.get($info-palette, 20)),
+      kpi-card-info-bg: light-dark(map.get($info-palette, 50), map.get($info-palette, 70))
+    )
+  );
+
+  $tokens: (
+    base: (
+      kpi-card-container-shape: map.get($system, corner-medium),
+      kpi-card-container-height: 200px,
+      kpi-card-container-elevation: 1,
+    ),
+    color: map.merge(
+        (
+          // Primary: Use primary theme color with on-primary text
+          kpi-card-primary-color: map.get($system, on-primary),
+          kpi-card-primary-bg: map.get($system, primary),
+          // Secondary: Use secondary theme color with on-secondary text
+          kpi-card-secondary-color: map.get($system, on-secondary),
+          kpi-card-secondary-bg: map.get($system, secondary),
+          // Error: Use error theme color with on-error text (Material Design 3 standard)
+          kpi-card-error-color: map.get($system, on-error),
+          kpi-card-error-bg: map.get($system, error),
+          // Neutral: Minimal styling for subtle cards
+          kpi-card-neutral-color: map.get($system, on-surface-variant),
+          kpi-card-neutral-bg: map.get($system, surface-variant),
+          // Custom: Allow full customization
+          kpi-card-custom-color: map.get($system, on-surface),
+          kpi-card-custom-bg: map.get($system, surface-container)
+        ),
+        $color-tokens
+      ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}