@acontplus/ng-components 3.0.1 → 3.2.0

package/src/lib/components/dialog/acp-dialog-container.scss

@@ -0,0 +1,221 @@
+// Structural styles for the dialog shell. All themeable values are exposed
+// as `--acp-dialog-*` custom properties; override them via a global class.
+
+// The container is a flex column so the content area grows and pushes any
+// footer / actions to the bottom when the dialog has a fixed height (e.g. full-screen).
+acp-dialog-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.acp-dialog-content {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+}
+
+.acp-dialog-content > * {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+// Make Material's mat-dialog-content the scrollable, expanding area and
+// mat-dialog-actions a fixed bottom bar, matching the standard MatDialog layout.
+.acp-dialog-content > * > mat-dialog-content,
+.acp-dialog-content > * > .mat-mdc-dialog-content {
+  flex: 1 1 auto;
+  overflow: auto;
+  min-height: 0;
+  max-height: 100%;
+}
+
+.acp-dialog-content > * > mat-dialog-actions,
+.acp-dialog-content > * > .mat-mdc-dialog-actions {
+  flex-shrink: 0;
+}
+
+// Built-in message dialog layout (acp-dialog-message component).
+.acp-dialog-content > * > .acp-dialog-message {
+  flex: 1 1 auto;
+  overflow: auto;
+  min-height: 0;
+}
+
+.acp-dialog-content > * > .acp-dialog-message-actions {
+  flex-shrink: 0;
+}
+
+.acp-dialog-header {
+  cursor: move;
+  border-bottom: 1px solid
+    var(--acp-dialog-header-border-color, var(--mat-sys-outline-variant, #dee2e6));
+  color: var(--acp-dialog-header-text-color, var(--mat-sys-on-surface, #212529));
+  position: relative;
+
+  // Predefined color variants. Override these with CSS custom properties or `colorClass`.
+  &.acp-dialog-header--primary {
+    background-color: var(
+      --acp-dialog-primary-header-background-color,
+      var(--mat-sys-primary, #1976d2)
+    );
+    color: var(--acp-dialog-primary-header-text-color, var(--mat-sys-on-primary, #fff));
+  }
+  &.acp-dialog-header--secondary {
+    background-color: var(
+      --acp-dialog-secondary-header-background-color,
+      var(--mat-sys-secondary, #9c27b0)
+    );
+    color: var(--acp-dialog-secondary-header-text-color, var(--mat-sys-on-secondary, #fff));
+  }
+  &.acp-dialog-header--accent {
+    background-color: var(
+      --acp-dialog-accent-header-background-color,
+      var(--mat-sys-tertiary, #7c4dff)
+    );
+    color: var(--acp-dialog-accent-header-text-color, var(--mat-sys-on-tertiary, #fff));
+  }
+  &.acp-dialog-header--error,
+  &.acp-dialog-header--danger {
+    background-color: var(
+      --acp-dialog-error-header-background-color,
+      var(--mat-sys-error, #b3261e)
+    );
+    color: var(--acp-dialog-error-header-text-color, var(--mat-sys-on-error, #fff));
+  }
+  &.acp-dialog-header--success {
+    background-color: var(--acp-dialog-success-header-background-color, #22c55e);
+    color: var(--acp-dialog-success-header-text-color, #fff);
+  }
+  &.acp-dialog-header--warning {
+    background-color: var(--acp-dialog-warning-header-background-color, #f59e0b);
+    color: var(--acp-dialog-warning-header-text-color, #212529);
+  }
+  &.acp-dialog-header--info {
+    background-color: var(--acp-dialog-info-header-background-color, #0ea5e9);
+    color: var(--acp-dialog-info-header-text-color, #fff);
+  }
+  &.acp-dialog-header--dark {
+    background-color: var(--acp-dialog-dark-header-background-color, #212529);
+    color: var(--acp-dialog-dark-header-text-color, #fff);
+  }
+
+  &[class*='acp-dialog-header--'] {
+    .acp-dialog-subtitle {
+      color: inherit;
+      opacity: 0.85;
+    }
+  }
+}
+
+h6[mat-dialog-title].acp-dialog-title {
+  display: flex;
+  align-items: center;
+  font-size: var(--acp-dialog-title-font-size, 1.2rem);
+  font-weight: var(--acp-dialog-title-font-weight, 500);
+  margin: 0;
+  width: 100%;
+  padding-right: 48px;
+  color: currentColor;
+}
+
+.acp-dialog-title-icon {
+  margin-right: var(--acp-dialog-title-icon-gap, 12px);
+  vertical-align: middle;
+}
+
+h6[mat-dialog-title].acp-dialog-title span {
+  flex-grow: 1;
+}
+
+.acp-dialog-close-btn {
+  position: absolute;
+  top: 8px;
+  right: 16px;
+}
+
+.acp-dialog-subtitle {
+  margin: 0;
+  padding: 0 var(--acp-dialog-subtitle-padding, 24px) var(--acp-dialog-subtitle-padding, 16px);
+  font-size: var(--acp-dialog-subtitle-font-size, 0.875rem);
+  color: var(--acp-dialog-subtitle-color, var(--mat-sys-on-surface-variant, #6c757d));
+}
+
+.acp-dialog-message {
+  padding: var(--acp-dialog-message-padding, 24px);
+  color: var(--acp-dialog-message-text-color, var(--mat-sys-on-surface, #212529));
+}
+
+.acp-dialog-message-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 var(--acp-dialog-message-padding, 24px) var(--acp-dialog-message-padding, 24px);
+}
+
+.acp-dialog-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--acp-dialog-actions-gap, 8px);
+  padding: var(--acp-dialog-actions-padding, 16px 24px);
+  border-top: 1px solid
+    var(--acp-dialog-actions-border-color, var(--mat-sys-outline-variant, #dee2e6));
+}
+
+.acp-dialog-actions-start {
+  justify-content: flex-start;
+}
+
+.acp-dialog-actions-center {
+  justify-content: center;
+}
+
+.acp-dialog-actions-end {
+  justify-content: flex-end;
+}
+
+// Declarative titlebar and actions used inside the content area.
+.acp-dialog-content > acp-dialog-titlebar,
+.acp-dialog-content > * > acp-dialog-titlebar,
+.acp-dialog-content > acp-dialog-actions,
+.acp-dialog-content > * > acp-dialog-actions {
+  flex: 0 0 auto;
+}
+
+// Make Material's mat-dialog-content the scrollable, expanding area and
+// mat-dialog-actions a fixed bottom bar, matching the standard MatDialog layout.
+.acp-dialog-content > * > mat-dialog-content,
+.acp-dialog-content > * > .mat-mdc-dialog-content {
+  flex: 1 1 auto;
+  overflow: auto;
+  min-height: 0;
+  max-height: 100%;
+}
+
+.acp-dialog-content > * > mat-dialog-actions,
+.acp-dialog-content > * > .mat-mdc-dialog-actions {
+  flex-shrink: 0;
+}
+
+// Full-screen dialog: pin the action footer to the bottom of the viewport.
+.acp-dialog-full-screen .mat-mdc-dialog-surface {
+  height: 100vh;
+}
+
+.acp-dialog-full-screen acp-dialog-container {
+  min-height: 100vh;
+}
+
+.acp-dialog-full-screen .acp-dialog-content.mat-mdc-dialog-content {
+  max-height: 100%;
+  height: 100%;
+}
+
+.acp-dialog-full-screen .acp-dialog-actions,
+.acp-dialog-full-screen .mat-mdc-dialog-actions {
+  margin-top: auto;
+}

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

@@ -24,10 +24,6 @@ h6[mat-dialog-title].acp-dialog-title span {
   flex-grow: 1;
 }
 
-mat-dialog-content {
-  padding: 24px;
-}
-
 .acp-dialog-close-btn {
   position: absolute;
   top: 8px;

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

package/src/lib/components/theme/shell-layout/shell-layout.scss

@@ -0,0 +1,237 @@
+@use './../../../../core/style/breakpoints';
+.acontplus-container-wrap,
+.acontplus-container {
+  --mat-sidenav-content-background-color: transparent;
+
+  height: 100%;
+}
+
+.acontplus-sidenav {
+  --mat-sidenav-container-width: var(--acp-sidenav-width);
+
+  position: absolute;
+  overflow-x: hidden;
+  border-width: 0 !important;
+  transition-property: transform, width !important;
+}
+
+// Layout control
+.acontplus-header-above {
+  .acontplus-container {
+    height: calc(100% - var(--mat-toolbar-standard-height)) !important;
+
+    @include breakpoints.bp-lt(small) {
+      height: calc(100% - var(--mat-toolbar-mobile-height)) !important;
+    }
+  }
+
+  .acontplus-sidebar-main {
+    height: 100% !important;
+    padding-top: 0.5rem;
+  }
+}
+
+// Layout control
+.acontplus-sidenav-collapsed {
+  .acontplus-sidenav {
+    width: var(--acp-sidenav-collapsed-width);
+
+    .menu-name,
+    .menu-label,
+    .menu-badge,
+    .menu-caret,
+    .acontplus-user-panel-info {
+      opacity: 0;
+    }
+
+    .menu-icon.submenu-icon {
+      opacity: 1;
+    }
+
+    .acontplus-user-panel-avatar {
+      transform: scale(0.5);
+    }
+
+    &:hover {
+      width: var(--acp-sidenav-width);
+
+      .menu-name,
+      .menu-label,
+      .menu-badge,
+      .menu-caret,
+      .acontplus-user-panel-info {
+        opacity: 1;
+      }
+
+      .menu-icon.submenu-icon {
+        opacity: 0;
+      }
+
+      .acontplus-user-panel-avatar {
+        transform: scale(1);
+      }
+    }
+  }
+
+  .acontplus-content {
+    margin-left: var(--acp-sidenav-collapsed-width) !important;
+
+    [dir='rtl'] & {
+      margin-right: var(--acp-sidenav-collapsed-width) !important;
+      margin-left: auto !important;
+    }
+  }
+
+  &[dir='rtl'] .acontplus-content {
+    margin-right: var(--acp-sidenav-collapsed-width) !important;
+    margin-left: auto !important;
+  }
+}
+
+// Layout control
+.acontplus-navbar-top {
+  .acontplus-topmenu {
+    top: 0;
+  }
+
+  .acontplus-branding {
+    margin-left: 1rem;
+
+    [dir='rtl'] & {
+      margin-right: 1rem;
+      margin-left: auto;
+    }
+  }
+}
+
+// Layout control
+.acontplus-header-fixed {
+  .acontplus-header {
+    position: sticky;
+    top: 0;
+  }
+
+  .acontplus-topmenu {
+    top: var(--mat-toolbar-standard-height);
+
+    @include breakpoints.bp-lt(small) {
+      top: var(--mat-toolbar-mobile-height);
+    }
+  }
+}
+
+.acontplus-page-content {
+  position: relative;
+  padding: var(--acp-gutter);
+
+  .acontplus-header + &,
+  .acontplus-header-above &,
+  .acontplus-navbar-top & {
+    padding-top: 0;
+  }
+}
+// ── Content ───────────────────────────────────────────────────────────────────
+.acp-shell-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.acp-shell-page-content {
+  position: relative;
+  flex: 1 1 auto;
+  padding: var(--acp-gutter, 1rem);
+  overflow: auto;
+}
+
+// ── Layout modifiers ──────────────────────────────────────────────────────────
+
+// Header above: the sidenav container must account for the header height
+.acp-shell--header-above {
+  display: flex;
+  flex-direction: column;
+
+  .acp-shell-sidenav-container {
+    flex: 1 1 auto;
+    height: calc(100% - var(--mat-toolbar-standard-height));
+
+    @include breakpoints.bp-lt(small) {
+      height: calc(100% - var(--mat-toolbar-mobile-height));
+    }
+  }
+
+  .acp-shell-page-content {
+    padding-top: 0;
+  }
+}
+
+// Sidenav collapsed (narrow mode)
+.acp-shell--sidenav-collapsed {
+  .acp-shell-sidenav {
+    width: var(--acp-sidenav-collapsed-width);
+
+    // Fade out text/labels when collapsed
+    .menu-name,
+    .menu-label,
+    .menu-badge,
+    .menu-caret,
+    .acp-sidebar-user-panel-info {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    .menu-icon.submenu-icon {
+      opacity: 1;
+    }
+
+    .acp-sidebar-user-panel-avatar {
+      transform: scale(0.5);
+    }
+
+    // Expand on hover
+    &:hover {
+      width: var(--acp-sidenav-width);
+
+      .menu-name,
+      .menu-label,
+      .menu-badge,
+      .menu-caret,
+      .acp-sidebar-user-panel-info {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .menu-icon.submenu-icon {
+        opacity: 0;
+      }
+
+      .acp-sidebar-user-panel-avatar {
+        transform: scale(1);
+      }
+    }
+  }
+
+  // Push content to the right matching the collapsed width
+  .acp-shell-content {
+    margin-left: var(--acp-sidenav-collapsed-width) !important;
+
+    [dir='rtl'] & {
+      margin-right: var(--acp-sidenav-collapsed-width) !important;
+      margin-left: auto !important;
+    }
+  }
+}
+
+// Top navbar mode
+.acp-shell--navbar-top {
+  .acp-shell-page-content {
+    padding-top: 0;
+  }
+}
+
+// Header fixed: sticky header inside content
+.acp-shell--header-fixed {
+  .acp-shell-page-content {
+    padding-top: 0;
+  }
+}