@vallift/ngl 0.0.9 → 0.0.11

package/fesm2022/vallift-ngl.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ViewChild, Inject, Pipe, ViewContainerRef, ContentChildren, ChangeDetectionStrategy, ChangeDetectorRef, viewChild } from '@angular/core';
+import { InjectionToken, inject, Injectable, signal, input, output, Component, Input, ElementRef, Renderer2, EventEmitter, Output, RendererFactory2, HostListener, Directive, computed, ChangeDetectorRef, model, ViewChild, ViewContainerRef, ComponentFactoryResolver, ApplicationRef, Injector, Inject, Pipe, ContentChildren, ChangeDetectionStrategy, viewChild } from '@angular/core';
 import * as i1$1 from '@angular/common/http';
 import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
 import { retry, throwError, Subject, debounceTime, fromEvent, filter as filter$1, take, of } from 'rxjs';
@@ -10,7 +10,7 @@ import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { DialogRef, DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
 import { Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { NgClass, DOCUMENT, CommonModule, DatePipe, NgStyle } from '@angular/common';
+import { NgClass, DOCUMENT, NgStyle, CommonModule, DatePipe } from '@angular/common';
 import { SvgIconComponent } from 'angular-svg-icon';
 import { CdkPortal } from '@angular/cdk/portal';
 import { NgxMaskDirective } from 'ngx-mask';
@@ -1593,11 +1593,868 @@ class CloseButtonComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CloseButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-close-button', standalone: true, imports: [
-                        AppSvgIconComponent
-                    ], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n" }]
+            args: [{ selector: 'app-close-button', standalone: true, imports: [], template: "<p class=\"rounded-lg p-3 border border-neutral-300 cursor-pointer hover:bg-neutral-50\">\n  <svg class=\"w-12 h-12 text-neutral-800\" xmlns=\"http://www.w3.org/2000/svg\" id=\"mdi-window-close\" viewBox=\"0 0 24 24\">\n    <path\n      fill=\"currentColor\"\n      d=\"M13.46,12L19,17.54V19H17.54L12,13.46L6.46,19H5V17.54L10.54,12L5,6.46V5H6.46L12,10.54L17.54,5H19V6.46L13.46,12Z\"/>\n  </svg>\n\n</p>\n" }]
         }] });
 
+class Rgba {
+    r;
+    g;
+    b;
+    a;
+    constructor(r, g, b, a) {
+        this.r = r;
+        this.g = g;
+        this.b = b;
+        this.a = a;
+    }
+    denormalize() {
+        this.r = Math.round(this.r * 255);
+        this.g = Math.round(this.g * 255);
+        this.b = Math.round(this.b * 255);
+        return this;
+    }
+    toString() {
+        this.denormalize();
+        let output = 'rgb' +
+            (this.a != 1 ? 'a(' : '(') +
+            this.r + ', ' +
+            this.g + ', ' +
+            this.b +
+            (this.a != 1 ? ', ' + this.a.toPrecision(2) + ')' : ')');
+        return output;
+    }
+}
+class Hsva {
+    h;
+    s;
+    v;
+    a;
+    onChange = new EventEmitter(true);
+    constructor(h, s, v, a) {
+        this.h = h;
+        this.s = s;
+        this.v = v;
+        this.a = a;
+    }
+    onColorChange(value) {
+        this.s = value.s / value.rgX;
+        this.v = value.v / value.rgY;
+    }
+    onHueChange(value) {
+        this.h = value.v / value.rgX;
+        // this.sliderH = this.hsva.h;
+    }
+    onValueChange(value) {
+        this.v = value.v / value.rgX;
+    }
+    onAlphaChange(value) {
+        this.a = value.v / value.rgX;
+    }
+}
+class Hsla {
+    h;
+    s;
+    l;
+    a;
+    constructor(h, s, l, a) {
+        this.h = h;
+        this.s = s;
+        this.l = l;
+        this.a = a;
+    }
+    denormalize() {
+        this.h = Math.round(this.h * 360);
+        this.s = Math.round(this.s * 100);
+        this.l = Math.round(this.l * 100);
+        return this;
+    }
+    toString() {
+        let output = 'hsl' +
+            (this.a != 1 ? 'a(' : '(') +
+            this.h + ', ' +
+            this.s + '%, ' +
+            this.l + '%' +
+            (this.a != 1 ? ', ' + this.a.toPrecision(2) + ')' : ')');
+        return output;
+    }
+}
+class Cmyk {
+    c;
+    m;
+    y;
+    k;
+    a;
+    constructor(c, m, y, k, a = 1) {
+        this.c = c;
+        this.m = m;
+        this.y = y;
+        this.k = k;
+        this.a = a;
+    }
+}
+
+var ColorFormats;
+(function (ColorFormats) {
+    ColorFormats[ColorFormats["HEX"] = 0] = "HEX";
+    ColorFormats[ColorFormats["RGBA"] = 1] = "RGBA";
+    ColorFormats[ColorFormats["HSLA"] = 2] = "HSLA";
+    ColorFormats[ColorFormats["CMYK"] = 3] = "CMYK";
+})(ColorFormats || (ColorFormats = {}));
+
+class ColorConverterService {
+    // private active: ColorPickerComponent | null = null;
+    constructor() { }
+    // public setActive(active: ColorPickerComponent | null): void {
+    //   this.active = active;
+    // }
+    toFormat(hsva, format) {
+        var output = "";
+        if (hsva) {
+            switch (format) {
+                case ColorFormats.HEX:
+                    var rgba = this.hsvaToRgba(hsva);
+                    rgba.denormalize();
+                    var output = this.rgbaToHex(rgba, true);
+                    break;
+                case ColorFormats.HSLA:
+                    var hsla = this.hsva2hsla(hsva);
+                    hsla.denormalize();
+                    var output = hsla.toString();
+                    break;
+                case ColorFormats.RGBA:
+                    var rgba = this.hsvaToRgba(hsva);
+                    var output = rgba.toString();
+                    break;
+                case ColorFormats.CMYK:
+                    var rgba = this.hsvaToRgba(hsva);
+                    var cmyk = this.rgbaToCmyk(rgba);
+                    break;
+            }
+        }
+        return output;
+    }
+    stringToFormat(color, format) {
+        var hsva = this.stringToHsva(color, true);
+        return this.toFormat(hsva, format);
+    }
+    hsva2hsla(hsva) {
+        const h = hsva.h, s = hsva.s, v = hsva.v, a = hsva.a;
+        if (v === 0) {
+            return new Hsla(h, 0, 0, a);
+        }
+        else if (s === 0 && v === 1) {
+            return new Hsla(h, 1, 1, a);
+        }
+        else {
+            const l = (v * (2 - s)) / 2;
+            return new Hsla(h, (v * s) / (1 - Math.abs(2 * l - 1)), l, a);
+        }
+    }
+    hsla2hsva(hsla) {
+        const h = Math.min(hsla.h, 1), s = Math.min(hsla.s, 1);
+        const l = Math.min(hsla.l, 1), a = Math.min(hsla.a, 1);
+        if (l === 0) {
+            return new Hsva(h, 0, 0, a);
+        }
+        else {
+            const v = l + (s * (1 - Math.abs(2 * l - 1))) / 2;
+            return new Hsva(h, (2 * (v - l)) / v, v, a);
+        }
+    }
+    hsvaToRgba(hsva) {
+        let r, g, b;
+        const h = hsva.h, s = hsva.s, v = hsva.v, a = hsva.a;
+        const i = Math.floor(h * 6);
+        const f = h * 6 - i;
+        const p = v * (1 - s);
+        const q = v * (1 - f * s);
+        const t = v * (1 - (1 - f) * s);
+        switch (i % 6) {
+            case 0:
+                (r = v), (g = t), (b = p);
+                break;
+            case 1:
+                (r = q), (g = v), (b = p);
+                break;
+            case 2:
+                (r = p), (g = v), (b = t);
+                break;
+            case 3:
+                (r = p), (g = q), (b = v);
+                break;
+            case 4:
+                (r = t), (g = p), (b = v);
+                break;
+            case 5:
+                (r = v), (g = p), (b = q);
+                break;
+            default:
+                (r = 0), (g = 0), (b = 0);
+        }
+        return new Rgba(r, g, b, a);
+    }
+    cmykToRgb(cmyk) {
+        const r = (1 - cmyk.c) * (1 - cmyk.k);
+        const g = (1 - cmyk.m) * (1 - cmyk.k);
+        const b = (1 - cmyk.y) * (1 - cmyk.k);
+        return new Rgba(r, g, b, cmyk.a);
+    }
+    rgbaToCmyk(rgba) {
+        const k = 1 - Math.max(rgba.r, rgba.g, rgba.b);
+        if (k === 1) {
+            return new Cmyk(0, 0, 0, 1, rgba.a);
+        }
+        else {
+            const c = (1 - rgba.r - k) / (1 - k);
+            const m = (1 - rgba.g - k) / (1 - k);
+            const y = (1 - rgba.b - k) / (1 - k);
+            return new Cmyk(c, m, y, k, rgba.a);
+        }
+    }
+    rgbaToHsva(rgba) {
+        let h, s;
+        const r = Math.min(rgba.r, 1), g = Math.min(rgba.g, 1);
+        const b = Math.min(rgba.b, 1), a = Math.min(rgba.a, 1);
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        const v = max, d = max - min;
+        s = max === 0 ? 0 : d / max;
+        if (max === min) {
+            h = 0;
+        }
+        else {
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+                default:
+                    h = 0;
+            }
+            h /= 6;
+        }
+        return new Hsva(h, s, v, a);
+    }
+    rgbaToHex(rgba, allowHex8) {
+        /* tslint:disable:no-bitwise */
+        let hex = "#" +
+            ((1 << 24) | (rgba.r << 16) | (rgba.g << 8) | rgba.b)
+                .toString(16)
+                .substr(1);
+        if (rgba.a != 1) {
+            hex += ((1 << 8) | Math.round(rgba.a * 255)).toString(16).substr(1);
+        }
+        /* tslint:enable:no-bitwise */
+        return hex;
+    }
+    normalizeCMYK(cmyk) {
+        return new Cmyk(cmyk.c / 100, cmyk.m / 100, cmyk.y / 100, cmyk.k / 100, cmyk.a);
+    }
+    denormalizeCMYK(cmyk) {
+        return new Cmyk(Math.floor(cmyk.c * 100), Math.floor(cmyk.m * 100), Math.floor(cmyk.y * 100), Math.floor(cmyk.k * 100), cmyk.a);
+    }
+    denormalizeRGBA(rgba) {
+        return new Rgba(Math.round(rgba.r * 255), Math.round(rgba.g * 255), Math.round(rgba.b * 255), rgba.a);
+    }
+    stringToHsva(colorString = "", allowHex8 = true) {
+        let hsva = null;
+        colorString = (colorString || "").toLowerCase();
+        const stringParsers = [
+            {
+                re: /(rgb)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*%?,\s*(\d{1,3})\s*%?(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+                parse: function (execResult) {
+                    return new Rgba(parseInt(execResult[2], 10) / 255, parseInt(execResult[3], 10) / 255, parseInt(execResult[4], 10) / 255, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]));
+                },
+            },
+            {
+                re: /(hsl)a?\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
+                parse: function (execResult) {
+                    return new Hsla(parseInt(execResult[2], 10) / 360, parseInt(execResult[3], 10) / 100, parseInt(execResult[4], 10) / 100, isNaN(parseFloat(execResult[5])) ? 1 : parseFloat(execResult[5]));
+                },
+            },
+        ];
+        if (allowHex8) {
+            stringParsers.push({
+                re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})?$/,
+                parse: function (execResult) {
+                    return new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, parseInt(execResult[4] || "FF", 16) / 255);
+                },
+            });
+        }
+        else {
+            stringParsers.push({
+                re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})$/,
+                parse: function (execResult) {
+                    return new Rgba(parseInt(execResult[1], 16) / 255, parseInt(execResult[2], 16) / 255, parseInt(execResult[3], 16) / 255, 1);
+                },
+            });
+        }
+        stringParsers.push({
+            re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])$/,
+            parse: function (execResult) {
+                return new Rgba(parseInt(execResult[1] + execResult[1], 16) / 255, parseInt(execResult[2] + execResult[2], 16) / 255, parseInt(execResult[3] + execResult[3], 16) / 255, 1);
+            },
+        });
+        for (const key in stringParsers) {
+            if (stringParsers.hasOwnProperty(key)) {
+                const parser = stringParsers[key];
+                const match = parser.re.exec(colorString), color = match && parser.parse(match);
+                if (color) {
+                    if (color instanceof Rgba) {
+                        hsva = this.rgbaToHsva(color);
+                    }
+                    else if (color instanceof Hsla) {
+                        hsva = this.hsla2hsva(color);
+                    }
+                    return hsva;
+                }
+            }
+        }
+        return hsva;
+    }
+    outputFormat(hsva) {
+        return this.hsvaToRgba(hsva).toString();
+    }
+    getFormatByString(color) {
+        if (color) {
+            color = color.toLowerCase();
+            let regexHex = /(#([\da-f]{3}(?:[\da-f]{3})?(?:[\da-f]{2})?))/;
+            let regexRGBA = /(rgba\((\d{1,3},\s?){3}(1|0?\.\d+)\)|rgb\(\d{1,3}(,\s?\d{1,3}){2}\))/;
+            let regexHSLA = /(hsla\((\d{1,3}%?,\s?){3}(1|0?\.\d+)\)|hsl\(\d{1,3}%?(,\s?\d{1,3}%?){2}\))/;
+            if (regexHex.test(color)) {
+                return "hex";
+            }
+            else if (regexRGBA.test(color)) {
+                return "rgba";
+            }
+            else if (regexHSLA.test(color)) {
+                return "hsla";
+            }
+        }
+        return "hex";
+    }
+    isValidHexColor(hex) {
+        if (!hex) {
+            return false;
+        }
+        const hexColorPattern = /^#?([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{8})$/;
+        return hexColorPattern.test(hex);
+    }
+    addHexPrefixIfMissing(hex) {
+        if (!hex.startsWith('#')) {
+            return '#' + hex;
+        }
+        return hex;
+    }
+    removeAlpha(hex) {
+        const cleanHex = hex.startsWith('#') ? hex.slice(1) : hex;
+        const rgbHex = cleanHex.length === 8 ? cleanHex.slice(0, 6) : cleanHex;
+        return `#${rgbHex.toUpperCase()}`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorConverterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class SliderPosition {
+    h;
+    s;
+    v;
+    a;
+    constructor(h, s, v, a) {
+        this.h = h;
+        this.s = s;
+        this.v = v;
+        this.a = a;
+    }
+}
+class SliderDimension {
+    h;
+    s;
+    v;
+    a;
+    constructor(h, s, v, a) {
+        this.h = h;
+        this.s = s;
+        this.v = v;
+        this.a = a;
+    }
+}
+
+class ColorPickerSliderDirective {
+    listenerMove;
+    listenerStop;
+    rgX;
+    rgY;
+    dragEnd = new EventEmitter();
+    dragStart = new EventEmitter();
+    valueChanged = new EventEmitter();
+    elementRef = inject(ElementRef);
+    mouseDown(event) {
+        this.start(event);
+    }
+    touchStart(event) {
+        this.start(event);
+    }
+    constructor() {
+        this.listenerMove = (event) => this.move(event);
+        this.listenerStop = () => this.stop();
+    }
+    move(event) {
+        event.preventDefault();
+        this.setCursor(event);
+    }
+    start(event) {
+        this.setCursor(event);
+        event.stopPropagation();
+        document.addEventListener('mouseup', this.listenerStop);
+        document.addEventListener('touchend', this.listenerStop);
+        document.addEventListener('mousemove', this.listenerMove);
+        document.addEventListener('touchmove', this.listenerMove);
+        this.dragStart.emit();
+    }
+    stop() {
+        document.removeEventListener('mouseup', this.listenerStop);
+        document.removeEventListener('touchend', this.listenerStop);
+        document.removeEventListener('mousemove', this.listenerMove);
+        document.removeEventListener('touchmove', this.listenerMove);
+        this.dragEnd.emit();
+    }
+    getXAxis(event) {
+        const position = this.elementRef.nativeElement.getBoundingClientRect();
+        const pageX = (event.pageX !== undefined) ? event.pageX : event.touches[0].pageX;
+        return pageX - position.left - window.pageXOffset;
+    }
+    getYAxis(event) {
+        const position = this.elementRef.nativeElement.getBoundingClientRect();
+        const pageY = (event.pageY !== undefined) ? event.pageY : event.touches[0].pageY;
+        return pageY - position.top - window.pageXOffset;
+    }
+    setCursor(event) {
+        const width = this.elementRef.nativeElement.offsetWidth;
+        const height = this.elementRef.nativeElement.offsetHeight;
+        const x = Math.max(0, Math.min(this.getXAxis(event), width));
+        const y = Math.max(0, Math.min(this.getYAxis(event), height));
+        if (this.rgX !== undefined && this.rgY !== undefined) {
+            this.valueChanged.emit({ x: x, y: y, s: x / width, v: (1 - y / height), rgX: this.rgX, rgY: this.rgY });
+        }
+        else if (this.rgX === undefined && this.rgY !== undefined) {
+            this.valueChanged.emit({ x: x, y: y, v: y / height, rgY: this.rgY });
+        }
+        else if (this.rgX !== undefined && this.rgY === undefined) {
+            this.valueChanged.emit({ x: x, y: y, v: x / width, rgX: this.rgX });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerSliderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ColorPickerSliderDirective, isStandalone: true, selector: "[colorPickerSlider]", inputs: { rgX: "rgX", rgY: "rgY" }, outputs: { dragEnd: "dragEnd", dragStart: "dragStart", valueChanged: "valueChanged" }, host: { listeners: { "mousedown": "mouseDown($event)", "touchstart": "touchStart($event)" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerSliderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[colorPickerSlider]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [], propDecorators: { rgX: [{
+                type: Input
+            }], rgY: [{
+                type: Input
+            }], dragEnd: [{
+                type: Output
+            }], dragStart: [{
+                type: Output
+            }], valueChanged: [{
+                type: Output
+            }], mouseDown: [{
+                type: HostListener,
+                args: ['mousedown', ['$event']]
+            }], touchStart: [{
+                type: HostListener,
+                args: ['touchstart', ['$event']]
+            }] } });
+
+class ColorPickerComponent extends BaseControlValueAccessorV3 {
+    hexColor = input('#00FF00F8');
+    enableAdditionalColor = input(false);
+    additionalColors = input([
+        // Gray shades
+        '#FFFFFF', // White
+        '#F5F5F5',
+        '#E0E0E0',
+        '#BDBDBD',
+        '#9E9E9E',
+        '#757575',
+        '#616161',
+        '#424242',
+        '#212121',
+        '#000000', // Black
+        '',
+        // Row 1 – Reds to Purples
+        '#F44336', // Red
+        '#EF5350', // Coral red
+        '#AB47BC', // Orchid
+        '#EC407A', // Pink
+        '#7E57C2', // Lavender purple
+        '#5C6BC0', // Indigo
+        // Row 2 – Teal to Blue
+        '#4DB6AC', // Teal
+        '#4FC3F7', // Sky blue
+        '#4DD0E1', // Cyan
+        '#42A5F5', // Blue
+        '#5C6BC0', // Blue-violet
+        '#1E88E5', // Strong blue
+        // Row 3 – Greens to Oranges
+        '#66BB6A', // Green
+        '#9CCC65', // Lime green
+        '#D4E157', // Light lime
+        '#FFEB3B', // Yellow
+        '#FFCA28', // Gold
+        '#FFA726', // Orange
+        '',
+        // Calm / soft colors
+        '#A8DADC', // Soft teal
+        '#F4A261', // Muted orange
+        '#E9C46A', // Soft yellow
+        '#B5EAD7', // Mint green
+        '#C7CEEA', // Soft blue
+        '#FFDAC1', // Peach
+        '#E2F0CB', // Light green
+        '#D0C9FF', // Lavender
+        '#FFB7B2', // Blush pink
+        '#F1C0E8', // Light magenta
+    ]);
+    enableAlpha = input(true);
+    controls = "default";
+    colorChanged = new EventEmitter(false);
+    onAlphaChange = new EventEmitter(false);
+    closeColorPicker = new EventEmitter();
+    color = new Hsva(0, 1, 1, 1);
+    COLOR_PICKER_HEIGHT = signal(140);
+    COLOR_PICKER_WIDTH = signal(250);
+    converterService = inject(ColorConverterService);
+    cdr = inject(ChangeDetectorRef);
+    hsva = signal(new Hsva(0, 1, 1, 1));
+    outputColor;
+    selectedColor = signal("#000000");
+    sliderDimMax = signal(new SliderDimension(0, 1, 1, 1));
+    slider = signal(new SliderPosition(0, 1, 1, 1));
+    hueSliderColor = signal(null);
+    alphaSliderColor = signal(null);
+    hueSlider;
+    alphaSlider;
+    height = computed(() => {
+        return `${this.COLOR_PICKER_HEIGHT()}px`;
+    });
+    width = computed(() => {
+        return `${this.COLOR_PICKER_WIDTH()}px`;
+    });
+    // height = signal(`${this.COLOR_PICKER_HEIGHT()}px`);
+    // width = signal(`${this.COLOR_PICKER_WIDTH()}px`);
+    isTooltip = signal(false);
+    format = ColorFormats.HEX;
+    hexColorValue = model('');
+    alphaValue = signal(1);
+    click(event) {
+        if (this.isOutside(event)) {
+            // this.emitClose('cancel');
+            this.closeColorPicker.emit();
+        }
+    }
+    isOutside(event) {
+        return event.target.classList.contains('ng-color-picker');
+    }
+    onValueReady(value) {
+        if (this.converterService.isValidHexColor(value)) {
+            this.setHexColor(this.hexColor());
+        }
+    }
+    ngOnInit() {
+        this.setHexColor(this.hexColor());
+    }
+    ngOnChanges(changes) {
+        if (changes?.hexColor?.currentValue) {
+            this.setHexColor(changes.hexColor.currentValue);
+        }
+    }
+    ngAfterViewInit() {
+        const hueWidth = this.hueSlider?.nativeElement.offsetWidth || 140;
+        const alphaWidth = this.alphaSlider?.nativeElement.offsetWidth || 140;
+        const sliderDimensionMax = new SliderDimension(hueWidth, this.COLOR_PICKER_WIDTH(), this.COLOR_PICKER_HEIGHT(), alphaWidth);
+        this.sliderDimMax.set(sliderDimensionMax);
+        this.update();
+    }
+    setHexColor(hexColor) {
+        if (!this.enableAlpha()) {
+            hexColor = this.converterService.removeAlpha(hexColor);
+        }
+        if (hexColor != null && hexColor != '') {
+            const hexToHsva = this.converterService.stringToHsva(hexColor);
+            if (hexToHsva) {
+                this.color = hexToHsva;
+                this.hexColorValue.set(hexColor);
+                let alphaPercentage = this.mapRange(this.color.a);
+                this.alphaValue.set(alphaPercentage);
+            }
+        }
+        if (this.color) {
+            this.slider.set(new SliderPosition(this.color.h, this.color.s, this.color.v, this.color.a));
+            this.update();
+        }
+        else {
+            this.slider.set(new SliderPosition(0, 0, 0, 0));
+            this.update();
+        }
+        if (this.converterService.isValidHexColor(hexColor)) {
+            this.onValueChange(hexColor);
+        }
+    }
+    mapRange(value) {
+        return Math.round(1 + value * (100 - 1));
+    }
+    onSliderChange(type, event) {
+        switch (type) {
+            case 'saturation-lightness':
+                this.hsva().onColorChange(event);
+                break;
+            case 'hue':
+                this.hsva().onHueChange(event);
+                break;
+            case 'alpha':
+                this.hsva().onAlphaChange(event);
+                this.onAlphaChange.emit(event);
+                break;
+            case 'value':
+                this.hsva().onValueChange(event);
+                break;
+        }
+        this.update();
+        this.setColor(this.outputColor);
+        this.hexColorValue.set(this.converterService.toFormat(this.hsva(), ColorFormats.HEX));
+        this.alphaValue.set(this.mapRange(this.outputColor.a));
+    }
+    setColor(color) {
+        this.color = color;
+        if (!this.isTooltip()) {
+            this.colorChanged.emit(this.converterService.toFormat(this.color, ColorFormats.HEX));
+        }
+    }
+    getBackgroundColor(color) {
+        return {
+            background: "linear-gradient(90deg, rgba(36,0,0,0) 0%, " + color + " 100%)",
+        };
+    }
+    update() {
+        this.hsva.set(this.color);
+        if (this.sliderDimMax) {
+            let rgba = this.converterService.hsvaToRgba(this.hsva()).denormalize();
+            let hue = this.converterService
+                .hsvaToRgba(new Hsva(this.hsva().h, 1, 1, 1))
+                .denormalize();
+            this.hueSliderColor.set("rgb(" + hue.r + "," + hue.g + "," + hue.b + ")");
+            this.alphaSliderColor.set("rgb(" + rgba.r + "," + rgba.g + "," + rgba.b + ")");
+            this.outputColor = this.hsva();
+            this.selectedColor.set(this.converterService.hsvaToRgba(this.hsva()).toString());
+            const sliderPosition = new SliderPosition(
+            // (this.sHue || this.hsva.h) * this.sliderDimMax.h - 8,
+            this.hsva().h * this.sliderDimMax().h - 5, this.hsva().s * this.sliderDimMax().s, (1 - this.hsva().v) * this.sliderDimMax().v, this.hsva().a * this.sliderDimMax().a - 5);
+            this.slider.set(sliderPosition);
+            this.cdr.detectChanges();
+        }
+    }
+    onHexColorChange(event) {
+        const hexCode = event.target.value.toString().trim();
+        if (this.converterService.isValidHexColor(hexCode)) {
+            this.setHexColor(this.converterService.addHexPrefixIfMissing(hexCode));
+        }
+    }
+    alphaChanged(event) {
+        const input = event.target.value.trim();
+        let value = parseInt(input, 10);
+        if (isNaN(value)) {
+            value = 0;
+        }
+        value = Math.max(0, Math.min(100, value));
+        this.alphaValue.set(value);
+    }
+    onApplyCLicked() {
+        this.colorChanged.emit(this.converterService.toFormat(this.color, ColorFormats.HEX));
+    }
+    getColorRows() {
+        const rows = [];
+        let currentRow = [];
+        for (const color of this.additionalColors()) {
+            if (color === '') {
+                if (currentRow.length) {
+                    rows.push(currentRow);
+                    currentRow = [];
+                }
+            }
+            else {
+                currentRow.push(color);
+            }
+        }
+        if (currentRow.length) {
+            rows.push(currentRow);
+        }
+        return rows;
+    }
+    onColorSelected(color) {
+        this.setHexColor(color);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ColorPickerComponent, isStandalone: true, selector: "app-color-picker", inputs: { hexColor: { classPropertyName: "hexColor", publicName: "hexColor", isSignal: true, isRequired: false, transformFunction: null }, enableAdditionalColor: { classPropertyName: "enableAdditionalColor", publicName: "enableAdditionalColor", isSignal: true, isRequired: false, transformFunction: null }, additionalColors: { classPropertyName: "additionalColors", publicName: "additionalColors", isSignal: true, isRequired: false, transformFunction: null }, enableAlpha: { classPropertyName: "enableAlpha", publicName: "enableAlpha", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: false, isRequired: false, transformFunction: null }, hexColorValue: { classPropertyName: "hexColorValue", publicName: "hexColorValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorChanged: "colorChanged", onAlphaChange: "onAlphaChange", closeColorPicker: "closeColorPicker", hexColorValue: "hexColorValueChange" }, host: { listeners: { "document:mousedown": "click($event)" } }, viewQueries: [{ propertyName: "hueSlider", first: true, predicate: ["hueSlider"], descendants: true }, { propertyName: "alphaSlider", first: true, predicate: ["alphaSlider"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n  <div [style.width]=\"width()\">\n\n    <!--Saturation and Lightness-->\n    <div\n      class=\"sl\"\n      [style.height]=\"height()\"\n      [style.width]=\"width()\"\n      colorPickerSlider\n      [rgX]=\"1\"\n      [rgY]=\"1\"\n      (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n      [style.background-color]=\"hueSliderColor()\">\n\n      <!--Saturation & Lightness pointer-->\n      <div\n        class=\"sl-pointer\"\n        [style.left.px]=\"slider().s\"\n        [style.top.px]=\"slider().v\">\n      </div>\n\n    </div>\n\n    <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n      <!--Selected Color-->\n      <div class=\"flex gap-5 items-center\">\n\n        <!--        <div class=\"relative\">-->\n        <!--          <div class=\"selected-color-background\"></div>-->\n        <!--          <div-->\n        <!--            class=\"h-10 w-10 rounded-xl selected-color\"-->\n        <!--            [style.background-color]=\"selectedColor()\">-->\n        <!--          </div>-->\n        <!--        </div>-->\n\n\n        <div class=\"flex flex-col w-full gap-4\">\n          <div #hueSlider\n               class=\"hue\"\n               colorPickerSlider\n               (valueChanged)=\"onSliderChange('hue', $event)\"\n               [rgX]=\"1\">\n            <div class=\"hue-pointer\"\n                 [style.left.px]=\"slider().h\"></div>\n          </div>\n\n          @if(enableAlpha()) {\n            <div #alphaSlider\n                 class=\"alpha\"\n                 colorPickerSlider\n                 [rgX]=\"1\"\n                 (valueChanged)=\"onSliderChange('alpha', $event)\">\n              <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n              <div class=\"alpha-pointer\"\n                   [style.left.px]=\"slider().a\"></div>\n            </div>\n          }\n        </div>\n\n      </div>\n\n      <div class=\"flex items-center gap-3\">\n        <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n          <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n          <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n                 class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n        </div>\n        @if (isTooltip()) {\n          <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n               (click)=\"onApplyCLicked()\">Apply\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"mt-4\">\n    @for (row of getColorRows(); let $isLast = $last; track $index) {\n      <div class=\"grid grid-cols-8 gap-2 mb-1\">\n        @for (color of row; track $index) {\n          <div\n            (click)=\"onColorSelected(color)\"\n            class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n            [style.background-color]=\"color\">\n          </div>\n        }\n      </div>\n\n      <!-- Separator line unless it's the last row -->\n      @if (!$isLast) {\n        <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n      }\n    }\n  </div>\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.sl-pointer{@apply absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white;}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.hue-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: ColorPickerSliderDirective, selector: "[colorPickerSlider]", inputs: ["rgX", "rgY"], outputs: ["dragEnd", "dragStart", "valueChanged"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-color-picker', standalone: true, imports: [
+                        ColorPickerSliderDirective,
+                        NgStyle,
+                        FormsModule,
+                        NgClass
+                    ], template: "<div [ngClass]=\"isTooltip() ? 'shadow-1 bg-white' : ''\">\n\n  <div [style.width]=\"width()\">\n\n    <!--Saturation and Lightness-->\n    <div\n      class=\"sl\"\n      [style.height]=\"height()\"\n      [style.width]=\"width()\"\n      colorPickerSlider\n      [rgX]=\"1\"\n      [rgY]=\"1\"\n      (valueChanged)=\"onSliderChange('saturation-lightness', $event)\"\n      [style.background-color]=\"hueSliderColor()\">\n\n      <!--Saturation & Lightness pointer-->\n      <div\n        class=\"sl-pointer\"\n        [style.left.px]=\"slider().s\"\n        [style.top.px]=\"slider().v\">\n      </div>\n\n    </div>\n\n    <div class=\"flex flex-col gap-4 mt-4\" [ngClass]=\"isTooltip() ? 'p-4' : ''\">\n      <!--Selected Color-->\n      <div class=\"flex gap-5 items-center\">\n\n        <!--        <div class=\"relative\">-->\n        <!--          <div class=\"selected-color-background\"></div>-->\n        <!--          <div-->\n        <!--            class=\"h-10 w-10 rounded-xl selected-color\"-->\n        <!--            [style.background-color]=\"selectedColor()\">-->\n        <!--          </div>-->\n        <!--        </div>-->\n\n\n        <div class=\"flex flex-col w-full gap-4\">\n          <div #hueSlider\n               class=\"hue\"\n               colorPickerSlider\n               (valueChanged)=\"onSliderChange('hue', $event)\"\n               [rgX]=\"1\">\n            <div class=\"hue-pointer\"\n                 [style.left.px]=\"slider().h\"></div>\n          </div>\n\n          @if(enableAlpha()) {\n            <div #alphaSlider\n                 class=\"alpha\"\n                 colorPickerSlider\n                 [rgX]=\"1\"\n                 (valueChanged)=\"onSliderChange('alpha', $event)\">\n              <div class=\"alpha-gradient\" [ngStyle]=\"getBackgroundColor(alphaSliderColor())\"></div>\n              <div class=\"alpha-pointer\"\n                   [style.left.px]=\"slider().a\"></div>\n            </div>\n          }\n        </div>\n\n      </div>\n\n      <div class=\"flex items-center gap-3\">\n        <div class=\"relative rounded w-full flex items-center bg-gray-50 focus-within:text-neutral-600\">\n          <p class=\"absolute text-sm text-blue-500 px-3 pointer-events-none\">HEX</p>\n          <input [(ngModel)]=\"hexColorValue\" (input)=\"onHexColorChange($event)\"\n                 class=\"py-2 pl-12 pr-3 w-36 bg-gray-50 focus:outline-none rounded uppercase\">\n\n        </div>\n        @if (isTooltip()) {\n          <div class=\"px-3 py-2 border border-neutral-300 h-min rounded-md cursor-pointer text-primary-500\"\n               (click)=\"onApplyCLicked()\">Apply\n          </div>\n        }\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"mt-4\">\n    @for (row of getColorRows(); let $isLast = $last; track $index) {\n      <div class=\"grid grid-cols-8 gap-2 mb-1\">\n        @for (color of row; track $index) {\n          <div\n            (click)=\"onColorSelected(color)\"\n            class=\"h-6 w-6 rounded cursor-pointer border border-gray-200\"\n            [style.background-color]=\"color\">\n          </div>\n        }\n      </div>\n\n      <!-- Separator line unless it's the last row -->\n      @if (!$isLast) {\n        <div class=\"h-[1px] bg-gray-100 my-2.5 w-full\"></div>\n      }\n    }\n  </div>\n\n\n</div>\n\n\n\n", styles: [".sl{@apply rounded;direction:ltr;cursor:crosshair;position:relative;touch-action:manipulation;background-image:linear-gradient(to top,#000 0%,transparent 100%),linear-gradient(to right,#fff 0%,transparent 100%)}.sl-pointer{@apply absolute rounded-full transform -translate-y-1/2 -translate-x-1/2 bg-transparent h-5 w-5 border-4 shadow-1 border-white;}.hue{direction:ltr;height:14px;width:100%;border:none;border-radius:100px;position:relative;cursor:pointer;background-size:100% 100%;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f,red)}.hue-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha{direction:ltr;position:relative;width:100%;height:14px;border:none;border-radius:100px;cursor:pointer;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.alpha-pointer{@apply absolute rounded-full top-1/2 transform -translate-y-1/2 -translate-x-1/2 bg-white h-6 w-6 shadow-1 border border-neutral-300;}.alpha-gradient{width:100%;height:100%;border-radius:5px;position:absolute}.selected-color-background{@apply h-10 w-10 rounded-xl;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0px}.selected-color{position:absolute;@apply h-10 w-10 shadow-md;top:0;left:0}\n"] }]
+        }], propDecorators: { controls: [{
+                type: Input
+            }], colorChanged: [{
+                type: Output
+            }], onAlphaChange: [{
+                type: Output
+            }], closeColorPicker: [{
+                type: Output
+            }], hueSlider: [{
+                type: ViewChild,
+                args: ["hueSlider", { static: false }]
+            }], alphaSlider: [{
+                type: ViewChild,
+                args: ["alphaSlider", { static: false }]
+            }], click: [{
+                type: HostListener,
+                args: ['document:mousedown', ['$event']]
+            }] } });
+
+class ColorPickerDirective {
+    colorChanged = new EventEmitter(false);
+    componentRef = null;
+    elementRef = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    componentFactoryResolver = inject(ComponentFactoryResolver);
+    appRef = inject(ApplicationRef);
+    injector = inject(Injector);
+    overlay;
+    onClick() {
+        if (this.componentRef) {
+            this.closeColorPicker();
+            return;
+        }
+        this.initializeColorPicker();
+    }
+    initializeColorPicker() {
+        if (this.componentRef === null) {
+            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ColorPickerComponent);
+            this.componentRef = componentFactory.create(this.injector);
+            this.appRef.attachView(this.componentRef.hostView);
+            const [domElement] = this.componentRef.hostView.rootNodes;
+            const elementRect = this.elementRef.nativeElement.getBoundingClientRect();
+            this.overlay = document.createElement("div");
+            this.overlay.id = "ng-color-picker";
+            this.overlay.classList.add("ng-color-picker");
+            this.overlay.style['position'] = 'fixed';
+            this.overlay.style['height'] = '100%';
+            this.overlay.style['width'] = '100%';
+            this.overlay.style['z-index'] = 2000;
+            this.overlay.style['top'] = '0';
+            this.overlay.style['left'] = '0';
+            this.componentRef.location.nativeElement.style.position = 'absolute';
+            this.componentRef.location.nativeElement.style['z-index'] = 2001;
+            this.componentRef.location.nativeElement.style.top = `${elementRect.bottom + 20}px`;
+            this.componentRef.location.nativeElement.style.left = `${elementRect.left}px`;
+            this.componentRef.instance.COLOR_PICKER_HEIGHT.set(140);
+            this.componentRef.instance.COLOR_PICKER_WIDTH.set(250);
+            this.componentRef.instance.isTooltip.set(true);
+            this.componentRef.instance.colorChanged.subscribe((colorCode) => {
+                this.colorChanged.emit(colorCode);
+                this.closeColorPicker();
+            });
+            this.componentRef.instance.closeColorPicker.subscribe(() => {
+                this.closeColorPicker();
+            });
+            document.body.appendChild(this.overlay);
+            document.body.appendChild(domElement);
+        }
+    }
+    // private initializeColorPicker() {
+    //   if(this.componentRef === null) {
+    //     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(ColorPickerComponent);
+    //     this.componentRef = componentFactory.create(this.injector);
+    //
+    //     this.appRef.attachView(this.componentRef.hostView);
+    //     const [domElement] = (this.componentRef.hostView as EmbeddedViewRef<any>).rootNodes;
+    //
+    //     this.setColorPickerProperties();
+    //
+    //     document.body.appendChild(domElement);
+    //
+    //   }
+    // }
+    //
+    // private setColorPickerProperties() {
+    //   if (this.componentRef !== null) {
+    //     const elementRect = this.elementRef.nativeElement.getBoundingClientRect();
+    //
+    //
+    //     this.componentRef.location.nativeElement.style.position = 'absolute';
+    //     this.componentRef.location.nativeElement.style.top = `${elementRect.bottom + 20}px`;
+    //     this.componentRef.location.nativeElement.style.left = `${elementRect.left}px`;
+    //     this.componentRef.instance.COLOR_PICKER_HEIGHT.set(140);
+    //     this.componentRef.instance.COLOR_PICKER_WIDTH.set(250);
+    //     this.componentRef.instance.isTooltip.set(true);
+    //
+    //     this.componentRef.instance.colorChanged.subscribe((colorCode: string) => {
+    //       this.colorChanged.emit(colorCode);
+    //       this.closeColorPicker();
+    //     });
+    //
+    //     this.componentRef.instance.closeColorPicker.subscribe(() => {
+    //       this.closeColorPicker();
+    //     });
+    //   }
+    // }
+    closeColorPicker() {
+        if (this.componentRef) {
+            this.appRef.detachView(this.componentRef.hostView);
+            this.componentRef.destroy();
+            this.overlay.remove();
+            this.componentRef = null;
+        }
+        // this.viewContainerRef.clear();
+        // this.componentRef = null;
+    }
+    ngOnDestroy() {
+        this.closeColorPicker();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.7", type: ColorPickerDirective, isStandalone: true, selector: "[appColorPicker]", outputs: { colorChanged: "colorChanged" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ColorPickerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appColorPicker]',
+                    standalone: true
+                }]
+        }], propDecorators: { colorChanged: [{
+                type: Output
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
 class OverlayContextMenuComponent {
     dialogRef = inject(DialogRef);
     actions = inject(DIALOG_DATA);
@@ -1875,6 +2732,8 @@ class TextInputComponent extends BaseControlValueAccessor {
     showErrorSpace = input(false);
     mask = input(null);
     debounceSearchEnabled = input(true);
+    autoFocus = input(false);
+    inputRef;
     changeValue = output();
     actionIconClicked = output();
     isFocused = signal(false);
@@ -1893,6 +2752,9 @@ class TextInputComponent extends BaseControlValueAccessor {
         if (formControl) {
             this.formControl = this.ngControl?.control;
         }
+        if (this.autoFocus()) {
+            setTimeout(() => this.inputRef.nativeElement.focus(), 0);
+        }
     }
     ngAfterViewInit() {
         if (this.debounceSearchEnabled()) {
@@ -1942,7 +2804,7 @@ class TextInputComponent extends BaseControlValueAccessor {
         this.isFocused.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n<!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      [mask]=\"mask()\"\n      class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "app-text-input", inputs: { appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, iconSrc: { classPropertyName: "iconSrc", publicName: "iconSrc", isSignal: true, isRequired: false, transformFunction: null }, actionIcon: { classPropertyName: "actionIcon", publicName: "actionIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, errorMessages: { classPropertyName: "errorMessages", publicName: "errorMessages", isSignal: true, isRequired: false, transformFunction: null }, showErrorSpace: { classPropertyName: "showErrorSpace", publicName: "showErrorSpace", isSignal: true, isRequired: false, transformFunction: null }, mask: { classPropertyName: "mask", publicName: "mask", isSignal: true, isRequired: false, transformFunction: null }, debounceSearchEnabled: { classPropertyName: "debounceSearchEnabled", publicName: "debounceSearchEnabled", isSignal: true, isRequired: false, transformFunction: null }, autoFocus: { classPropertyName: "autoFocus", publicName: "autoFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { changeValue: "changeValue", actionIconClicked: "actionIconClicked" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n<!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: HumanizeFormMessagesPipe, name: "humanizeFormMessages" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BaseInputComponent, selector: "app-base-input", inputs: ["title", "isRequiredField", "fullWidth", "inputType"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
@@ -1954,8 +2816,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
                         CommonModule,
                         BaseInputComponent,
                         NgxMaskDirective
-                    ], template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n<!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      [mask]=\"mask()\"\n      class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
-        }], ctorParameters: () => [] });
+                    ], template: "<app-base-input #inputElement [title]=\"label()\" [fullWidth]=\"fullWidth()\" [isRequiredField]=\"hasRequiredValidator()\">\n  <div input class=\"relative flex items-center w-full text-neutral-400 bg-white shadow-1 rounded-md\">\n    @if (iconSrc()) {\n      <app-svg-icon [size]=\"18\" [src]=\"iconSrc()!\"\n                    class=\"absolute pointer-events-none ml-3 text-neutral-400\"></app-svg-icon>\n    }\n\n<!--    <p>{{  formControl.getError('required') ? placeholder + ' ' : placeholder }}</p>-->\n\n    <input\n      #inputRef\n      [mask]=\"mask()\"\n      class=\"h-[46px] placeholder-neutral-400 text-black rounded-md border-none outline-none focus:border-none ring-1 ring-neutral-300 focus:ring-primary-500 focus:ring-2 transition-all duration-300\"\n      [class.text-neutral-400]=\"formControl.disabled\"\n      [class.disabled-placeholder]=\"formControl.disabled\"\n      [formControl]=\"formControl\"\n      [ngClass]=\"getClass()\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      (focus)=\"onFocus()\"\n      (blur)=\"onBlur()\"\n      (input)=\"onValueChange($event)\">\n\n    @if (actionIcon()) {\n      <div (click)=\"onActionClicked()\"\n           class=\"absolute right-2 p-2 flex justify-center items-center hover:bg-neutral-100 rounded-full\">\n        <app-svg-icon [size]=\"18\" [src]=\"actionIcon()!\" class=\"text-neutral-400 cursor-pointer\">\n        </app-svg-icon>\n      </div>\n    }\n  </div>\n</app-base-input>\n\n@if (formControl.errors && hasErrors) {\n  <div class=\"mt-1\">\n    <span class=\"text-caption text-red-500\">{{ formControl.errors | humanizeFormMessages: errorMessages() }}</span>\n  </div>\n} @else {\n  @if (showErrorSpace()) {\n    <div class=\"mt-1\">\n      <span class=\"text-caption text-transparent\">.</span>\n    </div>\n  }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { inputRef: [{
+                type: ViewChild,
+                args: ['inputRef']
+            }] } });
 
 class TextButtonSmall {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextButtonSmall, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -2229,7 +3094,7 @@ class DataTableComponent extends BaseControlValueAccessorV3 {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DataTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if ((state().response()?.data ?? []).length > 0) {\n        <tbody class=\"\">\n          @for (item of state().response()?.data ?? []; track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"state().response()?.totalCount ?? 0\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: DataTableComponent, isStandalone: true, selector: "app-data-table", inputs: { columnDefs: { classPropertyName: "columnDefs", publicName: "columnDefs", isSignal: true, isRequired: true, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, enableHorizontallyScrollable: { classPropertyName: "enableHorizontallyScrollable", publicName: "enableHorizontallyScrollable", isSignal: true, isRequired: false, transformFunction: null }, enableResizableColumns: { classPropertyName: "enableResizableColumns", publicName: "enableResizableColumns", isSignal: true, isRequired: false, transformFunction: null }, enableClickableRows: { classPropertyName: "enableClickableRows", publicName: "enableClickableRows", isSignal: true, isRequired: false, transformFunction: null }, expandableComponent: { classPropertyName: "expandableComponent", publicName: "expandableComponent", isSignal: true, isRequired: false, transformFunction: null }, enableColumnsConfig: { classPropertyName: "enableColumnsConfig", publicName: "enableColumnsConfig", isSignal: true, isRequired: false, transformFunction: null }, filterComponent: { classPropertyName: "filterComponent", publicName: "filterComponent", isSignal: true, isRequired: false, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, disableInitialLoad: { classPropertyName: "disableInitialLoad", publicName: "disableInitialLoad", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageChange: "pageChange", sortChanged: "sortChanged", tableStateChanged: "tableStateChanged", onActionPerformed: "onActionPerformed", filterChanged: "filterChanged", onRowClicked: "onRowClicked" }, queries: [{ propertyName: "headerComponents", predicate: ["filter"] }], viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"flex flex-col bg-white rounded-2xl overflow-clip h-full\">\n\n  @if (enableSearch() || headerComponents.length > 0) {\n    <div class=\"flex px-6 py-5 border-b border-neutral-100 justify-between\">\n      @if (enableSearch()) {\n        <app-text-input [iconSrc]=\"'assets/icons/search.svg'\"\n                        placeholder=\"Search...\"\n                        type=\"search\"\n                        [fullWidth]=\"false\"\n                        (changeValue)=\"onSearchTextChanged($event)\">\n        </app-text-input>\n      }\n      <div>\n        <ng-content></ng-content>\n      </div>\n    </div>\n  }\n\n  <div class=\"grow h-full w-full min-w-full bg-white overflow-x-auto\">\n    <table class=\"h-min w-full\"\n           [ngClass]=\"[enableHorizontallyScrollable() ? 'overflow-x-auto' : '']\"\n           [appTableResizableColumns]=\"enableResizableColumns()\">\n\n      <!--    Table header-->\n      <thead class=\"sticky top-0 bg-white z-10\">\n      <tr sortableTable (sortChange)=\"onSortChanged($event)\" class=\"text-overline text-neutral-500 text-nowrap h-min\">\n\n        @if (expandableComponent()) {\n          <th class=\"sticky left-0 z-50 bg-white border-b border-gray-200 px-4 py-3\"></th>\n        }\n\n        @for (column of columnDefs(); track column) {\n          @let isColumnVisible = column.visible || column.visible == undefined || false;\n          @if (isColumnVisible) {\n            <th\n              [attr.data-sortable-key]=\"column.sortKey\"\n              class=\"relative cursor-pointer border-b border-gray-200 px-4 py-3 text-caption font-semibold text-gray-700 uppercase tracking-wider\"\n              [ngClass]=\"getThTrClass(column)\">\n              {{ column.title }}\n            </th>\n          }\n        }\n\n        @if (enableColumnsConfig()) {\n          <th\n            class=\"sticky right-0 bg-white flex justify-center cursor-pointer items-center border-b border-gray-200 px-1.5 py-3\">\n            <div\n              #columnsConfigTriggerElement\n              (click)=\"onColumnSettingsClicked(columnsConfigTriggerElement)\"\n              class=\"flex justify-center items-center h-[28px] w-[28px] cursor-pointer rounded-full hover:bg-neutral-100 transition-all duration-500\">\n              <svg class=\"h-[16px] w-[16px] text-neutral-600\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                   fill=\"none\">\n                <path\n                  d=\"M12 8C13.0608 8 14.0782 8.42143 14.8284 9.17157C15.5785 9.92172 16 10.9391 16 12C16 13.0609 15.5785 14.0783 14.8284 14.8284C14.0782 15.5786 13.0608 16 12 16C10.9391 16 9.92168 15.5786 9.17153 14.8284C8.42139 14.0783 7.99996 13.0609 7.99996 12C7.99996 10.9391 8.42139 9.92172 9.17153 9.17157C9.92168 8.42143 10.9391 8 12 8ZM12 10C11.4695 10 10.9608 10.2107 10.5857 10.5858C10.2107 10.9609 9.99996 11.4696 9.99996 12C9.99996 12.5304 10.2107 13.0391 10.5857 13.4142C10.9608 13.7893 11.4695 14 12 14C12.5304 14 13.0391 13.7893 13.4142 13.4142C13.7892 13.0391 14 12.5304 14 12C14 11.4696 13.7892 10.9609 13.4142 10.5858C13.0391 10.2107 12.5304 10 12 10ZM9.99996 22C9.74996 22 9.53996 21.82 9.49996 21.58L9.12996 18.93C8.49996 18.68 7.95996 18.34 7.43996 17.94L4.94996 18.95C4.72996 19.03 4.45996 18.95 4.33996 18.73L2.33996 15.27C2.20996 15.05 2.26996 14.78 2.45996 14.63L4.56996 12.97L4.49996 12L4.56996 11L2.45996 9.37C2.26996 9.22 2.20996 8.95 2.33996 8.73L4.33996 5.27C4.45996 5.05 4.72996 4.96 4.94996 5.05L7.43996 6.05C7.95996 5.66 8.49996 5.32 9.12996 5.07L9.49996 2.42C9.53996 2.18 9.74996 2 9.99996 2H14C14.25 2 14.46 2.18 14.5 2.42L14.87 5.07C15.5 5.32 16.04 5.66 16.56 6.05L19.05 5.05C19.27 4.96 19.54 5.05 19.66 5.27L21.66 8.73C21.79 8.95 21.73 9.22 21.54 9.37L19.43 11L19.5 12L19.43 13L21.54 14.63C21.73 14.78 21.79 15.05 21.66 15.27L19.66 18.73C19.54 18.95 19.27 19.04 19.05 18.95L16.56 17.95C16.04 18.34 15.5 18.68 14.87 18.93L14.5 21.58C14.46 21.82 14.25 22 14 22H9.99996ZM11.25 4L10.88 6.61C9.67996 6.86 8.61996 7.5 7.84996 8.39L5.43996 7.35L4.68996 8.65L6.79996 10.2C6.39996 11.37 6.39996 12.64 6.79996 13.8L4.67996 15.36L5.42996 16.66L7.85996 15.62C8.62996 16.5 9.67996 17.14 10.87 17.38L11.24 20H12.76L13.13 17.39C14.32 17.14 15.37 16.5 16.14 15.62L18.57 16.66L19.32 15.36L17.2 13.81C17.6 12.64 17.6 11.37 17.2 10.2L19.31 8.65L18.56 7.35L16.15 8.39C15.38 7.5 14.32 6.86 13.12 6.62L12.75 4H11.25Z\"\n                  fill=\"currentColor\"/>\n              </svg>\n            </div>\n          </th>\n        }\n\n      </tr>\n      </thead>\n\n      <!--    List Items-->\n      <tbody class=\"h-min\">\n      <ng-content select=\"[body]\"></ng-content>\n      </tbody>\n\n      <!--    Shimmer-->\n      @if (state().initialLoading()) {\n        <tbody class=\"bg-white text-center py-14\">\n        <tr>\n          <td colspan=\"100\" class=\"h-min\">\n            <div class=\"flex flex-col gap-6 px-6 py-4\">\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n              <app-shimmer type=\"multiline\"></app-shimmer>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      <!--    No Table Indicator-->\n      @if (state().success() && (state().response()?.data ?? []).length <= 0) {\n        <tbody>\n        <tr>\n          <td colspan=\"1000\">\n            <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n              <app-no-data-table></app-no-data-table>\n            </div>\n          </td>\n        </tr>\n        </tbody>\n      }\n\n      @if ((state().response()?.data ?? []).length > 0) {\n        <tbody class=\"\">\n          @for (item of state().response()?.data ?? []; track i; let i = $index) {\n            <tr (click)=\"_onRowClicked(item)\"\n                [ngClass]=\"[enableClickableRows() ? 'hover:bg-neutral-50 cursor-pointer' : '']\">\n\n              @if (expandableComponent()) {\n                <td class=\"sticky left-0 bg-white z-50 px-1 py-2 border-b border-gray-100 w-min select-none\">\n                  <div\n                    (click)=\"onRowExpandedClicked(i)\"\n                    class=\"mx-auto flex items-center justify-center h-[40px] w-[40px] rounded-full bg-neutral-50 hover:bg-neutral-100 cursor-pointer transition-all duration-500\">\n                    <svg class=\"h-[20px] w-[20px] text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\"\n                         viewBox=\"0 0 24 24\"\n                         fill=\"none\">\n                      <path d=\"M7.41 8.58L12 13.17L16.59 8.58L18 10L12 16L6 10L7.41 8.58Z\" fill=\"currentColor\"/>\n                    </svg>\n                  </div>\n                </td>\n              }\n\n              @for (column of columnDefs(); track column) {\n\n                @let isColumnVisible = column.visible || column.visible == undefined || false;\n                @if (isColumnVisible) {\n                  <td\n                    class=\"px-4 py-3 border-b border-gray-100 relative text-body2 text-gray-800\"\n                    [ngClass]=\"[getThTrClass(column)]\">\n\n                    @switch (column.type) {\n                      @default {\n                        <span class=\"text-body2 text-neutral-700\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('text') {\n                        <span class=\"text-body2 text-neutral-700 text-nowrap\"\n                              [ngClass]=\"column.textConfig?.textColorClass\">{{ getPropertyValue(item, column) }}</span>\n                      }\n                      @case ('date') {\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"[getFlexJustify(column)]\">\n                          @if (column.dateConfig?.showIcon == undefined ? true : (column.dateConfig?.showIcon)) {\n                            <svg class=\"h-4 w-4 text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"\n                                 fill=\"none\">\n                              <path\n                                d=\"M19 19H5V8H19M16 1V3H8V1H6V3H5C3.89 3 3 3.89 3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H19C19.5304 21 20.0391 20.7893 20.4142 20.4142C20.7893 20.0391 21 19.5304 21 19V5C21 3.89 20.1 3 19 3H18V1M17 12H12V17H17V12Z\"\n                                fill=\"currentColor\"/>\n                            </svg>\n                          }\n\n                          @let date = getPropertyValue(item, column);\n                          @if (date && date != 'null') {\n                            <span\n                              class=\"text-body2 text-nowrap\">{{ date | date:column.dateConfig?.dateFormat ?? 'MMM d, y, h:mm a' }}</span>\n                          }\n                        </div>\n                      }\n                      @case ('badge') {\n                        @let badgeProperty = getBadgeProperty(item, column);\n                        <div class=\"flex items-center\" [ngClass]=\"getFlexJustify(column)\">\n                          <app-status-badge [backgroundColorClass]=\"badgeProperty?.backgroundColorClass ?? null\"\n                                            [indicatorColor]=\"badgeProperty?.indicatorColorClass ?? null\"\n                                            [borderColorClass]=\"badgeProperty?.borderColorClass ?? null\"\n                                            [textColorClass]=\"badgeProperty?.textColorClass ?? null\"\n                                            [isUpperCase]=\"true\"\n                                            [status]=\"badgeProperty?.displayText ?? 'Unknown'\">\n                          </app-status-badge>\n                        </div>\n                      }\n                      @case ('custom') {\n                        @if (column.component) {\n                          <div class=\"flex items-center\">\n                            <app-dynamic-renderer\n                              [component]=\"column.component\"\n                              [rowData]=\"item\"\n                              [data]=\"column.customConfig?.data\"\n                              [rowPosition]=\"$index + 1\"\n                              [isLastRow]=\"$last\"\n                              (actionPerformed)=\"onRowActionPerformed($event)\">\n                            </app-dynamic-renderer>\n                          </div>\n                        }\n                      }\n                      @case ('actions') {\n\n                        <div class=\"flex items-center gap-3\" [ngClass]=\"getFlexJustify(column)\">\n                          @if (column.actionsConfig?.iconActions) {\n                            @for (iconAction of column.actionsConfig?.iconActions ?? []; track iconAction) {\n                              <div\n                                (click)=\"_onActionClicked(iconAction.actionKey, item, $event)\"\n                                class=\"flex items-center justify-center h-[36px] w-[36px] cursor-pointer rounded-full hover:bg-neutral-100\">\n                                <!--                                <app-svg-icon class=\"text-neutral-500\"-->\n                                <!--                                              [matTooltip]=\"iconAction.label\"-->\n                                <!--                                              matTooltipClass=\"mt-2\"-->\n                                <!--                                              [src]=\"iconAction.iconPath\"-->\n                                <!--                                              [size]=\"20\"></app-svg-icon>-->\n                                <app-svg-icon class=\"text-neutral-500\"\n                                              [src]=\"iconAction.iconPath\"\n                                              [size]=\"20\"></app-svg-icon>\n                              </div>\n                            }\n                          }\n                          @if (column.actionsConfig?.threeDotMenuActions) {\n                            <app-context-menu-button (onActionClicked)=\"_onActionClicked($event, item, null)\"\n                                              [actions]=\"getContextMenuActions(column.actionsConfig?.threeDotMenuActions ?? [])\"></app-context-menu-button>\n                          }\n\n                          @if (column.actionsConfig?.textMenuActions) {\n                            @for (textAction of column.actionsConfig?.textMenuActions ?? []; track textAction) {\n                              <app-text-button-small\n                                (click)=\"_onActionClicked(textAction.actionKey, item, $event)\">{{ textAction.label }}\n                              </app-text-button-small>\n                            }\n                          }\n\n                          @if (column.actionsConfig?.components) {\n                            <div class=\"flex items-center\">\n                              @for (component of (column.actionsConfig?.components ?? []); track $index) {\n                                <app-dynamic-renderer\n                                  [component]=\"component\"\n                                  [rowData]=\"item\"\n                                  [data]=\"column.customConfig?.data\"\n                                  [rowPosition]=\"$index + 1\"\n                                  [isLastRow]=\"$last\"\n                                  (actionPerformed)=\"onRowActionPerformed($event)\">\n                                </app-dynamic-renderer>\n                              }\n                            </div>\n                          }\n\n                        </div>\n\n                      }\n\n                    }\n\n                  </td>\n                }\n\n              }\n\n              @if (enableColumnsConfig()) {\n                <td\n                  class=\"px-1 py-3 border-b border-gray-100 w-min\">\n                </td>\n              }\n            </tr>\n\n            @if (expandableComponent()) {\n              @if (i == expandedRowIndex()) {\n                <tr class=\"transition-all duration-700\">\n                  <td colspan=\"100\">\n                    <div class=\"mx-4 my-4 p-4 bg-neutral-50 rounded-lg\">\n                      <app-dynamic-renderer\n                        [component]=\"expandableComponent()\"\n                        [rowData]=\"item\"\n                        (actionPerformed)=\"onCellActionPerformed($event)\">\n                      </app-dynamic-renderer>\n                    </div>\n\n                  </td>\n                </tr>\n              }\n            }\n\n          }\n\n        </tbody>\n      }\n\n      <tbody class=\"h-full\"></tbody>\n\n\n    </table>\n  </div>\n\n  <app-pagination\n    [pageSize]=\"pageSize()\"\n    [totalItems]=\"state().response()?.totalCount ?? 0\"\n    (pageChange)=\"onPageChange($event)\">\n  </app-pagination>\n</div>\n\n<ng-template cdkPortal>\n  <div\n    class=\"flex flex-col gap-3 px-2 py-2 bg-white rounded-md max-h-[400px] border border-neutral-200 shadow-2\">\n    <div class=\"flex flex-col overflow-y-scroll\">\n      @for (column of columnDefs(); track column; let index = $index) {\n        @if (column.type != 'actions') {\n          <div class=\"grow flex items-center min-w-[200px] px-1\">\n            @let isColumnVisible = column.visible || column.visible == undefined || false;\n            <app-checkbox [title]=\"column.title\" [ngModel]=\"isColumnVisible\"\n                          (valueChanged)=\"onColumnVisibleOrHide($event, column)\"></app-checkbox>\n          </div>\n        }\n      }\n    </div>\n\n    <span (click)=\"onSelectAllColumnClicked()\" class=\"px-4 text-overline text-info-500 cursor-pointer\">Select All</span>\n  </div>\n</ng-template>\n\n", styles: [""], dependencies: [{ kind: "component", type: PaginationComponent, selector: "app-pagination", inputs: ["totalItems", "pageSizeOptions", "pageSize"], outputs: ["pageChange"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "component", type: AppSvgIconComponent, selector: "app-svg-icon", inputs: ["src", "stretch", "size", "svgStyle"] }, { kind: "component", type: StatusBadgeComponent, selector: "app-status-badge", inputs: ["status", "backgroundColorClass", "indicatorColor", "textColorClass", "borderColorClass", "isUpperCase"] }, { kind: "directive", type: SortableTableDirective, selector: "[sortableTable]", outputs: ["sortChange"] }, { kind: "directive", type: TableResizableColumnsDirective, selector: "[appTableResizableColumns]", inputs: ["appTableResizableColumns"] }, { kind: "directive", type: CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }, { kind: "component", type: CheckboxComponent, selector: "app-checkbox", inputs: ["title"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: TextButtonSmall, selector: "app-text-button-small" }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ContextMenuButtonComponent, selector: "app-context-menu-button", inputs: ["actions", "positionPreference"], outputs: ["onActionClicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
@@ -2317,7 +3182,7 @@ class ListviewComponent {
         this.onActionPerformed.emit($event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ListviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: ListviewComponent, isStandalone: true, selector: "app-listview", inputs: { state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, component: { classPropertyName: "component", publicName: "component", isSignal: true, isRequired: true, transformFunction: null }, enableSearch: { classPropertyName: "enableSearch", publicName: "enableSearch", isSignal: true, isRequired: false, transformFunction: null }, enableSearchFullWidth: { classPropertyName: "enableSearchFullWidth", publicName: "enableSearchFullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onStateChanged: "onStateChanged", onActionPerformed: "onActionPerformed" }, ngImport: i0, template: "<div class=\"h-full flex flex-col gap-4\">\n\n  @if (enableSearch()) {\n    <app-text-input\n      title=\"Search...\"\n      [iconSrc]=\"'assets/icons/search.svg'\"\n      placeholder=\"Search...\"\n      type=\"search\"\n      [fullWidth]=\"enableSearchFullWidth()\"\n      (changeValue)=\"onSearchTextChanged($event)\">\n    </app-text-input>\n  }\n\n  @if (state().success() && state().items().length <= 0) {\n    <div class=\"flex flex-col justify-center items-center gap-8 px-6 py-8\">\n      <app-no-data-table></app-no-data-table>\n    </div>\n  }\n\n  @if (state().items().length > 0) {\n    <div class=\"flex flex-col overflow-auto\"\n         infiniteScroll\n         [infiniteScrollDistance]=\"2\"\n         [infiniteScrollThrottle]=\"50\"\n         (scrolled)=\"onScroll()\">\n      @for (item of state().items(); track $index) {\n        <app-dynamic-renderer\n          [component]=\"component()\"\n          [rowData]=\"item\"\n          [data]=\"data()\"\n          [rowPosition]=\"$index\"\n          [isLastRow]=\"$last\"\n          (actionPerformed)=\"onRowAction($event)\">\n        </app-dynamic-renderer>\n      }\n    </div>\n  }\n\n  <!--    Shimmer-->\n  @if (state().loading()) {\n    <div class=\"flex flex-col gap-6 py-4\">\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n      <app-shimmer type=\"multiline\"></app-shimmer>\n    </div>\n  }\n\n\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: TextInputComponent, selector: "app-text-input", inputs: ["appearance", "type", "viewType", "iconSrc", "actionIcon", "label", "fullWidth", "placeholder", "errorMessages", "showErrorSpace", "mask", "debounceSearchEnabled", "autoFocus"], outputs: ["changeValue", "actionIconClicked"] }, { kind: "component", type: DynamicRendererComponent, selector: "app-dynamic-renderer", inputs: ["component", "rowData", "data", "rowPosition", "isLastRow"], outputs: ["actionPerformed"] }, { kind: "component", type: ShimmerComponent, selector: "app-shimmer", inputs: ["type", "count"] }, { kind: "component", type: NoDataTableComponent, selector: "app-no-data-table", inputs: ["message"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ListviewComponent, decorators: [{
             type: Component,
@@ -5604,5 +6469,5 @@ function provideNglConfig(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipComponent, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
+export { AlertDialogComponent, AppErrorComponent, AppSvgIconComponent, BaseApiService, BaseControlValueAccessor, BaseControlValueAccessorV2, BaseControlValueAccessorV3, BaseInputComponent, BaseOverlayComponent, BaseTableComponent, BreadcrumbComponent, ButtonComponent, CheckboxComponent, ClickOutsideDirective, CloseButtonComponent, ColorConverterService, ColorFormats, ColorPickerComponent, ColorPickerDirective, ContextMenuButtonComponent, ContextMenuIconComponent, DataTableComponent, DateInputComponent, DatePickerComponent, DatePickerOverlayComponent, DateRangePickerComponent, DateUtils, DropdownComponent, DynamicRendererComponent, EnvBannerComponent, FORM_ERRORS, FileUploaderComponent, FormValidationUtils, HumanizeFormMessagesPipe, InputDateFormat, InvalidControlScrollContainerDirective, InvalidControlScrollDirective, InvalidTokenError, ListviewComponent, LoaderComponent, LoaderService, MultiSelectDropdownAppearance, MultiSelectDropdownComponent, MultiSelectionFieldComponent, NGL_CONFIG, NetworkImageComponent, NglService, NoDataComponent, NoDataTableComponent, NumberInputComponent, OverlayContextMenuComponent, OverlayService, OverlayWizardUtils, PaginationComponent, PaginationState, PhoneNumberInputComponent, RadioButtonComponent, RequestState, ResizableColumnDirective, ResponsiveHelperComponent, SharedConstants, ShimmerComponent, SingleItemPickerInputComponent, SingleSelectionFieldComponent, SortableTableDirective, SpinnerComponent, State, StatusBadgeComponent, SvgUrlIconComponent, SwitchComponent, TableCustomComponent, TableResizableColumnsDirective, TemplateResolverArrayUtil, TemplateResolverFormat, TextAreaInputComponent, TextInputComponent, TimePickerComponent, ToastComponent, ToastService, ToasterComponent, TooltipComponent, UnsavedAwareDirective, arrayToCSV, arrayToSeparator, arrayToSpaceSeparator, deepEqual, defaultErrors, getDynamicTypeStructure, isDynamicType, isValid, jsonEqual, jwtDecode, mmddyyyyDateValidatorAsync, onlyFutureDateValidator, onlyPastDateValidator, openLink, printInvalidFields, provideNglConfig, resolveTemplateWithObject, toSentenceCase };
 //# sourceMappingURL=vallift-ngl.mjs.map