@acontplus/ng-components 3.2.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acontplus/ng-components",
-  "version": "3.2.1",
+  "version": "4.0.0",
   "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",

package/src/lib/components/card/card.scss

@@ -1,225 +1,238 @@
+@use 'sass:list';
 @use '@angular/material' as mat;
 
-// Card component styling with Material Design tokens
-// Using mat.card-overrides to customize card-specific design tokens
+// Public CSS custom properties (set them on `acp-card` or any ancestor):
+//   --acp-card-shape, --acp-card-elevation, --acp-card-padding,
+//   --acp-card-container-color, --acp-card-on-color, --acp-card-subtitle-color,
+//   --acp-card-outline-color
+$shape: var(--acp-card-shape, var(--mat-sys-corner-small));
+
+:host {
+  --acp-card-padding: 16px;
+  display: block;
+  border-radius: $shape;
+
+  &:focus-visible {
+    outline: 2px solid var(--mat-sys-primary);
+    outline-offset: 2px;
+  }
+}
+
 .acp-card {
   @include mat.card-overrides(
     (
-      elevated-container-color: light-dark(#ffffff, #1a1b1f),
-      outlined-container-color: light-dark(#ffffff, #1a1b1f),
-      title-text-line-height: 1.6rem,
+      elevated-container-color: var(
+          --acp-card-container-color,
+          var(--mat-sys-surface-container-low)
+        ),
+      outlined-container-color: var(--acp-card-container-color, var(--mat-sys-surface)),
+      filled-container-color: var(
+          --acp-card-container-color,
+          var(--mat-sys-surface-container-highest)
+        ),
+      elevated-container-shape: $shape,
+      outlined-container-shape: $shape,
+      filled-container-shape: $shape,
+      elevated-container-elevation: var(--acp-card-elevation, var(--mat-sys-level1)),
+      outlined-outline-color: var(--acp-card-outline-color, var(--mat-sys-outline-variant)),
+      title-text-size: var(--mat-sys-title-large-size),
+      title-text-line-height: var(--mat-sys-title-large-line-height),
       title-text-weight: 500,
+      subtitle-text-size: var(--mat-sys-body-medium-size),
       subtitle-text-weight: 400,
-      elevated-container-shape: var(--mat-sys-corner-small),
-      outlined-container-shape: var(--mat-sys-corner-small),
-      // elevated-container-color: var(--mat-sys-surface-container),
-      // elevated-container-shape: var(--mat-sys-corner-large),
-      // outlined-container-shape: var(--mat-sys-corner-large),
-      outlined-outline-color: var(--mat-sys-outline-variant),
-      filled-container-color: var(--mat-sys-surface-container-highest),
-      title-text-size: var(--mat-sys-title-large),
-      subtitle-text-size: var(--mat-sys-body-medium),
-      subtitle-text-color: var(--mat-sys-on-surface-variant),
-      elevated-container-elevation: 0 4px 12px rgba(0, 0, 0, 0.08),
+      subtitle-text-color: var(--acp-card-subtitle-color, var(--mat-sys-on-surface-variant)),
     )
   );
-}
-
-// Custom styles for card sections
-.acp-card-media {
-  width: 100%;
-  object-fit: cover;
-  border-radius: var(--mat-sys-corner-large) var(--mat-sys-corner-large) 0 0;
-}
-
-// Footer padding
-.mat-mdc-card-footer {
-  padding: 16px;
-}
-
-// Actions gap
-.mat-mdc-card-actions {
-  gap: 8px;
-}
-
-// Host wrapper styles
-.acp-card-wrapper {
-  display: block;
-  transition: box-shadow 0.2s ease-in-out;
-
-  // Hover effect
-  &.acp-card--hover:hover {
-    box-shadow: var(--mat-sys-level3);
-  }
-
-  // Clickable state
-  &.acp-card--clickable {
-    cursor: pointer;
-    user-select: none;
-
-    &:hover {
-      box-shadow: var(--mat-sys-level2);
-    }
-
-    &:active {
-      box-shadow: var(--mat-sys-level1);
-    }
-  }
-
-  // Disabled state
-  &.acp-card--disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
 
-  // Border radius variants
-  &.acp-card--rounded-4 {
-    .acp-card,
-    .acp-card-media {
-      border-radius: 4px;
-    }
-  }
-
-  &.acp-card--rounded-8 {
-    .acp-card,
-    .acp-card-media {
-      border-radius: 8px;
-    }
-  }
-
-  &.acp-card--rounded-12 {
-    .acp-card,
-    .acp-card-media {
-      border-radius: 12px;
-    }
-  }
-
-  &.acp-card--rounded-16 {
-    .acp-card,
-    .acp-card-media {
-      border-radius: 16px;
-    }
-  }
+  color: var(--acp-card-on-color, var(--mat-sys-on-surface));
+  transition: box-shadow 200ms ease-in-out;
 
-  &.acp-card--rounded-20 {
-    .acp-card,
-    .acp-card-media {
-      border-radius: 20px;
-    }
+  .mat-mdc-card-content {
+    padding: var(--acp-card-padding);
   }
 
-  &.acp-card--rounded-24 {
-    .acp-card,
-    .acp-card-media {
-      border-radius: 24px;
-    }
+  .mat-mdc-card-actions {
+    gap: 8px;
   }
 
-  // Padding variants
-  &.acp-card--padding-small {
-    .mat-mdc-card-content {
-      padding: 12px;
-    }
+  .mat-mdc-card-footer {
+    padding: 16px;
   }
+}
 
-  &.acp-card--padding-medium {
-    .mat-mdc-card-content {
-      padding: 16px;
-    }
-  }
+.acp-card__progress {
+  position: absolute;
+  inset: 0 0 auto;
+  z-index: 1;
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
+  overflow: hidden;
+}
 
-  &.acp-card--padding-large {
-    .mat-mdc-card-content {
-      padding: 24px;
-    }
-  }
+.acp-card__media {
+  overflow: hidden;
 
-  // Full height
-  &.acp-card--full-height {
-    height: 100%;
+  &:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
   }
 
-  // Full width
-  &.acp-card--full-width {
+  &--ratio > :is(img, video, picture, iframe) {
+    display: block;
     width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
 }
 
-// Material Design background color utility classes
-// Primary
-.acp-card--primary {
-  color: var(--mat-sys-on-primary);
-  background-color: var(--mat-sys-primary);
-}
-
-.acp-card--primary-container {
-  color: var(--mat-sys-on-primary-container);
-  background-color: var(--mat-sys-primary-container);
+// Padding
+:host(.acp-card--padding-none) {
+  --acp-card-padding: 0;
 }
 
-// Secondary
-.acp-card--secondary {
-  color: var(--mat-sys-on-secondary);
-  background-color: var(--mat-sys-secondary);
+:host(.acp-card--padding-small) {
+  --acp-card-padding: 12px;
 }
 
-.acp-card--secondary-container {
-  color: var(--mat-sys-on-secondary-container);
-  background-color: var(--mat-sys-secondary-container);
+:host(.acp-card--padding-large) {
+  --acp-card-padding: 24px;
 }
 
-// Error
-.acp-card--error {
-  color: var(--mat-sys-on-error);
-  background-color: var(--mat-sys-error);
+// Interaction states
+:host(.acp-card--hover) .acp-card:hover {
+  box-shadow: var(--mat-sys-level3);
 }
 
-.acp-card--error-container {
-  color: var(--mat-sys-on-error-container);
-  background-color: var(--mat-sys-error-container);
-}
+:host(.acp-card--clickable) {
+  cursor: pointer;
+  user-select: none;
 
-// Surfaces
-.acp-card--surface {
-  color: var(--mat-sys-on-surface);
-  background-color: var(--mat-sys-surface);
-}
+  .acp-card:hover {
+    box-shadow: var(--mat-sys-level2);
+  }
 
-.acp-card--surface-variant {
-  color: var(--mat-sys-on-surface-variant);
-  background-color: var(--mat-sys-surface-variant);
+  .acp-card:active {
+    box-shadow: var(--mat-sys-level1);
+  }
 }
 
-.acp-card--surface-container-highest {
-  color: var(--mat-sys-on-surface);
-  background-color: var(--mat-sys-surface-container-highest);
+:host(.acp-card--disabled) {
+  opacity: 0.6;
+  pointer-events: none;
 }
 
-.acp-card--surface-container-high {
-  color: var(--mat-sys-on-surface);
-  background-color: var(--mat-sys-surface-container-high);
+:host(.acp-card--loading) {
+  cursor: progress;
 }
 
-.acp-card--surface-container {
-  color: var(--mat-sys-on-surface);
-  background-color: var(--mat-sys-surface-container);
-}
+// Layout
+:host(.acp-card--full-height) {
+  height: 100%;
 
-.acp-card--surface-container-low {
-  color: var(--mat-sys-on-surface);
-  background-color: var(--mat-sys-surface-container-low);
+  .acp-card {
+    height: 100%;
+  }
 }
 
-.acp-card--surface-container-lowest {
-  background-color: var(--mat-sys-surface-container-lowest);
+:host(.acp-card--full-width) {
+  width: 100%;
 }
 
-.acp-card--inverse-surface {
-  color: var(--mat-sys-inverse-on-surface);
-  background-color: var(--mat-sys-inverse-surface);
+// Color variants: container role, content role, subtitle role
+$colors: (
+  primary: (
+    primary,
+    on-primary,
+    on-primary,
+  ),
+  primary-container: (
+    primary-container,
+    on-primary-container,
+    on-primary-container,
+  ),
+  secondary: (
+    secondary,
+    on-secondary,
+    on-secondary,
+  ),
+  secondary-container: (
+    secondary-container,
+    on-secondary-container,
+    on-secondary-container,
+  ),
+  tertiary: (
+    tertiary,
+    on-tertiary,
+    on-tertiary,
+  ),
+  tertiary-container: (
+    tertiary-container,
+    on-tertiary-container,
+    on-tertiary-container,
+  ),
+  error: (
+    error,
+    on-error,
+    on-error,
+  ),
+  error-container: (
+    error-container,
+    on-error-container,
+    on-error-container,
+  ),
+  surface: (
+    surface,
+    on-surface,
+    on-surface-variant,
+  ),
+  surface-variant: (
+    surface-variant,
+    on-surface-variant,
+    on-surface-variant,
+  ),
+  surface-container-highest: (
+    surface-container-highest,
+    on-surface,
+    on-surface-variant,
+  ),
+  surface-container-high: (
+    surface-container-high,
+    on-surface,
+    on-surface-variant,
+  ),
+  surface-container: (
+    surface-container,
+    on-surface,
+    on-surface-variant,
+  ),
+  surface-container-low: (
+    surface-container-low,
+    on-surface,
+    on-surface-variant,
+  ),
+  surface-container-lowest: (
+    surface-container-lowest,
+    on-surface,
+    on-surface-variant,
+  ),
+  inverse-surface: (
+    inverse-surface,
+    inverse-on-surface,
+    inverse-on-surface,
+  ),
+);
+
+@each $name, $roles in $colors {
+  :host(.acp-card--#{$name}) {
+    --acp-card-container-color: var(--mat-sys-#{list.nth($roles, 1)});
+    --acp-card-on-color: var(--mat-sys-#{list.nth($roles, 2)});
+    --acp-card-subtitle-color: var(--mat-sys-#{list.nth($roles, 3)});
+    --acp-card-outline-color: transparent;
+  }
 }
 
-// Disabled
-.acp-card--disabled-bg {
-  background-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
+:host(.acp-card--disabled-bg) {
+  --acp-card-container-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
+  --acp-card-on-color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
+  --acp-card-subtitle-color: var(--acp-card-on-color);
 }

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

@@ -3,90 +3,75 @@
 @use '../../../core/tokens/m3-utils';
 @use '../../../core/tokens/m3';
 
+// Token model per color:
+//   kpi-card-<color>-bg      solid container (default, elevated, filled variants)
+//   kpi-card-<color>-color   content on the solid container
+//   kpi-card-<color>-accent  emphasis color on a surface (outlined, tonal variants, progress)
+// Delta badge tokens are independent from the card color, so a trend stays readable on any card.
 @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,
+  $semantic: (
+    success: mat.$green-palette,
+    warning: mat.$orange-palette,
+    info: mat.$azure-palette,
   );
 
   $color-tokens: ();
-  @each $name, $palette in $semantic-palettes {
+
+  @each $name, $palette in $semantic {
+    $accent: light-dark(map.get($palette, 40), map.get($palette, 80));
     $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))
+        kpi-card-#{$name}-bg: light-dark(map.get($palette, 50), map.get($palette, 70)),
+        kpi-card-#{$name}-color: light-dark(#ffffff, map.get($palette, 20)),
+        kpi-card-#{$name}-accent: $accent,
+        kpi-card-#{$name}-light-bg: light-dark(map.get($palette, 95), map.get($palette, 25)),
+        kpi-card-#{$name}-light-color: map.get($system, on-surface)
       )
     );
   }
 
-  // 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))
-    )
-  );
+  $red: mat.$red-palette;
+  $green: mat.$green-palette;
 
   $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-primary-color: map.get($system, on-primary),
+          kpi-card-primary-accent: map.get($system, primary),
           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-secondary-color: map.get($system, on-secondary),
+          kpi-card-secondary-accent: map.get($system, secondary),
           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-error-color: map.get($system, on-error),
+          kpi-card-error-accent: map.get($system, error),
+          kpi-card-error-light-bg: light-dark(map.get($red, 95), map.get($red, 25)),
+          kpi-card-error-light-color: map.get($system, on-surface),
           kpi-card-neutral-bg: map.get($system, surface-variant),
-          // Custom: Allow full customization
+          kpi-card-neutral-color: map.get($system, on-surface-variant),
+          kpi-card-neutral-accent: map.get($system, on-surface-variant),
+          kpi-card-surface-bg: map.get($system, surface-container-lowest),
+          kpi-card-surface-color: map.get($system, on-surface),
+          kpi-card-surface-accent: map.get($system, primary),
+          kpi-card-custom-bg: map.get($system, surface-container),
           kpi-card-custom-color: map.get($system, on-surface),
-          kpi-card-custom-bg: map.get($system, surface-container)
+          kpi-card-custom-accent: map.get($system, primary),
+          kpi-card-delta-positive-bg: color-mix(
+              in srgb,
+              light-dark(map.get($green, 40), map.get($green, 80)) 16%,
+              var(#{map.get($system, surface-container-lowest)})
+            ),
+          kpi-card-delta-positive-color: light-dark(map.get($green, 30), map.get($green, 90)),
+          kpi-card-delta-negative-bg: map.get($system, error-container),
+          kpi-card-delta-negative-color: map.get($system, on-error-container),
+          kpi-card-delta-neutral-bg: map.get($system, surface-container-highest),
+          kpi-card-delta-neutral-color: map.get($system, on-surface-variant),
         ),
         $color-tokens
       ),