@foxeltech/angular-ui 0.3.0 → 0.4.0

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

@@ -9,7 +9,7 @@
     [style.pointerEvents]="canScrollLeft ? 'auto' : 'none'"
     [attr.tabindex]="canScrollLeft ? null : -1"
     [attr.aria-hidden]="!canScrollLeft"
-  >
+    >
     <svg
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
@@ -17,7 +17,7 @@
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
-    >
+      >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
     </svg>
   </button>
@@ -27,38 +27,39 @@
     role="tablist"
     class="relative flex overflow-x-auto no-scrollbar scroll-smooth"
     (scroll)="onScroll()"
-  >
-    <button
-      *ngFor="let tab of tabs.toArray(); let i = index"
-      type="button"
-      role="tab"
-      [attr.aria-selected]="i === activeIndex"
-      [tabindex]="i === activeIndex ? 0 : -1"
-      (click)="selectTab(i)"
-      (keydown)="onTabKeydown($event, i)"
-      class="tab-btn tab-bar-btn"
     >
-      <div class="flex flex-row items-center justify-center">
-        @if (tab.icon) {
-          <fx-ui-hero-icon
-            [icon]="tab.icon"
-            [size]="20"
-            class="flex mr-[2px]"
+    @for (tab of tabs(); track tab; let i = $index) {
+      <button
+        type="button"
+        role="tab"
+        [attr.aria-selected]="i === activeIndex"
+        [tabindex]="i === activeIndex ? 0 : -1"
+        (click)="selectTab(i)"
+        (keydown)="onTabKeydown($event, i)"
+        class="tab-btn tab-bar-btn"
+        >
+        <div class="flex flex-row items-center justify-center">
+          @if (tab.icon) {
+            <fx-ui-hero-icon
+              [icon]="tab.icon"
+              [size]="20"
+              class="flex mr-[2px]"
             [ngClass]="{
               'text-gradient-primary-start mb-small': i === activeIndex,
               'text-text-placeholder': i !== activeIndex,
             }"
-          ></fx-ui-hero-icon>
-        }
-        <div
+            ></fx-ui-hero-icon>
+          }
+          <div
           [ngClass]="
             i === activeIndex ? 'txt-field-label text-gradient-primary-start' : 'txt-placeholder'
           "
-        >
-          {{ tab.label }}
+            >
+            {{ tab.label() }}
+          </div>
         </div>
-      </div>
-    </button>
+      </button>
+    }
 
     <span #underline class="underline" style="width: 0; transform: translateX(0)"></span>
   </div>
@@ -72,7 +73,7 @@
     [style.pointerEvents]="canScrollRight ? 'auto' : 'none'"
     [attr.tabindex]="canScrollRight ? null : -1"
     [attr.aria-hidden]="!canScrollRight"
-  >
+    >
     <svg
       aria-hidden="true"
       xmlns="http://www.w3.org/2000/svg"
@@ -80,7 +81,7 @@
       fill="none"
       viewBox="0 0 24 24"
       stroke="currentColor"
-    >
+      >
       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
     </svg>
   </button>
@@ -88,9 +89,11 @@
 
 <!-- Tab content -->
 <div class="transition-all duration-300 ease-in-out mt-4">
-  <ng-container *ngFor="let tab of tabs.toArray(); let i = index">
-    <div *ngIf="i === activeIndex" role="tabpanel" class="animate-fadeIn">
-      <ng-container *ngTemplateOutlet="tab.content"></ng-container>
-    </div>
-  </ng-container>
+  @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>
+      </div>
+    }
+  }
 </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,49 +1,51 @@
 <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') {
-    <fx-ui-hero-icon
-      icon="check-circle"
-      [solid]="true"
-      [size]="30"
-      class="text-success"
-    ></fx-ui-hero-icon>
-    } @case('error') {
-    <fx-ui-hero-icon
-      icon="exclamation-circle"
-      [solid]="true"
-      [size]="30"
-      class="text-critical"
-    ></fx-ui-hero-icon>
-    } @case('warning') {
-    <fx-ui-hero-icon
-      icon="exclamation-triangle"
-      [solid]="true"
-      [size]="30"
-      class="text-warning"
-    ></fx-ui-hero-icon>
-    } @default {
-    <fx-ui-hero-icon
-      icon="information-circle"
-      [solid]="true"
-      [size]="30"
-      class="text-information"
-    ></fx-ui-hero-icon>
-    } }
-  </div>
+    @switch (type()) { @case('success') {
+      <fx-ui-hero-icon
+        icon="check-circle"
+        [solid]="true"
+        [size]="30"
+        class="text-success"
+      ></fx-ui-hero-icon>
+      } @case('error') {
+      <fx-ui-hero-icon
+        icon="exclamation-circle"
+        [solid]="true"
+        [size]="30"
+        class="text-critical"
+      ></fx-ui-hero-icon>
+      } @case('warning') {
+      <fx-ui-hero-icon
+        icon="exclamation-triangle"
+        [solid]="true"
+        [size]="30"
+        class="text-warning"
+      ></fx-ui-hero-icon>
+      } @default {
+      <fx-ui-hero-icon
+        icon="information-circle"
+        [solid]="true"
+        [size]="30"
+        class="text-information"
+      ></fx-ui-hero-icon>
+      } }
+    </div>
 
-  <div class="flex flex-col">
-    <strong *ngIf="title" class="txt-field-label">{{ title }}</strong>
-    <p class="txt-default">{{ message }}</p>
+    <div class="flex flex-col">
+      @if (title) {
+        <strong class="txt-field-label">{{ title }}</strong>
+      }
+      <p class="txt-default">{{ message() }}</p>
+    </div>
   </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

@@ -4,20 +4,21 @@
   <div
     #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">
-    <div
-      *ngFor="let child of data.children"
-      #child
-      class="w-48 bg-rose-600 text-white px-4 py-4 rounded-lg text-center"
-    >
-      <div class="font-semibold text-lg">{{ child.label }}</div>
-      <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
-    </div>
+    @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"
+        >
+        <div class="font-semibold text-lg">{{ child.label }}</div>
+        <div class="mt-1 text-sm opacity-90">{{ child.status }}</div>
+      </div>
+    }
   </div>
 
   <!-- SVG CONNECTORS -->
@@ -25,16 +26,17 @@
     class="absolute inset-0 pointer-events-none"
     [attr.width]="svgWidth"
     [attr.height]="svgHeight"
-  >
-    <line
-      *ngFor="let line of lines"
-      [attr.x1]="line.x1"
-      [attr.y1]="line.y1"
-      [attr.x2]="line.x2"
-      [attr.y2]="line.y2"
-      stroke="#1f2937"
-      stroke-width="2"
-    />
+    >
+    @for (line of lines; track line) {
+      <line
+        [attr.x1]="line.x1"
+        [attr.y1]="line.y1"
+        [attr.x2]="line.x2"
+        [attr.y2]="line.y2"
+        stroke="#1f2937"
+        stroke-width="2"
+        />
+    }
   </svg>
 
 </div>

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 };