coer-elements 1.0.18 → 1.1.2

package/README.md

@@ -1 +1,63 @@
-# COER Elements
+# CoerElements
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
+
+## Code scaffolding
+
+Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+
+```bash
+ng generate component component-name
+```
+
+For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+
+```bash
+ng generate --help
+```
+
+## Building
+
+To build the library, run:
+
+```bash
+ng build coer-elements
+```
+
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
+
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+   ```bash
+   cd dist/coer-elements
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/components/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="coer-elements/components" />
+export * from './public-api';

package/components/lib/coer-accordion/coer-accordion.component.d.ts

@@ -0,0 +1,32 @@
+import { AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class CoerAccordion implements AfterViewInit {
+    protected _id: string;
+    private _expansionPanel;
+    private _htmlElement;
+    protected _isDisabled: boolean;
+    id: string;
+    title: import("@angular/core").InputSignal<string>;
+    icon: import("@angular/core").InputSignal<string>;
+    expanded: import("@angular/core").InputSignal<boolean>;
+    scrollOnOpen: import("@angular/core").InputSignal<boolean>;
+    onOpen: import("@angular/core").OutputEmitterRef<void>;
+    onClose: import("@angular/core").OutputEmitterRef<void>;
+    protected IsNotOnlyWhiteSpace: (value: any) => boolean;
+    ngAfterViewInit(): void;
+    get isExpanded(): boolean;
+    get isCollapsed(): boolean;
+    get isDisabled(): boolean;
+    /** */
+    Open(): void;
+    /** */
+    Close(): void;
+    /** */
+    Enable(): void;
+    /** */
+    Disable(): void;
+    /** */
+    ScrollToAccordion(delay?: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerAccordion, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerAccordion, "coer-accordion", never, { "id": { "alias": "id"; "required": false; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; "scrollOnOpen": { "alias": "scrollOnOpen"; "required": false; "isSignal": true; }; }, { "onOpen": "onOpen"; "onClose": "onClose"; }, never, ["*"], false, never>;
+}

package/components/lib/coer-button/coer-button.component.d.ts

@@ -0,0 +1,46 @@
+import { OnDestroy, OnInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class CoerButton implements OnInit, OnDestroy {
+    protected _id: string;
+    private _element;
+    private _tooltip;
+    private _tooltipElement;
+    id: string;
+    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "dark">;
+    type: import("@angular/core").InputSignal<"filled" | "outline" | "icon" | "icon-outline" | "icon-no-border">;
+    icon: import("@angular/core").InputSignal<string>;
+    iconPosition: import("@angular/core").InputSignal<"left" | "right">;
+    path: import("@angular/core").InputSignal<string | (string | number)[]>;
+    animation: import("@angular/core").InputSignal<boolean>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isReadonly: import("@angular/core").InputSignal<boolean>;
+    isInvisible: import("@angular/core").InputSignal<boolean>;
+    width: import("@angular/core").InputSignal<string>;
+    minWidth: import("@angular/core").InputSignal<string>;
+    maxWidth: import("@angular/core").InputSignal<string>;
+    height: import("@angular/core").InputSignal<string>;
+    minHeight: import("@angular/core").InputSignal<string>;
+    marginTop: import("@angular/core").InputSignal<string>;
+    marginRight: import("@angular/core").InputSignal<string>;
+    marginBottom: import("@angular/core").InputSignal<string>;
+    marginLeft: import("@angular/core").InputSignal<string>;
+    tooltipPosition: import("@angular/core").InputSignal<"left" | "right" | "top" | "bottom">;
+    set tooltip(value: string);
+    onClick: import("@angular/core").OutputEmitterRef<void>;
+    protected _isEnable: import("@angular/core").Signal<boolean>;
+    protected _icon: import("@angular/core").Signal<string>;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /** */
+    private SetEvents;
+    private SetToolTip;
+    /** */
+    protected Click(): void;
+    /** */
+    Focus(timeout?: number): void;
+    /** */
+    Blur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerButton, "coer-button", never, { "id": { "alias": "id"; "required": false; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "path": { "alias": "path"; "required": false; "isSignal": true; }; "animation": { "alias": "animation"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; }; }, { "onClick": "onClick"; }, never, ["*"], false, never>;
+}

package/components/lib/coer-checkbox/coer-checkbox.component.d.ts

@@ -0,0 +1,29 @@
+import { AfterViewInit } from '@angular/core';
+import { ControlValue } from 'coer-elements/tools';
+import * as i0 from "@angular/core";
+export declare class CoerCheckbox extends ControlValue implements AfterViewInit {
+    _value: boolean;
+    protected _id: string;
+    private _isLoading;
+    set value(value: boolean | null | undefined);
+    id: import("@angular/core").InputSignal<string>;
+    label: import("@angular/core").InputSignal<string>;
+    labelPosition: import("@angular/core").InputSignal<"before" | "after">;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isReadonly: import("@angular/core").InputSignal<boolean>;
+    isInvisible: import("@angular/core").InputSignal<boolean>;
+    ignoreDataBinding: import("@angular/core").InputSignal<boolean>;
+    onChange: import("@angular/core").OutputEmitterRef<boolean>;
+    get value(): boolean | null | undefined;
+    protected _isEnable: import("@angular/core").Signal<boolean>;
+    ngAfterViewInit(): void;
+    SetValue(value: boolean): void;
+    writeValue(value: boolean): void;
+    /** */
+    Check(): void;
+    /** */
+    Uncheck(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerCheckbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerCheckbox, "coer-checkbox", never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "ignoreDataBinding": { "alias": "ignoreDataBinding"; "required": false; "isSignal": true; }; }, { "onChange": "onChange"; }, never, never, false, never>;
+}

package/components/lib/coer-datebox/coer-datebox.component.d.ts

@@ -0,0 +1,58 @@
+import { ElementRef, OnInit } from '@angular/core';
+import { ControlValue } from 'coer-elements/tools';
+import moment from 'moment';
+import * as i0 from "@angular/core";
+export declare class CoerDateBox extends ControlValue implements OnInit {
+    _value: string | Date | moment.Moment | null;
+    protected matFormField: import("@angular/core").Signal<ElementRef<any>>;
+    protected coerTextBox: import("@angular/core").Signal<ElementRef<any>>;
+    protected _id: string;
+    private _datepicker;
+    protected _isLoadingEvent: import("@angular/core").WritableSignal<boolean>;
+    protected _isOpen: boolean;
+    private _input;
+    private _container;
+    private _pickerButton;
+    set value(value: string | null | undefined);
+    id: string;
+    label: import("@angular/core").InputSignal<string>;
+    placeholder: import("@angular/core").InputSignal<string>;
+    textPosition: import("@angular/core").InputSignal<"left" | "right" | "center">;
+    isInvalid: import("@angular/core").InputSignal<boolean>;
+    isValid: import("@angular/core").InputSignal<boolean>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isReadonly: import("@angular/core").InputSignal<boolean>;
+    isInvisible: import("@angular/core").InputSignal<boolean>;
+    width: import("@angular/core").InputSignal<string>;
+    minWidth: import("@angular/core").InputSignal<string>;
+    maxWidth: import("@angular/core").InputSignal<string>;
+    marginTop: import("@angular/core").InputSignal<string>;
+    marginRight: import("@angular/core").InputSignal<string>;
+    marginBottom: import("@angular/core").InputSignal<string>;
+    marginLeft: import("@angular/core").InputSignal<string>;
+    onOpen: import("@angular/core").OutputEmitterRef<void>;
+    onClose: import("@angular/core").OutputEmitterRef<void>;
+    onChangeValue: import("@angular/core").OutputEmitterRef<string | null>;
+    ngOnInit(): void;
+    protected floatLabel: import("@angular/core").Signal<"auto" | "always">;
+    protected paddingRight: import("@angular/core").Signal<"0px" | "18px">;
+    protected _isEnable: import("@angular/core").Signal<boolean>;
+    get value(): string | null;
+    get isOpen(): boolean;
+    SetValue(value: string | Date | moment.Moment | null | undefined): void;
+    /** */
+    writeValue(value: any): void;
+    /** */
+    private SetEvents;
+    /** */
+    protected Blur(): Promise<void>;
+    /** */
+    Open(): void;
+    /** */
+    Close(): void;
+    /** */
+    Unselect(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerDateBox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerDateBox, "coer-datebox", never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "textPosition": { "alias": "textPosition"; "required": false; "isSignal": true; }; "isInvalid": { "alias": "isInvalid"; "required": false; "isSignal": true; }; "isValid": { "alias": "isValid"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onOpen": "onOpen"; "onClose": "onClose"; "onChangeValue": "onChangeValue"; }, never, never, false, never>;
+}

package/components/lib/coer-dropdown/coer-dropdown.component.d.ts

@@ -0,0 +1,69 @@
+import { ElementRef, OnInit } from '@angular/core';
+import { ControlValue } from 'coer-elements/tools';
+import * as i0 from "@angular/core";
+export declare class CoerDropdown<T> extends ControlValue implements OnInit {
+    protected _value: T | null;
+    protected _coerTextBox: import("@angular/core").Signal<ElementRef<any>>;
+    protected _id: string;
+    protected _index: import("@angular/core").WritableSignal<number>;
+    protected _isOpen: import("@angular/core").WritableSignal<boolean>;
+    protected _isOverMenu: import("@angular/core").WritableSignal<boolean>;
+    protected _dropDownMenu: HTMLElement;
+    protected _container: HTMLElement;
+    set value(value: T | null | undefined);
+    id: string;
+    label: import("@angular/core").InputSignal<string>;
+    color: import("@angular/core").InputSignal<"default" | "primary" | "secondary" | "success" | "warning" | "danger" | "navigation" | "dark">;
+    type: import("@angular/core").InputSignal<"filled" | "outline">;
+    dataSource: import("@angular/core").InputSignal<T[]>;
+    propDisplay: import("@angular/core").InputSignal<string>;
+    rowsByPage: import("@angular/core").InputSignal<number>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isReadonly: import("@angular/core").InputSignal<boolean>;
+    isInvisible: import("@angular/core").InputSignal<boolean>;
+    width: import("@angular/core").InputSignal<string>;
+    minWidth: import("@angular/core").InputSignal<string>;
+    maxWidth: import("@angular/core").InputSignal<string>;
+    marginTop: import("@angular/core").InputSignal<string>;
+    marginRight: import("@angular/core").InputSignal<string>;
+    marginBottom: import("@angular/core").InputSignal<string>;
+    marginLeft: import("@angular/core").InputSignal<string>;
+    tooltip: import("@angular/core").InputSignal<string>;
+    tooltipPosition: import("@angular/core").InputSignal<"left" | "right" | "top" | "bottom">;
+    onSelected: import("@angular/core").OutputEmitterRef<T>;
+    onUnselect: import("@angular/core").OutputEmitterRef<null>;
+    ngOnInit(): void;
+    get value(): T | null;
+    protected get _label(): string;
+    protected _isEnable: import("@angular/core").Signal<boolean>;
+    protected _dataSource: import("@angular/core").Signal<any[]>;
+    /** */
+    protected SetValue(_value: any): void;
+    /** */
+    writeValue(_value: any): void;
+    /** */
+    private SetEvents;
+    /** */
+    protected GetIndexRow: (item: any) => number;
+    /** */
+    protected GetIcon: (item: any) => string;
+    /** */
+    protected GetDisplay: (item: any) => string;
+    /** */
+    protected GetPath: (item: any) => string | (string | number)[] | null;
+    /** */
+    protected SelectItem(item: any): void;
+    /** */
+    Unselect(): void;
+    /** */
+    protected Toggle(): void;
+    /** */
+    Open(): void;
+    /** */
+    Close(): void;
+    /** */
+    SetValueBy(callback: (row: T) => boolean): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerDropdown<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerDropdown<any>, "coer-dropdown", never, { "value": { "alias": "value"; "required": false; }; "id": { "alias": "id"; "required": false; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "propDisplay": { "alias": "propDisplay"; "required": false; "isSignal": true; }; "rowsByPage": { "alias": "rowsByPage"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "minWidth": { "alias": "minWidth"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; "tooltip": { "alias": "tooltip"; "required": false; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, { "onSelected": "onSelected"; "onUnselect": "onUnselect"; }, never, never, false, never>;
+}

package/components/lib/coer-filebox/coer-filebox.component.d.ts

@@ -0,0 +1,36 @@
+import { ElementRef } from '@angular/core';
+import { CoerModal } from '../../lib/coer-modal/coer-modal.component';
+import { IFile, IFileImage } from 'coer-elements/interfaces';
+import { CoerAlert } from 'coer-elements/tools';
+import * as i0 from "@angular/core";
+export declare class CoerFilebox {
+    protected readonly alert: CoerAlert;
+    protected IsNull: (value: any) => boolean;
+    protected IsNotNull: (value: any) => boolean;
+    protected IsNotOnlyWhiteSpace: (value: any) => boolean;
+    protected inputFileImage: import("@angular/core").Signal<ElementRef<any>>;
+    protected modal: import("@angular/core").Signal<CoerModal>;
+    protected _base64: string;
+    protected _image: IFileImage | null;
+    private readonly imageExtensions;
+    type: import("@angular/core").InputSignal<"image">;
+    multiple: import("@angular/core").InputSignal<boolean>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isReadonly: import("@angular/core").InputSignal<boolean>;
+    isInvisible: import("@angular/core").InputSignal<boolean>;
+    set image(value: IFileImage | null | undefined);
+    onSelected: import("@angular/core").OutputEmitterRef<IFile[]>;
+    onDeleteImage: import("@angular/core").OutputEmitterRef<void>;
+    protected _isEnable: import("@angular/core").Signal<boolean>;
+    /** */
+    protected UploadImages(event: any): Promise<void>;
+    /** */
+    private GetExtensionFile;
+    /** */
+    protected DeleteImage(event: any): void;
+    /** */
+    protected ExpandImage(event: any): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerFilebox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerFilebox, "coer-filebox", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; }; }, { "onSelected": "onSelected"; "onDeleteImage": "onDeleteImage"; }, never, never, false, never>;
+}

package/components/lib/coer-form/coer-form.component.d.ts

@@ -0,0 +1,36 @@
+import { FormGroup } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare class CoerForm {
+    private alert;
+    formGroup: import("@angular/core").InputSignal<FormGroup<any>>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isReadonly: import("@angular/core").InputSignal<boolean>;
+    protected get _isDisabled(): boolean;
+    /** Mark all controls as touched */
+    TouchForm(): void;
+    /** */
+    IsInvalidControl: (formControlName: string) => boolean;
+    /** */
+    SetControlValue(formControlName: string, value: any): void;
+    /** */
+    GetControlValue(formControlName: string, alternative?: any): any;
+    /** */
+    HasControlValue(formControlName: string): boolean;
+    /** Gets the value of the form */
+    GetValue<T>(): T;
+    /** */
+    Reset<T>(properties?: T | null): void;
+    /**
+     * Mark all controls as touched.
+     * If form is invalid emit a warning and focus first invalid control.
+    */
+    IsValid(): {
+        isValid: boolean;
+        formValue: any;
+    };
+    /** Focuses the specified control, otherwise the first invalid control or first control */
+    Focus(formControl?: string | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerForm, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerForm, "coer-form", never, { "formGroup": { "alias": "formGroup"; "required": true; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; }, {}, never, ["*"], false, never>;
+}

package/components/lib/coer-grid/coer-grid.component.d.ts

@@ -0,0 +1,53 @@
+import { CoerGridExtension } from './coer-grid.extension';
+import { IGridLength } from 'coer-elements/interfaces';
+import * as i0 from "@angular/core";
+export declare class CoerGrid<T> extends CoerGridExtension<T> {
+    dataSource: import("@angular/core").Signal<T[]>;
+    selectedItems: import("@angular/core").Signal<T[]>;
+    get isValid(): boolean;
+    protected gridLength: import("@angular/core").Signal<IGridLength>;
+    /** */
+    FocusSearch(): void;
+    /** */
+    SelectSearch(): void;
+    /** */
+    GetRowBy<T>(callback: (row: T) => boolean): T | null;
+    /** */
+    Import(event?: any): Promise<void>;
+    /** */
+    Export(exportFile?: boolean | undefined): void;
+    /** */
+    protected InputChange(indexRow: number, columnName: string, value: any, input: 'coer-textbox' | 'coer-numberbox' | 'coer-selectbox' | 'coer-switch' | 'coer-textbox-search'): void;
+    /** */
+    protected KeyupEnter(indexColumn: number, row: any, input: 'coer-textbox' | 'coer-numberbox' | 'coer-textbox-search' | 'coer-selectbox', value: any): void;
+    /** */
+    private NextInput;
+    /** */
+    FocusInput(indexRow?: number, indexColumn?: number): void;
+    /** */
+    FocusRow(callback: (row: T) => boolean): void;
+    /** */
+    Sort(columnName: string): Promise<void>;
+    /** */
+    protected ClickCheck(id: string, checked: boolean, all: boolean, row?: any): void;
+    /** */
+    CheckAll(): void;
+    /** */
+    UncheckAll(): void;
+    /** */
+    CheckBy(callback: (row: T) => boolean): void;
+    /** */
+    UncheckBy(callback: (row: T) => boolean): void;
+    /** */
+    protected ClickOnRow(row: T): void;
+    /** Inserts new elements at the start */
+    Unshift(row: T): void;
+    /** Appends new elements to the end */
+    Push(row: T): void;
+    /** Delete Row By index */
+    DeleteRow(indexRow: number): Promise<void>;
+    /** Delete row list by callback */
+    DeleteRowsBy(callback: (row: T) => boolean): Promise<void>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerGrid<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerGrid<any>, "coer-grid", never, {}, {}, never, ["*"], false, never>;
+}

package/components/lib/coer-grid/coer-grid.extension.d.ts

@@ -0,0 +1,111 @@
+import { IGridButtonByRow, IGridColumn, IGridDataSource, IGridImport, IGridHeaderButton, IGridHeaderExportButton, IGridKeyupEnter, IGridSearch, IGridInputSwitchChange, IGridInputTextbox, IGridSort, IGridCheckbox, IGridInputCheckbox, IGridHeader } from "coer-elements/interfaces";
+import { AfterViewInit, ElementRef } from "@angular/core";
+import { CoerCheckbox } from "../../lib/coer-checkbox/coer-checkbox.component";
+import { CoerNumberBox } from "../../lib/coer-numberbox/coer-numberbox.component";
+import { CoerSelectbox } from "../../lib/coer-selectbox/coer-selectbox.component";
+import { CoerTextBox } from "../../lib/coer-textbox/coer-textbox.component";
+import { CoerAlert, ControlValue } from 'coer-elements/tools';
+import * as i0 from "@angular/core";
+export declare class CoerGridExtension<T> extends ControlValue implements AfterViewInit {
+    protected readonly alert: CoerAlert;
+    protected inputFile: import("@angular/core").Signal<ElementRef<any>>;
+    protected inputSearch: import("@angular/core").Signal<CoerTextBox>;
+    protected coerTextboxList: import("@angular/core").Signal<readonly CoerTextBox[]>;
+    protected coerNumberboxList: import("@angular/core").Signal<readonly CoerNumberBox[]>;
+    protected coerSelectboxList: import("@angular/core").Signal<readonly CoerSelectbox<any>[]>;
+    protected coerCheckboxList: import("@angular/core").Signal<readonly CoerCheckbox[]>;
+    protected _value: T[];
+    protected value_signal: import("@angular/core").WritableSignal<T[]>;
+    protected _gridSearch: import("@angular/core").WritableSignal<string | number>;
+    protected _isLoading: import("@angular/core").WritableSignal<boolean>;
+    protected _isLoadingMessage: boolean;
+    protected _id: string;
+    protected _expandedGroups: string[];
+    protected _enableAnimations: boolean;
+    protected _indexFocus: import("@angular/core").WritableSignal<number>;
+    protected _sort: import("@angular/core").WritableSignal<IGridSort>;
+    protected GetNumericFormat: (value: string | number | null | undefined, decimals?: number) => string;
+    protected GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
+    protected GetElementHeight: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
+    columns: import("@angular/core").InputSignal<IGridColumn<T>[]>;
+    cleanColumnName: import("@angular/core").InputSignal<boolean>;
+    addButton: IGridHeaderButton;
+    exportButton: IGridHeaderExportButton;
+    importButton: IGridHeaderButton;
+    search: IGridSearch;
+    buttonByRow: IGridButtonByRow<T>;
+    checkbox: IGridCheckbox;
+    tooltipByRow: import("@angular/core").InputSignal<string>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDisabled: import("@angular/core").InputSignal<boolean>;
+    isReadonly: import("@angular/core").InputSignal<boolean>;
+    isInvisible: import("@angular/core").InputSignal<boolean>;
+    rowsByPage: import("@angular/core").InputSignal<number>;
+    groupBy: import("@angular/core").InputSignal<string>;
+    showColumnGrouped: import("@angular/core").InputSignal<boolean>;
+    rowsByGroup: import("@angular/core").InputSignal<number>;
+    showFooter: import("@angular/core").InputSignal<boolean>;
+    enableSort: import("@angular/core").InputSignal<boolean>;
+    enableRowFocus: import("@angular/core").InputSignal<boolean>;
+    width: import("@angular/core").InputSignal<string>;
+    MinWidth: import("@angular/core").InputSignal<string>;
+    MaxWidth: import("@angular/core").InputSignal<string>;
+    height: import("@angular/core").InputSignal<string>;
+    minHeight: import("@angular/core").InputSignal<string>;
+    maxHeight: import("@angular/core").InputSignal<string>;
+    margin: import("@angular/core").InputSignal<string>;
+    onClickAdd: import("@angular/core").OutputEmitterRef<void>;
+    onClickImport: import("@angular/core").OutputEmitterRef<IGridImport<T>>;
+    onClickExport: import("@angular/core").OutputEmitterRef<T[]>;
+    onClickRow: import("@angular/core").OutputEmitterRef<T>;
+    onDoubleClickRow: import("@angular/core").OutputEmitterRef<T>;
+    onClickDeleteRow: import("@angular/core").OutputEmitterRef<T>;
+    onClickEditRow: import("@angular/core").OutputEmitterRef<T>;
+    onClickGoRow: import("@angular/core").OutputEmitterRef<T>;
+    onKeyupEnter: import("@angular/core").OutputEmitterRef<IGridKeyupEnter>;
+    onKeyupEnterLast: import("@angular/core").OutputEmitterRef<void>;
+    onSwitchChange: import("@angular/core").OutputEmitterRef<IGridInputSwitchChange<T>>;
+    onTextboxChange: import("@angular/core").OutputEmitterRef<IGridInputTextbox<T>>;
+    onSelectboxChange: import("@angular/core").OutputEmitterRef<IGridInputTextbox<T>>;
+    onCheckboxChange: import("@angular/core").OutputEmitterRef<IGridInputCheckbox<T>>;
+    protected _isDisabled: import("@angular/core").Signal<boolean>;
+    protected _isGrouped: import("@angular/core").Signal<boolean>;
+    protected get _height(): string;
+    protected get _onlyOneCheck(): boolean | undefined;
+    ngAfterViewInit(): void;
+    SetValue(value: T[]): void;
+    writeValue(value: T[]): void;
+    protected gridColumns: import("@angular/core").Signal<IGridHeader[]>;
+    protected gridDataSource: import("@angular/core").Signal<IGridDataSource[]>;
+    protected gridDataSourceFiltered: import("@angular/core").Signal<T[]>;
+    /** Get Column Configuration */
+    protected _GetColumnConfig: (columnName: string) => IGridColumn<T> | undefined;
+    /** Clean Name or get alias */
+    protected _GetColumnName: (columnName: string) => string;
+    /** */
+    protected _GetShortIcon: (columnName: string) => "" | "fa-solid fa-arrow-up-wide-short" | "fa-solid fa-arrow-down-short-wide";
+    /** */
+    protected _GetSearchIcon: (columnName: string) => "" | "fa-solid fa-magnifying-glass ms-auto";
+    /** */
+    protected _GetId: (indexRow: number, indexColumn: number, suffix?: string) => string;
+    /** */
+    protected _GetCellValue: (row: any, columnName: string) => any;
+    /** */
+    protected _GetDateFormat: (date: string, toLocalZone?: boolean) => string;
+    /** */
+    protected _GetDateTimeFormat: (date: string, toLocalZone?: boolean) => string;
+    /** */
+    protected _GetTooltip: (prefix: string, row: any, suffix?: string) => string;
+    /** */
+    protected _HideRow: (group: IGridDataSource) => boolean;
+    /** */
+    protected _IsCellType(property: string, data: any, type: 'number' | 'date' | 'date-time' | 'toLocalZone' | 'template' | 'coerTextbox' | 'coerNumberbox' | 'coerSelectbox' | 'coerSwitch'): boolean;
+    /** */
+    protected _IsCellColor(property: string, data: any, color: 'colorBlue' | 'colorGreen' | 'colorYellow' | 'colorRed'): boolean;
+    /** */
+    protected GetAttribute(property: string, data: any, attribute: string, type: 'coerSwitch' | 'coerTextbox' | 'coerNumberbox' | 'coerSelectbox' | 'defaul-cell'): any;
+    /** */
+    protected ButtonByRow(property: 'showDeleteButton' | 'showEditButton' | 'showGoButton', data?: any): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerGridExtension<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerGridExtension<any>, "coer-grid-extension", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "cleanColumnName": { "alias": "cleanColumnName"; "required": false; "isSignal": true; }; "addButton": { "alias": "addButton"; "required": false; }; "exportButton": { "alias": "exportButton"; "required": false; }; "importButton": { "alias": "importButton"; "required": false; }; "search": { "alias": "search"; "required": false; }; "buttonByRow": { "alias": "buttonByRow"; "required": false; }; "checkbox": { "alias": "checkbox"; "required": false; }; "tooltipByRow": { "alias": "tooltipByRow"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDisabled": { "alias": "isDisabled"; "required": false; "isSignal": true; }; "isReadonly": { "alias": "isReadonly"; "required": false; "isSignal": true; }; "isInvisible": { "alias": "isInvisible"; "required": false; "isSignal": true; }; "rowsByPage": { "alias": "rowsByPage"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "showColumnGrouped": { "alias": "showColumnGrouped"; "required": false; "isSignal": true; }; "rowsByGroup": { "alias": "rowsByGroup"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "enableSort": { "alias": "enableSort"; "required": false; "isSignal": true; }; "enableRowFocus": { "alias": "enableRowFocus"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "MinWidth": { "alias": "MinWidth"; "required": false; "isSignal": true; }; "MaxWidth": { "alias": "MaxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "margin": { "alias": "margin"; "required": false; "isSignal": true; }; }, { "onClickAdd": "onClickAdd"; "onClickImport": "onClickImport"; "onClickExport": "onClickExport"; "onClickRow": "onClickRow"; "onDoubleClickRow": "onDoubleClickRow"; "onClickDeleteRow": "onClickDeleteRow"; "onClickEditRow": "onClickEditRow"; "onClickGoRow": "onClickGoRow"; "onKeyupEnter": "onKeyupEnter"; "onKeyupEnterLast": "onKeyupEnterLast"; "onSwitchChange": "onSwitchChange"; "onTextboxChange": "onTextboxChange"; "onSelectboxChange": "onSelectboxChange"; "onCheckboxChange": "onCheckboxChange"; }, never, never, true, never>;
+}

package/components/lib/coer-list/coer-list.component.d.ts

@@ -0,0 +1,57 @@
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { AfterViewInit } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class CoerList<T> implements AfterViewInit {
+    protected _id: string;
+    protected _enableAnimations: boolean;
+    dataSource: import("@angular/core").InputSignal<T[]>;
+    propDisplay: import("@angular/core").InputSignal<string>;
+    header: import("@angular/core").InputSignal<string>;
+    headerIcon: import("@angular/core").InputSignal<string>;
+    showDeleteButton: import("@angular/core").InputSignal<boolean | ((item: T, index: number) => boolean)>;
+    showGoButton: import("@angular/core").InputSignal<boolean | ((item: T, index: number) => boolean)>;
+    showBackButton: import("@angular/core").InputSignal<boolean>;
+    isLoading: import("@angular/core").InputSignal<boolean>;
+    isDraggable: import("@angular/core").InputSignal<boolean>;
+    showSearch: import("@angular/core").InputSignal<boolean>;
+    template: import("@angular/core").InputSignal<((item: T, index: number) => string) | null>;
+    width: import("@angular/core").InputSignal<string>;
+    MinWidth: import("@angular/core").InputSignal<string>;
+    MaxWidth: import("@angular/core").InputSignal<string>;
+    height: import("@angular/core").InputSignal<string>;
+    minHeight: import("@angular/core").InputSignal<string>;
+    maxHeight: import("@angular/core").InputSignal<string>;
+    marginTop: import("@angular/core").InputSignal<string>;
+    marginRight: import("@angular/core").InputSignal<string>;
+    marginBottom: import("@angular/core").InputSignal<string>;
+    marginLeft: import("@angular/core").InputSignal<string>;
+    onDrop: import("@angular/core").OutputEmitterRef<T>;
+    onSort: import("@angular/core").OutputEmitterRef<T[]>;
+    onClick: import("@angular/core").OutputEmitterRef<T>;
+    onDoubleClick: import("@angular/core").OutputEmitterRef<T>;
+    onClickDelete: import("@angular/core").OutputEmitterRef<T>;
+    onClickGo: import("@angular/core").OutputEmitterRef<T>;
+    onClickBack: import("@angular/core").OutputEmitterRef<void>;
+    protected _dataSource: import("@angular/core").Signal<T[]>;
+    protected _isDraggable: import("@angular/core").Signal<boolean>;
+    protected _hasTemplate: import("@angular/core").Signal<boolean>;
+    protected _showbuttons: import("@angular/core").Signal<boolean>;
+    protected get _height(): string;
+    ngAfterViewInit(): void;
+    /** */
+    protected GetDisplay: (item: any) => string;
+    /** */
+    protected GetIndexRow: (item: any) => number;
+    /** */
+    protected GetTemplate(item: any): string;
+    /** */
+    protected _showBackButton: () => boolean;
+    /** */
+    protected _showDeleteButton: (item: any) => boolean;
+    /** */
+    protected _showGoButton: (item: any) => boolean;
+    /** */
+    protected Drop(event: CdkDragDrop<T[]>): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerList<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerList<any>, "coer-list", never, { "dataSource": { "alias": "dataSource"; "required": false; "isSignal": true; }; "propDisplay": { "alias": "propDisplay"; "required": false; "isSignal": true; }; "header": { "alias": "header"; "required": false; "isSignal": true; }; "headerIcon": { "alias": "headerIcon"; "required": false; "isSignal": true; }; "showDeleteButton": { "alias": "showDeleteButton"; "required": false; "isSignal": true; }; "showGoButton": { "alias": "showGoButton"; "required": false; "isSignal": true; }; "showBackButton": { "alias": "showBackButton"; "required": false; "isSignal": true; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "isDraggable": { "alias": "isDraggable"; "required": false; "isSignal": true; }; "showSearch": { "alias": "showSearch"; "required": false; "isSignal": true; }; "template": { "alias": "template"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "MinWidth": { "alias": "MinWidth"; "required": false; "isSignal": true; }; "MaxWidth": { "alias": "MaxWidth"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "marginTop": { "alias": "marginTop"; "required": false; "isSignal": true; }; "marginRight": { "alias": "marginRight"; "required": false; "isSignal": true; }; "marginBottom": { "alias": "marginBottom"; "required": false; "isSignal": true; }; "marginLeft": { "alias": "marginLeft"; "required": false; "isSignal": true; }; }, { "onDrop": "onDrop"; "onSort": "onSort"; "onClick": "onClick"; "onDoubleClick": "onDoubleClick"; "onClickDelete": "onClickDelete"; "onClickGo": "onClickGo"; "onClickBack": "onClickBack"; }, never, never, false, never>;
+}