@acontplus/ng-components 2.1.30 → 2.1.32

package/src/lib/components/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/icons/svg-icon/svg-icon.scss

@@ -0,0 +1,16 @@
+.acp-svg-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+
+  // When icon is not found and no fallback, hide the container
+  &:empty {
+    display: none;
+  }
+}

package/src/lib/components/popover/_m3-popover.scss

@@ -0,0 +1,24 @@
+@use 'sass:map';
+@use '../../../core/tokens/m3-utils';
+@use '../../../core/tokens/m3';
+
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+  $tokens: (
+    base: (
+      popover-container-shape: map.get($system, corner-extra-small),
+      // Note that this uses a value, rather than a computed box-shadow, because we use
+      // the value at runtime to determine which shadow to set based on the popover's depth.
+      popover-base-elevation-level: 2,
+    ),
+    color: (
+      popover-outline-color: map.get($system, surface-container),
+      popover-background-color: map.get($system, surface-container),
+      popover-text-color: map.get($system, on-surface),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/src/lib/components/popover/_popover-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/token-utils';
+@use './m3-popover';
+
+@mixin base($theme) {
+  $tokens: map.get(m3-popover.get-tokens($theme), base);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m3-popover.get-tokens($theme), color);
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m3-popover.get-tokens($theme), typography);
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m3-popover.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: popover, tokens: token-utils.get-overrides(m3-popover.get-tokens(), popover))
+  );
+}
+
+@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/popover/popover.scss

@@ -0,0 +1,239 @@
+/* stylelint-disable keyframes-name-pattern */
+@use './../../../core/tokens/token-utils';
+@use './m3-popover';
+$fallbacks: m3-popover.get-tokens();
+
+$arrow-size: 1em; // 16px default
+
+@keyframes _acp-popover-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes _acp-popover-exit {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.acp-popover-panel {
+  position: relative;
+  max-height: calc(100vh - 48px);
+  padding: 8px;
+  font-size: inherit; // It can change the arrow size
+  outline: 0;
+  animation: _acp-popover-enter 120ms cubic-bezier(0, 0, 0.2, 1);
+  border-radius: token-utils.slot(popover-container-shape, $fallbacks);
+  background-color: token-utils.slot(popover-background-color, $fallbacks);
+  color: token-utils.slot(popover-text-color, $fallbacks);
+
+  &.acp-popover-panel-exit-animation {
+    animation: _acp-popover-exit 100ms 25ms linear forwards;
+  }
+
+  &.acp-popover-panel-animations-disabled {
+    animation: none;
+  }
+
+  &.acp-popover-panel-animating {
+    pointer-events: none;
+
+    // &:has(.acp-popover-content:empty) {
+    //   display: none;
+    // }
+  }
+
+  &[class*='acp-popover-below'] {
+    margin-top: calc(#{$arrow-size * 0.5} + 2px);
+  }
+
+  &[class*='acp-popover-above'] {
+    margin-bottom: calc(#{$arrow-size * 0.5} + 2px);
+  }
+
+  &[class*='acp-popover-before'] {
+    margin-right: calc(#{$arrow-size * 0.5} + 2px);
+
+    [dir='rtl'] & {
+      margin-right: auto;
+      margin-left: calc(#{$arrow-size * 0.5} + 2px);
+    }
+  }
+
+  &[class*='acp-popover-after'] {
+    margin-left: calc(#{$arrow-size * 0.5} + 2px);
+
+    [dir='rtl'] & {
+      margin-left: auto;
+      margin-right: calc(#{$arrow-size * 0.5} + 2px);
+    }
+  }
+
+  &.acp-popover-panel-without-arrow {
+    margin: 0;
+  }
+}
+
+.acp-popover-direction-arrow {
+  position: absolute;
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: inline-block;
+    content: '';
+    border-width: $arrow-size * 0.5;
+    border-style: solid;
+  }
+
+  &::before {
+    border-color: token-utils.slot(popover-outline-color, $fallbacks);
+  }
+
+  &::after {
+    border-width: calc(#{$arrow-size * 0.5} - 1px);
+    border-color: token-utils.slot(popover-background-color, $fallbacks);
+  }
+}
+
+// Arrow up and down
+
+[class*='acp-popover-below'],
+[class*='acp-popover-above'] {
+  .acp-popover-direction-arrow {
+    width: $arrow-size;
+
+    &::before,
+    &::after {
+      border-left-color: transparent;
+      border-right-color: transparent;
+    }
+
+    &::after {
+      left: 1px;
+
+      [dir='rtl'] & {
+        right: 1px;
+        left: auto;
+      }
+    }
+  }
+}
+
+[class*='acp-popover-below'] {
+  .acp-popover-direction-arrow {
+    top: 0;
+
+    &::before,
+    &::after {
+      bottom: 0;
+      border-top-width: 0;
+    }
+  }
+}
+
+[class*='acp-popover-above'] {
+  .acp-popover-direction-arrow {
+    bottom: 0;
+
+    &::before,
+    &::after {
+      top: 0;
+      border-bottom-width: 0;
+    }
+  }
+}
+
+// Arrow left and right
+
+[class*='acp-popover-before'],
+[class*='acp-popover-after'] {
+  .acp-popover-direction-arrow {
+    height: $arrow-size;
+
+    &::before,
+    &::after {
+      border-top-color: transparent;
+      border-bottom-color: transparent;
+    }
+
+    &::after {
+      top: 1px;
+    }
+  }
+}
+
+[class*='acp-popover-before'] {
+  .acp-popover-direction-arrow {
+    right: 0;
+
+    &::before,
+    &::after {
+      left: 0;
+      border-right-width: 0;
+    }
+
+    [dir='rtl'] & {
+      right: auto;
+      left: 0;
+
+      &::before,
+      &::after {
+        left: auto;
+        right: 0;
+        border-left-width: 0;
+      }
+
+      &::before {
+        border-right-width: $arrow-size * 0.5;
+      }
+
+      &::after {
+        border-right-width: calc(#{$arrow-size * 0.5} - 1px);
+      }
+    }
+  }
+}
+
+[class*='acp-popover-after'] {
+  .acp-popover-direction-arrow {
+    left: 0;
+
+    &::before,
+    &::after {
+      right: 0;
+      border-left-width: 0;
+    }
+
+    [dir='rtl'] & {
+      left: auto;
+      right: 0;
+
+      &::before,
+      &::after {
+        right: auto;
+        left: 0;
+        border-right-width: 0;
+      }
+
+      &::before {
+        border-left-width: $arrow-size * 0.5;
+      }
+
+      &::after {
+        border-left-width: calc(#{$arrow-size * 0.5} - 1px);
+      }
+    }
+  }
+}

package/src/lib/components/spinner/spinner.scss

@@ -0,0 +1,6 @@
+.acp-spinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}

package/src/lib/components/tables/tabulator-table/tabulator-table.scss

@@ -0,0 +1,68 @@
+/* tabulator-table.styles */
+// Default Tabulator theme
+// Note: Tabulator themes are imported globally in styles/index.styles
+// This component only contains custom styling enhancements
+
+.tabulator {
+  font-size: 12px;
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.acp-tabulator-table {
+  display: block;
+}
+
+// Base container styles
+.acp-tabulator-table-container {
+  width: 100%;
+
+  // Custom enhancements that work across all themes
+  .tabulator-row.tabulator-selectable:hover {
+    background-color: rgba(0, 0, 0, 0.04);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .tabulator-row.tabulator-selected {
+    background-color: var(--mat-sys-primary-container, rgba(25, 118, 210, 0.12));
+  }
+
+  // Responsive enhancements
+  @media (max-width: 768px) {
+    .tabulator-header {
+      font-size: 0.875rem;
+    }
+
+    .tabulator-cell {
+      font-size: 0.875rem;
+      padding: 8px 6px;
+    }
+  }
+
+  // Loading state
+  .tabulator-loader {
+    background: var(--mat-sys-surface-container, rgba(255, 255, 255, 0.8));
+    backdrop-filter: blur(2px);
+  }
+
+  // Enhanced scrollbar styling
+  .tabulator-tableholder::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .tabulator-tableholder::-webkit-scrollbar-track {
+    background: var(--mat-sys-surface-variant, #f1f1f1);
+    border-radius: 4px;
+  }
+
+  .tabulator-tableholder::-webkit-scrollbar-thumb {
+    background: var(--mat-sys-outline, #c1c1c1);
+    border-radius: 4px;
+
+    &:hover {
+      background: var(--mat-sys-on-surface-variant, #a8a8a8);
+    }
+  }
+}

package/src/lib/components/theme-toggle/theme-toggle.scss

@@ -0,0 +1,3 @@
+.acp-theme-toggle {
+  display: inline-block;
+}