npm - @foxeltech/angular-ui - Versions diffs - 0.3.1 → 0.7.44 - Mend

@foxeltech/angular-ui 0.3.1 → 0.7.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (193) hide show

package/src/lib/styles/tokens.css CHANGED Viewed

@@ -3,16 +3,43 @@
  * Replaces the old JS preset (tailwind.config.js / lodash.merge sharing).
  *
  * Colour tokens point at the runtime RGB-triplet variables from theme.css
- * (dark default on :root, light via .light_theme) so theme switching keeps
- * working; opacity modifiers like bg-critical/10 are handled by v4's
- * color-mix() and need no <alpha-value> plumbing.
+ * (OgeniumDashboards --og-* per [data-og-theme] on <html>, porcelain default)
+ * so theme switching keeps working; opacity modifiers like bg-critical/10 are
+ * handled by v4's color-mix() and need no <alpha-value> plumbing.
  */
 /* `inline` is load-bearing: without it the rgb(var(--x)) values are baked
-   into :root once, so .light_theme's runtime triplet overrides never reach
+   into :root once, so [data-og-theme]'s runtime triplet overrides never reach
    the utilities. inline makes every utility carry rgb(var(--x)) itself and
    resolve at the element that uses it — same behavior as v3. */
 @theme inline {
-  /* Colours (names match the v3 preset so every existing class keeps working) */
+  /* ---- OG palette — use these in new/restyled markup ---- */
+  --color-page: rgb(var(--og-page-bg));
+  --color-surface: rgb(var(--og-surface));
+  --color-surface-raised: rgb(var(--og-surface-raised));
+  --color-surface-sunken: rgb(var(--og-surface-sunken));
+  --color-border: rgb(var(--og-border));
+  --color-border-subtle: rgb(var(--og-border-subtle));
+  --color-strong: rgb(var(--og-text));
+  --color-body: rgb(var(--og-text-body));
+  --color-muted: rgb(var(--og-text-muted));
+  --color-faint: rgb(var(--og-text-faint));
+  --color-accent: rgb(var(--og-accent));
+  --color-accent-fg: rgb(var(--og-accent-fg));
+  --color-accent-contrast: rgb(var(--og-accent-contrast));
+  --color-accent-soft: rgb(var(--og-accent-soft-bg));
+  --color-accent-soft-fg: rgb(var(--og-accent-soft-fg));
+  --color-positive: rgb(var(--og-positive));
+  --color-positive-soft: rgb(var(--og-positive-soft-bg));
+  --color-negative: rgb(var(--og-negative));
+  --color-negative-soft: rgb(var(--og-negative-soft-bg));
+  --color-warning-soft: rgb(var(--og-warning-soft-bg));
+  --color-neutral-soft: rgb(var(--og-neutral-soft-bg));
+  --color-neutral-soft-fg: rgb(var(--og-neutral-soft-fg));
+  --color-track: rgb(var(--og-track));
+  /* ---- Legacy colour names (@deprecated — remove after the V2 campaign;
+     they resolve through the alias layer in theme.css, so every existing
+     class already renders the OG palette) ---- */
   --color-gradient-primary-start: rgb(var(--gradient-primary-start));
   --color-gradient-primary-end: rgb(var(--gradient-primary-end));
   --color-gradient-success-start: rgb(var(--gradient-success-start));
@@ -61,14 +88,22 @@
   --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
   --inset-shadow-sm: inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05);
-  /* v3 default border radii, incl. DEFAULT so bare `rounded` keeps working */
-  --radius-sm: 0.125rem;
-  --radius: 0.25rem;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
-  --radius-2xl: 1rem;
-  --radius-3xl: 1.5rem;
+  /* Radius is a THEME variable in V2 (blueprint/terminal are square, ivory
+     controls are pills) — never hardcode border-radius in components. */
+  --radius-frame: var(--og-radius-frame);
+  --radius-card: var(--og-radius-card);
+  --radius-control: var(--og-radius-control);
+  --radius-pill: var(--og-radius-pill);
+  /* Legacy fixed scale remapped onto the theme radii so blueprint/terminal go
+     square with zero template edits. `rounded-full` stays Tailwind-native
+     9999px — avatars/dots must remain circular in every theme. */
+  --radius-sm: var(--og-radius-control);
+  --radius: var(--og-radius-control);
+  --radius-md: var(--og-radius-control);
+  --radius-lg: var(--og-radius-card);
+  --radius-xl: var(--og-radius-card);
+  --radius-2xl: var(--og-radius-card);
+  --radius-3xl: var(--og-radius-frame);
   /* Named spacing scale (gap-small, p-semi, mb-large, …) */
   --spacing-xs: 0.125rem;
@@ -79,12 +114,14 @@
   --spacing-xl: 1.25rem;
   --spacing-2xl: 1.5rem;
-  /* Font families */
-  --font-spmono: 'SpaceMonoRegular', monospace;
-  --font-dmsans: 'DMSans', sans-serif;
-  --font-orbitron: 'Orbitron', sans-serif;
-  --font-bevn: 'BeVietnamPro', sans-serif;
-  --font-roboto: 'Roboto', sans-serif;
+  /* Font families — theme variables (blueprint/terminal switch to mono).
+     V2 set: Archivo (body/display), JetBrains Mono / IBM Plex Mono (mono),
+     Source Serif 4 (prose), Newsreader (ivory/blueprint display). */
+  --font-body: var(--og-font-body);
+  --font-display: var(--og-font-display);
+  --font-mono: var(--og-font-mono);
+  --font-prose: var(--og-font-prose);
+  --font-figure: var(--og-font-figure);
   /* Font-size overrides (v3 preset values) */
   --text-xs: 0.75rem;

package/src/lib/styles/utilities.css CHANGED Viewed

@@ -8,7 +8,10 @@
 }
 @utility btn-common {
-  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+  /* Compact size (anh Tú 29/08): h-8 + 13px label — the pre-V2 h-10 read too
+     large against the V2 density. leading-none: arbitrary text-[13px] inherits
+     lh 1.5 and Archivo's uneven leading floats the ink ~1px above center. */
+  @apply flex text-[13px] leading-none h-8 font-semibold px-large py-small items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
 }
 @utility btn-menu-common {

package/src/lib/ui/components/bar-list/bar-list.component.html ADDED Viewed

@@ -0,0 +1,29 @@
+<div class="flex flex-col gap-small">
+  @for (item of items(); track item.label) {
+    <button
+      type="button"
+      class="text-left rounded-control px-normal py-small -mx-normal transition-colors"
+      [class.hover:bg-surface-sunken]="interactive()"
+      [class.cursor-default]="!interactive()"
+      [tabindex]="interactive() ? 0 : -1"
+      (click)="onSelect(item)"
+    >
+      <div class="flex items-baseline justify-between gap-normal">
+        <span class="txt-body-medium-01 truncate">{{ item.label }}</span>
+        <span class="text-sm font-semibold text-strong shrink-0" style="font-family: var(--og-font-figure)">
+          {{ item.valueLabel ?? item.value }}
+        </span>
+      </div>
+      @if (item.meta) {
+        <div class="txt-utility-description truncate">{{ item.meta }}</div>
+      }
+      <div class="mt-xs h-[var(--og-track-h)] rounded-pill bg-track overflow-hidden">
+        <div
+          class="h-full rounded-pill transition-all duration-500"
+          [ngClass]="barClass(item)"
+          [style.width.%]="widthOf(item)"
+        ></div>
+      </div>
+    </button>
+  }
+</div>

package/src/lib/ui/components/button/button.component.html CHANGED Viewed

@@ -1,25 +1,25 @@
 <button
-  [attr.type]="type"
-  [attr.aria-label]="ariaLabel || null"
-  [attr.aria-busy]="loading || null"
-  [class]="class"
+  [attr.type]="type()"
+  [attr.aria-label]="ariaLabel() || null"
+  [attr.aria-busy]="loading() || null"
+  [class]="class()"
   [ngClass]="{
-    'btn-default': buttonVariant === 'default',
-    'btn-primary': buttonVariant === 'primary',
-    'btn-success': buttonVariant === 'success',
-    'btn-alternative': buttonVariant === 'alternative',
+    'btn-default': buttonVariant() === 'default',
+    'btn-primary': buttonVariant() === 'primary',
+    'btn-success': buttonVariant() === 'success',
+    'btn-alternative': buttonVariant() === 'alternative',
   }"
-  [disabled]="disabled || loading"
+  [disabled]="disabled() || loading()"
   (click)="onClick()"
 >
-  @if (loading) {
+  @if (loading()) {
     <div class="flex w-full items-center justify-center" aria-hidden="true">
       <svg
         [attr.fill]="
-          buttonVariant !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'
+          buttonVariant() !== 'alternative' ? 'rgb(var(--text-primary))' : 'rgb(var(--primary))'
         "
-        width="20"
-        height="20"
+        width="16"
+        height="16"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
@@ -219,17 +219,19 @@
         @if (icon) {
           <fx-ui-hero-icon
             [icon]="icon"
-            [size]="20"
+            [size]="16"
             class="flex"
             [ngClass]="{
-              'text-text-inverse': buttonVariant === 'default',
-              'text-text-primary': buttonVariant === 'alternative',
-              'text-white': buttonVariant === 'primary' || buttonVariant === 'success',
+              'text-text-inverse': buttonVariant() === 'default',
+              'text-text-primary': buttonVariant() === 'alternative',
+              'text-accent-contrast': buttonVariant() === 'primary',
+              'text-surface': buttonVariant() === 'success',
             }"
           ></fx-ui-hero-icon>
         }
         @if (label) {
-          <div>{{ label }}</div>
+          <!-- text-box: optical centering — Archivo's leading floats ink up otherwise -->
+          <div class="[text-box:trim-both_cap_alphabetic]">{{ label }}</div>
         }
       </div>
     </ng-container>

package/src/lib/ui/components/checkbox/checkbox.component.html CHANGED Viewed

@@ -15,8 +15,8 @@
   <span
     class="relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0 peer-focus-visible:ring-2 peer-focus-visible:ring-primary/50"
     [ngClass]="{
-      'rounded-full': rounded,
-      'rounded-sm': !rounded,
+      'rounded-full': rounded(),
+      'rounded-sm': !rounded(),
       'border-border-strong bg-transparent': !value,
       'border-transparent bg-gradient-primary': value,
     }"
@@ -25,7 +25,7 @@
     <span class="absolute inset-0 flex items-center justify-center">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="text-white w-4 h-4 transition-opacity duration-150"
+        class="text-accent-contrast w-4 h-4 transition-opacity duration-150"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"

package/src/lib/ui/components/circle-progress-bar/circle-progress-bar.component.html CHANGED Viewed

@@ -28,7 +28,7 @@
       style="transition: stroke-dashoffset 300ms linear"
     ></circle>
-    @if(showPercent){
+    @if(showPercent()){
       <text
         [attr.x]="radius"
         [attr.y]="radius"
@@ -37,7 +37,7 @@
         class="text-xs font-medium"
         fill="currentColor"
       >
-        {{ percent }}%
+        {{ percent() }}%
       </text>
     }
   </svg>

package/src/lib/ui/components/code-block/code-block.component.html ADDED Viewed

@@ -0,0 +1,8 @@
+@if (label()) {
+  <div class="txt-utility-caption font-bold text-text-secondary mb-normal">{{ label() }}</div>
+}
+<pre
+  class="m-0 p-large rounded-control border border-border bg-surface overflow-auto txt-body-compact-01 text-strong"
+  [style.max-height]="maxHeight() || null"
+  style="font-family: var(--og-font-mono); white-space: pre; tab-size: 2"
+>{{ code() }}</pre>

package/src/lib/ui/components/datetime-picker/datetime-picker.component.html CHANGED Viewed

@@ -2,39 +2,61 @@
   @if (label) {
     <label class="txt-field-label" [attr.for]="fieldId">
       {{ label }}
-      @if (required) {
+      @if (required()) {
         <span class="txt-required" aria-hidden="true">*</span>
       }
     </label>
   }
-  <div class="relative">
-    <input
-      [id]="fieldId"
-      [owlDateTimeTrigger]="picker"
-      [owlDateTime]="picker"
-      [placeholder]="placeholder"
-      [disabled]="disabled"
-      [min]="minDate"
-      [max]="maxDate"
-      (blur)="onBlur()"
-      [value]="value"
-      readonly
-      class="input-default pr-9"
-      />
-    <span
-      [owlDateTimeTrigger]="picker"
-      class="absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors"
-      >
-      <fx-ui-hero-icon icon="calendar" [size]="20" class="text-text-primary"></fx-ui-hero-icon>
-    </span>
+  <div class="flex gap-normal">
+    @if (showDate) {
+      <div class="relative flex-1">
+        <input
+          [id]="fieldId"
+          [matDatepicker]="datePicker"
+          [placeholder]="placeholder()"
+          [disabled]="disabled"
+          [min]="min"
+          [max]="max"
+          [value]="dateValue"
+          (dateChange)="onDateChange($event.value)"
+          (click)="!disabled && datePicker.open()"
+          (blur)="onBlur()"
+          readonly
+          class="input-default pr-9"
+        />
+        <span
+          (click)="!disabled && datePicker.open()"
+          class="absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors"
+        >
+          <fx-ui-hero-icon icon="calendar" [size]="20" class="text-text-primary"></fx-ui-hero-icon>
+        </span>
+        <mat-datepicker #datePicker></mat-datepicker>
+      </div>
+    }
+    @if (showTime) {
+      <div class="relative" [class.flex-1]="!showDate" [class.w-32]="showDate">
+        <input
+          [matTimepicker]="timePicker"
+          placeholder="HH:mm"
+          [disabled]="disabled"
+          [value]="dateValue"
+          (valueChange)="onTimeChange($event)"
+          (click)="!disabled && timePicker.open()"
+          (blur)="onBlur()"
+          readonly
+          class="input-default pr-9"
+        />
+        <span
+          (click)="!disabled && timePicker.open()"
+          class="absolute inset-y-0 right-0 flex items-center pr-2.5 cursor-pointer text-text-placeholder hover:text-text-primary transition-colors"
+        >
+          <fx-ui-hero-icon icon="clock" [size]="20" class="text-text-primary"></fx-ui-hero-icon>
+        </span>
+        <mat-timepicker #timePicker></mat-timepicker>
+      </div>
+    }
   </div>
-  <owl-date-time
-    #picker
-    [startAt]="startAt"
-    [pickerType]="type"
-    (afterPickerClosed)="onValueChange($event)"
-  ></owl-date-time>
   @if (invalid) {
     <div class="txt-invalid">{{ getErrorMessage(label) }}</div>
   }

package/src/lib/ui/components/datetime-picker/datetime-picker.component.scss CHANGED Viewed

@@ -1,147 +1,35 @@
 /* Tailwind v4: component styles compile in isolation — @reference pulls in the theme for @apply without re-emitting it. */
 @reference '../../../styles/tailwind.css';
-// ─── Owl DateTime Picker Custom Styles ───────────────────────────────────────
+/* ─── Material date/time picker popups, themed with the fx tokens ──────────
+   (Replaces the old Owl picker skin — the popups render in an overlay, so
+   everything below is ::ng-deep on the panel classes.) */
-// Container
-::ng-deep .owl-dt-container {
+::ng-deep .mat-datepicker-content,
+::ng-deep mat-timepicker .mat-timepicker-panel,
+::ng-deep .mat-timepicker-panel {
   @apply bg-bg-primary rounded-xl shadow-xl border border-border-default;
-  width: 320px !important;
-}
-// Calendar table base
-::ng-deep .owl-dt-calendar-table {
-  @apply w-full border-collapse;
-}
-// Default cell hover — override red debug color
-::ng-deep .owl-dt-calendar-table :not(.owl-dt-calendar-cell-disabled):hover > .owl-dt-calendar-cell-content:not(.owl-dt-calendar-cell-selected) {
-  @apply bg-bg-hover;
-}
-// ── Current-month cell text color ─────────────────────────────────────────────
-// No !important here — lets out-month and disabled !important overrides win.
-// A direct declaration still beats the library's inherited rgba(0,0,0,.85).
-::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content {
   color: rgb(var(--text-primary));
-}
-// Selected cell
-::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-selected {
-  background-color: rgb(var(--primary)) !important;
-  color: #fff !important;
-}
-// Today highlight (not selected)
-::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-today:not(.owl-dt-calendar-cell-selected) {
-  border-color: rgb(var(--primary)) !important;
-}
-// ── Disabled dates: text-text-placeholder ────────────────────────────────────
-// owl-dt-calendar-cell-disabled is on the <td>, content span is a direct child
-::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-disabled > .owl-dt-calendar-cell-content {
-  color: rgb(var(--text-placeholder)) !important;
-  opacity: 0.6 !important;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-// ── Other-month dates: text-text-secondary ────────────────────────────────────
-// In v20, owl-dt-calendar-cell-out is applied ON the <span.owl-dt-calendar-cell-content>
-// itself (via [ngClass]), NOT on the parent <td>. So target it directly.
-::ng-deep .owl-dt-calendar-table .owl-dt-calendar-cell-content.owl-dt-calendar-cell-out {
-  color: rgb(var(--text-secondary)) !important;
-  opacity: 0.6 !important;
-}
-// ── Timer input ───────────────────────────────────────────────────────────────
-::ng-deep .owl-dt-timer-content .owl-dt-timer-input {
-  @apply bg-bg-primary border border-border-strong text-text-primary rounded-lg;
-}
-// ── Period button (hide arrow) ────────────────────────────────────────────────
-::ng-deep .owl-dt-control-period-button .owl-dt-control-button-arrow {
-  display: none;
-}
-// ── Set / Cancel footer buttons ───────────────────────────────────────────────
-// Library sets .owl-dt-container-buttons { height: 2em; color: #3f51b5 } — override both
-::ng-deep .owl-dt-container-buttons {
-  height: auto !important;
-  color: rgb(var(--text-primary)) !important; // reset inherited primary color on text
-  display: flex !important;
-  align-items: center !important;
-  justify-content: flex-end !important;
-  gap: 8px;
-  padding: 8px 12px;
-  border-top: 1px solid rgb(var(--border-default));
-}
-// Both buttons — explicit 32px height so inner height:100% resolves correctly
-::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button {
-  width: auto !important;
-  height: 32px !important;
-  border-radius: 6px !important;
-  width: 60px !important;
-  padding-top: 4px !important;
-  padding-bottom: 4px !important;
-  font-size: 13px !important;
-  font-weight: 600 !important;
-  border: 1px solid rgb(var(--border-default)) !important;
-  background-color: rgb(var(--bg-primary)) !important;
-  color: rgb(var(--text-primary)) !important;
-  cursor: pointer;
-  transition: opacity 150ms ease;
-  &:hover {
-    background-color: rgb(var(--bg-hover)) !important;
-  }
-}
-// "Set" = last button — primary fill
-::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button:last-child {
-  background-color: rgb(var(--primary)) !important;
-  border-color: rgb(var(--primary)) !important;
-  color: #fff !important;
+  /* Material M3 token overrides so calendar internals follow the theme */
+  --mat-datepicker-calendar-container-background-color: rgb(var(--bg-primary));
+  --mat-datepicker-calendar-container-text-color: rgb(var(--text-primary));
+  --mat-datepicker-calendar-date-text-color: rgb(var(--text-primary));
+  --mat-datepicker-calendar-date-selected-state-background-color: rgb(var(--primary));
+  --mat-datepicker-calendar-date-selected-state-text-color: #fff;
+  --mat-datepicker-calendar-date-today-outline-color: rgb(var(--primary));
+  --mat-datepicker-calendar-date-hover-state-background-color: rgb(var(--bg-primary-hover));
+  --mat-datepicker-calendar-header-text-color: rgb(var(--text-secondary));
+  --mat-datepicker-calendar-period-button-text-color: rgb(var(--text-primary));
+  --mat-datepicker-calendar-navigation-button-icon-color: rgb(var(--text-primary));
+  --mat-datepicker-calendar-date-disabled-state-text-color: rgb(var(--text-placeholder));
+  --mat-timepicker-container-background-color: rgb(var(--bg-primary));
+}
+::ng-deep .mat-timepicker-panel .mat-mdc-option {
+  color: rgb(var(--text-primary));
-  &:hover {
-    opacity: 0.85;
+  &:hover:not(.mdc-list-item--disabled) {
+    background-color: rgb(var(--bg-primary-hover));
   }
 }
-// Inner content: height:100% now resolves against fixed 32px button, and
-// background must be transparent so the button's own bg shows through
-::ng-deep .owl-dt-container-buttons .owl-dt-container-control-button .owl-dt-control-button-content {
-  height: 100% !important;
-  width: 100% !important;
-  padding: 0 !important;
-  background-color: transparent !important;
-  color: inherit !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-}
-// ── Header / navigation ───────────────────────────────────────────────────────
-::ng-deep .owl-dt-calendar-control-content .owl-dt-control-button-content {
-  @apply text-text-primary font-medium;
-}
-::ng-deep .owl-dt-control-arrow-button .owl-dt-control-button-content {
-  @apply text-text-primary;
-}
-::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header {
-  @apply text-text-secondary;
-}
-::ng-deep .owl-dt-calendar-table .owl-dt-calendar-header .owl-dt-weekdays th {
-  @apply text-text-secondary font-medium;
-}
-// ── Popup container border ────────────────────────────────────────────────────
-::ng-deep .owl-dt-inline-container,
-::ng-deep .owl-dt-popup-container {
-  @apply rounded-xl shadow-lg border border-border-strong;
-}

package/src/lib/ui/components/dnd-upload/dnd-upload.component.html CHANGED Viewed

@@ -14,7 +14,7 @@
     (keydown.enter)="onAreaClick(fileInput, $event)"
   >
     <fx-ui-hero-icon
-      [icon]="icon"
+      [icon]="icon()"
       [size]="40"
       class="flex dnd-icon"
     ></fx-ui-hero-icon>
@@ -28,14 +28,14 @@
       } @else {
         Any file type
       }
-      — Max {{ maxSizeMB }} MB
+      — Max {{ maxSizeMB() }} MB
     </div>
     <input
       #fileInput
       type="file"
       class="dnd-input"
-      [attr.multiple]="multiple ? '' : null"
+      [attr.multiple]="multiple() ? '' : null"
       [attr.accept]="accept"
       (change)="onFileSelected($event)"
     />

package/src/lib/ui/components/drawer/drawer.component.html CHANGED Viewed

@@ -1,30 +1,45 @@
 <div class="drawer-host-wrapper">
-  <a
-    href="/"
-    class="h-[60px]"
-    [ngClass]="{ 'flex items-center justify-center': !isExpanded, 'p-4': isExpanded }"
-    >
+  <a href="/" class="drawer-brand" [class.is-collapsed]="!isExpanded">
     @if (logo) {
-      <img
-        [src]="logo"
-        alt="Home"
-        class="h-[20px] w-auto transition-all duration-300 ease-in-out"
-        [ngClass]="{ 'scale-90': !isExpanded, 'ml-5': isExpanded }"
-        />
+      <img [src]="logo" alt="Home" class="drawer-brand-mark" />
     } @else {
-      <div class="h-[30px] w-auto transition-all duration-300 ease-in-out"></div>
+      <div class="drawer-brand-mark"></div>
+    }
+    @if (isExpanded && (logoText || logoSubtext)) {
+      <span class="drawer-brand-copy">
+        @if (logoText) {
+          <span class="drawer-brand-text">{{ logoText }}</span>
+        }
+        @if (logoSubtext) {
+          <span class="drawer-brand-subtext">{{ logoSubtext }}</span>
+        }
+      </span>
     }
   </a>
   <div class="drawer-container" [@drawerExpand]="getDrawerState()">
     <!-- Navigation Items -->
     <nav class="drawer-nav">
-      @for (item of items; track item) {
+      @for (item of items(); track item) {
         <ng-container
           *ngTemplateOutlet="drawerItem; context: { $implicit: item, level: 0 }"
         ></ng-container>
       }
     </nav>
+    <!-- V2: bottom section (Administration group, user block, …) -->
+    <div class="mt-auto">
+      @if (footerItems().length) {
+        <nav class="drawer-footer-nav">
+          @for (item of footerItems(); track item) {
+            <ng-container
+              *ngTemplateOutlet="drawerItem; context: { $implicit: item, level: 0 }"
+            ></ng-container>
+          }
+        </nav>
+      }
+      <ng-content select="[drawerFooter]"></ng-content>
+    </div>
     <!-- Version -->
     @if (version) {
       <div class="drawer-version" [matTooltip]="!isExpanded ? version : ''" matTooltipPosition="right">
@@ -59,6 +74,13 @@
 <!-- Recursive Template for Drawer Items -->
 <ng-template #drawerItem let-item let-level="level">
+  @if (item.heading) {
+    @if (isExpanded) {
+      <div class="drawer-section-label">{{ item.label }}</div>
+    } @else {
+      <div class="drawer-section-rule"></div>
+    }
+  } @else {
   <div class="drawer-item-wrapper">
     <!-- Item Button/Link -->
     @if (item.route && !item.children) {
@@ -125,4 +147,5 @@
       </div>
     }
   </div>
+  }
 </ng-template>