@foxeltech/angular-ui 0.3.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@foxeltech/angular-ui",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -13,19 +13,13 @@
     "@angular/forms": "^20.3.0 || ^21.0.0",
     "@angular/material": "^20.2.7 || ^21.0.0",
     "@angular/cdk": "^20.2.7 || ^21.0.0",
-    "lodash": "^4.17.21",
     "@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": "^21.0.0",
-    "@danielmoncada/angular-datetime-picker-moment-adapter": "^8.0.0",
     "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"
@@ -45,6 +39,18 @@
     ".": {
       "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": [

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

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

@@ -18,7 +18,7 @@
   <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>

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>

package/src/lib/ui/components/hero-icon/hero-icon.component.html

@@ -1,9 +1,10 @@
-<ng-heroicons
-  [stroke]="stroke"
-  [icon]="icon"
-  [size]="size"
-  [solid]="solid"
-  [outline]="outline"
-  [color]="color"
-  [class]="class"
-/>
+<svg
+  [attr.width]="size() || 24"
+  [attr.height]="size() || 24"
+  [attr.stroke-width]="solid() ? null : stroke()"
+  [style.color]="color() || null"
+  [class]="class()"
+  aria-hidden="true"
+>
+  <use [attr.href]="href" />
+</svg>

package/src/lib/ui/components/info-field/info-field.component.html

@@ -1,4 +1,4 @@
 <div class="flex flex-col gap-small min-w-0">
-  <span class="txt-field-label !mb-0">{{ label }}</span>
+  <span class="txt-field-label !mb-0">{{ label() }}</span>
   <span class="txt-default" [ngClass]="valueClass">{{ displayValue }}</span>
 </div>

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

@@ -1,8 +1,8 @@
-<div class="mb-4 text-left w-full text-text-primary" [class]="class">
+<div class="mb-4 text-left w-full text-text-primary" [class]="class()">
   @if (label) {
     <label class="block txt-field-label" [attr.for]="fieldId">
       {{ label }}
-      @if (required) {
+      @if (required()) {
         <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
@@ -24,16 +24,16 @@
       [appTrimOnBlurCollapse]="true"
       [id]="fieldId"
       [type]="displayType"
-      [placeholder]="placeholder"
+      [placeholder]="placeholder()"
       [disabled]="disabled"
       [value]="value"
       (input)="onInput($event)"
       (blur)="onBlur()"
       (focus)="onFocus()"
-      [attr.maxlength]="maxlength"
+      [attr.maxlength]="maxlength()"
       [attr.aria-invalid]="invalid || null"
       [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
-      [attr.aria-required]="required ? true : null"
+      [attr.aria-required]="required() ? true : null"
       [class]="type === 'otp' ? 'input-otp' : 'input-default'"
       [class.input-invalid]="invalid"
       [class.pr-8]="type === 'password' || suffixIcon"
@@ -48,7 +48,7 @@
         [attr.aria-label]="
           type === 'password'
             ? (showPassword ? 'Hide password' : 'Show password')
-            : (suffixAriaLabel || null)
+            : (suffixAriaLabel() || null)
         "
         [attr.aria-pressed]="type === 'password' ? showPassword : null"
       >

package/src/lib/ui/components/kanban-board/kanban-board.component.html

@@ -1,6 +1,6 @@
 <div class="kanban-board">
   <div class="kanban-columns">
-    @for (column of columns; track column.id) {
+    @for (column of columns(); track column.id) {
       <div class="kanban-column">
         <div class="kanban-column-header">
           <h3 class="kanban-column-title">{{ column.title }}</h3>

package/src/lib/ui/components/loading-panel/loading-panel.component.html

@@ -1,5 +1,5 @@
 <!-- Full-screen glass overlay -->
-@if (show) {
+@if (show()) {
   <div
     class="fixed inset-0 z-50 flex items-center justify-center"
     aria-hidden="false"

package/src/lib/ui/components/master-detail/master-detail.component.html

@@ -1,13 +1,13 @@
-<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth">
+<div class="flex flex-col lg:flex-row items-start gap-xl" [style.--fx-md-list-width]="listWidth()">
   <!-- Master: list pane -->
   <div class="fx-md-list card-common">
     <ng-content select="[mdHeader]"></ng-content>
     <ng-content select="[mdFilters]"></ng-content>
     <div
       class="flex flex-col gap-normal overflow-auto pr-xs"
-      [style.maxHeight]="maxListHeight"
+      [style.maxHeight]="maxListHeight()"
       role="listbox"
-      [attr.aria-label]="listLabel || null"
+      [attr.aria-label]="listLabel() || null"
     >
       @if (table.loading) {
         <fx-ui-skeleton-list [rows]="table.pageSize"></fx-ui-skeleton-list>
@@ -29,13 +29,13 @@
             "
           >
             <ng-container
-              [ngTemplateOutlet]="rowTemplate"
+              [ngTemplateOutlet]="rowTemplate()"
               [ngTemplateOutletContext]="{ $implicit: row, selected: isSelected(row) }"
             ></ng-container>
           </button>
         }
         @if (!table.dataSource.data.length) {
-          <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+          <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
         }
       }
     </div>
@@ -46,7 +46,7 @@
       class="mt-normal"
       [length]="table.total"
       [pageSize]="table.pageSize"
-      [pageSizeOptions]="pageSizeOptions"
+      [pageSizeOptions]="pageSizeOptions()"
     ></mat-paginator>
   </div>
 
@@ -54,16 +54,16 @@
   <div class="w-full lg:flex-1 min-w-0">
     @if (table.selected) {
       @if (table.detailBusy) {
-        <fx-ui-skeleton-detail [cards]="skeletonCards"></fx-ui-skeleton-detail>
+        <fx-ui-skeleton-detail [cards]="skeletonCards()"></fx-ui-skeleton-detail>
       } @else {
         <ng-container
-          [ngTemplateOutlet]="detailTemplate"
+          [ngTemplateOutlet]="detailTemplate()"
           [ngTemplateOutletContext]="{ $implicit: table.detail, selected: table.selected }"
         ></ng-container>
       }
     } @else {
       <div class="card-common flex items-center justify-center h-[300px]">
-        <fx-ui-empty-state [message]="emptyMessage"></fx-ui-empty-state>
+        <fx-ui-empty-state [message]="emptyMessage()"></fx-ui-empty-state>
       </div>
     }
   </div>

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

@@ -0,0 +1,27 @@
+<button
+  type="button"
+  class="inline-flex items-center justify-center rounded-lg p-1 hover:bg-bg-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+  [matMenuTriggerFor]="menu"
+  [disabled]="disabled()"
+  [attr.aria-label]="ariaLabel()"
+>
+  <ng-content></ng-content>
+</button>
+
+<mat-menu #menu="matMenu">
+  @for (item of items(); track item.label) {
+    <button
+      mat-menu-item
+      type="button"
+      [disabled]="item.disabled"
+      (click)="select.emit(item)"
+    >
+      <span class="flex items-center gap-normal" [class]="toneClass(item)">
+        @if (item.icon) {
+          <fx-ui-hero-icon [icon]="item.icon" [size]="18"></fx-ui-hero-icon>
+        }
+        <span>{{ item.label }}</span>
+      </span>
+    </button>
+  }
+</mat-menu>

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

@@ -1,6 +1,6 @@
 <div
   class="w-full rounded-lg overflow-hidden"
-  [class]="class"
+  [class]="class()"
   role="radiogroup"
   [attr.aria-labelledby]="label ? groupId + '-label' : null"
   >
@@ -8,7 +8,7 @@
   @if (label) {
     <span class="txt-field-label block" [id]="groupId + '-label'">
       {{ label }}
-      @if (required) {
+      @if (required()) {
         <span class="txt-required" aria-hidden="true">*</span>
       }
       @if (tooltip) {
@@ -24,7 +24,7 @@
     </span>
   }
 
-  @for (opt of options; track opt) {
+  @for (opt of options(); track opt) {
     <button
       type="button"
       role="radio"