@acontplus/ng-components 2.1.30 → 2.1.32

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

@@ -0,0 +1,297 @@
+:root {
+  --acp-secondary: #e0e0e0;
+  --acp-secondary-on: #000000;
+  --acp-success: #4caf50;
+  --acp-success-on: #ffffff;
+  --acp-danger: #ba1a1a;
+  --acp-danger-on: #ffffff;
+  --acp-warning: #ff9800;
+  --acp-warning-on: #000000;
+  --acp-info: #2196f3;
+  --acp-info-on: #ffffff;
+  --acp-dark: #212121;
+  --acp-dark-on: #ffffff;
+}
+
+.dark-theme {
+  --acp-secondary: #424242;
+  --acp-secondary-on: #ffffff;
+  --acp-success: #81c784;
+  --acp-success-on: #1b5e20;
+  --acp-danger: #ef5350;
+  --acp-danger-on: #b71c1c;
+  --acp-warning: #ffb74d;
+  --acp-warning-on: #e65100;
+  --acp-info: #64b5f6;
+  --acp-info-on: #0d47a1;
+  --acp-dark: #616161;
+  --acp-dark-on: #ffffff;
+}
+
+acp-button {
+  display: inline-block;
+  // margin: 4px;
+}
+
+// Button content alignment - center icon and text vertically
+.mat-mdc-button,
+.mat-mdc-unelevated-button,
+.mat-mdc-raised-button,
+.mat-mdc-outlined-button,
+button[matbutton='tonal'],
+.mat-mdc-fab.mdc-fab--extended {
+  .mdc-button__label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+// Filled buttons - target Material's generated classes
+.mat-mdc-button.mat-btn-secondary,
+.mat-mdc-unelevated-button.mat-btn-secondary {
+  background-color: var(--acp-secondary) !important;
+  color: var(--acp-secondary-on) !important;
+}
+
+.mat-mdc-button.mat-btn-secondary:hover,
+.mat-mdc-unelevated-button.mat-btn-secondary:hover {
+  background-color: color-mix(in srgb, var(--acp-secondary) 80%, black) !important;
+}
+
+.mat-mdc-button.mat-btn-success,
+.mat-mdc-unelevated-button.mat-btn-success {
+  background-color: var(--acp-success) !important;
+  color: var(--acp-success-on) !important;
+}
+
+.mat-mdc-button.mat-btn-danger,
+.mat-mdc-unelevated-button.mat-btn-danger {
+  background-color: var(--acp-danger) !important;
+  color: var(--acp-danger-on) !important;
+}
+
+.mat-mdc-button.mat-btn-warning,
+.mat-mdc-unelevated-button.mat-btn-warning {
+  background-color: var(--acp-warning) !important;
+  color: var(--acp-warning-on) !important;
+}
+
+.mat-mdc-button.mat-btn-info,
+.mat-mdc-unelevated-button.mat-btn-info {
+  background-color: var(--acp-info) !important;
+  color: var(--acp-info-on) !important;
+}
+
+.mat-mdc-button.mat-btn-dark,
+.mat-mdc-unelevated-button.mat-btn-dark {
+  background-color: var(--acp-dark) !important;
+  color: var(--acp-dark-on) !important;
+}
+
+// Tonal buttons - lighter background
+button[matbutton='tonal'].mat-btn-success {
+  background-color: color-mix(in srgb, var(--acp-success) 12%, transparent) !important;
+  color: var(--acp-success) !important;
+}
+
+button[matbutton='tonal'].mat-btn-danger {
+  background-color: color-mix(in srgb, var(--acp-danger) 12%, transparent) !important;
+  color: var(--acp-danger) !important;
+}
+
+button[matbutton='tonal'].mat-btn-warning {
+  background-color: color-mix(in srgb, var(--acp-warning) 12%, transparent) !important;
+  color: var(--acp-warning) !important;
+}
+
+button[matbutton='tonal'].mat-btn-info {
+  background-color: color-mix(in srgb, var(--acp-info) 12%, transparent) !important;
+  color: var(--acp-info) !important;
+}
+
+button[matbutton='tonal'].mat-btn-dark {
+  background-color: color-mix(in srgb, var(--acp-dark) 12%, transparent) !important;
+  color: var(--acp-dark) !important;
+}
+
+// Text buttons - only text color
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-secondary {
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-success {
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-danger {
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-warning {
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-info {
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-button:not(.mat-mdc-unelevated-button):not(.mat-mdc-raised-button):not(
+    .mat-mdc-outlined-button
+  ).mat-btn-dark {
+  color: var(--acp-dark) !important;
+}
+
+// Elevated buttons - surface background with colored text, container background on hover
+.mat-mdc-raised-button.mat-btn-secondary {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-success {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-success:hover {
+  background-color: color-mix(in srgb, var(--acp-success) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-danger {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-danger:hover {
+  background-color: color-mix(in srgb, var(--acp-danger) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-warning {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-warning:hover {
+  background-color: color-mix(in srgb, var(--acp-warning) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-info {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-info:hover {
+  background-color: color-mix(in srgb, var(--acp-info) 12%, transparent) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-dark {
+  background-color: var(--mat-sys-surface-container-low) !important;
+  color: var(--acp-dark) !important;
+}
+
+.mat-mdc-raised-button.mat-btn-dark:hover {
+  background-color: color-mix(in srgb, var(--acp-dark) 12%, transparent) !important;
+}
+
+// Outlined buttons
+.mat-mdc-outlined-button.mat-btn-secondary {
+  border-color: var(--mat-sys-outline) !important;
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-success {
+  border-color: var(--acp-success) !important;
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-danger {
+  border-color: var(--acp-danger) !important;
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-warning {
+  border-color: var(--acp-warning) !important;
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-info {
+  border-color: var(--acp-info) !important;
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-outlined-button.mat-btn-dark {
+  border-color: var(--acp-dark) !important;
+  color: var(--acp-dark) !important;
+}
+
+// FAB buttons (regular, mini, and extended)
+.mat-mdc-fab.mat-btn-secondary,
+.mat-mdc-mini-fab.mat-btn-secondary {
+  background-color: var(--acp-secondary) !important;
+  color: var(--acp-secondary-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-success,
+.mat-mdc-mini-fab.mat-btn-success {
+  background-color: var(--acp-success) !important;
+  color: var(--acp-success-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-danger,
+.mat-mdc-mini-fab.mat-btn-danger {
+  background-color: var(--acp-danger) !important;
+  color: var(--acp-danger-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-warning,
+.mat-mdc-mini-fab.mat-btn-warning {
+  background-color: var(--acp-warning) !important;
+  color: var(--acp-warning-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-info,
+.mat-mdc-mini-fab.mat-btn-info {
+  background-color: var(--acp-info) !important;
+  color: var(--acp-info-on) !important;
+}
+
+.mat-mdc-fab.mat-btn-dark,
+.mat-mdc-mini-fab.mat-btn-dark {
+  background-color: var(--acp-dark) !important;
+  color: var(--acp-dark-on) !important;
+}
+
+// Icon buttons
+.mat-mdc-icon-button.mat-btn-secondary {
+  color: var(--mat-sys-on-surface) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-success {
+  color: var(--acp-success) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-danger {
+  color: var(--acp-danger) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-warning {
+  color: var(--acp-warning) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-info {
+  color: var(--acp-info) !important;
+}
+
+.mat-mdc-icon-button.mat-btn-dark {
+  color: var(--acp-dark) !important;
+}

package/src/lib/components/cards/dynamic-card/dynamic-card.scss

@@ -0,0 +1,131 @@
+//@use "@angular/material" as mat;
+//
+//:host {
+//  display: block;
+//  box-sizing: border-box;
+//
+//  mat-card {
+//    height: 100%;
+//    display: flex;
+//    flex-direction: column;
+//    transition:
+//            box-shadow 200ms ease,
+//            transform 200ms ease;
+//    overflow: hidden;
+//
+//    &:hover {
+//      // mat.elevation is already theme-aware.
+//      @include mat.elevation(4);
+//      transform: translateY(-2px);
+//    }
+//
+//    &-header {
+//      padding: 1rem 1rem 0.5rem;
+//
+//      mat-card-title {
+//        font-weight: 500;
+//        line-height: 1.2;
+//        margin-bottom: 0.25rem;
+//      }
+//
+//      mat-card-subtitle {
+//        // Use a theme color for subtitles, e.g., text-secondary.
+//        // The `mat.get-theme-color` function allows you to get specific colors from your theme.
+//        // Here, 'text' refers to the text palette and 'secondary' is a shade within it.
+//        // You might need to adjust 'secondary' based on your specific theme definition
+//        // or use `mat.get-color-from-palette($theme-palette, $color-shade)`.
+//        color: mat.get-theme-color(text, secondary);
+//        line-height: 1.3;
+//      }
+//
+//      [mat-card-avatar] {
+//        width: 40px;
+//        height: 40px;
+//        border-radius: 50%;
+//        margin-right: 1rem;
+//        // Use a theme color for the border, e.g., divider or text-disabled.
+//        border: 2px solid mat.get-theme-color(divider);
+//      }
+//    }
+//
+//    &-content {
+//      flex: 1;
+//      padding: 1rem;
+//      overflow: auto;
+//
+//      &:not(:first-child) {
+//        padding-top: 0;
+//      }
+//    }
+//
+//    &.mat-card-divider {
+//      // Use a theme color for the divider.
+//      border-top: 1px solid mat.get-theme-color(divider);
+//      padding-top: 0.5rem;
+//    }
+//
+//    &-actions {
+//      padding: 0.5rem 1rem 1rem;
+//      margin: 0;
+//      min-height: 52px;
+//      box-sizing: border-box;
+//      display: flex;
+//      flex-wrap: wrap;
+//      gap: 0.5rem;
+//
+//      &[align="end"] {
+//        justify-content: flex-end;
+//      }
+//
+//      &[align="center"] {
+//        justify: center;
+//      }
+//
+//      &[align="start"] {
+//        justify-content: flex-start;
+//      }
+//
+//      button {
+//        margin: 0 0.25rem;
+//        min-width: 88px; // Material spec minimum button width
+//
+//        mat-icon {
+//          margin-right: 0.5rem;
+//          font-size: 18px;
+//          height: 18px;
+//          width: 18px;
+//        }
+//      }
+//    }
+//  }
+//
+//  // Responsive adjustments
+//  @media (max-width: 600px) {
+//    mat-card {
+//      &-header {
+//        padding: 0.75rem 0.75rem 0.25rem;
+//
+//        [mat-card-avatar] {
+//          width: 36px;
+//          height: 36px;
+//          margin-right: 0.75rem;
+//        }
+//      }
+//
+//      &-content {
+//        padding: 0.75rem;
+//      }
+//
+//      &-actions {
+//        padding: 0.5rem;
+//        flex-direction: column;
+//        gap: 0.5rem;
+//
+//        button {
+//          width: 100%;
+//          margin: 0.25rem 0;
+//        }
+//      }
+//    }
+//  }
+//}

package/src/lib/components/checkbox-group/checkbox-group.scss

@@ -0,0 +1,14 @@
+.acp-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .acp-checkbox-master {
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+  }
+
+  .acp-checkbox-normal {
+    margin-left: 1rem;
+  }
+}

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

@@ -0,0 +1,29 @@
+/**
+ * AcpDateRangeCalendar Component Styles
+ *
+ * Styling for the dual-calendar view with responsive layout.
+ * @author AcontPlus S.A.S
+ * @version 2.0.0
+ */
+.mat-calendar {
+  min-width: 250px;
+}
+
+.calendar-container {
+  width: 100%;
+  display: flex;
+}
+
+.first-view,
+.second-view {
+  flex: 1 1 50%;
+  min-width: 0; /* allow each calendar to shrink within its half */
+  margin-top: 0.5rem;
+}
+
+@media (max-width: 490px) {
+  /* Stack the two calendar views; align-items: stretch makes each full width. */
+  .calendar-container {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,194 @@
+/**
+ * AcpDateRangeInput Component Styles
+ * @author AcontPlus S.A.S
+ * @version 1.0.0
+ *
+ * Styling for the comprehensive date range picker component.
+ * Uses Material Design 3 theming system with CSS custom properties.
+ */
+
+@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;
+}
+
+// Make the selected (activated) option clearly visible - the M3 theme leaves
+// the activated state of an action-list item unstyled. Consumers can override
+// via the --ndp-selected-option-bg custom property.
+mat-list-item.mdc-list-item--activated {
+  background-color: var(
+    --ndp-selected-option-bg,
+    var(--mat-sys-secondary-container, rgba(0, 0, 0, 0.08))
+  );
+}
+
+::ng-deep.cdk-overlay-pane:has(.custom-ckd-container),
+::ng-deep.cdk-overlay-pane:has(.ndp-cdk-container) {
+  width: 100%;
+  background-color: var(--mat-sys-surface-container);
+  max-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-width: 700px;
+  margin-top: -22px;
+  border: 1px solid var(--mat-sys-surface-container);
+}
+
+::ng-deep.cdk-overlay-pane:has(.range-input) {
+  max-width: 250px;
+}
+
+.br-top {
+  border-top: 1px solid var(--mat-sys-surface-container);
+}
+
+.br-right {
+  border-right: 1px solid var(--mat-sys-surface-container);
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.mat-button,
+.mdc-button {
+  font-family: var(--mat-list-list-item-label-text-font);
+  line-height: var(--mat-list-list-item-label-text-line-height);
+  font-size: var(--mat-list-list-item-label-text-size);
+  font-weight: var(--mat-list-list-item-label-text-weight);
+  letter-spacing: var(--mat-list-list-item-label-text-tracking);
+}
+
+.w-full {
+  width: 100%;
+}
+
+.display-hidden {
+  display: none;
+}
+
+.custom-calendar-container,
+.ndp-calendar-container {
+  width: 100%;
+}
+
+.row-1,
+.row-2 {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+// Flex layout lets the divider between the columns stretch to the row's
+// full height automatically (align-items: stretch), so differing column
+// heights never leave a gap.
+.row-1 {
+  display: flex;
+  align-items: stretch;
+}
+
+.row-2 {
+  padding: 16px;
+}
+
+// Full-height divider between the options column and the calendar.
+// As a flex child it stretches to the row height with no positioning hacks.
+.ndp-column-separator {
+  flex: 0 0 1px;
+  background-color: var(--mat-sys-surface-container);
+}
+
+.footer-content,
+.ndp-footer-content {
+  align-items: center;
+  display: flex;
+  text-align: right;
+  justify-content: end;
+  gap: 16px; // Gap between label and buttons
+  text-overflow: ellipsis;
+
+  .buttons {
+    display: flex;
+    gap: 8px; // Gap between buttons
+  }
+}
+
+// Editable start/end inputs shown in the footer when enableEditableDates is on.
+.ndp-date-inputs {
+  display: flex;
+  gap: 8px;
+  margin-right: auto; // keep the inputs left, push the buttons to the right
+  align-items: flex-start; // don't stretch one field to match the other's error height
+}
+
+.ndp-date-field {
+  width: 150px;
+}
+
+.column-1 {
+  flex: 0 0 25%;
+  overflow: auto;
+}
+
+.column-2 {
+  flex: 1 1 auto;
+  min-width: 0; // allow the calendar column to shrink below its content size
+}
+
+// When default options are hidden, column-1 and the separator aren't
+// rendered, so column-2's `flex: 1 1 auto` fills the row on its own.
+.without-default-opt {
+  .column-1 {
+    display: none;
+  }
+}
+
+@media (max-width: 400px) {
+  .footer-content,
+  .ndp-footer-content {
+    display: block;
+
+    .buttons {
+      justify-content: flex-end;
+      margin-top: 20px;
+    }
+  }
+
+  #range-label-text {
+    margin-right: 1.5rem;
+  }
+}
+
+@media (max-width: 650px) {
+  // Stack the columns; align-items: stretch then makes each full width.
+  .row-1 {
+    flex-direction: column;
+  }
+
+  .column-1 {
+    flex-basis: auto;
+  }
+
+  .column-separator {
+    display: none;
+  }
+}
+
+.pe-0 {
+  padding-right: 0;
+}
+
+.ps-0 {
+  padding-left: 0;
+}
+
+button.checked {
+  color: var(--mat-sys-primary);
+  border-radius: 4px;
+}

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

@@ -0,0 +1,36 @@
+.acp-dialog-header {
+  cursor: move;
+  //padding: 12px 24px;
+  border-bottom: 1px solid var(--mat-sys-outline-variant, #dee2e6);
+  color: var(--mat-sys-on-surface, #212529);
+  position: relative;
+}
+
+h6[mat-dialog-title].acp-dialog-title {
+  display: flex;
+  align-items: center;
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin: 0;
+  width: 100%;
+  padding-right: 48px;
+}
+
+.acp-dialog-title-icon {
+  margin-right: 12px;
+  vertical-align: middle;
+}
+
+h6[mat-dialog-title].acp-dialog-title span {
+  flex-grow: 1;
+}
+
+mat-dialog-content {
+  padding: 24px;
+}
+
+.acp-dialog-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+}