@foxeltech/angular-ui 0.3.1 → 0.4.0

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

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

@@ -3,7 +3,7 @@
   <input
     type="text"
     class="input-default px-9"
-    [attr.placeholder]="placeholder"
+    [attr.placeholder]="placeholder()"
     [disabled]="disabled"
     [value]="value"
     (input)="onValueChange($any($event.target).value)"

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

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

@@ -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) {
@@ -25,18 +25,18 @@
     >
     <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"

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

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

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

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

@@ -11,24 +11,24 @@
     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 }"
+        [ngClass]="{ 'w-1 rotate-0 h-full w-auto bg-border-gray-700': vertical() }"
         >
-        @if (!vertical) {
+        @if (!vertical()) {
           <div
             class="absolute left-0 top-0 h-full rounded-full bg-primary"
             [style.width.%]="percent"
           ></div>
         }
 
-        @if (vertical) {
+        @if (vertical()) {
           <div
             class="absolute bottom-0 left-0 w-full rounded-full bg-primary"
             [style.height.%]="percent"
@@ -43,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

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

@@ -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]="{

package/src/lib/ui/components/tab-group/tab-group.component.html

@@ -28,7 +28,7 @@
     class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
     (scroll)="onScroll()"
     >
-    @for (tab of tabs.toArray(); track tab; let i = $index) {
+    @for (tab of tabs(); track tab; let i = $index) {
       <button
         type="button"
         role="tab"
@@ -55,7 +55,7 @@
             i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
           "
             >
-            {{ tab.label }}
+            {{ tab.label() }}
           </div>
         </div>
       </button>
@@ -89,10 +89,10 @@
 
 <!-- Tab content -->
 <div class="transition-all duration-300 ease-in-out mt-4">
-  @for (tab of tabs.toArray(); track tab; let i = $index) {
+  @for (tab of tabs(); track tab; let i = $index) {
     @if (i === activeIndex) {
       <div role="tabpanel" class="animate-fadeIn">
-        <ng-container *ngTemplateOutlet="tab.content"></ng-container>
+        <ng-container *ngTemplateOutlet="tab.content()"></ng-container>
       </div>
     }
   }

package/src/lib/ui/components/table-cell/table-cell.component.html

@@ -1,7 +1,7 @@
-@if (!loading) {
+@if (!loading()) {
   <div animate.enter="fade-in-animation" class="inline-block my-normal">
     <ng-content />
   </div>
 } @else {
-  <div animate.enter="fade-in-animation" class="skeleton-load my-semi" [class]="skeletonClass"></div>
+  <div animate.enter="fade-in-animation" class="skeleton-load my-semi" [class]="skeletonClass()"></div>
 }

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

@@ -6,18 +6,18 @@
   [attr.role]="clicked.observed ? 'button' : null"
   [attr.tabindex]="clicked.observed ? 0 : null"
   [class]="
-    `flex flex-row gap-small ${rounded ? 'tag-round' : 'tag-square'} tag-${type}${solid ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`
+    `flex flex-row gap-small ${rounded() ? 'tag-round' : 'tag-square'} tag-${type()}${solid() ? '-solid' : ''}${clicked.observed ? ' cursor-pointer focus-visible:ring-2 focus-visible:ring-primary/50' : ''}`
   "
 >
   @if (icon) {
     <fx-ui-hero-icon
-      [class]="`flex txt-tag-${type} ${solid && type !== 'default' ? 'text-white' : ''}`"
+      [class]="`flex txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white' : ''}`"
       [icon]="icon"
       [size]="18"
     ></fx-ui-hero-icon>
   }
 
-  <div [class]="`txt-tag-${type} ${solid && type !== 'default' ? 'text-white font-medium' : ''}`">
-    {{ label }}
+  <div [class]="`txt-tag-${type()} ${solid() && type() !== 'default' ? 'text-white font-medium' : ''}`">
+    {{ label() }}
   </div>
 </div>

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

@@ -1,17 +1,17 @@
 <div
   animate.enter="horizontal-fade-in-animation"
   animate.leave="horizontal-fade-out-animation"
-  [attr.role]="type === 'error' ? 'alert' : 'status'"
+  [attr.role]="type() === 'error' ? 'alert' : 'status'"
   class="flex border-l-[3px] items-center bg-bg-primary gap-semi min-w-[250px] max-w-[400px] px-large py-semi rounded shadow-lg transition-all duration-300 ease-in-out transform opacity-100 translate-y-0"
   [ngClass]="{
-    'border-success': type === 'success',
-    'border-critical': type === 'error',
-    'border-warning': type === 'warning',
-    'border-information': type === 'info'
+    'border-success': type() === 'success',
+    'border-critical': type() === 'error',
+    'border-warning': type() === 'warning',
+    'border-information': type() === 'info'
   }"
   >
   <div class="" aria-hidden="true">
-    @switch (type) { @case('success') {
+    @switch (type()) { @case('success') {
       <fx-ui-hero-icon
         icon="check-circle"
         [solid]="true"
@@ -46,6 +46,6 @@
       @if (title) {
         <strong class="txt-field-label">{{ title }}</strong>
       }
-      <p class="txt-default">{{ message }}</p>
+      <p class="txt-default">{{ message() }}</p>
     </div>
   </div>

package/src/lib/ui/components/toast-container/toast-container.component.html

@@ -4,6 +4,7 @@
   @for (toast of toasts; track toast) {
     <fx-ui-toast
       class="pointer-events-auto"
+      [toastId]="toast.id"
       [message]="toast.message"
       [title]="toast.title"
       [type]="toast.type"

package/src/lib/ui/components/tree-diagram/tree-diagram.component.html

@@ -5,12 +5,12 @@
     #root
     class="mx-auto w-fit bg-blue-600 text-white px-7 py-3 rounded-md font-semibold text-center"
     >
-    {{ data.label }}
+    {{ data().label }}
   </div>
 
   <!-- CHILDREN -->
   <div class="mt-16 flex justify-center gap-16">
-    @for (child of data.children; track child) {
+    @for (child of data().children; track child) {
       <div
         #child
         class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"

package/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/types/foxeltech-angular-ui-chart.d.ts

@@ -0,0 +1,53 @@
+import * as _angular_core from '@angular/core';
+import { OnChanges, AfterViewInit, OnDestroy, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { EChartsOption, ECharts } from 'echarts';
+
+type IChartType = 'bar' | 'pie' | 'sunburst' | 'auto';
+declare class ChartComponent implements OnChanges, AfterViewInit, OnDestroy {
+    private ref;
+    private cdr;
+    readonly type: _angular_core.InputSignal<IChartType>;
+    readonly data: _angular_core.InputSignal<any>;
+    readonly options: _angular_core.InputSignal<EChartsOption | undefined>;
+    readonly palette: _angular_core.InputSignal<string[] | undefined>;
+    readonly height: _angular_core.InputSignal<string>;
+    readonly loading: _angular_core.InputSignal<boolean>;
+    readonly pieLegendAlign: _angular_core.InputSignal<string | number>;
+    readonly pieLegendPosition: _angular_core.InputSignal<string | number>;
+    readonly showPieLabel: _angular_core.InputSignal<boolean>;
+    readonly mobileWidth: _angular_core.InputSignal<number>;
+    readonly labelFontFamily: _angular_core.InputSignal<string>;
+    readonly emptyText: _angular_core.InputSignal<string>;
+    readonly chartClick: _angular_core.OutputEmitterRef<any>;
+    readonly chartInit: _angular_core.OutputEmitterRef<ECharts>;
+    chartOptions: EChartsOption;
+    isEmpty: boolean;
+    labelFontSize: number;
+    private chartInstance?;
+    private resizeObserver?;
+    private intersectionObserver?;
+    private canInit;
+    private isMobile;
+    private containerWidth;
+    constructor(ref: ElementRef<HTMLElement>, cdr: ChangeDetectorRef);
+    ngAfterViewInit(): void;
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    onThemeChange(): void;
+    onChartClick(event: any): void;
+    onChartInit(chart: any): void;
+    private updateResponsiveState;
+    private forceMediaRecalc;
+    private rebuildChart;
+    private checkEmpty;
+    private registry;
+    private calcPieLayout;
+    private detectType;
+    private buildOptions;
+    private resolvePalette;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChartComponent, "fx-ui-chart", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "palette": { "alias": "palette"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "pieLegendAlign": { "alias": "pieLegendAlign"; "required": false; "isSignal": true; }; "pieLegendPosition": { "alias": "pieLegendPosition"; "required": false; "isSignal": true; }; "showPieLabel": { "alias": "showPieLabel"; "required": false; "isSignal": true; }; "mobileWidth": { "alias": "mobileWidth"; "required": false; "isSignal": true; }; "labelFontFamily": { "alias": "labelFontFamily"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; }, { "chartClick": "chartClick"; "chartInit": "chartInit"; }, never, never, true, never>;
+}
+
+export { ChartComponent };
+export type { IChartType };

package/types/foxeltech-angular-ui-flow.d.ts

@@ -0,0 +1,14 @@
+import * as _angular_core from '@angular/core';
+import { Node, Edge, Connection } from 'ngx-vflow';
+
+declare class FlowConnection {
+    readonly nodes: _angular_core.InputSignal<Node[]>;
+    edges: Edge[];
+    readonly backgroundColor: _angular_core.InputSignal<any>;
+    readonly view: _angular_core.InputSignal<any>;
+    handleConnection(connection: Connection): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlowConnection, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlowConnection, "fx-ui-flow-connection", never, { "nodes": { "alias": "nodes"; "required": false; "isSignal": true; }; "edges": { "alias": "edges"; "required": false; }; "backgroundColor": { "alias": "backgroundColor"; "required": false; "isSignal": true; }; "view": { "alias": "view"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { FlowConnection };

package/types/foxeltech-angular-ui-rich-text.d.ts

@@ -0,0 +1,35 @@
+import * as _angular_core from '@angular/core';
+import { AfterViewInit, ElementRef } from '@angular/core';
+import { FxComponent } from '@foxeltech/angular-ui';
+
+declare class QuillStyleLoaderService {
+    private platformId;
+    private loaded;
+    private loadingPromise;
+    constructor(platformId: object);
+    /**
+     * Load Quill CSS (only in browser). Returns a promise that resolves when
+     * the CSS links have been appended.
+     */
+    load(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuillStyleLoaderService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<QuillStyleLoaderService>;
+}
+
+declare class RichTextAreaComponent extends FxComponent<any> implements AfterViewInit {
+    private styleLoader;
+    private platformId;
+    readonly editorContainer: _angular_core.Signal<ElementRef<HTMLDivElement>>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly toolbarOptions: _angular_core.InputSignal<any>;
+    readonly contentChange: _angular_core.OutputEmitterRef<string>;
+    private quillInstance;
+    constructor(styleLoader: QuillStyleLoaderService, platformId: object);
+    ngAfterViewInit(): Promise<void>;
+    writeValue(value: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RichTextAreaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RichTextAreaComponent, "fx-ui-rich-text-area", never, { "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toolbarOptions": { "alias": "toolbarOptions"; "required": false; "isSignal": true; }; }, { "contentChange": "contentChange"; }, never, never, true, never>;
+}
+
+export { QuillStyleLoaderService, RichTextAreaComponent };