@foxeltech/angular-ui 0.3.0 → 0.4.0

package/package.json

@@ -1,31 +1,25 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "peerDependencies": {
     "tailwindcss": "^4.0.0",
-    "@angular/common": "^20.3.0",
-    "@angular/animations": "^20.3.0",
-    "@angular/core": "^20.3.0",
-    "@angular/forms": "^20.3.0",
-    "@angular/material": "^20.2.7",
-    "@angular/cdk": "^20.2.7",
-    "lodash": "^4.17.21",
+    "@angular/common": "^20.3.0 || ^21.0.0",
+    "@angular/animations": "^20.3.0 || ^21.0.0",
+    "@angular/core": "^20.3.0 || ^21.0.0",
+    "@angular/forms": "^20.3.0 || ^21.0.0",
+    "@angular/material": "^20.2.7 || ^21.0.0",
+    "@angular/cdk": "^20.2.7 || ^21.0.0",
     "@ngx-translate/core": "^14.0.0",
-    "@ngx-translate/http-loader": "^7.0.0",
-    "moment": "^2.30.1"
+    "@ngx-translate/http-loader": "^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@danielmoncada/angular-datetime-picker": "^20.0.0",
-    "@danielmoncada/angular-datetime-picker-moment-adapter": "^7.0.1",
     "echarts": "^6.0.0",
     "ngx-echarts": "^20.0.2",
-    "d3": "^7.9.0",
-    "@dimaslz/ng-heroicons": "^1.19.1",
     "quill": "^2.0.3",
     "ngx-vflow": "^1.16.2",
     "@microsoft/signalr": "^10.0.0"
@@ -43,13 +37,26 @@
       "default": "./package.json"
     },
     ".": {
-      "types": "./index.d.ts",
+      "types": "./types/foxeltech-angular-ui.d.ts",
       "default": "./fesm2022/foxeltech-angular-ui.mjs"
+    },
+    "./chart": {
+      "types": "./types/foxeltech-angular-ui-chart.d.ts",
+      "default": "./fesm2022/foxeltech-angular-ui-chart.mjs"
+    },
+    "./flow": {
+      "types": "./types/foxeltech-angular-ui-flow.d.ts",
+      "default": "./fesm2022/foxeltech-angular-ui-flow.mjs"
+    },
+    "./rich-text": {
+      "types": "./types/foxeltech-angular-ui-rich-text.d.ts",
+      "default": "./fesm2022/foxeltech-angular-ui-rich-text.mjs"
     }
   },
   "sideEffects": [
     "*.css"
   ],
   "module": "fesm2022/foxeltech-angular-ui.mjs",
-  "typings": "index.d.ts"
+  "typings": "types/foxeltech-angular-ui.d.ts",
+  "type": "module"
 }

package/src/lib/styles/tailwind.css

@@ -8,7 +8,6 @@
 @import './components.css' layer(components);
 @import './dialogs.css' layer(components);
 @import './animations.css';
-@import '@danielmoncada/angular-datetime-picker/assets/style/picker.min.css';
 
 html,
 body {

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

@@ -1,22 +1,22 @@
 <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"
@@ -222,9 +222,9 @@
             [size]="20"
             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-white': buttonVariant() === 'primary' || buttonVariant() === 'success',
             }"
           ></fx-ui-hero-icon>
         }

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

@@ -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,
     }"

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

@@ -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/datetime-picker/datetime-picker.component.html

@@ -2,36 +2,62 @@
   @if (label) {
     <label class="txt-field-label" [attr.for]="fieldId">
       {{ label }}
-      <span *ngIf="required" class="txt-required" aria-hidden="true">*</span>
+      @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>
-  <div *ngIf="invalid" class="txt-invalid">{{ getErrorMessage(label) }}</div>
+  @if (invalid) {
+    <div class="txt-invalid">{{ getErrorMessage(label) }}</div>
+  }
 </div>

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

@@ -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

@@ -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

@@ -3,14 +3,14 @@
     href="/"
     class="h-[60px]"
     [ngClass]="{ 'flex items-center justify-center': !isExpanded, 'p-4': 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 }"
-      />
+        />
     } @else {
       <div class="h-[30px] w-auto transition-all duration-300 ease-in-out"></div>
     }
@@ -18,18 +18,24 @@
   <div class="drawer-container" [@drawerExpand]="getDrawerState()">
     <!-- Navigation Items -->
     <nav class="drawer-nav">
-      <ng-container *ngFor="let item of items">
+      @for (item of items(); track item) {
         <ng-container
           *ngTemplateOutlet="drawerItem; context: { $implicit: item, level: 0 }"
         ></ng-container>
-      </ng-container>
+      }
     </nav>
 
     <!-- Version -->
-    <div *ngIf="version" class="drawer-version" [matTooltip]="!isExpanded ? version : ''" matTooltipPosition="right">
-      <span *ngIf="isExpanded">{{ version }}</span>
-      <span *ngIf="!isExpanded" class="drawer-version-dot"></span>
-    </div>
+    @if (version) {
+      <div class="drawer-version" [matTooltip]="!isExpanded ? version : ''" matTooltipPosition="right">
+        @if (isExpanded) {
+          <span>{{ version }}</span>
+        }
+        @if (!isExpanded) {
+          <span class="drawer-version-dot"></span>
+        }
+      </div>
+    }
   </div>
 
   <!-- Floating Toggle Button on right border -->
@@ -42,7 +48,7 @@
     [matTooltip]="isExpanded ? 'Collapse' : 'Expand'"
     matTooltipClass="text-text-primary text-xs font-semibold"
     matTooltipPosition="right"
-  >
+    >
     <fx-ui-hero-icon
       [icon]="isExpanded ? 'chevron-left' : 'chevron-right'"
       [size]="16"
@@ -55,60 +61,68 @@
 <ng-template #drawerItem let-item let-level="level">
   <div class="drawer-item-wrapper">
     <!-- Item Button/Link -->
-    <a
-      *ngIf="item.route && !item.children"
-      [routerLink]="item.route"
-      class="drawer-item"
-      [class.active]="isActiveRoute(item.route)"
-      [class.has-children]="item.children && item.children.length > 0"
-      [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
-      [matTooltip]="!isExpanded ? item.label : ''"
-      matTooltipPosition="right"
-      matTooltipClass="text-text-primary text-xs font-semibold"
-      (click)="onItemClick(item, $event)"
-    >
-      <div class="item-content">
-        <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
-        <span *ngIf="isExpanded" class="item-label">{{ item.label }}</span>
-      </div>
-    </a>
+    @if (item.route && !item.children) {
+      <a
+        [routerLink]="item.route"
+        class="drawer-item"
+        [class.active]="isActiveRoute(item.route)"
+        [class.has-children]="item.children && item.children.length > 0"
+        [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+        [matTooltip]="!isExpanded ? item.label : ''"
+        matTooltipPosition="right"
+        matTooltipClass="text-text-primary text-xs font-semibold"
+        (click)="onItemClick(item, $event)"
+        >
+        <div class="item-content">
+          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (isExpanded) {
+            <span class="item-label">{{ item.label }}</span>
+          }
+        </div>
+      </a>
+    }
 
-    <button
-      *ngIf="!item.route || item.children"
-      type="button"
-      class="drawer-item"
-      [class.active]="isActiveRoute(item.route)"
-      [class.has-children]="item.children && item.children.length > 0"
-      [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
-      [matTooltip]="!isExpanded ? item.label : ''"
-      matTooltipPosition="right"
-      matTooltipClass="text-text-primary text-sm font-semibold"
-      (click)="onItemClick(item, $event)"
-    >
-      <div class="item-content">
-        <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
-        <span *ngIf="isExpanded" class="item-label">{{ item.label }}</span>
-        <fx-ui-hero-icon
-          *ngIf="isExpanded && item.children && item.children.length > 0"
-          [icon]="'chevron-down'"
-          [size]="16"
-          class="chevron-icon"
-          [class.rotated]="isAccordionExpanded(item.id)"
-        ></fx-ui-hero-icon>
-      </div>
-    </button>
+    @if (!item.route || item.children) {
+      <button
+        type="button"
+        class="drawer-item"
+        [class.active]="isActiveRoute(item.route)"
+        [class.has-children]="item.children && item.children.length > 0"
+        [style.paddingLeft.px]="isExpanded ? 16 + level * 16 : 16"
+        [matTooltip]="!isExpanded ? item.label : ''"
+        matTooltipPosition="right"
+        matTooltipClass="text-text-primary text-sm font-semibold"
+        (click)="onItemClick(item, $event)"
+        >
+        <div class="item-content">
+          <fx-ui-hero-icon [icon]="item.icon" [size]="20" class="item-icon"></fx-ui-hero-icon>
+          @if (isExpanded) {
+            <span class="item-label">{{ item.label }}</span>
+          }
+          @if (isExpanded && item.children && item.children.length > 0) {
+            <fx-ui-hero-icon
+              [icon]="'chevron-down'"
+              [size]="16"
+              class="chevron-icon"
+              [class.rotated]="isAccordionExpanded(item.id)"
+            ></fx-ui-hero-icon>
+          }
+        </div>
+      </button>
+    }
 
     <!-- Accordion Children -->
-    <div
-      *ngIf="item.children && item.children.length > 0"
-      class="accordion-children"
-      [@accordionExpand]="getAccordionState(item.id)"
-    >
-      <ng-container *ngFor="let child of item.children">
-        <ng-container
-          *ngTemplateOutlet="drawerItem; context: { $implicit: child, level: level + 1 }"
-        ></ng-container>
-      </ng-container>
-    </div>
+    @if (item.children && item.children.length > 0) {
+      <div
+        class="accordion-children"
+        [@accordionExpand]="getAccordionState(item.id)"
+        >
+        @for (child of item.children; track child) {
+          <ng-container
+            *ngTemplateOutlet="drawerItem; context: { $implicit: child, level: level + 1 }"
+          ></ng-container>
+        }
+      </div>
+    }
   </div>
 </ng-template>

package/src/lib/ui/components/empty-state/empty-state.component.html

@@ -1,9 +1,9 @@
 <div
   class="flex flex-col items-center justify-center gap-small w-full"
-  [style.minHeight]="height"
+  [style.minHeight]="height()"
 >
   @if (icon) {
     <fx-ui-hero-icon class="text-text-placeholder" [icon]="icon" [size]="24"></fx-ui-hero-icon>
   }
-  <div class="txt-default text-text-placeholder">{{ message }}</div>
+  <div class="txt-default text-text-placeholder">{{ message() }}</div>
 </div>