@acontplus/ng-components 3.0.1 → 3.1.0

package/src/lib/components/card/card.scss

@@ -0,0 +1,225 @@
+@use '@angular/material' as mat;
+
+// Card component styling with Material Design tokens
+// Using mat.card-overrides to customize card-specific design tokens
+.acp-card {
+  @include mat.card-overrides(
+    (
+      elevated-container-color: light-dark(#ffffff, #1a1b1f),
+      outlined-container-color: light-dark(#ffffff, #1a1b1f),
+      title-text-line-height: 1.6rem,
+      title-text-weight: 500,
+      subtitle-text-weight: 400,
+      elevated-container-shape: var(--mat-sys-corner-small),
+      outlined-container-shape: var(--mat-sys-corner-small),
+      // elevated-container-color: var(--mat-sys-surface-container),
+      // elevated-container-shape: var(--mat-sys-corner-large),
+      // outlined-container-shape: var(--mat-sys-corner-large),
+      outlined-outline-color: var(--mat-sys-outline-variant),
+      filled-container-color: var(--mat-sys-surface-container-highest),
+      title-text-size: var(--mat-sys-title-large),
+      subtitle-text-size: var(--mat-sys-body-medium),
+      subtitle-text-color: var(--mat-sys-on-surface-variant),
+      elevated-container-elevation: 0 4px 12px rgba(0, 0, 0, 0.08),
+    )
+  );
+}
+
+// Custom styles for card sections
+.acp-card-media {
+  width: 100%;
+  object-fit: cover;
+  border-radius: var(--mat-sys-corner-large) var(--mat-sys-corner-large) 0 0;
+}
+
+// Footer padding
+.mat-mdc-card-footer {
+  padding: 16px;
+}
+
+// Actions gap
+.mat-mdc-card-actions {
+  gap: 8px;
+}
+
+// Host wrapper styles
+.acp-card-wrapper {
+  display: block;
+  transition: box-shadow 0.2s ease-in-out;
+
+  // Hover effect
+  &.acp-card--hover:hover {
+    box-shadow: var(--mat-sys-level3);
+  }
+
+  // Clickable state
+  &.acp-card--clickable {
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      box-shadow: var(--mat-sys-level2);
+    }
+
+    &:active {
+      box-shadow: var(--mat-sys-level1);
+    }
+  }
+
+  // Disabled state
+  &.acp-card--disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  // Border radius variants
+  &.acp-card--rounded-4 {
+    .acp-card,
+    .acp-card-media {
+      border-radius: 4px;
+    }
+  }
+
+  &.acp-card--rounded-8 {
+    .acp-card,
+    .acp-card-media {
+      border-radius: 8px;
+    }
+  }
+
+  &.acp-card--rounded-12 {
+    .acp-card,
+    .acp-card-media {
+      border-radius: 12px;
+    }
+  }
+
+  &.acp-card--rounded-16 {
+    .acp-card,
+    .acp-card-media {
+      border-radius: 16px;
+    }
+  }
+
+  &.acp-card--rounded-20 {
+    .acp-card,
+    .acp-card-media {
+      border-radius: 20px;
+    }
+  }
+
+  &.acp-card--rounded-24 {
+    .acp-card,
+    .acp-card-media {
+      border-radius: 24px;
+    }
+  }
+
+  // Padding variants
+  &.acp-card--padding-small {
+    .mat-mdc-card-content {
+      padding: 12px;
+    }
+  }
+
+  &.acp-card--padding-medium {
+    .mat-mdc-card-content {
+      padding: 16px;
+    }
+  }
+
+  &.acp-card--padding-large {
+    .mat-mdc-card-content {
+      padding: 24px;
+    }
+  }
+
+  // Full height
+  &.acp-card--full-height {
+    height: 100%;
+  }
+
+  // Full width
+  &.acp-card--full-width {
+    width: 100%;
+  }
+}
+
+// Material Design background color utility classes
+// Primary
+.acp-card--primary {
+  color: var(--mat-sys-on-primary);
+  background-color: var(--mat-sys-primary);
+}
+
+.acp-card--primary-container {
+  color: var(--mat-sys-on-primary-container);
+  background-color: var(--mat-sys-primary-container);
+}
+
+// Secondary
+.acp-card--secondary {
+  color: var(--mat-sys-on-secondary);
+  background-color: var(--mat-sys-secondary);
+}
+
+.acp-card--secondary-container {
+  color: var(--mat-sys-on-secondary-container);
+  background-color: var(--mat-sys-secondary-container);
+}
+
+// Error
+.acp-card--error {
+  color: var(--mat-sys-on-error);
+  background-color: var(--mat-sys-error);
+}
+
+.acp-card--error-container {
+  color: var(--mat-sys-on-error-container);
+  background-color: var(--mat-sys-error-container);
+}
+
+// Surfaces
+.acp-card--surface {
+  color: var(--mat-sys-on-surface);
+  background-color: var(--mat-sys-surface);
+}
+
+.acp-card--surface-variant {
+  color: var(--mat-sys-on-surface-variant);
+  background-color: var(--mat-sys-surface-variant);
+}
+
+.acp-card--surface-container-highest {
+  color: var(--mat-sys-on-surface);
+  background-color: var(--mat-sys-surface-container-highest);
+}
+
+.acp-card--surface-container-high {
+  color: var(--mat-sys-on-surface);
+  background-color: var(--mat-sys-surface-container-high);
+}
+
+.acp-card--surface-container {
+  color: var(--mat-sys-on-surface);
+  background-color: var(--mat-sys-surface-container);
+}
+
+.acp-card--surface-container-low {
+  color: var(--mat-sys-on-surface);
+  background-color: var(--mat-sys-surface-container-low);
+}
+
+.acp-card--surface-container-lowest {
+  background-color: var(--mat-sys-surface-container-lowest);
+}
+
+.acp-card--inverse-surface {
+  color: var(--mat-sys-inverse-on-surface);
+  background-color: var(--mat-sys-inverse-surface);
+}
+
+// Disabled
+.acp-card--disabled-bg {
+  background-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
+}

package/src/lib/components/context-menu/context-menu-panel.scss

@@ -0,0 +1,283 @@
+@use '@angular/material' as mat;
+
+// Context Menu Panel Host
+.acp-context-menu-panel-host {
+  display: block;
+  outline: none;
+}
+
+// Context Menu Container
+.acp-context-menu-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  max-width: 400px;
+  max-height: 80vh;
+  background-color: var(--mat-sys-surface-container);
+  border-radius: var(--acp-context-menu-border-radius, 4px);
+  box-shadow: var(
+    --acp-context-menu-shadow,
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12)
+  );
+  outline: none;
+  animation: acp-context-menu-enter 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: hidden;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+
+  @media (max-width: 600px) {
+    min-width: 180px;
+    max-width: 300px;
+  }
+
+  @media (max-width: 480px) {
+    min-width: 160px;
+    max-width: 280px;
+  }
+}
+
+// Context Menu List
+.acp-context-menu-list {
+  display: flex;
+  flex-direction: column;
+  padding: var(--acp-context-menu-padding, 8px 0);
+  list-style: none;
+  margin: 0;
+  overflow-y: auto;
+  max-height: calc(80vh - 16px);
+
+  // Custom scrollbar styling
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--acp-context-menu-scrollbar-color, #bdbdbd);
+    border-radius: 3px;
+
+    &:hover {
+      background: var(--acp-context-menu-scrollbar-hover-color, #9e9e9e);
+    }
+  }
+}
+
+// Context Menu Item
+.acp-context-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: var(--acp-context-menu-item-padding, 8px 16px);
+  min-height: 40px;
+  background: none;
+  border: none;
+  color: var(--mat-sys-on-surface);
+  font-size: var(--acp-context-menu-item-font-size, 14px);
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  white-space: nowrap;
+  position: relative;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  @media (max-width: 600px) {
+    padding: 6px 12px;
+    min-height: 36px;
+    font-size: 13px;
+    gap: 10px;
+  }
+
+  @media (max-width: 480px) {
+    padding: 6px 10px;
+    min-height: 34px;
+    font-size: 12px;
+    gap: 8px;
+  }
+
+  &:hover:not(.acp-context-menu-item--disabled) {
+    background-color: var(--mat-sys-surface-container-highest);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--mat-sys-primary);
+    outline-offset: -2px;
+  }
+
+  &--selected:not(.acp-context-menu-item--disabled) {
+    background-color: var(--mat-sys-surface-container-highest);
+  }
+
+  &--disabled {
+    color: var(--mat-sys-on-surface-variant);
+    cursor: not-allowed;
+    opacity: 0.6;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+
+  &--danger {
+    color: var(--mat-sys-error);
+
+    &:hover:not(.acp-context-menu-item--disabled) {
+      background-color: var(--mat-sys-error-container);
+    }
+  }
+
+  &--separator {
+    padding: 0;
+    min-height: auto;
+    cursor: default;
+    background: none;
+
+    &:hover {
+      background: none;
+    }
+  }
+
+  &--expanded {
+    background-color: var(--mat-sys-surface-container-highest);
+  }
+}
+
+// Context Menu Item Icon
+.acp-context-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+}
+
+// Context Menu Item Label
+.acp-context-menu-item-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Context Menu Item Badge
+.acp-context-menu-item-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background-color: var(--mat-sys-primary);
+  color: var(--mat-sys-on-primary);
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+// Context Menu Item Shortcut
+.acp-context-menu-item-shortcut {
+  display: inline-block;
+  color: var(--mat-sys-on-surface-variant);
+  font-size: 12px;
+  font-weight: 400;
+  margin-left: 12px;
+  flex-shrink: 0;
+}
+
+// Context Menu Item Loader
+.acp-context-menu-item-loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-left: 8px;
+  flex-shrink: 0;
+}
+
+// Context Menu Item Arrow
+.acp-context-menu-item-arrow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  margin-left: 8px;
+  flex-shrink: 0;
+  color: var(--mat-sys-on-surface-variant);
+  font-size: 20px;
+}
+
+// Context Menu Separator
+.acp-context-menu-separator {
+  height: 1px;
+  background-color: var(--mat-sys-outline-variant);
+  margin: 4px 0;
+}
+
+// Context Menu Submenu
+.acp-context-menu-submenu {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
+  background-color: var(--mat-sys-surface-container-high);
+  border-left: 2px solid var(--mat-sys-outline-variant);
+  margin-left: 8px;
+  animation: acp-context-menu-slide-in 150ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+
+  .acp-context-menu-item {
+    padding-left: 12px;
+    font-size: 13px;
+  }
+}
+
+// Animations
+@keyframes acp-context-menu-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes acp-context-menu-slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

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

@@ -192,3 +192,7 @@ button.checked {
   color: var(--mat-sys-primary);
   border-radius: 4px;
 }
+
+.ndp-range-label-text {
+  color: var(--mat-sys-on-surface);
+}

package/src/lib/components/theme/header/header.scss

@@ -0,0 +1,166 @@
+@use '@angular/material' as mat;
+
+.acontplus-header {
+  --mat-toolbar-container-background-color: transparent;
+  position: relative;
+  z-index: 200;
+  display: block;
+  height: 60px;
+  background-color: var(--acp-header-background-color, var(--mat-sys-surface));
+  backdrop-filter: blur(8px);
+
+  @include mat.icon-overrides(
+    (
+      color: #ffffff,
+    )
+  );
+}
+
+/* Regions */
+.acp-header__region {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &--left {
+    flex: 0 0 auto;
+  }
+
+  &--center {
+    flex: 0 1 auto;
+    justify-content: center;
+  }
+
+  &--end {
+    display: flex;
+    flex: 0 0 auto;
+    margin-left: auto;
+  }
+}
+
+/* Spacer */
+.acp-header__spacer {
+  flex: 1 1 auto;
+}
+
+/* Branding */
+.acp-header__branding {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.acp-header__logo {
+  height: 32px;
+  width: auto;
+  max-width: 120px;
+  object-fit: contain;
+}
+
+.acp-header__brand-name {
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+/* Avatar */
+.acp-header__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+/* Badge */
+.acp-header__badge {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  border-radius: 8px;
+  background-color: var(--mat-sys-error);
+  color: var(--mat-sys-on-error);
+}
+
+/* User Menu */
+.acp-header__user-menu {
+  position: relative;
+}
+
+/* Search */
+.acp-header__search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 8px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+  }
+
+  &-icon {
+    font-size: 20px;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  &-input {
+    background: transparent;
+    border: none;
+    outline: none;
+    color: #fff;
+    font-size: 14px;
+    width: 200px;
+    padding: 4px 0;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  &-clear {
+    width: 24px;
+    height: 24px;
+
+    .mat-icon {
+      font-size: 18px;
+    }
+  }
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .acp-header {
+    padding: 0 12px;
+    min-height: 56px;
+  }
+
+  .acp-header__brand-name {
+    display: none;
+  }
+
+  .acp-header__logo {
+    max-width: 100px;
+  }
+
+  .acp-header__search {
+    &-input {
+      width: 120px;
+    }
+  }
+}