npm - @foxeltech/angular-ui - Versions diffs - 0.3.0 → 0.4.0 - Mend

@foxeltech/angular-ui 0.3.0 → 0.4.0

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 (54) hide show

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

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

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

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

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

@@ -1,57 +1,57 @@
 <!-- Full-screen glass overlay -->
-<div
-  *ngIf="show"
-  class="fixed inset-0 z-50 flex items-center justify-center"
-  aria-hidden="false"
-  role="alert"
-  aria-busy="true"
->
-  <div class="absolute inset-0 bg-bg-primary/30 backdrop-blur-xl" aria-hidden="true"></div>
+@if (show()) {
   <div
-    class="relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70"
-    style="min-width: 220px; max-width: 90%"
-  >
-  <svg fill="url(#spinner-gradient)" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <defs>
-      <linearGradient id="spinner-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-        <stop offset="0%" style="stop-color: rgb(var(--gradient-primary-start)); stop-opacity: 1" />
-        <stop offset="100%" style="stop-color: rgb(var(--gradient-primary-end)); stop-opacity: 1" />
-      </linearGradient>
-    </defs>
-    <circle cx="4" cy="12" r="0">
-      <animate begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
-      <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
-      <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
-      <animate id="spinner_lo66" begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
-      <animate id="spinner_z0Or" begin="spinner_lo66.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
-    </circle>
-    <circle cx="4" cy="12" r="3">
-      <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
-      <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
-      <animate id="spinner_JsnR" begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
-      <animate id="spinner_Aguh" begin="spinner_JsnR.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
-      <animate begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
-    </circle>
-    <circle cx="12" cy="12" r="3">
-      <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
-      <animate id="spinner_hSjk" begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
-      <animate id="spinner_UHR2" begin="spinner_hSjk.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
-      <animate begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
-      <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
-    </circle>
-    <circle cx="20" cy="12" r="3">
-      <animate id="spinner_4v5M" begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
-      <animate id="spinner_OLMs" begin="spinner_4v5M.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
-      <animate begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
-      <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
-      <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
-    </circle>
-  </svg>
-    <div *ngIf="message" class="text-sm text-text-primary text-center">
-      {{ message }}
+    class="fixed inset-0 z-50 flex items-center justify-center"
+    aria-hidden="false"
+    role="alert"
+    aria-busy="true"
+    >
+    <div class="absolute inset-0 bg-bg-primary/30 backdrop-blur-xl" aria-hidden="true"></div>
+    <div
+      class="relative z-10 flex flex-col items-center gap-4 p-6 rounded-2xl shadow-xl bg-bg-primary/70 border border-border-strong backdrop-bg-primary/70"
+      style="min-width: 220px; max-width: 90%"
+      >
+      <svg fill="url(#spinner-gradient)" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="spinner-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" style="stop-color: rgb(var(--gradient-primary-start)); stop-opacity: 1" />
+            <stop offset="100%" style="stop-color: rgb(var(--gradient-primary-end)); stop-opacity: 1" />
+          </linearGradient>
+        </defs>
+        <circle cx="4" cy="12" r="0">
+          <animate begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+          <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+          <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+          <animate id="spinner_lo66" begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+          <animate id="spinner_z0Or" begin="spinner_lo66.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+        </circle>
+        <circle cx="4" cy="12" r="3">
+          <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+          <animate begin="spinner_OLMs.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+          <animate id="spinner_JsnR" begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+          <animate id="spinner_Aguh" begin="spinner_JsnR.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+          <animate begin="spinner_Aguh.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+        </circle>
+        <circle cx="12" cy="12" r="3">
+          <animate begin="0;spinner_z0Or.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+          <animate id="spinner_hSjk" begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+          <animate id="spinner_UHR2" begin="spinner_hSjk.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+          <animate begin="spinner_UHR2.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+          <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+        </circle>
+        <circle cx="20" cy="12" r="3">
+          <animate id="spinner_4v5M" begin="0;spinner_z0Or.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="3;0" fill="freeze"/>
+          <animate id="spinner_OLMs" begin="spinner_4v5M.end" attributeName="cx" dur="0.001s" values="20;4" fill="freeze"/>
+          <animate begin="spinner_OLMs.end" attributeName="r" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="0;3" fill="freeze"/>
+          <animate begin="spinner_UHR2.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="4;12" fill="freeze"/>
+          <animate begin="spinner_Aguh.end" attributeName="cx" calcMode="spline" dur="0.5s" keySplines=".36,.6,.31,1" values="12;20" fill="freeze"/>
+        </circle>
+      </svg>
+      @if (message) {
+        <div class="text-sm text-text-primary text-center">
+          {{ message }}
+        </div>
+      }
     </div>
   </div>
-</div>
+}

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

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

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

@@ -1,14 +1,14 @@
 <div
   class="w-full rounded-lg overflow-hidden"
-  [class]="class"
+  [class]="class()"
   role="radiogroup"
   [attr.aria-labelledby]="label ? groupId + '-label' : null"
->
+  >
   <!-- A radiogroup has no single control a <label> could point at — name it via aria-labelledby. -->
   @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,33 +24,33 @@
     </span>
   }
-  <button
-    *ngFor="let opt of options"
-    type="button"
-    role="radio"
-    [attr.aria-checked]="value === opt.value"
-    (click)="onSelectValue(opt.value)"
-    [disabled]="disabled"
-    [class.text-gray-900]="value !== opt.value"
-    class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
-    [matTooltip]="opt.tooltip || ''"
-    matTooltipPosition="right"
-    matTooltipClass="text-text-primary text-xs font-semibold"
-  >
-    <span
+  @for (opt of options(); track opt) {
+    <button
+      type="button"
+      role="radio"
+      [attr.aria-checked]="value === opt.value"
+      (click)="onSelectValue(opt.value)"
+      [disabled]="disabled"
+      [class.text-gray-900]="value !== opt.value"
+      class="flex-1 px-normal w-full flex items-center gap-normal h-10 rounded-md hover:bg-bg-hover transition-all duration-150 disabled:opacity-60 disabled:cursor-not-allowed"
+      [matTooltip]="opt.tooltip || ''"
+      matTooltipPosition="right"
+      matTooltipClass="text-text-primary text-xs font-semibold"
+      >
+      <span
       [ngClass]="{
         'radio-checked': value === opt.value,
         'radio-uncheck': value !== opt.value,
       }"
-      class="radio-container"
-    >
-      @if (value === opt.value) {
-        <span class="radio-dot"></span>
-      }
-    </span>
-    <span class="txt-default mb-0">{{ opt.label }}</span>
-  </button>
+        class="radio-container"
+        >
+        @if (value === opt.value) {
+          <span class="radio-dot"></span>
+        }
+      </span>
+      <span class="txt-default mb-0">{{ opt.label }}</span>
+    </button>
+  }
   @if (invalid) {
     <div class="txt-invalid">
       {{ getErrorMessage(label) }}

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

@@ -1,8 +1,8 @@
-<div class="flex flex-col text-left mb-4 w-full" [class]="class">
+<div class="flex flex-col text-left mb-4 w-full" [class]="class()">
   <!-- A radiogroup has no single control a <label> could point at — name it via aria-labelledby. -->
   @if(label){<span class="txt-field-label" [id]="groupId + '-label'">
     {{ label }}
-    @if(required) {<span class="txt-required" aria-hidden="true">*</span>} </span
+    @if(required()) {<span class="txt-required" aria-hidden="true">*</span>} </span
   >}
   <div
@@ -10,7 +10,7 @@
     role="radiogroup"
     [attr.aria-labelledby]="label ? groupId + '-label' : null"
   >
-    @for(opt of options; track opt){<button
+    @for(opt of options(); track opt){<button
       type="button"
       role="radio"
       [attr.aria-checked]="value === opt.value"

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

@@ -3,20 +3,21 @@
   <input
     type="text"
     class="input-default px-9"
-    [attr.placeholder]="placeholder"
+    [attr.placeholder]="placeholder()"
     [disabled]="disabled"
     [value]="value"
     (input)="onValueChange($any($event.target).value)"
     (keydown.enter)="onEnterKey()"
-  />
+    />
-  <button
-    *ngIf="value && !disabled"
-    type="button"
-    class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
-    (click)="clear()"
-    aria-label="Clear"
-  >
-    <i class="material-symbols-outlined text-lg select-none">close</i>
-  </button>
+  @if (value && !disabled) {
+    <button
+      type="button"
+      class="absolute inset-y-0 right-2 flex items-center text-text-primary hover:text-text-secondary"
+      (click)="clear()"
+      aria-label="Clear"
+      >
+      <i class="material-symbols-outlined text-lg select-none">close</i>
+    </button>
+  }
 </div>

package/src/lib/ui/components/section-card/section-card.component.html CHANGED Viewed

@@ -3,7 +3,7 @@
     @if (icon) {
       <fx-ui-hero-icon [ngClass]="iconClass" [icon]="icon" [size]="18"></fx-ui-hero-icon>
     }
-    <span class="txt-heading-06">{{ title }}</span>
+    <span class="txt-heading-06">{{ title() }}</span>
   </div>
   <ng-content></ng-content>
 </div>

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

@@ -1,8 +1,8 @@
-<div class="mb-4 text-left w-full" [class]="class">
+<div class="mb-4 text-left w-full" [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) {
@@ -22,21 +22,21 @@
     [attr.invalid]="invalid || null"
     class="fx-select-field w-full shadow-sm"
     appearance="fill"
-  >
+    >
     <mat-select
       [id]="fieldId"
-      [required]="!!required"
+      [required]="!!required()"
       [attr.aria-invalid]="invalid || null"
       [attr.aria-describedby]="invalid ? fieldId + '-error' : null"
-      [placeholder]="placeholder"
+      [placeholder]="placeholder()"
       [disabled]="disabled"
-      [multiple]="multiple"
+      [multiple]="multiple()"
       [value]="value"
       (selectionChange)="onSelectionChange($event.value)"
       (openedChange)="onOpened($event)"
       (blur)="onTouched()"
-    >
-      @if (enableSearch) {
+      >
+      @if (enableSearch()) {
         <div class="px-semi w-full">
           <input
             type="text"
@@ -46,12 +46,14 @@
             (ngModelChange)="onSearchChange($event)"
             (click)="$event.stopPropagation()"
             class="text-text-primary placeholder:text-text-placeholder w-full bg-bg-primary border-b px-semi py-normal border-border-default focus:outline-none focus:border-gradient-primary-start focus-visible:ring-2 focus-visible:ring-primary/50 text-sm text-text-primary tracking-normal ring-0 transition-colors duration-500 ease-in-out"
-          />
+            />
         </div>
       }
-      <mat-option *ngFor="let option of filteredOptions" [value]="option.value">
-        <span class="txt-default">{{ option.label }}</span>
-      </mat-option>
+      @for (option of filteredOptions; track option) {
+        <mat-option [value]="option.value">
+          <span class="txt-default">{{ option.label }}</span>
+        </mat-option>
+      }
     </mat-select>
   </mat-form-field>

package/src/lib/ui/components/skeleton-detail/skeleton-detail.component.html CHANGED Viewed

@@ -9,11 +9,11 @@
     </div>
   </div>
-  @for (c of range(cards); track c) {
+  @for (c of range(cards()); track c) {
     <div class="card-common flex flex-col gap-large">
       <div class="h-4 w-1/3 rounded bg-bg-hover"></div>
       <div class="flex flex-col gap-normal">
-        @for (r of range(rows); track r) {
+        @for (r of range(rows()); track r) {
           <div class="h-3 rounded bg-bg-hover" [style.width.%]="rowWidth(r)"></div>
         }
       </div>

package/src/lib/ui/components/skeleton-list/skeleton-list.component.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <div class="flex flex-col gap-normal animate-pulse">
-  @for (r of range(rows); track r) {
+  @for (r of range(rows()); track r) {
     <div class="rounded-lg border border-border-default p-semi">
       <div class="flex items-center gap-normal mb-small">
         <div class="w-8 h-8 rounded-lg bg-bg-hover shrink-0"></div>

package/src/lib/ui/components/skeleton-table-loading/skeleton-table-loading.component.html CHANGED Viewed

@@ -1,19 +1,19 @@
 <div class="w-full animate-pulse space-y-normal">
   <div
     class="grid gap-small"
-    [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }"
+    [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }"
   >
-    @for(col of [].constructor(columns); track col) {
+    @for(col of [].constructor(columns()); track col) {
       <div class="h-6 bg-bg-hover rounded"></div>
     }
   </div>
-  @for(row of [].constructor(rows); track row) {
+  @for(row of [].constructor(rows()); track row) {
     <div
       class="grid gap-small"
-      [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns + ', minmax(0, 1fr))' }"
+      [ngStyle]="{ 'grid-template-columns': 'repeat(' + columns() + ', minmax(0, 1fr))' }"
     >
-      @for(col of [].constructor(columns); track col) {
+      @for(col of [].constructor(columns()); track col) {
         <div class="h-7 bg-bg-hover rounded"></div>
       }
     </div>

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

@@ -3,7 +3,7 @@
   [class.cursor-not-allowed]="disabled"
   [class.opacity-60]="disabled"
   role="group"
->
+  >
   <!-- Track click is a pointer shortcut; the thumb button below owns keyboard/focus. -->
   <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
   <div
@@ -11,28 +11,30 @@
     class="relative touch-none py-4"
     (click)="onTrackClick($event)"
     [attr.aria-disabled]="disabled"
-    [attr.aria-orientation]="vertical ? 'vertical' : 'horizontal'"
-  >
+    [attr.aria-orientation]="vertical() ? 'vertical' : 'horizontal'"
+    >
     <div
       class="relative flex items-center"
-      [ngClass]="{ 'flex-col h-48': vertical }"
-    >
+      [ngClass]="{ 'flex-col h-48': vertical() }"
+      >
       <div
         class="relative flex-1 rounded-full bg-gray-600 h-2"
-        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical }"
-      >
-        <div
-          class="absolute left-0 top-0 h-full rounded-full bg-primary"
-          *ngIf="!vertical"
-          [style.width.%]="percent"
-        ></div>
+        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical() }"
+        >
+        @if (!vertical()) {
+          <div
+            class="absolute left-0 top-0 h-full rounded-full bg-primary"
+            [style.width.%]="percent"
+          ></div>
+        }
-        <div
-          class="absolute bottom-0 left-0 w-full rounded-full bg-primary"
-          *ngIf="vertical"
-          [style.height.%]="percent"
-          style="transform-origin: bottom;"
-        ></div>
+        @if (vertical()) {
+          <div
+            class="absolute bottom-0 left-0 w-full rounded-full bg-primary"
+            [style.height.%]="percent"
+            style="transform-origin: bottom;"
+          ></div>
+        }
         <button
           #thumb
@@ -41,8 +43,8 @@
           [ngStyle]="thumbStyle()"
           role="slider"
           aria-label="Slider"
-          [attr.aria-valuemin]="min"
-          [attr.aria-valuemax]="max"
+          [attr.aria-valuemin]="min()"
+          [attr.aria-valuemax]="max()"
           [attr.aria-valuenow]="value"
           [attr.aria-disabled]="disabled"
           tabindex="0"

package/src/lib/ui/components/stat-cards/stat-cards.component.html CHANGED Viewed

@@ -1,5 +1,5 @@
 <div class="grid gap-normal" [ngStyle]="{ 'grid-template-columns': gridColumns }">
-  @for (card of cards; track card.label) {
+  @for (card of cards(); track card.label) {
     <div class="card-common flex items-center gap-normal">
       @if (card.icon) {
         <div

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

@@ -2,7 +2,7 @@
   type="button"
   role="switch"
   [attr.aria-checked]="!!value"
-  [attr.aria-label]="ariaLabel || null"
+  [attr.aria-label]="ariaLabel() || null"
   [disabled]="disabled"
   class="relative flex items-center w-10 h-5 rounded-full transition-colors duration-300 cursor-pointer disabled:cursor-not-allowed focus-visible:ring-2 focus-visible:ring-primary/50"
   [ngClass]="{