@acontplus/ng-components 2.1.32 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acontplus/ng-components",
-  "version": "2.1.32",
+  "version": "2.4.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",
@@ -114,4 +114,4 @@
   "dependencies": {
     "tslib": "^2.3.0"
   }
-}
+}

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/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/button/v2/button.scss

@@ -0,0 +1,221 @@
+@use '@angular/material' as mat;
+
+.acp-primary {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--theme-primary-color),
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: var(--theme-primary-color),
+      protected-label-text-color: var(--theme-primary-color),
+      text-label-text-color: var(--theme-primary-color),
+      text-state-layer-color: var(--theme-primary-color),
+    )
+  );
+}
+
+.acp-secondary {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--mat-sys-secondary),
+      filled-label-text-color: var(--mat-sys-on-secondary),
+      outlined-label-text-color: var(--mat-sys-secondary),
+      protected-label-text-color: var(--mat-sys-secondary),
+      text-label-text-color: var(--mat-sys-secondary),
+      text-state-layer-color: var(--mat-sys-secondary),
+    )
+  );
+}
+
+.acp-accent {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--mat-sys-tertiary),
+      filled-label-text-color: var(--mat-sys-on-tertiary),
+      outlined-label-text-color: var(--mat-sys-tertiary),
+      protected-label-text-color: var(--mat-sys-tertiary),
+      text-label-text-color: var(--mat-sys-tertiary),
+      text-state-layer-color: var(--mat-sys-tertiary),
+    )
+  );
+}
+
+.acp-error {
+  @include mat.button-overrides(
+    (
+      filled-container-color: var(--mat-sys-error),
+      filled-label-text-color: var(--mat-sys-on-error),
+      outlined-label-text-color: var(--mat-sys-error),
+      protected-label-text-color: var(--mat-sys-error),
+      text-label-text-color: var(--mat-sys-error),
+      text-state-layer-color: var(--mat-sys-error),
+    )
+  );
+}
+
+.acp-success {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #4caf50,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #4caf50,
+      protected-label-text-color: #4caf50,
+      text-label-text-color: #4caf50,
+      text-state-layer-color: #4caf50,
+    )
+  );
+}
+
+.acp-warning {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #f59e0b,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #f59e0b,
+      protected-label-text-color: #f59e0b,
+      text-label-text-color: #f59e0b,
+      text-state-layer-color: #f59e0b,
+    )
+  );
+}
+
+.acp-info {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #3b82f6,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #3b82f6,
+      protected-label-text-color: #3b82f6,
+      text-label-text-color: #3b82f6,
+      text-state-layer-color: #3b82f6,
+    )
+  );
+}
+
+.acp-dark {
+  @include mat.button-overrides(
+    (
+      filled-container-color: #1f2937,
+      filled-label-text-color: #ffffff,
+      outlined-label-text-color: #1f2937,
+      protected-label-text-color: #1f2937,
+      text-label-text-color: #1f2937,
+      text-state-layer-color: #1f2937,
+    )
+  );
+}
+
+[matIconButton].acp-primary {
+  @include mat.icon-overrides(
+    (
+      color: var(--theme-primary-color),
+    )
+  );
+}
+
+[matIconButton].acp-secondary {
+  @include mat.icon-overrides(
+    (
+      color: var(--mat-sys-secondary),
+    )
+  );
+}
+
+[matIconButton].acp-accent {
+  @include mat.icon-overrides(
+    (
+      color: var(--mat-sys-tertiary),
+    )
+  );
+}
+
+[matIconButton].acp-error {
+  @include mat.icon-overrides(
+    (
+      color: var(--mat-sys-error),
+    )
+  );
+}
+
+[matIconButton].acp-success {
+  @include mat.icon-overrides(
+    (
+      color: #10b981,
+    )
+  );
+}
+
+[matIconButton].acp-warning {
+  @include mat.icon-overrides(
+    (
+      color: #f59e0b,
+    )
+  );
+}
+
+[matIconButton].acp-info {
+  @include mat.icon-overrides(
+    (
+      color: #3b82f6,
+    )
+  );
+}
+
+[matIconButton].acp-dark {
+  @include mat.icon-overrides(
+    (
+      color: #1f2937,
+    )
+  );
+}
+
+.acp-square {
+  @include mat.button-overrides(
+    (
+      filled-container-shape: 8px,
+      outlined-container-shape: 8px,
+      protected-container-shape: 8px,
+      text-container-shape: 8px,
+      tonal-container-shape: 8px,
+    )
+  );
+  --mat-icon-button-container-shape: 8px;
+}
+
+.acp-medium {
+  @include mat.theme(
+    (
+      density: -1,
+    )
+  );
+  @include mat.button-overrides(
+    (
+      filled-horizontal-padding: 20px,
+      outlined-horizontal-padding: 20px,
+      protected-horizontal-padding: 20px,
+      text-horizontal-padding: 20px,
+      tonal-horizontal-padding: 20px,
+    )
+  );
+
+  @include mat.button-toggle-overrides(
+    (
+      height: 36px,
+    )
+  );
+}
+.acp-small {
+  @include mat.theme(
+    (
+      density: -2,
+    )
+  );
+  @include mat.button-overrides(
+    (
+      filled-horizontal-padding: 16px,
+      outlined-horizontal-padding: 16px,
+      protected-horizontal-padding: 16px,
+      text-horizontal-padding: 16px,
+      tonal-horizontal-padding: 16px,
+    )
+  );
+}