@acontplus/ng-components 2.1.29 → 2.1.31

package/src/lib/components/data-grid/column-resize/_column-resize.scss

@@ -0,0 +1,126 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './../../../../core/tokens/token-utils';
+@use './../m3-grid';
+
+$fallbacks: m3-grid.get-tokens();
+
+// Required for resizing to work properly.
+.mat-column-resize-table.cdk-column-resize-with-resized-column {
+  table-layout: fixed;
+}
+
+.mat-column-resize-flex {
+  .mat-mdc-header-cell,
+  .mat-mdc-cell {
+    box-sizing: border-box;
+    min-width: 32px;
+  }
+}
+
+.mat-mdc-header-cell {
+  position: relative;
+}
+
+.mat-resizable {
+  box-sizing: border-box;
+}
+
+.mat-mdc-header-cell:not(.mat-resizable)::after,
+.mat-resizable-handle {
+  position: absolute;
+  bottom: 0;
+  top: 0;
+  right: 0;
+  width: 1px;
+  background: transparent;
+  transition: background mat.$private-swift-ease-in-duration
+    mat.$private-swift-ease-in-timing-function;
+}
+
+.mat-mdc-header-cell:not(.mat-resizable)::after {
+  content: '';
+}
+
+[dir='rtl'] {
+  .mat-mdc-header-cell:not(.mat-resizable)::after,
+  .mat-resizable-handle {
+    left: 0;
+    right: auto;
+  }
+
+  .mat-mdc-header-row.cdk-column-resize-hover-or-active {
+    .mat-header-cell,
+    .mat-mdc-header-cell {
+      border-left: none;
+    }
+  }
+}
+
+.mat-mdc-header-row.cdk-column-resize-hover-or-active {
+  .mat-mdc-header-cell {
+    border-right: none;
+  }
+
+  .mat-mdc-header-cell:not(.mat-resizable)::after {
+    background-color: token-utils.slot(grid-resizable-handle-disabled-background-color, $fallbacks);
+  }
+
+  .mat-resizable-handle {
+    background-color: token-utils.slot(grid-resizable-handle-hover-background-color, $fallbacks);
+  }
+}
+
+.mat-resizable.cdk-resizable-overlay-thumb-active > .mat-resizable-handle {
+  opacity: 0;
+  transition: none;
+}
+
+.mat-resizable-handle:focus,
+.mat-mdc-header-row.cdk-column-resize-hover-or-active .mat-resizable-handle:focus {
+  outline: none;
+  background-color: token-utils.slot(grid-resizable-handle-active-background-color, $fallbacks);
+}
+
+.mat-column-resize-overlay-thumb {
+  background: transparent;
+  cursor: col-resize;
+  width: 100%;
+  height: 100%;
+  transition: background mat.$private-swift-ease-in-duration
+    mat.$private-swift-ease-in-timing-function;
+
+  @include mat.private-user-select(none);
+
+  &:active {
+    will-change: transform;
+
+    $bg-color: token-utils.slot(grid-resizable-handle-active-background-color, $fallbacks);
+
+    background: linear-gradient(
+      90deg,
+      transparent,
+      transparent 7px,
+      $bg-color 7px,
+      $bg-color 9px,
+      transparent 9px,
+      transparent
+    );
+
+    .mat-column-resize-overlay-thumb-top {
+      background: linear-gradient(
+        90deg,
+        transparent,
+        transparent 4px,
+        $bg-color 4px,
+        $bg-color 12px,
+        transparent 12px,
+        transparent
+      );
+    }
+  }
+}
+
+.mat-column-resize-overlay-thumb-top {
+  width: 100%;
+}

package/src/lib/components/data-grid/grid.scss

@@ -0,0 +1,245 @@
+@use './../../../core/tokens/token-utils';
+@use './m3-grid';
+@use './column-resize/column-resize';
+
+$fallbacks: m3-grid.get-tokens();
+
+.acp-grid {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+  border-radius: token-utils.slot(grid-container-shape, $fallbacks);
+
+  .mat-mdc-table {
+    --mat-table-row-item-outline-color: #{token-utils.slot(grid-outline-color, $fallbacks)};
+
+    &.mat-table-striped .mat-row-odd {
+      background-color: token-utils.slot(grid-table-row-striped-background-color, $fallbacks);
+    }
+
+    &.mat-table-hover {
+      .mat-mdc-row:hover {
+        background-color: token-utils.slot(grid-table-row-hover-background-color, $fallbacks);
+      }
+
+      .mat-mdc-row.selected:hover {
+        background-color: token-utils.slot(
+          grid-table-row-selected-hover-background-color,
+          $fallbacks
+        );
+      }
+    }
+
+    .mat-mdc-row.selected {
+      background-color: token-utils.slot(grid-table-row-selected-background-color, $fallbacks);
+    }
+
+    .mat-mdc-cell.selected {
+      box-shadow: inset 0 0 0 1px
+        token-utils.slot(grid-table-cell-selected-outline-color, $fallbacks);
+    }
+  }
+
+  .mat-table-container {
+    overflow: auto;
+
+    &.mat-table-with-data {
+      flex: 1;
+    }
+  }
+
+  .mat-mdc-table:not(.mat-column-resize-table) {
+    min-width: 100%;
+    border-collapse: separate;
+
+    .mat-mdc-header-cell,
+    .mat-mdc-footer-cell,
+    .mat-mdc-cell {
+      &:not(.acp-grid-checkbox-cell) {
+        min-width: token-utils.slot(grid-table-cell-min-width, $fallbacks);
+      }
+    }
+  }
+
+  .mat-table-sticky-left {
+    border-right: 1px solid var(--mat-table-row-item-outline-color);
+
+    [dir='rtl'] & {
+      border-right-width: 0;
+      border-left: 1px solid var(--mat-table-row-item-outline-color);
+    }
+  }
+
+  .mat-table-sticky-right {
+    border-left: 1px solid var(--mat-table-row-item-outline-color);
+
+    [dir='rtl'] & {
+      border-left-width: 0;
+      border-right: 1px solid var(--mat-table-row-item-outline-color);
+    }
+  }
+
+  .mat-mdc-footer-cell {
+    border-top: 1px solid var(--mat-table-row-item-outline-color);
+    background-color: token-utils.slot(grid-table-footer-background-color, $fallbacks);
+  }
+
+  .mat-mdc-row.acp-grid-expansion {
+    height: 0;
+    overflow: hidden;
+
+    .mat-mdc-cell {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    &.collapsed .mat-mdc-cell {
+      border-bottom-width: 0;
+    }
+  }
+
+  .mat-sort-header-icon {
+    margin-left: 4px;
+
+    [dir='rtl'] & {
+      margin-left: 0;
+      margin-right: 4px;
+    }
+  }
+
+  .mat-header-cell-inner {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+  }
+
+  .mat-mdc-paginator {
+    border-top: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+    border-bottom-left-radius: token-utils.slot(grid-container-shape, $fallbacks);
+    border-bottom-right-radius: token-utils.slot(grid-container-shape, $fallbacks);
+  }
+
+  .mat-paginator-hidden {
+    display: none;
+  }
+
+  .acp-grid-checkbox-cell {
+    width: 60px;
+    min-width: 60px;
+    padding: 0 calc((60px - var(--mat-checkbox-state-layer-size, 40px)) / 2);
+  }
+}
+
+.acp-grid-progress {
+  position: absolute;
+  top: 0;
+  z-index: 120;
+  width: 100%;
+}
+
+.acp-grid-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-height: var(--mat-table-header-container-height, 56px);
+  padding: 8px;
+  box-sizing: border-box;
+  border-bottom: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+}
+
+.acp-grid-toolbar-content {
+  flex: 1;
+  width: 0;
+  padding: 0 8px;
+}
+
+.acp-grid-layout {
+  display: flex;
+  flex: 1 1 auto;
+  overflow: auto;
+}
+
+.acp-grid-content {
+  flex-direction: column;
+  width: 0;
+}
+
+.acp-grid-sidebar {
+  max-width: 50%;
+  border-left: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+
+  [dir='rtl'] & {
+    border-left-width: 0;
+    border-right: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+  }
+}
+
+.acp-grid-footer {
+  position: relative;
+  z-index: 1;
+}
+
+.acp-grid-statusbar {
+  display: flex;
+  align-items: center;
+  min-height: var(--mat-table-header-container-height, 56px);
+  padding: 8px;
+  box-sizing: border-box;
+  border-top: 1px solid token-utils.slot(grid-outline-color, $fallbacks);
+}
+
+.acp-grid-no-result {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  min-height: 150px;
+}
+
+.acp-grid-expansion-placeholder {
+  display: inline-block;
+  vertical-align: middle;
+  width: var(
+    --mat-icon-button-state-layer-size,
+    token-utils.slot(grid-row-expand-button-size, $fallbacks)
+  );
+  height: var(
+    --mat-icon-button-state-layer-size,
+    token-utils.slot(grid-row-expand-button-size, $fallbacks)
+  );
+}
+
+.acp-grid-expansion-detail-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  grid-template-columns: 100%;
+  padding: 0;
+  overflow: hidden;
+
+  .acp-grid-expansion.expanded & {
+    grid-template-rows: 1fr;
+    padding: calc((var(--mat-table-row-item-container-height, 52px) - 20px) / 2) 0;
+  }
+}
+
+.acp-grid-expansion-detail {
+  min-height: 0;
+}
+
+.acp-grid-animations-enabled .acp-grid-expansion-detail-wrapper {
+  transition: all 225ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.acp-grid-row-expand-button {
+  &.expanded .acp-grid-row-expand-icon {
+    transform: rotate(90deg);
+  }
+
+  &.mat-mdc-icon-button,
+  + acp-grid-cell {
+    vertical-align: middle;
+  }
+}

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;
+}

package/src/lib/components/drawer/_drawer-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './../../../core/tokens/token-utils';
+@use './m3-drawer';
+
+@mixin base($theme) {
+  $tokens: map.get(m3-drawer.get-tokens($theme), base);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m3-drawer.get-tokens($theme), color);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m3-drawer.get-tokens($theme), typography);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m3-drawer.get-tokens($theme), density);
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return ((namespace: drawer, tokens: token-utils.get-overrides(m3-drawer.get-tokens(), drawer)));
+}
+
+@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/drawer/_m3-drawer.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use './../../../core/style/elevation';
+@use './../../../core/tokens/m3-utils';
+@use './../../../core/tokens/m3';
+
+/// Generates custom tokens for the mtx-drawer.
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+
+  $tokens: (
+    base: (
+      drawer-container-shape: map.get($system, corner-large),
+      drawer-container-elevation-shadow: elevation.get-box-shadow(2),
+    ),
+    color: (
+      drawer-container-background-color: map.get($system, surface),
+      drawer-container-text-color: map.get($system, on-surface-variant),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}