@fxlt/common-ui 0.0.1 → 0.0.3-rc1

package/index.d.ts

@@ -1,37 +1,37 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, Injector, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, ModuleWithProviders, TemplateRef, ViewContainerRef, AfterContentInit, QueryList, ElementRef, Renderer2, OnChanges } from '@angular/core';
-import * as i31 from '@angular/material/paginator';
+import { OnDestroy, Injector, ApplicationRef, OnInit, AfterViewInit, ChangeDetectorRef, Type, EventEmitter, ModuleWithProviders, TemplateRef, ViewContainerRef, ElementRef, AfterContentInit, QueryList, Renderer2, OnChanges } from '@angular/core';
+import * as i34 from '@angular/material/paginator';
 import { MatPaginator } from '@angular/material/paginator';
-import * as i32 from '@angular/material/table';
+import * as i35 from '@angular/material/table';
 import { MatTableDataSource, MatTable } from '@angular/material/table';
 import { HttpClient, HttpErrorResponse, HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
-import * as i22 from '@angular/forms';
-import { NgForm, ControlValueAccessor, NgControl, ValidationErrors } from '@angular/forms';
-import * as i34 from '@angular/material/dialog';
+import * as rxjs from 'rxjs';
+import { Subject, Observable } from 'rxjs';
+import * as i24 from '@angular/forms';
+import { NgForm, NgControl, ControlValueAccessor, ValidationErrors } from '@angular/forms';
+import * as i37 from '@angular/material/dialog';
 import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1 from '@ngx-translate/core';
 import { TranslateService } from '@ngx-translate/core';
-import * as rxjs from 'rxjs';
-import { Subject, Observable } from 'rxjs';
 import { CanActivate, Router } from '@angular/router';
 import { EChartsOption } from 'echarts';
-import * as i21 from '@angular/common';
-import * as i23 from '@danielmoncada/angular-datetime-picker';
-import * as i25 from '@dimaslz/ng-heroicons';
-import * as i26 from 'ngx-echarts';
-import * as i27 from '@angular/material/select';
-import * as i28 from '@angular/material/radio';
-import * as i29 from '@angular/material/button';
-import * as i30 from '@angular/material/icon';
-import * as i33 from '@angular/material/snack-bar';
-import * as i35 from '@angular/material/checkbox';
-import * as i36 from '@angular/material/card';
-import * as i37 from '@angular/material/datepicker';
-import * as i38 from '@angular/material/timepicker';
-import * as i39 from '@angular/material/badge';
-import * as i40 from '@angular/material/expansion';
-import * as i41 from '@angular/material/form-field';
+import * as i23 from '@angular/common';
+import * as i25 from '@danielmoncada/angular-datetime-picker';
+import * as i28 from '@dimaslz/ng-heroicons';
+import * as i29 from 'ngx-echarts';
+import * as i30 from '@angular/material/select';
+import * as i31 from '@angular/material/radio';
+import * as i32 from '@angular/material/button';
+import * as i33 from '@angular/material/icon';
+import * as i36 from '@angular/material/snack-bar';
+import * as i38 from '@angular/material/checkbox';
+import * as i39 from '@angular/material/card';
+import * as i40 from '@angular/material/datepicker';
+import * as i41 from '@angular/material/timepicker';
+import * as i42 from '@angular/material/badge';
+import * as i43 from '@angular/material/expansion';
+import * as i44 from '@angular/material/form-field';
 
 declare abstract class BaseComponent implements OnDestroy {
     protected injector: Injector;
@@ -105,6 +105,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     expandedElement: any | null;
     toastr: FxToastrService;
     _lock: boolean;
+    keywordChange$: Subject<string>;
     config: {
         create?: {
             dialog?: Type<{}>;
@@ -134,6 +135,9 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
             cancelTitle?: string;
             confirmTitle?: string;
         };
+        updateStatus?: {
+            message?: string;
+        };
     };
     paginator: MatPaginator;
     table: MatTable<T>;
@@ -147,6 +151,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     onPageChange(event: any): Promise<void>;
     resolve(): {};
     empty(): {};
+    onKeywordChange(keyword: string): void;
     create(): Promise<void>;
     update(model: any): Promise<void>;
     view(model: any): Promise<void>;
@@ -154,6 +159,7 @@ declare class BaseTableComponent<T = any> extends BaseComponent implements OnIni
     remove(model: any): Promise<any>;
     value(model: any, key: string): any;
     toggleExpand(element: any): void;
+    updateStatus(params: any): Promise<void>;
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseTableComponent<any>, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<BaseTableComponent<any>, never, never, {}, {}, never, never, true, never>;
 }
@@ -165,6 +171,7 @@ declare class BaseDialogComponent<T = any> extends BaseComponent implements Afte
     api: HttpWrapper;
     dialog: MatDialog;
     ngForm: NgForm;
+    method: string;
     title: string;
     model: any;
     disabled: boolean;
@@ -179,7 +186,6 @@ declare class BaseDialogComponent<T = any> extends BaseComponent implements Afte
     accept(form: NgForm, params?: null): void;
     create(params?: any): void;
     update(params?: any): void;
-    updateData(params?: any): void;
     updateInfo(params?: any): void;
     cancel(): void;
     validate(): boolean;
@@ -225,6 +231,7 @@ declare class FxUtils {
     static convertColorFromVariable(name: string, alpha?: number): string;
     static getTagClass(key: string, isCriticalExist?: boolean): TagType;
     static validateEmail(value: string): boolean;
+    static isStrongPassword(password: string): boolean;
 }
 
 declare function HttpLoaderFactory(http: HttpClient): TranslateHttpLoader;
@@ -270,6 +277,16 @@ declare class HasPermissionDirective {
     static ɵdir: i0.ɵɵDirectiveDeclaration<HasPermissionDirective, "[hasPermission]", never, { "hasPermission": { "alias": "hasPermission"; "required": false; }; }, {}, never, never, true, never>;
 }
 
+declare class TrimOnBlurDirective {
+    private el;
+    private ngControl;
+    collapseWhitespace: boolean;
+    constructor(el: ElementRef<HTMLInputElement>, ngControl: NgControl);
+    onBlur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TrimOnBlurDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TrimOnBlurDirective, "[appTrimOnBlur]", never, { "collapseWhitespace": { "alias": "appTrimOnBlurCollapse"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class PermissionGuard implements CanActivate {
     private permissionService;
     private router;
@@ -288,7 +305,7 @@ declare class FxStorageService {
 
 declare class AuthStateService {
     private _isLoggedIn$;
-    readonly isLoggedIn$: rxjs.Observable<boolean>;
+    readonly isLoggedIn$: rxjs.Observable<boolean | null>;
     readonly unauthorized$: Subject<void>;
     constructor();
     setLoggedIn(value: boolean): void;
@@ -319,6 +336,20 @@ declare class BreadcrumbService {
     static ɵprov: i0.ɵɵInjectableDeclaration<BreadcrumbService>;
 }
 
+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: i0.ɵɵFactoryDeclaration<QuillStyleLoaderService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<QuillStyleLoaderService>;
+}
+
 type ErrorMessages = {
     [key: string]: any;
 };
@@ -378,7 +409,7 @@ declare class InputComponent extends FxComponent<string> implements AfterViewIni
     static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "fx-ui-input", never, { "label": { "alias": "label"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "iconClass": { "alias": "iconClass"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "class": { "alias": "class"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "validateFn": { "alias": "validateFn"; "required": false; }; }, { "blurred": "blurred"; "focused": "focused"; "suffixClick": "suffixClick"; }, never, never, false, never>;
 }
 
-declare class SelectComponent extends FxComponent<string | string[]> implements AfterViewInit {
+declare class SelectComponent extends FxComponent<string | string[]> implements AfterViewInit, OnInit {
     private ref;
     label: string;
     placeholder: string;
@@ -393,12 +424,27 @@ declare class SelectComponent extends FxComponent<string | string[]> implements
     };
     required: boolean;
     class?: any;
+    enableSearch: boolean;
+    searchFn?: (query: string) => Promise<{
+        label: string;
+        value: string;
+    }[]>;
+    searchTerm: string;
+    filteredOptions: {
+        label: string;
+        value: string;
+    }[];
+    private search$;
     constructor(ngControl: NgControl, ref: ChangeDetectorRef);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
+    onOpened(open: boolean): void;
+    onSearchChange(value: string): void;
+    performSearch(term: string): Promise<void>;
     onSelectionChange(value: any): void;
     isSelected(value: string): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "fx-ui-select", never, { "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "options": { "alias": "options"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "errorMessages": { "alias": "errorMessages"; "required": false; }; "required": { "alias": "required"; "required": false; }; "class": { "alias": "class"; "required": false; }; "enableSearch": { "alias": "enableSearch"; "required": false; }; "searchFn": { "alias": "searchFn"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 interface IRadioButton {
@@ -431,7 +477,6 @@ declare class CheckboxComponent extends FxComponent<any> implements AfterViewIni
     label: string;
     disabled: boolean;
     rounded: boolean;
-    size: 'normal' | 'large';
     valueChange: EventEmitter<boolean>;
     constructor(ngControl: NgControl, ref: ChangeDetectorRef);
     ngAfterViewInit(): void;
@@ -439,7 +484,7 @@ declare class CheckboxComponent extends FxComponent<any> implements AfterViewIni
     onInputChange(event: Event): void;
     markTouched(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "fx-ui-checkbox", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "fx-ui-checkbox", never, { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, false, never>;
 }
 
 type UploadResult = {
@@ -707,17 +752,43 @@ declare class SwitchComponent extends FxComponent<any> implements AfterViewInit
     static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "fx-ui-switch", never, { "disabled": { "alias": "disabled"; "required": false; }; }, { "onSwitch": "onSwitch"; }, never, never, false, never>;
 }
 
+declare class RichTextAreaComponent extends FxComponent<any> implements AfterViewInit {
+    private cdr;
+    private styleLoader;
+    private platformId;
+    editorContainer: ElementRef<HTMLDivElement>;
+    placeholder: string;
+    toolbarOptions: any;
+    contentChange: EventEmitter<string>;
+    private quillInstance;
+    constructor(ngControl: NgControl, cdr: ChangeDetectorRef, styleLoader: QuillStyleLoaderService, platformId: Object);
+    ngAfterViewInit(): Promise<void>;
+    writeValue(value: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RichTextAreaComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RichTextAreaComponent, "fx-ui-rich-text-area", never, { "placeholder": { "alias": "placeholder"; "required": false; }; "toolbarOptions": { "alias": "toolbarOptions"; "required": false; }; }, { "contentChange": "contentChange"; }, never, never, false, never>;
+}
+
+declare class SkeletonTableLoadingComponent {
+    columns: number;
+    rows: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonTableLoadingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonTableLoadingComponent, "fx-ui-skeleton-table-loading", never, { "columns": { "alias": "columns"; "required": false; }; "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, false, never>;
+}
+
 declare class ConfirmationDialogComponent {
     private ref;
+    bindings: any;
+    loading: boolean;
     title: string;
     message: string;
     cancelLabel: string;
     confirmLabel: string;
     constructor(ref: MatDialogRef<ConfirmationDialogComponent>, bindings: any);
-    accept(): void;
+    accept(): Promise<void>;
     cancel(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ConfirmationDialogComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmationDialogComponent, "ui-confirmation", never, {}, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfirmationDialogComponent, "fx-ui-confirmation-dialog", never, {}, {}, never, never, false, never>;
 }
 
 declare const MY_FORMATS: {
@@ -731,9 +802,9 @@ declare const MY_FORMATS: {
 };
 declare class UiModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<UiModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof ConfirmationDialogComponent], [typeof i21.CommonModule, typeof i22.FormsModule, typeof i22.ReactiveFormsModule, typeof i23.OwlDateTimeModule, typeof i23.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i25.NgHeroiconsModule, typeof i26.NgxEchartsModule, typeof i27.MatSelectModule, typeof i28.MatRadioModule, typeof i29.MatButtonModule, typeof i30.MatIconModule, typeof i31.MatPaginatorModule, typeof i32.MatTableModule, typeof i33.MatSnackBarModule, typeof i34.MatDialogModule, typeof i35.MatCheckboxModule, typeof i36.MatCardModule, typeof i37.MatDatepickerModule, typeof i38.MatTimepickerModule, typeof i39.MatBadgeModule, typeof i40.MatExpansionModule, typeof i41.MatFormFieldModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof ConfirmationDialogComponent, typeof i22.FormsModule, typeof i22.ReactiveFormsModule, typeof i23.OwlDateTimeModule, typeof i23.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i25.NgHeroiconsModule, typeof i27.MatSelectModule, typeof i28.MatRadioModule, typeof i29.MatButtonModule, typeof i30.MatIconModule, typeof i31.MatPaginatorModule, typeof i32.MatTableModule, typeof i33.MatSnackBarModule, typeof i34.MatDialogModule, typeof i35.MatCheckboxModule, typeof i36.MatCardModule, typeof i37.MatDatepickerModule, typeof i38.MatTimepickerModule, typeof i39.MatBadgeModule, typeof i40.MatExpansionModule, typeof i41.MatFormFieldModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<UiModule, [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof ConfirmationDialogComponent], [typeof i23.CommonModule, typeof i24.FormsModule, typeof i24.ReactiveFormsModule, typeof i25.OwlDateTimeModule, typeof i25.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof TrimOnBlurDirective, typeof i28.NgHeroiconsModule, typeof i29.NgxEchartsModule, typeof i30.MatSelectModule, typeof i31.MatRadioModule, typeof i32.MatButtonModule, typeof i33.MatIconModule, typeof i34.MatPaginatorModule, typeof i35.MatTableModule, typeof i36.MatSnackBarModule, typeof i37.MatDialogModule, typeof i38.MatCheckboxModule, typeof i39.MatCardModule, typeof i40.MatDatepickerModule, typeof i41.MatTimepickerModule, typeof i42.MatBadgeModule, typeof i43.MatExpansionModule, typeof i44.MatFormFieldModule], [typeof InputComponent, typeof SelectComponent, typeof RadioButtonComponent, typeof CheckboxComponent, typeof DndUploadComponent, typeof ButtonComponent, typeof RadioButtonToggleComponent, typeof DatetimePicker, typeof LoadingPanel, typeof SearchBarComponent, typeof TabGroupComponent, typeof TabComponent, typeof HeroIconComponent, typeof ToastComponent, typeof ToastContainerComponent, typeof TagComponent, typeof ChartComponent, typeof SliderComponent, typeof SwitchComponent, typeof RichTextAreaComponent, typeof SkeletonTableLoadingComponent, typeof ConfirmationDialogComponent, typeof i24.FormsModule, typeof i24.ReactiveFormsModule, typeof i25.OwlDateTimeModule, typeof i25.OwlNativeDateTimeModule, typeof HasPermissionDirective, typeof i28.NgHeroiconsModule, typeof i30.MatSelectModule, typeof i31.MatRadioModule, typeof i32.MatButtonModule, typeof i33.MatIconModule, typeof i34.MatPaginatorModule, typeof i35.MatTableModule, typeof i36.MatSnackBarModule, typeof i37.MatDialogModule, typeof i38.MatCheckboxModule, typeof i39.MatCardModule, typeof i40.MatDatepickerModule, typeof i41.MatTimepickerModule, typeof i42.MatBadgeModule, typeof i43.MatExpansionModule, typeof i44.MatFormFieldModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<UiModule>;
 }
 
-export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_FORMATS, PermissionGuard, PermissionService, RadioButtonComponent, RadioButtonToggleComponent, SearchBarComponent, SelectComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, UiModule };
+export { AuthInterceptor, AuthStateService, BaseComponent, BaseDialogComponent, BaseResolver, BaseTableComponent, BreadcrumbService, ButtonComponent, ChartComponent, CheckboxComponent, ConfirmationDialogComponent, DatetimePicker, DndUploadComponent, FxLoadingService, FxStorageService, FxToastrService, FxUtils, HasPermissionDirective, HeroIconComponent, HttpLoaderFactory, HttpWrapper, InputComponent, LoadingPanel, MY_FORMATS, PermissionGuard, PermissionService, QuillStyleLoaderService, RadioButtonComponent, RadioButtonToggleComponent, RichTextAreaComponent, SearchBarComponent, SelectComponent, SkeletonTableLoadingComponent, SliderComponent, SwitchComponent, TabComponent, TabGroupComponent, TagComponent, ToastComponent, ToastContainerComponent, TranslationModule, TranslationService, TrimOnBlurDirective, UiModule };
 export type { Breadcrumb, IChartType, IRadioButton, TableResult, TagType, ToastData, UploadResult };

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@fxlt/common-ui",
-  "version": "0.0.1",
+  "version": "0.0.3rc1",
+  "license": "MIT",
   "main": "bundles/ui.umd.js",
   "module": "fesm2022/fxlt-common-ui.mjs",
   "es2020": "fesm2020/ui.mjs",
@@ -29,7 +30,8 @@
     "echarts": "^6.0.0",
     "ngx-echarts": "^20.0.2",
     "d3": "^7.9.0",
-    "@dimaslz/ng-heroicons": "^1.19.1"
+    "@dimaslz/ng-heroicons": "^1.19.1",
+    "quill": "^2.0.3"
   },
   "exports": {
     "./SpaceMono-Regular.ttf": "./SpaceMono-Regular.ttf",

package/src/lib/styles/components.css

@@ -122,7 +122,7 @@
   box-shadow: 0 2px 4px rgb(var(--shadow-color) / 0.1) !important;
 }
 
-.mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow { 
+.mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
   color: rgb(var(--text-primary)) !important;
 }
 
@@ -142,7 +142,10 @@
   background-color: rgb(var(--bg-primary)) !important;
   border-radius: 8px !important;
 }
-
+.mat-mdc-dialog-container .mat-mdc-dialog-content {
+  letter-spacing: 0 !important;
+  padding: 10px 20px !important;
+}
 
 input[type='number']::-webkit-outer-spin-button,
 input[type='number']::-webkit-inner-spin-button {
@@ -187,6 +190,9 @@ input[type='password'] {
 .txt-section-header {
   @apply mb-1 text-xl text-text-primary font-semibold tracking-normal leading-7;
 }
+.txt-dialog-header {
+  @apply text-xl text-text-primary font-semibold tracking-normal leading-7 px-xl py-semi;
+}
 .txt-section-subtitle {
   @apply text-sm text-text-secondary font-normal tracking-normal;
 }
@@ -330,7 +336,7 @@ input[type='password'] {
   @apply rounded px-semi py-small;
 }
 .tag-round {
-  @apply rounded-2xl
+  @apply rounded-2xl;
 }
 /* progress bar */
 .progress-bar-container {
@@ -381,3 +387,12 @@ input[type='password'] {
   padding-top: 16px !important;
   padding-bottom: 16px !important;
 }
+.table-action-col {
+  width: 40px;
+}
+.table-status-col {
+  width: 200px;
+}
+.dialog-container {
+  @apply rounded-lg border border-border-default;
+}

package/src/lib/styles/dialogs.css

@@ -2,71 +2,25 @@
   max-width: unset !important;
   border-radius: 8px !important;
   .mat-dialog-actions {
-      border-top: 1px solid rgb(var(--border-default)) !important;
-      margin-left: -24px;
-      margin-right: -24px;
-      padding: 12px 24px 10px 10px;
+    border-top: 1px solid rgb(var(--border-default)) !important;
+    margin-left: -24px;
+    margin-right: -24px;
+    padding: 12px 24px 10px 10px;
   }
 
   .mat-dialog-title {
-      margin-left: -24px;
-      margin-right: -24px;
-      padding-right: 24px;
-      padding-left: 24px;
-      border-bottom: 1px solid rgb(var(--border-default));
-      padding-bottom: 20px;
-  }
-  
-  .mat-dialog-content {
-      min-height: 110px;
-      letter-spacing: 0 !important;
-  }
-}
-
-.fx-dialog3 {
-  .mat-dialog-actions {
-      border-top: 1px solid rgb(var(--border-default));
-      margin-left: -24px;
-      margin-right: -24px;
-      padding: 12px 24px 10px 10px;
+    margin-left: -24px;
+    margin-right: -24px;
+    padding-right: 24px;
+    padding-left: 24px;
+    border-bottom: 1px solid rgb(var(--border-default));
+    padding-bottom: 20px;
+    letter-spacing: 0 !important;
   }
 
-  .mat-dialog-title {
-      margin-left: -24px;
-      margin-right: -24px;
-      padding-right: 24px;
-      padding-left: 24px;
-      border-bottom: 1px solid rgb(var(--border-default));
-      padding-bottom: 20px;
-  }
-  
   .mat-dialog-content {
-      min-height: 50px;
-      overflow: visible;
-      letter-spacing: 0 !important;
-  }
-}
-
-.fx-dialog4 {
-  max-width: unset !important;
-  .mat-dialog-actions {
-      border-top: 1px solid rgb(var(--border-default));
-      margin-left: -24px;
-      margin-right: -24px;
-      padding: 12px 24px 10px 10px;
-  }
-
-  .mat-dialog-title {
-      margin-left: -24px;
-      margin-right: -24px;
-      padding-right: 24px;
-      padding-left: 24px;
-      border-bottom: 1px solid rgb(var(--border-default));
-      padding-bottom: 20px;
-  }
-  
-  .mat-dialog-content {
-      min-height: 50px;
+    min-height: 110px;
+    letter-spacing: 0 !important;
   }
 }
 
@@ -75,42 +29,42 @@
   height: 100%;
 
   mat-dialog-container {
-      padding: 0;
+    padding: 0;
 
-      form.wrapped-form {
-          display: flex;
-          flex-direction: column;
-          height: 100%;
-          justify-content: space-between;
-      }
+    form.wrapped-form {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      justify-content: space-between;
+    }
 
-      .mat-dialog-title {
-          background-color: rgb(var(--bg-primary));
-          box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
-          color: rgb(var(--text-primary));
-          padding: 12px 20px;
-          min-height: 24px;            
+    .mat-dialog-title {
+      background-color: rgb(var(--bg-primary));
+      box-shadow: 0px 4px 8px rgba(26, 28, 38, 0.15);
+      color: rgb(var(--text-primary));
+      padding: 12px 20px;
+      min-height: 24px;
 
-          h2 {
-              font-weight: 500;
-              font-size: 18px;
-              line-height: 24px;
-          }
+      h2 {
+        font-weight: 500;
+        font-size: 18px;
+        line-height: 24px;
       }
+    }
 
-      .mat-dialog-content {
-          background: rgb(var(--bg-primary));
-          padding: 16px 20px;
-          margin: unset;
-          height: 100%;
-          max-height: unset;
-          letter-spacing: 0 !important;
-      }
+    .mat-dialog-content {
+      background: rgb(var(--bg-primary));
+      padding: 16px 20px;
+      margin: unset;
+      height: 100%;
+      max-height: unset;
+      letter-spacing: 0 !important;
+    }
 
-      .mat-dialog-actions {
-          background-color: rgb(var(--bg-primary));
-          padding: 12px 20px;
-          margin-bottom: unset;
-      }
+    .mat-dialog-actions {
+      background-color: rgb(var(--bg-primary));
+      padding: 12px 20px;
+      margin-bottom: unset;
+    }
   }
-}
+}

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

@@ -216,7 +216,7 @@
         'text-text-inverse': buttonVariant !== 'default',
         'text-text-primary': buttonVariant === 'alternative'
       }"></fx-ui-hero-icon>}
-      <div>{{ label }}</div>
+      @if(label){<div>{{ label }}</div>}
     </div>
   </ng-container>
   }

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

@@ -1,5 +1,5 @@
 <label
-  class="inline-flex items-center gap-normal cursor-pointer select-none"
+  class="flex items-center gap-normal cursor-pointer select-none"
   [class.opacity-50]="disabled"
   [class.cursor-not-allowed]="disabled"
 >
@@ -12,10 +12,10 @@
     (blur)="onTouched()"
   />
   <span
-    class="relative flex items-center justify-center border rounded-full transition-colors duration-150 shrink-0"
-    [class]="rounded ? 'rounded-full' : 'rounded-sm'"
-    [class]="size === 'large' ? 'w-6 h-6' : 'w-4 h-4'"
+    class="relative w-4 h-4 border rounded-full transition-colors duration-150 shrink-0"
     [ngClass]="{
+      'rounded-full': rounded,
+      'rounded-sm': !rounded,
       'border-border-strong bg-transparent': !value,
       'border-border-selected bg-border-selected': value
     }"
@@ -24,8 +24,7 @@
     <span class="absolute inset-0 flex items-center justify-center">
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="text-bg-primary transition-opacity duration-150"
-        [class]="size === 'large' ? 'w-4.5 h-4.5' : 'w-3 h-3'"
+        class="text-bg-primary w-4 h-4 transition-opacity duration-150"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -39,5 +38,5 @@
     </span>
   </span>
 
-  <span class="mb-0 txt-field-label">{{ label }}</span>
+  @if(label){<span class="mb-0 txt-field-label">{{ label }}</span>}
 </label>

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

@@ -7,6 +7,8 @@
 
   <div class="relative">
     <input
+      appTrimOnBlur
+      [appTrimOnBlurCollapse]="true"
       [type]="displayType"
       [placeholder]="placeholder"
       [disabled]="disabled"

package/src/lib/ui/components/rich-text-area/rich-text-area.component.html

@@ -0,0 +1,3 @@
+<div class="w-full rounded-2xl shadow-sm p-1 bg-bg-primary">
+  <div #editorContainer class="min-h-[200px] text-base"></div>
+</div>

package/src/lib/ui/components/select/select.component.css

@@ -77,4 +77,26 @@
   color: rgb(var(--text-primary)) !important;
   font-size: 14px;
   font-weight: 400;
+}
+
+.mat-select-panel .search-option-full-width {
+  /* Remove default padding to allow the input to stretch */
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  /* Ensure it is a block element to take up full width */
+  display: block; 
+  /* Prevent the option from being highlighted on hover/focus */
+  pointer-events: none;
+  /* Optional: Adjust height if needed */
+  line-height: initial;
+  height: auto;
+}
+
+.mat-select-panel .search-option-full-width .search-bar {
+  width: 100%;
+  padding: 8px 16px; /* Add visual padding back to the input */
+  border: none;
+  /* Optional: Add a subtle border to separate it from the options */
+  border-bottom: 1px solid #ddd; 
+  box-sizing: border-box; /* Include padding in the element's total width */
 }

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

@@ -11,9 +11,22 @@
       [multiple]="multiple"
       [value]="value"
       (selectionChange)="onSelectionChange($event.value)"
+      (openedChange)="onOpened($event)"
       (blur)="onTouched()"
     >
-      <mat-option *ngFor="let option of options" [value]="option.value">
+      @if(enableSearch){
+      <div class="px-semi w-full">
+        <input
+          type="text"
+          [placeholder]="'Search'"
+          [(ngModel)]="searchTerm"
+          (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-border-interactive 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>
     </mat-select>

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

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