@acontplus/ng-components 3.1.0 → 3.2.1

package/package.json

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

package/src/lib/components/button/v2/button.scss

@@ -164,6 +164,14 @@
   @include mat.icon-overrides(());
 }
 
+[matIconButton].acp-light {
+  @include mat.icon-overrides(
+    (
+      color: #ffffff,
+    )
+  );
+}
+
 [matFab].acp-primary {
   @include mat.fab-overrides(
     (

package/src/lib/components/date-range-input/date-range-input.scss

@@ -9,11 +9,6 @@
 
 @use '@angular/material' as mat;
 
-// Disable Backdrop css
-::ng-deep.cdk-overlay-dark-backdrop {
-  background: none;
-}
-
 mat-list-item.mat-mdc-list-item {
   height: 40px;
 }
@@ -36,7 +31,7 @@ mat-list-item.mdc-list-item--activated {
   overflow-y: auto;
   overflow-x: hidden;
   max-width: 700px;
-  margin-top: -22px;
+  margin-top: -0px;
   border: 1px solid var(--mat-sys-surface-container);
 }
 

package/src/lib/components/dialog/acp-dialog-container.scss

@@ -0,0 +1,140 @@
+// Structural styles for the dialog shell. All themeable values are exposed
+// as `--acp-dialog-*` custom properties; override them via a global class.
+
+// The container is a flex column so the content area grows and pushes any
+// footer / actions to the bottom when the dialog has a fixed height (e.g. full-screen).
+
+.acp-dialog-header {
+  cursor: move;
+  border-bottom: 1px solid
+    var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));
+  color: var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));
+  position: relative;
+
+  // Predefined color variants. Override these with CSS custom properties or `colorClass`.
+  &.acp-dialog-header--primary {
+    background-color: var(
+      --acp-dialog-primary-header-background-color,
+      var(--mat-sys-primary, #1976d2)
+    );
+    color: var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff));
+  }
+  &.acp-dialog-header--secondary {
+    background-color: var(
+      --acp-dialog-secondary-header-background-color,
+      var(--mat-sys-secondary, #9c27b0)
+    );
+    color: var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff));
+  }
+  &.acp-dialog-header--accent {
+    background-color: var(
+      --acp-dialog-accent-header-background-color,
+      var(--mat-sys-tertiary, #7c4dff)
+    );
+    color: var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff));
+  }
+  &.acp-dialog-header--error,
+  &.acp-dialog-header--danger {
+    background-color: var(
+      --acp-dialog-error-header-background-color,
+      var(--mat-sys-error, #b3261e)
+    );
+    color: var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff));
+  }
+  &.acp-dialog-header--success {
+    background-color: var(--acp-dialog-success-header-background-color, #22c55e);
+    color: var(--acp-dialog-success-header-text-color, #fff);
+  }
+  &.acp-dialog-header--warning {
+    background-color: var(--acp-dialog-warning-header-background-color, #f59e0b);
+    color: var(--acp-dialog-warning-header-text-color, #212529);
+  }
+  &.acp-dialog-header--info {
+    background-color: var(--acp-dialog-info-header-background-color, #0ea5e9);
+    color: var(--acp-dialog-info-header-text-color, #fff);
+  }
+  &.acp-dialog-header--dark {
+    background-color: var(--acp-dialog-dark-header-background-color, #212529);
+    color: var(--acp-dialog-dark-header-text-color, #fff);
+  }
+
+  &[class*='acp-dialog-header--'] {
+    .acp-dialog-subtitle {
+      color: inherit;
+      opacity: 0.85;
+    }
+  }
+}
+
+h6[mat-dialog-title].acp-dialog-title {
+  display: flex;
+  align-items: center;
+  font-size: var(--acp-dialog-title-font-size, 1.2rem);
+  font-weight: var(--acp-dialog-title-font-weight, 500);
+  margin: 0;
+  width: 100%;
+  padding-right: 48px;
+  color: currentColor;
+}
+
+.acp-dialog-title-icon {
+  margin-right: var(--acp-dialog-title-icon-gap, 12px);
+  vertical-align: middle;
+}
+
+h6[mat-dialog-title].acp-dialog-title span {
+  flex-grow: 1;
+}
+
+.acp-dialog-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+}
+
+.acp-dialog-subtitle {
+  margin: 0;
+  padding: 0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);
+  font-size: var(--acp-dialog-subtitle-font-size, 0.875rem);
+  color: var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d));
+}
+
+.acp-dialog-message {
+  padding: var(--acp-dialog-message-padding, 24px);
+  color: var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529));
+}
+
+.acp-dialog-message-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px);
+}
+
+.acp-dialog-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--acp-dialog-actions-gap, 8px);
+  padding: var(--acp-dialog-actions-padding, 16px 24px);
+  border-top: 1px solid
+    var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6));
+}
+
+// Full-screen dialog: pin the action footer to the bottom of the viewport.
+.acp-dialog-full-screen .mat-mdc-dialog-surface {
+  height: 100vh;
+}
+
+.acp-dialog-full-screen acp-dialog-container {
+  min-height: 100vh;
+}
+
+.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content {
+  max-height: 100%;
+  height: 100%;
+}
+
+.acp-dialog-full-screen .acp-dialog-actions,
+.acp-dialog-full-screen .mat-mdc-dialog-actions {
+  margin-top: auto;
+}

package/src/lib/components/dialog-wrapper/dialog-wrapper.scss

@@ -24,10 +24,6 @@ h6[mat-dialog-title].acp-dialog-title span {
   flex-grow: 1;
 }
 
-mat-dialog-content {
-  padding: 24px;
-}
-
 .acp-dialog-close-btn {
   position: absolute;
   top: 8px;