coer-elements/fesm2022/coer-elements-components.mjs.map

Library for Angular projects

{"version":3,"file":"coer-elements-components.mjs","sources":["../../../projects/coer-elements/components/lib/coer-accordion/coer-accordion.component.ts","../../../projects/coer-elements/components/lib/coer-accordion/coer-accordion.component.html","../../../projects/coer-elements/components/lib/coer-button/coer-button.component.ts","../../../projects/coer-elements/components/lib/coer-button/coer-button.component.html","../../../projects/coer-elements/components/lib/coer-card/coer-card.component.ts","../../../projects/coer-elements/components/lib/coer-card/coer-card.component.html","../../../projects/coer-elements/components/lib/coer-checkbox/coer-checkbox.component.ts","../../../projects/coer-elements/components/lib/coer-checkbox/coer-checkbox.component.html","../../../projects/coer-elements/components/lib/coer-datebox/coer-datebox.component.ts","../../../projects/coer-elements/components/lib/coer-datebox/coer-datebox.component.html","../../../projects/coer-elements/components/lib/coer-modal/coer-modal.component.ts","../../../projects/coer-elements/components/lib/coer-modal/coer-modal.component.html","../../../projects/coer-elements/components/lib/coer-filebox/coer-filebox-image/coer-filebox-image.component.ts","../../../projects/coer-elements/components/lib/coer-filebox/coer-filebox-image/coer-filebox-image.component.html","../../../projects/coer-elements/components/lib/coer-filebox/coer-filebox.component.ts","../../../projects/coer-elements/components/lib/coer-filebox/coer-filebox.component.html","../../../projects/coer-elements/components/lib/coer-form/coer-form.component.ts","../../../projects/coer-elements/components/lib/coer-form/coer-form.component.html","../../../projects/coer-elements/components/lib/coer-grid/coer-grid.extension.ts","../../../projects/coer-elements/components/lib/coer-textbox/coer-textbox.component.ts","../../../projects/coer-elements/components/lib/coer-textbox/coer-textbox.component.html","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-header/coer-grid-header.component.ts","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-header/coer-grid-header.component.html","../../../projects/coer-elements/components/lib/coer-numberbox/coer-numberbox.component.ts","../../../projects/coer-elements/components/lib/coer-numberbox/coer-numberbox.component.html","../../../projects/coer-elements/components/lib/coer-selectbox/coer-selectbox.component.ts","../../../projects/coer-elements/components/lib/coer-selectbox/coer-selectbox.component.html","../../../projects/coer-elements/components/lib/coer-switch/coer-switch.component.ts","../../../projects/coer-elements/components/lib/coer-switch/coer-switch.component.html","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-cell/coer-grid-cell.component.ts","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-cell/coer-grid-cell.component.html","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-body/coer-grid-body.component.ts","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-body/coer-grid-body.component.html","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-footer/coer-grid-footer.component.ts","../../../projects/coer-elements/components/lib/coer-grid/coer-grid-footer/coer-grid-footer.component.html","../../../projects/coer-elements/components/lib/coer-grid/coer-grid.component.ts","../../../projects/coer-elements/components/lib/coer-grid/coer-grid.component.html","../../../projects/coer-elements/components/lib/coer-list/coer-list.component.ts","../../../projects/coer-elements/components/lib/coer-list/coer-list.component.html","../../../projects/coer-elements/components/lib/coer-sidenav/coer-menu-option/coer-menu-option.component.ts","../../../projects/coer-elements/components/lib/coer-sidenav/coer-menu-option/coer-menu-option.component.html","../../../projects/coer-elements/components/lib/coer-secretbox/coer-secretbox.component.ts","../../../projects/coer-elements/components/lib/coer-secretbox/coer-secretbox.component.html","../../../projects/coer-elements/components/lib/coer-page-title/coer-page-title.component.ts","../../../projects/coer-elements/components/lib/coer-page-title/coer-page-title.component.html","../../../projects/coer-elements/components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.ts","../../../projects/coer-elements/components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.html","../../../projects/coer-elements/components/lib/coer-sidenav/coer-sidenav.component.ts","../../../projects/coer-elements/components/lib/coer-sidenav/coer-sidenav.component.html","../../../projects/coer-elements/components/lib/coer-dropdown/coer-dropdown.component.ts","../../../projects/coer-elements/components/lib/coer-dropdown/coer-dropdown.component.html","../../../projects/coer-elements/components/lib/coer-tab/coer-tab.component.ts","../../../projects/coer-elements/components/lib/coer-tab/coer-tab.component.html","../../../projects/coer-elements/components/lib/coer-textarea/coer-textarea.component.ts","../../../projects/coer-elements/components/lib/coer-textarea/coer-textarea.component.html","../../../projects/coer-elements/components/lib/coer-toolbar/coer-toolbar.component.ts","../../../projects/coer-elements/components/lib/coer-toolbar/coer-toolbar.component.html","../../../projects/coer-elements/components/lib/components.module.ts","../../../projects/coer-elements/components/coer-elements-components.ts"],"sourcesContent":["import { AfterViewInit, Component, input, output, viewChild } from '@angular/core';\r\nimport { MatExpansionPanel } from '@angular/material/expansion';\r\nimport { Tools } from 'coer-elements/tools'\r\n\r\n@Component({\r\n    selector: 'coer-accordion',\r\n    templateUrl: './coer-accordion.component.html',\r\n    styleUrl: './coer-accordion.component.scss',\r\n    standalone: false\r\n})\r\nexport class CoerAccordion implements AfterViewInit {\r\n\r\n    //Elements\r\n    protected readonly _expansionPanel = viewChild<MatExpansionPanel>('coerAccordion');\r\n\r\n    //Variables\r\n    protected readonly _id: string = Tools.GetGuid('coer-accordion');\r\n    protected _htmlElement!: HTMLElement \r\n    protected _isDisabled: boolean = false;\r\n\r\n    //Inputs\r\n    public id           = input<string>('');\r\n    public title        = input<string>('');\r\n    public icon         = input<string>('');\r\n    public expanded     = input<boolean>(true); \r\n    public scrollOnOpen = input<boolean>(false); \r\n    public height       = input<string>(''); \r\n    public minHeight    = input<string>('0px'); \r\n\r\n    //Outputs\r\n    public onOpen  = output<void>();\r\n    public onClose = output<void>(); \r\n\r\n\r\n    //Generic Tools\r\n    protected _IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace;\r\n\r\n\r\n    //AfterViewInit\r\n    ngAfterViewInit() {\r\n        Tools.Sleep().then(() => {\r\n            this._htmlElement = document.getElementById(this._id)!;\r\n        });\r\n    }\r\n\r\n    \r\n    //getter\r\n    public get isExpanded(): boolean {\r\n        return Tools.IsNotNull(this._expansionPanel())\r\n            ? this._expansionPanel()!.expanded\r\n            : false;\r\n    }\r\n\r\n    \r\n    //getter\r\n    public get isCollapsed(): boolean {\r\n        return Tools.IsNotNull(this._expansionPanel())\r\n            ? !this._expansionPanel()!.expanded\r\n            : true;\r\n    }\r\n\r\n\r\n    //getter\r\n    public get isDisabled(): boolean {\r\n        return this._isDisabled;\r\n    }\r\n\r\n\r\n    /** */\r\n    public Open(): void {\r\n        if(Tools.IsNotNull(this._expansionPanel())) {\r\n            if(this.isCollapsed) {\r\n                this._expansionPanel()?.open();\r\n            }\r\n            \r\n            if(this.scrollOnOpen() && Tools.IsNotNull(this._htmlElement)) {\r\n                Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));\r\n            }\r\n\r\n            this.onOpen.emit();\r\n        }\r\n    }\r\n\r\n\r\n    /** */\r\n    public Close(): void {\r\n        if(Tools.IsNotNull(this._expansionPanel())) {\r\n            if(this.isExpanded) {\r\n                this._expansionPanel()?.close();\r\n            }\r\n\r\n            this.onClose.emit();\r\n        }\r\n    }  \r\n\r\n\r\n    /** */\r\n    public Enable(): void {\r\n        this._isDisabled = false;\r\n    }\r\n\r\n\r\n    /** */\r\n    public Disable(): void {\r\n        this._isDisabled = true;\r\n    }\r\n\r\n\r\n    /** */\r\n    public ScrollToAccordion(): void {\r\n        if(Tools.IsNotNull(this._expansionPanel())) {\r\n            Tools.Sleep().then(_ => this._htmlElement.scrollIntoView({ behavior: 'smooth' }));\r\n        }\r\n    } \r\n}","<mat-expansion-panel\r\n    [id]=\"_id\" \r\n    #coerAccordion \r\n    title=\"\" \r\n    class=\"coer-accordion\"\r\n    [disabled]=\"_isDisabled\" \r\n    [expanded]=\"expanded()\" \r\n    (opened)=\"Open()\" \r\n    (closed)=\"Close()\">\r\n    \r\n    <mat-expansion-panel-header>\r\n        <mat-panel-title>\r\n            @if(_IsNotOnlyWhiteSpace(icon())) {\r\n                <i [class]=\"icon()\"></i>\r\n            }\r\n            <span>{{ title() }}</span>\r\n        </mat-panel-title>\r\n    </mat-expansion-panel-header>\r\n\r\n    <div [ngClass]=\"{ 'collapsed': isCollapsed }\"\r\n        [ngStyle]=\"{\r\n            'height': height(),\r\n            'min-height': minHeight()\r\n        }\">\r\n        <ng-content></ng-content>\r\n    </div>\r\n</mat-expansion-panel>","import { Component, computed, input, AfterViewInit, output } from '@angular/core';\r\nimport { breakpointSIGNAL } from 'coer-elements/signals';\r\nimport { IButtonSize, IButtonType } from 'coer-elements/interfaces';\r\nimport { Strings, Tools } from 'coer-elements/tools';\r\n\r\n@Component({\r\n    selector: 'coer-button',\r\n    templateUrl: './coer-button.component.html',\r\n    styleUrl: './coer-button.component.scss',\r\n    standalone: false\r\n})\r\nexport class CoerButton implements AfterViewInit {  \r\n\r\n    //Variables\r\n    protected readonly _id: string = Tools.GetGuid('coer-button');\r\n    protected _innerButton!: HTMLElement;\r\n    protected _innerButtonIcon!: HTMLElement;\r\n\r\n    //Inputs \r\n    public id              = input<string>('');\r\n    public color           = input<'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'navigation' | 'information' | 'dark' | 'light'>('default');\r\n    public type            = input<'filled' | 'outline' | 'icon' | 'icon-outline' | 'icon-no-border'>('filled');\r\n    public typeBreakpoint  = input<IButtonType>({});\r\n    public icon            = input<string | null | undefined>('');\r\n    public iconPosition    = input<'left' | 'right'>('left');\r\n    public path            = input<string | (string | number)[]>([]); \r\n    public isLoading       = input<boolean>(false);\r\n    public isDisabled      = input<boolean>(false);\r\n    public isReadonly      = input<boolean>(false);\r\n    public isInvisible     = input<boolean>(false); \r\n    public isHidde         = input<boolean>(false); \r\n    public width           = input<string>('125px');\r\n    public widthBreakpoint = input<IButtonSize>({});\r\n    public minWidth        = input<string>('30px');\r\n    public maxWidth        = input<string>('100%');\r\n    public height          = input<string>('40px');\r\n    public minHeight       = input<string>('30px'); \r\n    public marginTop       = input<string>('0px');\r\n    public marginRight     = input<string>('0px');\r\n    public marginBottom    = input<string>('0px');\r\n    public marginLeft      = input<string>('0px'); \r\n    public tooltip         = input<string>('');\r\n    public tooltipPosition = input<'top' | 'right' | 'bottom' | 'left'>('left'); \r\n\r\n    //Outputs \r\n    public onClick = output<void>(); \r\n\r\n\r\n    //AfterViewInit\r\n    ngAfterViewInit() { \r\n        Tools.Sleep().then(() => {\r\n            this._innerButton = document.getElementById(`${this._id}-inner-button`)!;\r\n             \r\n            if(this._innerButton) {\r\n                this._innerButton.addEventListener('focus', () => {\r\n                    if (!this._isEnable()) this.Blur();\r\n                });\r\n            } \r\n\r\n            this._innerButtonIcon = document.getElementById(`${this._id}-inner-button-icon`)!;\r\n\r\n            if(this._innerButtonIcon) {\r\n                this._innerButtonIcon.addEventListener('focus', () => {\r\n                    if (!this._isEnable()) this.Blur();\r\n                });\r\n            }\r\n        });\r\n    } \r\n    \r\n    \r\n    //computed\r\n    protected _tooltip = computed<string>(() => {\r\n        return Tools.IsNotOnlyWhiteSpace(this.tooltip())\r\n            ? Strings.CleanUpBlanks(this.tooltip()) : '';\r\n    });\r\n\r\n\r\n    //computed\r\n    protected _showButton = computed<boolean>(() => {\r\n        return this._buttonBreakpointType() == 'filled' \r\n            || this._buttonBreakpointType() == 'outline'; \r\n    });\r\n\r\n\r\n    //computed\r\n    protected _showButtonIcon = computed<boolean>(() => {\r\n        return this._buttonBreakpointType() == 'icon' \r\n            || this._buttonBreakpointType() == 'icon-outline' \r\n            || this._buttonBreakpointType() == 'icon-no-border';\r\n    });\r\n\r\n\r\n    //computed\r\n    protected _buttonBreakpointType = computed<'filled' | 'outline' | 'icon' | 'icon-outline' | 'icon-no-border'>(() => {        \r\n        switch(breakpointSIGNAL()) {\r\n            case 'mv' : return this.typeBreakpoint()?.mv  || this.type();\r\n            case 'xs' : return this.typeBreakpoint()?.xs  || this.type(); \r\n            case 'sm' : return this.typeBreakpoint()?.sm  || this.type();  \r\n            case 'md' : return this.typeBreakpoint()?.md  || this.type();  \r\n            case 'lg' : return this.typeBreakpoint()?.lg  || this.type();  \r\n            case 'xl' : return this.typeBreakpoint()?.xl  || this.type(); \r\n            case 'xxl': return this.typeBreakpoint()?.xxl || this.type(); \r\n            default   : return this.type();\r\n        }  \r\n    });\r\n\r\n\r\n    //computed\r\n    protected _buttonBreakpointSizeWidth = computed<string>(() => {        \r\n        switch(breakpointSIGNAL()) {\r\n            case 'mv' : return this.widthBreakpoint()?.mv  || this.width();\r\n            case 'xs' : return this.widthBreakpoint()?.xs  || this.width(); \r\n            case 'sm' : return this.widthBreakpoint()?.sm  || this.width();  \r\n            case 'md' : return this.widthBreakpoint()?.md  || this.width();  \r\n            case 'lg' : return this.widthBreakpoint()?.lg  || this.width();  \r\n            case 'xl' : return this.widthBreakpoint()?.xl  || this.width(); \r\n            case 'xxl': return this.widthBreakpoint()?.xxl || this.width(); \r\n            default   : return this.width();\r\n        }  \r\n    });\r\n\r\n\r\n    //computed\r\n    protected _tooltipPosition = computed<'above' | 'right' | 'below' | 'left'>(() => {\r\n        switch(this.tooltipPosition()) {\r\n            case 'top'   : return 'above';\r\n            case 'right' : return 'right';\r\n            case 'bottom': return 'below';\r\n            default: return 'left'; \r\n        }         \r\n    });\r\n\r\n\r\n    //computed\r\n    protected _isEnable = computed<boolean>(() => {\r\n        return !this.isLoading() \r\n            && !this.isDisabled() \r\n            && !this.isInvisible() \r\n            && !this.isReadonly();\r\n    });\r\n\r\n\r\n    //computed\r\n    protected _icon = computed<string>(() => {\r\n        const icon = Tools.IsNotOnlyWhiteSpace(this.icon()) ? this.icon()! : '';\r\n\r\n        switch(icon) {\r\n            case 'new'     : return 'icon-plus';\r\n            case 'save'    : return 'icon-disk-floppy icon-fill';\r\n            case 'cancel'  : return 'icon-x';\r\n            case 'import'  : return 'icon-file-arrow-up icon-fill';\r\n            case 'export'  : return 'icon-file-arrow-down icon-fill';\r\n            case 'excel'   : return 'icon-file-xls icon-fill';\r\n            case 'delete'  : return 'icon-trash-can icon-fill';\r\n            case 'edit'    : return 'icon-pen icon-fill';\r\n            case 'go'      : return 'icon-box-arrow-right';\r\n            case 'back'    : return 'icon-box-arrow-left';\r\n            case 'pointer' : return 'icon-pointer icon-fill';\r\n        }\r\n\r\n        return ['icon', 'icon-outline', 'icon-no-border'].includes(this.type()) \r\n            && Tools.IsOnlyWhiteSpace(icon) ? 'icon-pointer icon-fill' : icon;   \r\n    });\r\n\r\n\r\n    //computed\r\n    protected _buttonType = computed<string>(() => {   \r\n        const readonly = ['icon', 'icon-outline', 'icon-no-border'].includes(this._buttonBreakpointType())\r\n            ? (this.isDisabled() || this.isLoading() ? 'readonly' : '')\r\n            : (this.isDisabled() ? 'readonly' : '');\r\n \r\n        return `\r\n            ${this.color()}-${['filled', 'icon'].includes(this._buttonBreakpointType()) ? 'filled' : 'outline'} \r\n            ${readonly} \r\n            ${this.isLoading() ? 'cursor-wait' : ''}\r\n            ${this._buttonBreakpointType() == 'icon-no-border' ? 'icon-no-border' : ''}\r\n        `.trim();  \r\n    });\r\n\r\n\r\n    /** */\r\n    protected _Click(): void {\r\n        if (this._isEnable()) {\r\n            this.onClick.emit();\r\n        }\r\n\r\n        this.Blur();\r\n    }\r\n\r\n\r\n    /** */\r\n    public Click(timeout: number = 0): void {\r\n        Tools.Sleep(timeout).then(() => {\r\n            if (this._isEnable()) this.onClick.emit();\r\n        });\r\n    }\r\n\r\n\r\n    /** */\r\n    public Focus(timeout: number = 0): void {\r\n        Tools.Sleep(timeout).then(() => {\r\n            if (this._isEnable()) {\r\n\r\n                if(this._showButton()) {\r\n                    this._innerButton?.focus();\r\n                }\r\n\r\n                else if(this._showButtonIcon()) {\r\n                    this._innerButtonIcon?.focus();\r\n                } \r\n            }\r\n        });\r\n    }\r\n\r\n\r\n    /** */\r\n    public Blur(timeout: number = 0): void {\r\n        Tools.Sleep(timeout).then(() => {\r\n            this._innerButton?.blur();\r\n            this._innerButtonIcon?.blur();\r\n        });\r\n    }\r\n}","<div [ngClass]=\"{ 'coer-button': true, 'display-contents': !isHidde() && !isReadonly(), 'display-none': isHidde() || isReadonly() }\">\r\n    <a  [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n        [matTooltip]=\"_tooltip()\"\r\n        [matTooltipPosition]=\"_tooltipPosition()\"\r\n        [matTooltipDisabled]=\"!_isEnable()\"\r\n        [matTooltipHideDelay]=\"0\"\r\n        [ngClass]=\"{ \r\n            'loading'  : isLoading(),\r\n            'invisible': isInvisible()\r\n        }\"\r\n        [ngStyle]=\"{  \r\n            'margin-top'   : marginTop(), \r\n            'margin-right' : marginRight(), \r\n            'margin-bottom': marginBottom(), \r\n            'margin-left'  : marginLeft(),\r\n            'width'        : _showButtonIcon() ? 'auto' :  _buttonBreakpointSizeWidth(),\r\n            'min-width'    : minWidth(),\r\n            'max-width'    : maxWidth(),  \r\n        }\"> \r\n         \r\n        <div [class]=\"_showButton() ? '' : 'display-none'\">\r\n            <button mat-button type=\"button\" \r\n                [id]=\"_id + '-inner-button'\"\r\n                (click)=\"_Click()\"\r\n                [class]=\"_buttonType()\"\r\n                [ngStyle]=\"{ \r\n                    'height'    : height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n\r\n                @if(!isLoading()) {\r\n                    <span class=\"slot\">\r\n                        @if(iconPosition() == 'left') {                         \r\n                            <i [class]=\"_icon()\"></i>                         \r\n                        }\r\n    \r\n                        <span [ngClass]=\"{ \r\n                            'ms-2': (iconPosition() == 'left'  && _icon().length > 0), \r\n                            'me-2': (iconPosition() == 'right' && _icon().length > 0) \r\n                            }\">\r\n                            <ng-content>Click</ng-content>\r\n                        </span>\r\n    \r\n                        @if(iconPosition() == 'right') {\r\n                            <i [class]=\"_icon()\"></i>\r\n                        }\r\n                    </span>\r\n                }\r\n\r\n                @else {\r\n                    <span class=\"slot animation-appear\">\r\n                        <span class=\"me-2\"> Loading </span>\r\n                        <i class=\"icon-circle-notch animation-spin\"></i>\r\n                    </span> \r\n                }\r\n            </button>\r\n        </div> \r\n\r\n            \r\n        <div [class]=\"_showButtonIcon() ? 'flex-middle-center' : 'display-none'\">\r\n            <button mat-icon-button\r\n                [id]=\"_id + '-inner-button-icon'\"\r\n                type=\"button\"\r\n                (click)=\"_Click()\"\r\n                [class]=\"_buttonType()\">\r\n                <i [class]=\"_icon()\"></i>\r\n            </button>\r\n        </div>\r\n    </a>\r\n</div> ","import { Component, input } from '@angular/core';\r\nimport { Tools } from 'coer-elements/tools'\r\n\r\n@Component({\r\n    selector: 'coer-card',\r\n    templateUrl: './coer-card.component.html', \r\n    standalone: false\r\n})\r\nexport class CoerCard {\r\n\r\n    //Generic Tools\r\n    protected IsNotOnlyWhiteSpace = Tools.IsNotOnlyWhiteSpace; \r\n\r\n    //Variables\r\n    protected _id: string = Tools.GetGuid('coer-accordion');\r\n    \r\n    //Inputs\r\n    public id    = input<string>('');\r\n    public icon  = input<string>('');\r\n    public name  = input<string>('');\r\n    public title = input<string>('');\r\n    public phone = input<string>(''); \r\n    public email = input<string>('');\r\n}","<figure class=\"coer-container width-min-content\">\r\n    <div class=\"flex-wrap gap-0px\">  \r\n        @if(IsNotOnlyWhiteSpace(name()) || IsNotOnlyWhiteSpace(title())) {\r\n            <div class=\"flex-basis-300px flex-grow-1 flex-middle-left\">\r\n                @if(IsNotOnlyWhiteSpace(icon())) {\r\n                    <i [class]=\"icon() + ' ' + 'font-size-39px'\"></i>\r\n                }\r\n\r\n                <div>\r\n                    @if(IsNotOnlyWhiteSpace(name())) {\r\n                        <p class=\"white-space-nowrap\"> {{ name() }} </p> \r\n                    }\r\n                    @if(title()) {\r\n                        <p class=\"white-space-nowrap\"> {{ title() }} </p>\r\n                    }\r\n                </div>\r\n            </div>\r\n        }\r\n\r\n        @if (IsNotOnlyWhiteSpace(phone()) || IsNotOnlyWhiteSpace(email())) {\r\n            <div class=\"flex-basis-100 padding-top-5px\"></div>\r\n        \r\n            <div class=\"flex-basis-100 padding-top-5px border-solid-top-2px\">\r\n                <p class=\"flex-middle-left gap-20px\">\r\n                    @if(IsNotOnlyWhiteSpace(phone())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-whatsapp\"></i>\r\n                            <span> {{ phone() }} </span>\r\n                        </span>\r\n                    }\r\n\r\n                    @if(IsNotOnlyWhiteSpace(email())) {\r\n                        <span class=\"flex-middle-left gap-5px\">\r\n                            <i class=\"coer-icon-envelope\"></i>\r\n                            <span> {{ email() }} </span>\r\n                        </span>\r\n                    }\r\n                </p>\r\n            </div> \r\n        }\r\n    </div> \r\n</figure>","import { AfterViewInit, Component, computed, effect, EffectRef, input, OnDestroy, output } from '@angular/core';\r\nimport { CONTROL_VALUE, ControlValue, Tools } from 'coer-elements/tools';\r\n\r\n@Component({\r\n    selector: 'coer-checkbox',\r\n    templateUrl: './coer-checkbox.component.html',\r\n    styleUrl: './coer-checkbox.component.scss',\r\n    providers: [CONTROL_VALUE(CoerCheckbox)],\r\n    standalone: false\r\n})\r\nexport class CoerCheckbox extends ControlValue implements AfterViewInit, OnDestroy {\r\n\r\n    //Variables\r\n    public override _value: boolean = false;\r\n    protected readonly _effectValue!: EffectRef;\r\n    protected readonly _id: string = Tools.GetGuid('coer-checkbox'); \r\n    protected _isLoading: boolean = true;\r\n\r\n    //Inputs\r\n    public id                = input<string>('');\r\n    public label             = input<string>('');\r\n    public labelPosition     = input<'before' | 'after'>('after');\r\n    public isLoading         = input<boolean>(false);\r\n    public isDisabled        = input<boolean>(false);\r\n    public isReadonly        = input<boolean>(false);\r\n    public isInvisible       = input<boolean>(false);\r\n    public ignoreDataBinding = input<boolean>(false);\r\n    public value             = input<boolean | null | undefined>(false);\r\n\r\n    //Outputs\r\n    public onChange = output<boolean>(); \r\n\r\n\r\n    //Constructor\r\n    constructor() {\r\n        super(); \r\n\r\n        this._effectValue = effect(() => {  \r\n            Tools.Sleep().then(() => {\r\n                if(Tools.IsNull(this._UpdateValue)) { \r\n                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value()! : false); \r\n                }\r\n            });\r\n        });\r\n    }\r\n\r\n\r\n    //AfterViewInit\r\n    ngAfterViewInit() {\r\n        Tools.Sleep().then(_ => this._isLoading = false);\r\n    }\r\n\r\n\r\n    //OnDestroy\r\n    ngOnDestroy() {\r\n        this._effectValue?.destroy();\r\n    }\r\n\r\n\r\n    //computed\r\n    protected _isEnable = computed<boolean>(() => {\r\n        return !this.isLoading() && !this.isDisabled() && !this.isInvisible() && !this.isReadonly();\r\n    });\r\n\r\n\r\n    //ControlValueAccessor\r\n    public override SetValue(value: boolean): void {\r\n        if(Tools.IsNotNull(value)) {\r\n            if(!this.ignoreDataBinding() && (typeof this._UpdateValue === 'function')) {\r\n                this._UpdateValue(value);\r\n            }\r\n\r\n            this._value = value;\r\n\r\n            if (!this._isLoading && this._isEnable()) {\r\n                this.onChange.emit(value);\r\n            }\r\n        }\r\n    }\r\n\r\n\r\n    //ControlValueAccessor\r\n    public override writeValue(value: boolean): void {\r\n        if(Tools.IsNotNull(value)) {\r\n            this._value = value;\r\n\r\n            if (!this._isLoading && this._isEnable()) {\r\n                this.onChange.emit(value);\r\n            }\r\n        }\r\n    }\r\n\r\n\r\n    /** */\r\n    public Check(): void {\r\n        if (!this._isLoading && this._isEnable()) {\r\n            this.SetValue(true);\r\n        }\r\n    }\r\n\r\n\r\n    /** */\r\n    public Uncheck(): void {\r\n        if (!this._isLoading && this._isEnable()) {\r\n            this.SetValue(false);\r\n        }\r\n    }\r\n}","<div [ngClass]=\"{ 'coer-checkbox': true, 'placeholder-glow': isLoading(), 'invisible': isInvisible() }\">\r\n    <div [id]=\"_id\" [ngClass]=\"{ 'placeholder': isLoading() }\">\r\n        <mat-checkbox\r\n            [ngModel]=\"_value\"\r\n            [indeterminate]=\"false\"\r\n            [labelPosition]=\"labelPosition()\"\r\n            [disabled]=\"!_isEnable()\"\r\n            (change)=\"this.SetValue($event.checked)\"\r\n        >{{ label() }}</mat-checkbox>\r\n    </div>\r\n</div>","import { Component, computed, input, AfterViewInit, output, signal, viewChild, EffectRef, effect, OnDestroy, Injectable } from '@angular/core';\r\nimport { CONTROL_VALUE, ControlValue, Dates, HTMLElements, Tools } from 'coer-elements/tools';\r\nimport { DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter, provideNativeDateAdapter } from '@angular/material/core';\r\nimport { MatDatepicker } from '@angular/material/datepicker';\r\nimport { IBoxButton } from 'coer-elements/interfaces'; \r\n\r\n@Injectable()\r\nclass DATE_ADAPTER extends NativeDateAdapter {\r\n    override format(date: Date): string { \r\n        return Dates.ToFormatDate(date); \r\n    }\r\n}\r\n\r\n@Component({\r\n    selector: 'coer-datebox',\r\n    templateUrl: './coer-datebox.component.html',\r\n    standalone: false,\r\n    providers: [   \r\n        CONTROL_VALUE(CoerDateBox),\r\n        provideNativeDateAdapter(),\r\n        { provide: DateAdapter, useClass: DATE_ADAPTER },\r\n        { \r\n            provide: MAT_DATE_FORMATS, \r\n            useValue: {\r\n                parse: {\r\n                    dateInput: 'dd-MM-yyyy',\r\n                },\r\n                display: {\r\n                    dateInput: 'dd-MM-yyyy',\r\n                    monthYearLabel: 'MMMM yyyy',\r\n                    dateA11yLabel: 'dd-MM-yyyy',\r\n                    monthYearA11yLabel: 'MMMM yyyy',\r\n                },\r\n            } \r\n        }, \r\n    ] \r\n})\r\nexport class CoerDateBox extends ControlValue implements AfterViewInit, OnDestroy { \r\n          \r\n    //Variables\r\n    public override _value: string | Date | null = null;\r\n    protected readonly _id: string = Tools.GetGuid('coer-datebox');\r\n    protected readonly _datepicker = viewChild<MatDatepicker<Date>>('datepicker');\r\n    protected readonly _isLoading = signal<boolean>(false);  \r\n    protected readonly _externalButton = signal<IBoxButton>({ show: false }); \r\n    protected readonly _effectExternalButton!: EffectRef;\r\n    protected readonly _effectValue!: EffectRef;\r\n    protected readonly _isOverButton = signal<boolean>(false);\r\n    protected readonly _isOverOption = signal<boolean>(false);\r\n    protected readonly _isOverMenu = signal<boolean>(false);\r\n    protected readonly _isOpen = signal<boolean>(false); \r\n    protected _pickerContent: HTMLElement | null = null;\r\n    protected _pickerButton: HTMLElement | null = null;\r\n    protected _input: HTMLElement | null = null; \r\n           \r\n    //Inputs\r\n    public id             = input<string>('')\r\n    public value          = input<string | Date | null | undefined>(null);    \r\n    public label          = input<string>('');    \r\n    public placeholder    = input<string>('');\r\n    public textPosition   = input<'left' | 'center' | 'right'>('left');     \r\n    public isWritable     = input<boolean>(false); \r\n    public isInvalid      = input<boolean>(false);\r\n    public isValid        = input<boolean>(false);\r\n    public externalButton = input<IBoxButton>({ show: false });\r\n    public isLoading      = input<boolean>(false);\r\n    public isDisabled     = input<boolean>(false);\r\n    public isReadonly     = input<boolean>(false);\r\n    public isInvisible    = input<boolean>(false);    \r\n    public width          = input<string>('100%');\r\n    public minWidth       = input<string>('190px');\r\n    public maxWidth       = input<string>('100%');   \r\n    public marginTop      = input<string>('0px');\r\n    public marginRight    = input<string>('0px');\r\n    public marginBottom   = input<string>('0px');\r\n    public marginLeft     = input<string>('0px');\r\n\r\n    //Outputs\r\n    public onOpen  = output<void>();\r\n    public onClose = output<void>(); \r\n    public onChangeValue = output<string | Date | null>(); \r\n    public onClickExternalButton = output<void>();\r\n\r\n    //Constructor\r\n    constructor() {\r\n        super();  \r\n        \r\n        this._effectValue = effect(() => {  \r\n            Tools.Sleep().then(() => {\r\n                if(Tools.IsNull(this._UpdateValue)) { \r\n                    this.SetValue(Tools.IsNotNull(this.value()) ? this.value()! as string : ''); \r\n                }\r\n            });\r\n        });\r\n\r\n        this._effectExternalButton = effect(() => {\r\n            this._externalButton.set(this.externalButton());\r\n        });\r\n    }\r\n\r\n\r\n    //AfterViewInit\r\n    ngAfterViewInit() {\r\n        Tools.Sleep().then(() => {\r\n            //pickerButton\r\n            this._pickerButton = HTMLElements.GetElement(`#${this._id}-coer-date-box button`);  \r\n            this._pickerButton?.addEventListener('mouseenter', () => this._isOverButton.set(true));\r\n            this._pickerButton?.addEventListener('mouseleave', () => this._isOverButton.set(false));  \r\n            \r\n            this._pickerButton?.addEventListener('click', (event) => {\r\n                event.stopPropagation();\r\n                event.preventDefault(); \r\n\r\n                if(this._isLoading()) return;\r\n                this._isLoading.set(true); \r\n\r\n                if(this._isOpen()) { \r\n                    if(this._isOverButton() || this._isOverOption()) {\r\n                        this._Close(); \r\n                    }\r\n                }\r\n\r\n                else {\r\n                    this._Open();\r\n                }\r\n\r\n                Tools.Sleep().then(_ => this._isLoading.set(false)); \r\n            });             \r\n\r\n            //container\r\n            const container = HTMLElements.GetElement(`#${this._id}-container`);              \r\n                         \r\n            container?.addEventListener('click', (event) => {\r\n                event.stopPropagation();\r\n                event.preventDefault();  \r\n                this._pickerButton?.click();\r\n            });\r\n\r\n            container?.addEventListener('mouseenter', () => this._isOverMenu.set(true));\r\n            container?.addEventListener('mouseleave', () => this._isOverMenu.set(false));\r\n              \r\n            //input\r\n            this._input = HTMLElements.GetElement(`#${this._id}`);  \r\n\r\n            this._input?.addEventListener('mousedown', (event) => {\r\n                event.stopPropagation();\r\n                event.preventDefault(); \r\n                this._pickerButton?.click();\r\n            }); \r\n\r\n            this._input?.addEventListener('focus', () => {               \r\n                if(!this._isOpen()) { \r\n                    this._input?.blur();\r\n                    Tools.Sleep().then(_ => {\r\n                        HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'actived-component');\r\n                        HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--active');\r\n                        HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--deactivating');\r\n                    }); \r\n                }\r\n            }); \r\n\r\n            //Document\r\n            document.addEventListener('click', () => {  \r\n                if(this._isOpen() && !this._isOverMenu()) this._Close(); \r\n            });\r\n        });\r\n    }\r\n\r\n\r\n    //OnDestroy\r\n    ngOnDestroy() {\r\n        this._effectValue?.destroy();\r\n        this._effectExternalButton?.destroy();\r\n        if(this._isOpen()) this._Close();\r\n    } \r\n\r\n\r\n    //computed\r\n    protected _floatLabel = computed<'auto' | 'always'>(() => {\r\n        return this.label() == '' ? 'always' : 'auto'\r\n    });\r\n\r\n\r\n    //computed\r\n    protected _paddingRight = computed(() => {\r\n        return this._isEnable() && (this.isInvalid() || this.isValid())\r\n            ? '15px' : '0px';\r\n    });\r\n\r\n\r\n    //computed\r\n    protected _isEnable = computed<boolean>(() => {\r\n        return !this.isDisabled() && !this.isLoading() && !this.isReadonly() && !this.isInvisible();\r\n    }); \r\n\r\n\r\n    //getter\r\n    protected get _showexternalButtonLeft(): boolean {\r\n        return this._externalButton().show\r\n            && Tools.IsNotNull(this._externalButton()?.position)     \r\n            && this._externalButton()?.position === 'left'\r\n            && !this.isLoading()  \r\n            && !this.isInvisible();\r\n    }\r\n\r\n\r\n    //getter\r\n    protected get _showexternalButtonRight(): boolean {\r\n        return  this._externalButton().show\r\n            && ((Tools.IsNull(this._externalButton()?.position) || this._externalButton()?.position === 'right'))\r\n            && !this.isLoading()\r\n            && !this.isInvisible();\r\n    }\r\n\r\n\r\n    //getter\r\n    protected get _externalButtonIcon(): string {\r\n        return Tools.IsNotOnlyWhiteSpace(this._externalButton()?.icon)\r\n            ? this._externalButton().icon! : 'pointer';\r\n    }\r\n\r\n\r\n    //getter\r\n    protected get _isDisabledExternalButton(): boolean {\r\n        return Tools.IsNotNull(this._externalButton()?.isDisabled)\r\n            ? this._externalButton().isDisabled! : false;\r\n    } \r\n\r\n\r\n    //getter\r\n    protected get _valueDate(): Date | null { \r\n        return typeof this._value === 'string' ? new Date(this._value) : this._value;\r\n    }\r\n\r\n\r\n    //ControlValueAccessor\r\n    public override SetValue(value: string | Date | null | undefined): void {           \r\n        this._value = Tools.IsNotOnlyWhiteSpace(value) && Dates.IsValidDate(value!) \r\n            ? Dates.ToFormatDB(value!) : null;     \r\n        \r\n        if(typeof this._UpdateValue === 'function') {\r\n            this._UpdateValue(this._value);\r\n            this.onChangeValue.emit(this._value);  \r\n        }\r\n    } \r\n\r\n\r\n    /** */ \r\n    protected Focus(open: boolean = true, delay: number = 0): void {\r\n        Tools.Sleep(delay).then(_ => {\r\n            if(open) this._Open();\r\n        });\r\n    } \r\n\r\n\r\n    /** */ \r\n    protected async _Open() {   \r\n        if(this._isEnable() && !this._isOpen()) {   \r\n            // if(componentContentSIGNAL().length > 0 && componentContentSIGNAL() != this._id) {\r\n            //     const container = HTMLElements.GetElement('.cdk-overlay-container'); \r\n            //     container?.replaceChildren();\r\n            //     await Tools.Sleep(500);\r\n            // }\r\n\r\n            this._datepicker()?.open(); \r\n            \r\n            await Tools.Sleep();\r\n            HTMLElements.AddClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'actived-component');  \r\n\r\n            await Tools.Sleep();\r\n            HTMLElements.AddClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--active'); \r\n            \r\n            await Tools.Sleep();\r\n            HTMLElements.AddClass(`#${this._id}-coer-date-box label.mdc-floating-label`, 'mdc-floating-label--float-above');\r\n            \r\n            this._pickerContent = HTMLElements.GetElement('mat-datepicker-content'); \r\n            this._pickerContent?.addEventListener('mouseenter', () => this._isOverMenu.set(true));\r\n            this._pickerContent?.addEventListener('mouseleave', () => this._isOverMenu.set(false));   \r\n            \r\n           \r\n            this._isOpen.set(true);  \r\n            this.onOpen.emit();             \r\n        } \r\n    }\r\n\r\n\r\n    /** */ \r\n    protected Blur(): void {\r\n        this._Close();\r\n    }\r\n\r\n\r\n    /** */ \r\n    protected async _Close() {        \r\n        if(this._isOpen()) {\r\n            this._pickerContent = null;\r\n            this._datepicker()?.close(); \r\n            \r\n            await Tools.Sleep();\r\n            this._input?.blur(); \r\n    \r\n            await Tools.Sleep();\r\n            HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'actived-component');  \r\n\r\n            await Tools.Sleep();\r\n            HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--active'); \r\n            \r\n            await Tools.Sleep();\r\n            HTMLElements.RemoveClass(`#${this._id}-coer-date-box div.mdc-line-ripple`, 'mdc-line-ripple--deactivating');\r\n\r\n            if(Tools.IsOnlyWhiteSpace(this._value)) {\r\n                await Tools.Sleep();\r\n                HTMLElements.RemoveClass(`#${this._id}-coer-date-box label.mdc-floating-label`, 'mdc-floating-label--float-above');\r\n            }\r\n            \r\n            if(this._isOpen()) this.onClose.emit();\r\n            this._isOpen.set(false); \r\n        }  \r\n    }  \r\n    \r\n\r\n    /** */ \r\n    public Unselect(): void {   \r\n        this.SetValue(null);\r\n        this._Close();\r\n    } \r\n\r\n    \r\n    /** */\r\n    protected _dateInput() {\r\n        this._isOverOption.set(true);\r\n        this._pickerButton?.click();\r\n        Tools.Sleep().then(_ => this._isOverOption.set(false));\r\n    }\r\n}","<div [id]=\"_id + '-coer-date-box'\" class=\"coer-form-field-component\">    \r\n    <div class=\"coer-form-field-content\" [ngStyle]=\"{ \r\n        width       : width(), \r\n        minWidth    : minWidth(), \r\n        maxWidth    : maxWidth(),\r\n        marginTop   : marginTop(),\r\n        marginRight : marginRight(),\r\n        marginBottom: marginBottom(),\r\n        marginLeft  : marginLeft()\r\n    }\">\r\n        \r\n        @if(_showexternalButtonLeft) {\r\n            <div class=\"external-button-container-left\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    \r\n        <mat-form-field  \r\n            [id]=\"_id + '-container'\"\r\n            [floatLabel]=\"_floatLabel()\"\r\n            [ngClass]=\"{\r\n                'width-100'   : true,\r\n                'readonly'    : isReadonly() && !isLoading(),\r\n                'display-none': isInvisible() || isLoading()\r\n            }\"\r\n            [style]=\"{  \r\n                'border-top-left-radius' : (_showexternalButtonLeft  ? '0px': '4px'),\r\n                'border-top-right-radius': (_showexternalButtonRight ? '0px': '4px'),\r\n            }\">\r\n    \r\n            <mat-label> {{ label() }} </mat-label>\r\n            \r\n            <input #coerTextBox matInput \r\n                [id]=\"_id\"\r\n                [placeholder]=\"placeholder()\"\r\n                [matDatepicker]=\"datepicker\" \r\n                [disabled]=\"!_isEnable()\"\r\n                [readonly]=\"!isWritable()\"\r\n                [value]=\"_valueDate\"\r\n                (dateChange)=\"SetValue(coerTextBox.value)\"\r\n                (dateInput)=\"_dateInput()\"\r\n                [style]=\"{ \r\n                    'margin-top'   : (_floatLabel() == 'auto') ? '15px' : '9px',\r\n                    'padding-right': _paddingRight(),\r\n                    'text-align'   : textPosition()\r\n                }\"> \r\n\r\n            <mat-datepicker #datepicker (closed)=\"_pickerButton?.click()\"></mat-datepicker>\r\n    \r\n            @if(!isLoading()) { \r\n                <mat-datepicker-toggle matSuffix [for]=\"datepicker\" [disabled]=\"!_isEnable()\">\r\n                    <mat-icon matDatepickerToggleIcon>\r\n                        <i class=\"icon-calendar-days icon-fill\"></i> \r\n                    </mat-icon>\r\n                </mat-datepicker-toggle>\r\n            } \r\n    \r\n            @if(isInvalid() || isValid()) {\r\n                <span ngClass=\"icon-container\">\r\n                    @if(isInvalid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-exclamation icon-fill\"></i>\r\n                    }\r\n        \r\n                    @else if(isValid() && !isDisabled() && !isLoading()) {\r\n                        <i class=\"icon-circle-check icon-fill\"></i>\r\n                    }\r\n                </span>\r\n            }\r\n        </mat-form-field> \r\n    \r\n        <!-- Loading || Invisible -->\r\n        @if(isLoading() || isInvisible()) {\r\n            <div [ngClass]=\"{ \r\n                'width-100': true,\r\n                'border-radius-top-left-5px': true,\r\n                'border-radius-top-right-5px': true,\r\n                'loading'   : isLoading(),\r\n                'invisible' : isInvisible() \r\n            }\"  \r\n            > {{ isInvisible() ? '' : _value }} </div>\r\n        }\r\n    \r\n        @if(_showexternalButtonRight) {\r\n            <div class=\"external-button-container-right\">\r\n                <coer-button\r\n                    type=\"icon-no-border\"\r\n                    color=\"dark\"\r\n                    [icon]=\"_externalButtonIcon\"  \r\n                    [isDisabled]=\"_isDisabledExternalButton\" \r\n                    (onClick)=\"_isEnable() ? onClickExternalButton.emit() : null\"\r\n                ></coer-button>\r\n            </div>\r\n        }\r\n    </div>\r\n</div>   ","import { AfterViewInit, Component, computed, contentChildren,  input, output, signal, WritableSignal } from '@angular/core';\r\nimport { ICoerRef, IScreenSize } from 'coer-elements/interfaces';\r\nimport { CoerRefDirective } from 'coer-elements/directives';\r\nimport { isModalOpenSIGNAL } from 'coer-elements/signals';\r\nimport { HTMLElements, Screen, Tools } from 'coer-elements/tools';\r\nimport { Modal } from 'bootstrap';\r\n\r\n\r\n@Component({\r\n    selector: 'coer-modal',\r\n    templateUrl: './coer-modal.component.html',\r\n    styleUrl: './coer-modal.component.scss',\r\n    standalone: false\r\n})\r\nexport class CoerModal implements AfterViewInit { \r\n\r\n    //Content \r\n    public contentRef = contentChildren<any>(CoerRefDirective);\r\n\r\n    //Variables\r\n    protected readonly _id: string = Tools.GetGuid('coer-modal');\r\n    protected readonly _isModalOpen: WritableSignal<boolean> = isModalOpenSIGNAL;\r\n    protected _windowWidth = signal<number>(Screen.WINDOW_WIDTH);\r\n    protected _isOpen: boolean = false;\r\n    protected _modal!: Modal;\r\n\r\n    //Inputs \r\n    public id               = input<string>('');\r\n    public title            = input<string>('');\r\n    public icon             = input<string>('');\r\n    public showCloseButton  = input<boolean>(true);\r\n    public width            = input<'small' | 'full' | 'auto'>('small');\r\n    public height           = input<string>('auto');\r\n    public maxHeight        = input<string>('');\r\n    public verticalPosition = input<'top' | 'middle' | 'bottom'>('middle');\r\n\r\n    //Outputs\r\n    public onOpen  = output<void>();\r\n    public onClose = output<void>();\r\n\r\n    //Generic Tools\r\n    protected IsNull    = Tools.IsNull;\r\n    protected IsNotNull = Tools.IsNotNull;\r\n        \r\n    //AfterViewInit\r\n    ngAfterViewInit() {\r\n        Tools.Sleep().then(() => {\r\n            this._modal = new Modal(document.getElementById(this._id)!);\r\n\r\n            Screen.Resize.subscribe((response: IScreenSize) => {\r\n                this._windowWidth.set(response.width);\r\n            }); \r\n        }); \r\n    }\r\n\r\n\r\n    //getter\r\n    public get isOpen(): boolean {\r\n        return this._isOpen;\r\n    }\r\n\r\n\r\n    //getter\r\n    public get isClose(): boolean {\r\n        return !this._isOpen;\r\n    }\r\n    \r\n\r\n    //computed\r\n    protected _width = computed<string>(() => {\r\n        switch(this.width()) {\r\n            case 'small': return '450px';\r\n            case 'full': return `${this._windowWidth() - 50}px`;\r\n            case 'auto': return 'fit-content';\r\n            default: return this.width();\r\n        }\r\n    });\r\n\r\n\r\n    //getter\r\n    protected _contentList = computed<ICoerRef[]>(() => { \r\n        return this.contentRef() as ICoerRef[];\r\n    });\r\n\r\n\r\n    //Computed\r\n    protected _header = computed<ICoerRef | null>(() => {\r\n        const header = this._contentList().find(x => x.coerRef() === 'header');\r\n        return Tools.IsNotNull(header) ? header! : null;\r\n    });\r\n\r\n\r\n    //Computed\r\n    protected _body = computed<ICoerRef | null>(() => {\r\n        const body = this._contentList().find(x => x.coerRef() === '' || x.coerRef() === 'body');\r\n        return Tools.IsNotNull(body) ? body! : null;\r\n    });\r\n\r\n\r\n    //Computed\r\n    protected _footer = computed<ICoerRef | null>(() => {\r\n        const footer = this._contentList().find(x => x.coerRef() === 'footer');\r\n        return Tools.IsNotNull(footer) ? footer! : null;\r\n    });\r\n\r\n\r\n    //Computed\r\n    protected _title = computed<string>(() => {\r\n        return Tools.IsNotNull(this._header()) && this._header()!.title().length > 0\r\n            ? this._header()!.title() : this.title();\r\n    });\r\n\r\n\r\n    //Computed\r\n    protected _icon = computed<string>(() => {\r\n        return Tools.IsNotNull(this._header()) && this._header()!.icon().length > 0\r\n            ? this._header()!.icon() : this.icon();\r\n    }); \r\n\r\n\r\n    /** */\r\n    public Open(): void {\r\n        this._modal?.show();\r\n\r\n        if(!this._isOpen) {\r\n            this._isOpen = true;\r\n            this._isModalOpen.set(true);\r\n            Tools.Sleep(1000).then(() => this.onOpen.emit());\r\n        }\r\n    }\r\n\r\n\r\n    /** */\r\n    public Close(): void {\r\n        this._modal?.hide();\r\n\r\n        if(this._isOpen) {\r\n            HTMLElements.GetElement(`#${this._id}-button-close`)?.blur(); \r\n\r\n            this._isOpen = false;\r\n            this._isModalOpen.set(false);\r\n            Tools.Sleep(1000).then(() => this.onClose.emit());\r\n        }\r\n    }\r\n}","<aside title='' [id]=\"_id\" class=\"modal fade\" data-bs-backdrop=\"static\" tabindex=\"-1\">\r\n    <div [ngClass]=\"{\r\n