@acontplus/ng-components 2.1.30 → 2.1.31

package/src/lib/components/drawer/drawer-container.scss

@@ -0,0 +1,97 @@
+/* stylelint-disable keyframes-name-pattern */
+@use '@angular/cdk' as cdk;
+@use '@angular/material' as mat;
+@use './../../../core/tokens/token-utils';
+@use './m3-drawer';
+
+$fallbacks: m3-drawer.get-tokens();
+
+@keyframes _acp-drawer-enter {
+  from {
+    box-shadow: none;
+    visibility: hidden;
+  }
+
+  to {
+    transform: none;
+    visibility: visible;
+  }
+}
+
+@keyframes _acp-drawer-exit {
+  from {
+    transform: none;
+    visibility: visible;
+  }
+
+  to {
+    box-shadow: none;
+    visibility: hidden;
+  }
+}
+
+.acp-drawer-container {
+  display: block;
+  width: 100%;
+  padding: 8px 16px;
+  overflow: auto;
+  outline: 0;
+  box-sizing: border-box;
+
+  // We don't use this, but it's useful for consumers to position
+  // elements (e.g. close buttons) inside the bottom sheet.
+  position: relative;
+  background-color: token-utils.slot(drawer-container-background-color, $fallbacks);
+  color: token-utils.slot(drawer-container-text-color, $fallbacks);
+  box-shadow: token-utils.slot(drawer-container-elevation-shadow, $fallbacks);
+
+  @include cdk.high-contrast(active, off) {
+    outline: 1px solid;
+  }
+}
+
+.acp-drawer-container-animations-enabled {
+  &.acp-drawer-container-enter {
+    animation: _acp-drawer-enter 150ms cubic-bezier(0, 0, 0.2, 1) forwards;
+  }
+
+  &.acp-drawer-container-exit {
+    animation: _acp-drawer-exit 400ms cubic-bezier(0.25, 0.8, 0.25, 1) backwards;
+  }
+
+  &.acp-drawer-right {
+    transform: translateX(100%);
+  }
+
+  &.acp-drawer-left {
+    transform: translateX(-100%);
+  }
+
+  &.acp-drawer-bottom {
+    transform: translateY(100%);
+  }
+
+  &.acp-drawer-top {
+    transform: translateY(-100%);
+  }
+}
+
+.acp-drawer-right {
+  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}
+
+.acp-drawer-left {
+  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}
+
+.acp-drawer-bottom {
+  border-top-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-top-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}
+
+.acp-drawer-top {
+  border-bottom-left-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+  border-bottom-right-radius: token-utils.slot(drawer-container-shape, $fallbacks);
+}

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

package/src/lib/styles/_elevation.scss

@@ -0,0 +1,168 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+
+$_umbra-opacity: 0.2;
+$_penumbra-opacity: 0.14;
+$_ambient-opacity: 0.12;
+
+$_umbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 2px 1px -1px',
+  2: '0px 3px 1px -2px',
+  3: '0px 3px 3px -2px',
+  4: '0px 2px 4px -1px',
+  5: '0px 3px 5px -1px',
+  6: '0px 3px 5px -1px',
+  7: '0px 4px 5px -2px',
+  8: '0px 5px 5px -3px',
+  9: '0px 5px 6px -3px',
+  10: '0px 6px 6px -3px',
+  11: '0px 6px 7px -4px',
+  12: '0px 7px 8px -4px',
+  13: '0px 7px 8px -4px',
+  14: '0px 7px 9px -4px',
+  15: '0px 8px 9px -5px',
+  16: '0px 8px 10px -5px',
+  17: '0px 8px 11px -5px',
+  18: '0px 9px 11px -5px',
+  19: '0px 9px 12px -6px',
+  20: '0px 10px 13px -6px',
+  21: '0px 10px 13px -6px',
+  22: '0px 10px 14px -6px',
+  23: '0px 11px 14px -7px',
+  24: '0px 11px 15px -7px',
+);
+
+$_penumbra-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 1px 0px',
+  2: '0px 2px 2px 0px',
+  3: '0px 3px 4px 0px',
+  4: '0px 4px 5px 0px',
+  5: '0px 5px 8px 0px',
+  6: '0px 6px 10px 0px',
+  7: '0px 7px 10px 1px',
+  8: '0px 8px 10px 1px',
+  9: '0px 9px 12px 1px',
+  10: '0px 10px 14px 1px',
+  11: '0px 11px 15px 1px',
+  12: '0px 12px 17px 2px',
+  13: '0px 13px 19px 2px',
+  14: '0px 14px 21px 2px',
+  15: '0px 15px 22px 2px',
+  16: '0px 16px 24px 2px',
+  17: '0px 17px 26px 2px',
+  18: '0px 18px 28px 2px',
+  19: '0px 19px 29px 2px',
+  20: '0px 20px 31px 3px',
+  21: '0px 21px 33px 3px',
+  22: '0px 22px 35px 3px',
+  23: '0px 23px 36px 3px',
+  24: '0px 24px 38px 3px',
+);
+
+$_ambient-map: (
+  0: '0px 0px 0px 0px',
+  1: '0px 1px 3px 0px',
+  2: '0px 1px 5px 0px',
+  3: '0px 1px 8px 0px',
+  4: '0px 1px 10px 0px',
+  5: '0px 1px 14px 0px',
+  6: '0px 1px 18px 0px',
+  7: '0px 2px 16px 1px',
+  8: '0px 3px 14px 2px',
+  9: '0px 3px 16px 2px',
+  10: '0px 4px 18px 3px',
+  11: '0px 4px 20px 3px',
+  12: '0px 5px 22px 4px',
+  13: '0px 5px 24px 4px',
+  14: '0px 5px 26px 4px',
+  15: '0px 6px 28px 5px',
+  16: '0px 6px 30px 5px',
+  17: '0px 6px 32px 5px',
+  18: '0px 7px 34px 6px',
+  19: '0px 7px 36px 6px',
+  20: '0px 8px 38px 7px',
+  21: '0px 8px 40px 7px',
+  22: '0px 8px 42px 7px',
+  23: '0px 9px 44px 8px',
+  24: '0px 9px 46px 8px',
+);
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://material.io/design/environment/elevation.html
+// Examples:
+//
+//
+// .mat-foo {
+//   @include $mat-elevation(2);
+//
+//   &:active {
+//     @include $mat-elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
+
+// The default color for elevation shadows.
+$color: black !default;
+
+// Prefix for elevation-related selectors.
+$prefix: 'mat-elevation-z';
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin elevation($zValue, $color: $color, $opacity: null) {
+  box-shadow: get-box-shadow($zValue, $color, $opacity);
+}
+
+// Applies the elevation to an element in a manner that allows
+// consumers to override it via the Material elevation classes.
+@mixin overridable-elevation($zValue, $color: $color, $opacity: null) {
+  &:not([class*='#{$prefix}']) {
+    @include elevation($zValue, $color, $opacity);
+  }
+}
+
+// Gets the box shadow value for a specific elevation.
+@function get-box-shadow($zValue, $shadow-color: black, $opacity: null) {
+  @if $zValue == null {
+    @return null;
+  }
+
+  @if meta.type-of($zValue) != number or not math.is-unitless($zValue) {
+    @error '$zValue must be a unitless number, but received `#{$zValue}`';
+  }
+
+  @if $zValue < 0 or $zValue > 24 {
+    @error '$zValue must be between 0 and 24, but received `#{$zValue}`';
+  }
+
+  $umbra-z-value: map.get($_umbra-map, $zValue);
+  $penumbra-z-value: map.get($_penumbra-map, $zValue);
+  $ambient-z-value: map.get($_ambient-map, $zValue);
+
+  $color-opacity: if($opacity != null, $opacity, 1);
+  $umbra-color: _compute-color-opacity($shadow-color, $_umbra-opacity * $color-opacity);
+  $penumbra-color: _compute-color-opacity($shadow-color, $_penumbra-opacity * $color-opacity);
+  $ambient-color: _compute-color-opacity($shadow-color, $_ambient-opacity * $color-opacity);
+
+  @return string.unquote(
+    '#{$umbra-z-value} #{$umbra-color}, #{$penumbra-z-value} ' +
+      '#{$penumbra-color}, #{$ambient-z-value} #{$ambient-color}'
+  );
+}
+
+@function _compute-color-opacity($color, $opacity) {
+  @if meta.type-of($color) == color and $opacity != null {
+    @return rgba($color, $opacity);
+  } @else {
+    @return $color;
+  }
+}