coer-elements 0.0.10 → 0.0.12

package/fesm2022/coer-elements.mjs

@@ -1,10 +1,18 @@
 import * as i0 from '@angular/core';
-import { Component, NgModule, forwardRef } from '@angular/core';
+import { Component, signal, forwardRef, inject, Inject, input, EventEmitter, computed, Input, Output, NgModule } from '@angular/core';
+import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i2 from '@angular/router';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import * as bootstrap from 'bootstrap';
+import { Tooltip } from 'bootstrap';
 import Swal from 'sweetalert2';
+import moment from 'moment';
+import * as XLSX from 'xlsx';
+import { Observable } from 'rxjs';
 
 class CoerAlert {
     /** */
@@ -229,7 +237,813 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             args: [{ selector: 'coer-alert', template: "<aside class=\"toast-container coer-alert\">\r\n    <!-- Success -->\r\n    <div id=\"alert-success\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-success-icon\"></i>\r\n            <strong id=\"alert-success-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-success')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-success-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Error -->\r\n    <div id=\"alert-error\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-error-icon\"></i>\r\n            <strong id=\"alert-error-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-error')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-error-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Info -->\r\n    <div id=\"alert-info\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n       <div class=\"toast-header\">\r\n            <i id=\"alert-info-icon\"></i>\r\n            <strong id=\"alert-info-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-info')\" class=\"btn-close btn-close-white\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-info-message\"></pre>\r\n        </div>\r\n    </div>\r\n\r\n\r\n    <!-- Warning -->\r\n    <div id=\"alert-warning\" role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class=\"toast\">\r\n        <div class=\"toast-header\">\r\n            <i id=\"alert-warning-icon\"></i>\r\n            <strong id=\"alert-warning-title\"></strong>\r\n            <button type=\"button\" (click)=\"Close('alert-warning')\" class=\"btn-close\"></button>\r\n        </div>\r\n\r\n        <div class=\"toast-body\">\r\n            <pre id=\"alert-warning-message\"></pre>\r\n        </div>\r\n    </div>\r\n</aside>", styles: [".text-blue{color:#0d6efd!important}.text-blue-bold{color:#0d6efd!important;font-weight:700!important}.background-blue{background-color:#0d6efd!important}.background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}.border-blue{border-color:#0d6efd!important}.text-gray{color:#6c757d!important}.text-gray-bold{color:#6c757d!important;font-weight:700!important}.background-gray{background-color:#6c757d!important}.background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}.border-gray{border-color:#6c757d!important}.text-green{color:#198754!important}.text-green-bold{color:#198754!important;font-weight:700!important}.background-green{background-color:#198754!important}.background-border-green{background-color:#198754!important;border-color:#198754!important}.border-green{border-color:#198754!important}.text-yellow{color:#ffc107!important}.text-yellow-bold{color:#ffc107!important;font-weight:700!important}.background-yellow{background-color:#ffc107!important}.background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}.border-yellow{border-color:#ffc107!important}.text-red{color:#dc3545!important}.text-red-bold{color:#dc3545!important;font-weight:700!important}.background-red{background-color:#dc3545!important}.background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}.border-red{border-color:#dc3545!important}.text-white{color:#f5f5f5!important}.text-white-bold{color:#f5f5f5!important;font-weight:700!important}.background-white{background-color:#f5f5f5!important}.background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}.border-white{border-color:#f5f5f5!important}.text-black{color:#252525!important}.text-black-bold{color:#252525!important;font-weight:700!important}.background-black{background-color:#252525!important}.background-border-black{background-color:#252525!important;border-color:#252525!important}.border-black{border-color:#252525!important}.text-orange{color:#fd6031!important}.text-orange-bold{color:#fd6031!important;font-weight:700!important}.background-orange{background-color:#fd6031!important}.background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}.border-orange{border-color:#fd6031!important}aside.toast-container{position:fixed;bottom:0;right:0;padding:15px!important;z-index:2000!important}aside.toast-container i,aside.toast-container svg{display:flex;align-items:center}aside.toast-container strong{margin:0 auto 0 5px}aside.toast-container div.toast,aside.toast-container div.toast-header{border-top-left-radius:10px;border-top-right-radius:10px;color:#f5f5f5}aside.toast-container div.toast,aside.toast-container div.toast-body{border-bottom-left-radius:10px;border-bottom-right-radius:10px;color:#f5f5f5}aside.toast-container div.toast-body{min-height:36px}aside.toast-container pre{font-family:Roboto,RobotoFallback,Noto Kufi Arabic,Helvetica,Arial,sans-serif;white-space:pre-wrap;font-size:medium}aside.toast-container button{margin:0 2px!important;width:10px!important;height:10px!important;box-shadow:none!important;outline:none!important;border:none!important}aside.toast-container div#alert-success div.toast-header,aside.toast-container div#alert-success div.toast-body{background-color:#198754}aside.toast-container div#alert-info div.toast-header,aside.toast-container div#alert-info div.toast-body{background-color:#0d6efd}aside.toast-container div#alert-error div.toast-header,aside.toast-container div#alert-error div.toast-body{background-color:#dc3545}aside.toast-container div#alert-warning div.toast-header,aside.toast-container div#alert-warning div.toast-body{background-color:#ffc107;border-color:#252525;color:#252525}aside.toast-container div#alert-success:hover,aside.toast-container div#alert-info:hover,aside.toast-container div#alert-error:hover,aside.toast-container div#alert-warning:hover{transform:scale(1.01);box-shadow:2px 2px 10px #789;cursor:default}button.sweet-alert-button{width:100px!important;height:40px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 5px!important;outline:none!important;border:none!important;box-shadow:none!important}aside.toast-container>*{border:none!important;z-index:2000!important;margin:15px 0 0!important}\n"] }]
         }] });
 
-//import { CoerButton } from './coer-button/coer-button.component';
+const reference_signal = signal({});
+const Tools = {
+    /** Generate a Guid */
+    GetGuid: (seed = 'coer-system') => {
+        let time = new Date().getTime();
+        seed = seed.toString().trim();
+        return seed + `-xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx`.replace(/[xy]/g, (c) => {
+            const random = (time + Math.random() * 16) % 16 | 0;
+            time = Math.floor(time / 16);
+            return (c == 'x' ? random : (random & 0x3 | 0x8)).toString(16);
+        });
+    },
+    /** Returns true if the value is null or undefined, false otherwise */
+    IsNull: (value) => {
+        if (value === undefined)
+            return true;
+        if (value === null)
+            return true;
+        return false;
+    },
+    /** Returns true if the value is not null or undefined, false otherwise */
+    IsNotNull: (value) => {
+        if (value === undefined)
+            return false;
+        if (value === null)
+            return false;
+        return true;
+    },
+    /** Returns true if the value is null or undefined or contains only whitespace, false otherwise */
+    IsOnlyWhiteSpace: (value) => {
+        if (value === undefined)
+            return true;
+        if (value === null)
+            return true;
+        if (value.toString().trim() === '')
+            return true;
+        return false;
+    },
+    /** Break reference of a object or array */
+    BreakReference: (object) => {
+        if (object === undefined)
+            return undefined;
+        if (object === null)
+            return null;
+        const OBJECT = JSON.parse(JSON.stringify(object));
+        return (Array.isArray(OBJECT)) ? [...OBJECT] : { ...OBJECT };
+    },
+    /** Clean extra whitespaces */
+    CleanUpBlanks: (text) => {
+        if (Tools.IsNull(text))
+            return '';
+        let worlds = String(text).split(' ');
+        worlds = worlds.filter(x => x.length > 0);
+        return worlds.join(' ');
+    },
+    /** Get properties of an object */
+    GetObjectProperties: (obj) => {
+        const properties = [];
+        if (Tools.IsNull(obj))
+            return properties;
+        for (const property in obj)
+            properties.push(String(property));
+        return properties;
+    },
+    /**
+     * Set an index and merge more arrays of the same type
+     * */
+    SetIndex: (array, ...args) => {
+        let index = 0;
+        for (const arg of args) {
+            array = Tools.BreakReference(array).concat(Tools.BreakReference(arg));
+        }
+        return Tools.BreakReference(array).map(item => Object.assign({ index: index++ }, item));
+    },
+    /** Set First Char To Lower */
+    FirstCharToLower: (text) => {
+        if (Tools.IsNull(text))
+            return '';
+        const textArray = [];
+        for (let i = 0; i < text.length; i++) {
+            if (i === 0)
+                textArray.push(text[i].toLowerCase());
+            else
+                textArray.push(text[i]);
+        }
+        return textArray.join('');
+    },
+    /** Set First Char To Upper */
+    FirstCharToUpper: (text) => {
+        if (Tools.IsNull(text))
+            return '';
+        const textArray = [];
+        for (let i = 0; i < text.length; i++) {
+            if (i === 0)
+                textArray.push(text[i].toUpperCase());
+            else
+                textArray.push(text[i]);
+        }
+        return textArray.join('');
+    },
+    /** Sort an array in ascending order by property */
+    SortBy: (array, property, propertyType = 'string') => {
+        switch (propertyType) {
+            case 'string': {
+                return array.sort((x, y) => {
+                    if (String(x[property]).toUpperCase().trim() < String(y[property]).toUpperCase().trim())
+                        return -1;
+                    else if (String(x[property]).toUpperCase().trim() > String(y[property]).toUpperCase().trim())
+                        return 1;
+                    else
+                        return 0;
+                });
+            }
+            case 'number': {
+                return array.sort((x, y) => Number(x[property] - Number(y[property])));
+            }
+        }
+    },
+    /** Sort an array in descending order by property */
+    SortByDesc: (array, property, propertyType = 'string') => {
+        switch (propertyType) {
+            case 'string': {
+                return array.sort((x, y) => {
+                    if (String(x[property]).toUpperCase().trim() < String(y[property]).toUpperCase().trim())
+                        return 1;
+                    else if (String(x[property]).toUpperCase().trim() > String(y[property]).toUpperCase().trim())
+                        return -1;
+                    else
+                        return 0;
+                });
+            }
+            case 'number': {
+                return array.sort((x, y) => Number(Number(y[property])) - x[property]);
+            }
+        }
+    },
+    /** Return a string with forman numeric */
+    GetNumericFormat: (value, decimals = 0) => {
+        if (value == undefined
+            || value == null
+            || value.toString().trim() == ''
+            || isNaN(Number(value))) {
+            return '0';
+        }
+        let valueInteger = '';
+        let valueDecimal = '';
+        value = value.toString().replaceAll(' ', '');
+        if (value.includes('.') || (decimals > 0)) {
+            valueInteger = value.includes('.') ? value.split('.')[0] : value;
+            if (decimals > 0) {
+                const PADDING = decimals - valueDecimal.length;
+                valueDecimal = value.includes('.') ? value.split('.')[1] : '';
+                for (let i = 0; i < PADDING; i++)
+                    valueDecimal += '0';
+                valueDecimal = valueDecimal.substring(0, decimals);
+                valueDecimal = `.${valueDecimal}`;
+            }
+        }
+        else {
+            valueInteger = value;
+        }
+        let counter = 0;
+        const VALUE_INTEGER_ARRAY = [];
+        for (const char of valueInteger.split('').reverse()) {
+            if (counter == 3) {
+                VALUE_INTEGER_ARRAY.push(',');
+                counter = 0;
+            }
+            VALUE_INTEGER_ARRAY.push(char);
+            ++counter;
+        }
+        valueInteger = VALUE_INTEGER_ARRAY.reverse().join('');
+        return `${valueInteger}${valueDecimal}`;
+    },
+    /** Wait the time indicated */
+    Sleep: (milliseconds = 0, reference = null) => {
+        if (Tools.IsNull(reference)) {
+            return new Promise(Resolve => setTimeout(Resolve, milliseconds));
+        }
+        else
+            return new Promise(Resolve => {
+                reference = reference.replaceAll(' ', '_').toLowerCase();
+                if (reference_signal().hasOwnProperty(reference)) {
+                    clearInterval(reference_signal()[reference]);
+                }
+                reference_signal.set(Object.assign(reference_signal(), {
+                    [reference]: setTimeout(() => {
+                        Resolve();
+                        clearInterval(reference_signal()[reference]);
+                        const _reference = { ...reference_signal() };
+                        delete _reference[reference];
+                        reference_signal.set({ ..._reference });
+                    }, milliseconds)
+                }));
+            });
+    }
+};
+
+class Breadcrumbs {
+    static { this.storage = 'COER-System'; }
+    /** */
+    static Add(page, path) {
+        const breadcrumbs = this.Get();
+        const paths = breadcrumbs.map(item => item.path);
+        if (!paths.includes(path)) {
+            breadcrumbs.push({ page, path });
+            this.Save(breadcrumbs);
+        }
+    }
+    /** */
+    static Get() {
+        let storage = sessionStorage.getItem(this.storage);
+        if (storage) {
+            storage = JSON.parse(storage);
+            if (storage.hasOwnProperty('breadcrumbs')) {
+                return Tools.BreakReference(storage.breadcrumbs);
+            }
+        }
+        return [];
+    }
+    /** */
+    static GetFirst() {
+        const breadcrumbs = this.Get();
+        return (breadcrumbs.length > 0) ? breadcrumbs.shift() : null;
+    }
+    /** */
+    static Save(breadcrumbs) {
+        let storage = sessionStorage.getItem(this.storage);
+        if (storage)
+            storage = JSON.parse(storage);
+        storage = Object.assign({}, storage, { breadcrumbs });
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+    /** */
+    static Remove(path) {
+        let breadcrumbs = this.Get();
+        const index = breadcrumbs.findIndex(x => x.path.toLowerCase().trim() === path.toLowerCase().trim());
+        if (index >= 0) {
+            breadcrumbs = Tools.BreakReference(breadcrumbs).splice(0, index + 1);
+            this.Save(breadcrumbs);
+        }
+    }
+    /** */
+    static SetLast(page, path) {
+        const breadcrumbs = this.Get();
+        if (breadcrumbs.length > 0) {
+            breadcrumbs[breadcrumbs.length - 1] = { page, path };
+            this.Save(breadcrumbs);
+        }
+    }
+    /** */
+    static RemoveLast() {
+        const breadcrumbs = this.Get();
+        if (breadcrumbs.length > 0) {
+            breadcrumbs.pop();
+            this.Save(breadcrumbs);
+        }
+    }
+}
+
+const CONTROL_VALUE = (component) => {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(() => component),
+        multi: true
+    };
+};
+class ControlValue {
+    constructor() {
+        this._isTouched = false;
+    }
+    get isTouched() {
+        return this._isTouched;
+    }
+    /** */
+    SetValue(value) {
+        if (typeof this._UpdateValue === 'function') {
+            this._UpdateValue(value);
+        }
+        this._value = value;
+    }
+    /** */
+    SetTouched(isTouched) {
+        if (typeof this._IsTouched === 'function') {
+            this._IsTouched(isTouched);
+        }
+        this._isTouched = isTouched;
+    }
+    /** */
+    writeValue(value) {
+        this._value = value;
+    }
+    /** */
+    registerOnChange(callback) {
+        this._UpdateValue = callback;
+    }
+    /** */
+    registerOnTouched(callback) {
+        this._IsTouched = callback;
+    }
+    /** */
+    setDisabledState(isDisabled) { }
+}
+
+class DateTime {
+    /** Get UTC Offset */
+    static GetOffset() {
+        return moment().utcOffset();
+    }
+    /** Convert UTC Date to Local Zone */
+    static ToLocalZone(utcDate) {
+        return moment(utcDate).add(DateTime.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
+    }
+    /** Convert Local Zone Date to UTC */
+    static ToUTC(utcDate) {
+        return moment(utcDate).subtract(DateTime.GetOffset(), 'minutes').format('YYYY-MM-DD HH:mm:ss');
+    }
+    /** DD MMM YYYY */
+    static GetDateFormat(date) {
+        if ((typeof date === 'string'))
+            date = date.replaceAll('/', '-');
+        return moment(date).parseZone().local(true).format('DD MMM YYYY');
+    }
+}
+
+class Files {
+    static { this.EXCEL_EXTENSIONS = ['xls', 'xlsx', 'csv']; }
+    /** Get Extension File */
+    static GetExtension(file) {
+        const fileName = file.name;
+        if (fileName.includes('.')) {
+            let worlds = fileName.split('.');
+            if (worlds.length > 0) {
+                let extension = worlds.pop();
+                extension = extension.trim().toLowerCase();
+                if (extension.length > 0)
+                    return extension;
+            }
+        }
+        return null;
+    }
+    /** Is Excel File */
+    static IsExcel(file) {
+        const EXTENSION = Files.GetExtension(file);
+        return Tools.IsNotNull(EXTENSION)
+            ? this.EXCEL_EXTENSIONS.includes(EXTENSION)
+            : false;
+    }
+    /** Read excel file */
+    static ReadExcel(file) {
+        return new Promise(Resolve => {
+            let columns = [];
+            let rows = [];
+            const reader = new FileReader();
+            reader.readAsArrayBuffer(file);
+            reader.onload = () => {
+                const dataBytes = new Uint8Array(reader.result);
+                if (dataBytes) {
+                    const workbook = XLSX.read(dataBytes, {});
+                    const sheet = workbook.Sheets[workbook.SheetNames[0]];
+                    let dataSheet = XLSX.utils.sheet_to_json(sheet, {
+                        header: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
+                    });
+                    //Get Headers
+                    for (const column in dataSheet[0]) {
+                        columns.push(Tools.FirstCharToLower(String(dataSheet[0][column]).replaceAll(' ', '')));
+                    }
+                    //Get Rows
+                    rows = XLSX.utils.sheet_to_json(sheet, { header: columns });
+                    rows.shift();
+                    rows = rows.map(row => {
+                        const item = Tools.BreakReference(row);
+                        delete item['__rowNum__'];
+                        return item;
+                    });
+                }
+                Resolve({ columns, rows });
+            };
+            reader.onerror = () => { Resolve({ columns, rows }); };
+        });
+    }
+    /** Export to excel file */
+    static ExportExcel(data, fileName = 'coer_report', sheetName = 'Sheet1') {
+        sheetName = Tools.CleanUpBlanks(sheetName);
+        fileName = Tools.CleanUpBlanks(fileName);
+        if (fileName.endsWith('.xls') || fileName.endsWith('.xlsx') || fileName.endsWith('.csv')) {
+            if (fileName.includes('.xls')) {
+                fileName = fileName.replaceAll('.xls', '.xlsx');
+            }
+            if (fileName.includes('.csv')) {
+                fileName = fileName.replaceAll('.csv', '.xlsx');
+            }
+        }
+        else {
+            fileName += '.xlsx';
+        }
+        const WORK_SHEET = XLSX.utils.json_to_sheet(data);
+        const WORK_BOOK = XLSX.utils.book_new();
+        XLSX.utils.book_append_sheet(WORK_BOOK, WORK_SHEET, sheetName);
+        XLSX.writeFile(WORK_BOOK, fileName);
+    }
+    /** Convert file to string base64 */
+    static ConvertToBase64(file) {
+        return new Promise(Resolve => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                Resolve(reader.result?.toString() || '');
+            };
+            reader.onerror = () => Resolve('');
+        });
+    }
+}
+
+class Source {
+    static { this.storage = 'COER-System'; }
+    /** */
+    static Set(page) {
+        const ROUTER = inject(Router);
+        let path = ROUTER.url;
+        if (path.includes('?'))
+            path = path.split('?')[0];
+        Breadcrumbs.Add(page, path);
+        const breadcrumbs = Breadcrumbs.Get();
+        if (breadcrumbs.length >= 2) {
+            breadcrumbs.pop();
+            const breadcrumb = breadcrumbs.pop();
+            this.Save({ page: breadcrumb.page, path: breadcrumb.path });
+        }
+        else
+            this.Save(null);
+    }
+    /** */
+    static Save(source) {
+        let storage = sessionStorage.getItem(this.storage);
+        if (storage)
+            storage = JSON.parse(storage);
+        storage = Object.assign({}, storage, { source });
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+    /** */
+    static Get() {
+        let storage = sessionStorage.getItem(this.storage);
+        if (storage) {
+            storage = JSON.parse(storage);
+            if (storage.hasOwnProperty('source')) {
+                return storage.source;
+            }
+        }
+        return null;
+    }
+    /** */
+    static GetRoot() {
+        const breadcrumbs = Breadcrumbs.Get();
+        return (breadcrumbs.length > 0) ? breadcrumbs.shift() : null;
+    }
+    /** */
+    static SetPageResponse(pageResponse) {
+        let storage = sessionStorage.getItem(this.storage);
+        storage = JSON.parse(storage);
+        storage = Object.assign({}, storage, { pageResponse });
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+    /** */
+    static GetPageResponse() {
+        let storage = sessionStorage.getItem(this.storage);
+        if (storage) {
+            storage = JSON.parse(storage);
+            if (storage.hasOwnProperty('pageResponse')) {
+                return Tools.BreakReference(storage.pageResponse);
+            }
+        }
+        return null;
+    }
+    /** */
+    static ClearPageResponse() {
+        let storage = sessionStorage.getItem(this.storage);
+        storage = JSON.parse(storage);
+        if (storage.hasOwnProperty('pageResponse')) {
+            delete storage.pageResponse;
+        }
+        storage = Object.assign({}, storage);
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    }
+    /** */
+    static Reset() {
+        sessionStorage.removeItem(this.storage);
+    }
+}
+
+class Page {
+    constructor(page) {
+        //Injection
+        this.alert = inject(CoerAlert);
+        this.router = inject(Router);
+        this.activatedRoute = inject(ActivatedRoute);
+        /** */
+        this.isUpdate = false;
+        /** */
+        this.isLoading = false;
+        /** */
+        this.isReadyPage = false;
+        /** */
+        this.enableAnimations = false;
+        /** */
+        this.breadcrumbs = [];
+        /** */
+        this.pageResponse = null;
+        /** */
+        this.goBack = { show: false };
+        //Private Variables
+        this._page = '';
+        this._source = null;
+        this._preventDestroy = false;
+        /** */
+        this.GoBack = (path) => (() => {
+            if (path)
+                Breadcrumbs.Remove(path);
+            else
+                Breadcrumbs.RemoveLast();
+        });
+        this.SetPageName(page);
+        this.SetSource();
+        this.GetSource();
+        this.GetNavigation();
+        this.SetGoBack();
+        this.GetPageResponse();
+    }
+    ngAfterViewInit() {
+        this.routeParams = this.activatedRoute.snapshot.params;
+        this.queryParams = this.activatedRoute.snapshot.queryParams;
+        setTimeout(() => {
+            this.isReadyPage = true;
+            this.RunPage();
+            setTimeout(() => { this.enableAnimations = true; }, 1000);
+        });
+    }
+    ngOnDestroy() {
+        if (!this._preventDestroy)
+            Source.ClearPageResponse();
+    }
+    /** Main method. Starts after ngAfterViewInit() */
+    RunPage() { }
+    ;
+    /** Rename the last breadcrumb and update the url id */
+    SetPageName(name, id = null) {
+        this._page = name;
+        let path = this.router.url;
+        if (path.includes('?'))
+            path = path.split('?')[0];
+        if (id) {
+            const PATH_ARRAY = path.split('/');
+            const PATH_ID = Tools.BreakReference(PATH_ARRAY).pop();
+            if (PATH_ID) {
+                PATH_ARRAY[PATH_ARRAY.length - 1] = String(id);
+                path = PATH_ARRAY.join('/');
+            }
+        }
+        if (this.breadcrumbs.length > 0) {
+            this.breadcrumbs[this.breadcrumbs.length - 1].page = name;
+            this.breadcrumbs[this.breadcrumbs.length - 1].path = path;
+            Breadcrumbs.SetLast(name, path);
+        }
+        this.router.navigateByUrl(path);
+    }
+    /** */
+    SetSource() {
+        Source.Set(this._page);
+    }
+    /** */
+    GetSource() {
+        this._source = Source.Get();
+    }
+    /** */
+    GetPageResponse() {
+        this.pageResponse = Source.GetPageResponse();
+    }
+    /** */
+    GetNavigation() {
+        if (this._source) {
+            this.breadcrumbs = Breadcrumbs.Get().map(item => Object.assign({
+                page: item.page,
+                path: item.path,
+                click: this.GoBack(item.path)
+            }));
+        }
+        else
+            this.breadcrumbs = [{ page: this._page }];
+    }
+    /** */
+    SetGoBack() {
+        if (this._source) {
+            this.goBack = {
+                show: true,
+                path: this._source.path,
+                click: this.GoBack()
+            };
+        }
+    }
+    /** Navigate to previous page */
+    GoToSource(pageResponse = null) {
+        if (this._source) {
+            Breadcrumbs.RemoveLast();
+            this.SetPageResponse(pageResponse);
+            Tools.Sleep().then(_ => this.router.navigateByUrl(this._source.path));
+        }
+    }
+    ;
+    /** */
+    SetPageResponse(pageResponse = null) {
+        if (Tools.IsNotNull(pageResponse)) {
+            this._preventDestroy = true;
+            Source.SetPageResponse(pageResponse);
+        }
+    }
+    ;
+    /** */
+    ReloadPage() {
+        Breadcrumbs.RemoveLast();
+        setTimeout(() => window.location.reload());
+    }
+    /** */
+    Log(value, log = null) {
+        if (Tools.IsNotNull(log))
+            console.log({ log, value });
+        else
+            console.log(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Page, deps: [{ token: String }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: Page, selector: "ng-component", ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: Page, decorators: [{
+            type: Component,
+            args: [{ template: '' }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [String]
+                }] }] });
+
+class Screen {
+    static get WINDOW_WIDTH() {
+        return window.innerWidth;
+    }
+    static get WINDOW_HEIGHT() {
+        return window.innerHeight;
+    }
+    static get DEVICE_WIDTH() {
+        return window.screen.width;
+    }
+    static get DEVICE_HEIGHT() {
+        return window.screen.height;
+    }
+    static get BREAKPOINT() {
+        if (window.innerWidth < 576)
+            return 'xs';
+        else if (window.innerWidth >= 576 && window.innerWidth < 768)
+            return 'sm';
+        else if (window.innerWidth >= 768 && window.innerWidth < 992)
+            return 'md';
+        else if (window.innerWidth >= 992 && window.innerWidth < 1200)
+            return 'lg';
+        else if (window.innerWidth >= 1200 && window.innerWidth < 1400)
+            return 'xl';
+        else
+            return 'xxl';
+    }
+    /** */
+    static { this.Resize = new Observable(subscriber => {
+        window.addEventListener("load", () => {
+            window.dispatchEvent(new Event('resize'));
+        });
+        window.onresize = () => {
+            subscriber.next({
+                width: this.WINDOW_WIDTH,
+                height: this.WINDOW_HEIGHT,
+                breakpoin: this.BREAKPOINT
+            });
+        };
+    }); }
+}
+
+class CoerButton {
+    constructor() {
+        //Variables
+        this._id = Tools.GetGuid('coer-button');
+        this._tooltip = '';
+        //Inputs
+        this.id = '';
+        this.color = input('default');
+        this.type = input('filled');
+        this.icon = input('');
+        this.iconPosition = input('left');
+        this.animation = input(false);
+        this.isLoading = input(false);
+        this.isDisabled = input(false);
+        this.isInvisible = input(false);
+        this.width = input('125px');
+        this.minWidth = input('30px');
+        this.height = input('40px');
+        this.minHeight = input('30px');
+        this.marginTop = input('0px');
+        this.marginRight = input('0px');
+        this.marginBottom = input('0px');
+        this.marginLeft = input('0px');
+        this.path = input([]);
+        this.tooltipPosition = input('left');
+        //Outputs
+        this.onClick = new EventEmitter();
+        //computed
+        this._isEnable = computed(() => {
+            return !this.isLoading() && !this.isDisabled() && !this.isInvisible();
+        });
+        //computed
+        this._icon = computed(() => {
+            switch (this.icon()) {
+                case 'new': return 'fa-solid fa-plus fa-lg';
+                case 'save': return 'fa-solid fa-floppy-disk fa-lg';
+                case 'cancel': return 'fa-solid fa-xmark fa-lg';
+                case 'import': return 'fa-solid fa-file-arrow-up fa-lg';
+                case 'excel': return 'bi bi-filetype-xlsx fa-lg';
+                case 'menu': return 'fa-solid fa-bars';
+                case 'delete': return 'fa-solid fa-trash-can';
+                case 'edit': return 'fa-solid fa-pen fa-lg';
+                case 'go': return 'bi bi-box-arrow-right';
+                case 'back': return 'bi bi-box-arrow-left';
+                default: return '';
+            }
+        });
+    }
+    set tooltip(value) {
+        this._tooltip = value;
+        if (value && this._tooltipElement) {
+            this._tooltipElement.setContent({ '.tooltip-inner': this._tooltip });
+        }
+    }
+    ngOnInit() {
+        this.SetToolTip();
+        this.SetEvents();
+    }
+    ngOnDestroy() {
+        if (this._tooltipElement) {
+            Tools.Sleep().then(() => this._tooltipElement.dispose());
+        }
+    }
+    /** */
+    SetEvents() {
+        Tools.Sleep().then(() => {
+            this._element = document.getElementById(`${this._id}-inner-button`);
+            if (Tools.IsNotNull(this._element)) {
+                this._element.addEventListener('focus', () => {
+                    if (!this._isEnable())
+                        this.Blur();
+                });
+            }
+        });
+    }
+    SetToolTip() {
+        Tools.Sleep().then(() => {
+            const htmlElement = document.getElementById(`${this._id}-container`);
+            if (Tools.IsNotNull(htmlElement)) {
+                htmlElement.addEventListener('mouseleave', () => {
+                    if (Tools.IsNotNull(htmlElement) && Tools.IsNotNull(this._tooltipElement)) {
+                        this._tooltipElement.hide();
+                    }
+                });
+                this._tooltipElement = new Tooltip(htmlElement, {
+                    html: true,
+                    title: this._tooltip,
+                    placement: this.tooltipPosition
+                });
+            }
+        });
+    }
+    /** */
+    Click(event) {
+        if (this._isEnable()) {
+            this.onClick.emit(event);
+        }
+        this.Blur();
+    }
+    /** */
+    Focus(timeout = 0) {
+        Tools.Sleep(timeout).then(() => {
+            if (this._isEnable())
+                this._element.focus();
+        });
+    }
+    /** */
+    Blur() {
+        Tools.Sleep().then(() => {
+            this._element.blur();
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerButton, selector: "coer-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isInvisible: { classPropertyName: "isInvisible", publicName: "isInvisible", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, marginTop: { classPropertyName: "marginTop", publicName: "marginTop", isSignal: true, isRequired: false, transformFunction: null }, marginRight: { classPropertyName: "marginRight", publicName: "marginRight", isSignal: true, isRequired: false, transformFunction: null }, marginBottom: { classPropertyName: "marginBottom", publicName: "marginBottom", isSignal: true, isRequired: false, transformFunction: null }, marginLeft: { classPropertyName: "marginLeft", publicName: "marginLeft", isSignal: true, isRequired: false, transformFunction: null }, path: { classPropertyName: "path", publicName: "path", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: "<div [ngClass]=\"{ 'coer-button': true, 'invisible': isInvisible() }\">\r\n    <a [id]=\"_id + '-container'\"\r\n        [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n        [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation() }\"\r\n        [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft()  }\">\r\n        @if(type() =='filled' || type() == 'outline') {\r\n            <button mat-button\r\n                [id]=\"_id + '-inner-button'\"\r\n                type=\"button\"\r\n                (click)=\"Click($event)\"\r\n                [ngClass]=\"{\r\n                    'primary-filled': (color() == 'primary' && type() =='filled'),\r\n                    'secondary-filled': (color() == 'secondary' && type() =='filled'),\r\n                    'success-filled': (color() == 'success' && type() =='filled'),\r\n                    'warning-filled': (color() == 'warning' && type() =='filled'),\r\n                    'danger-filled': (color() == 'danger' && type() =='filled'),\r\n                    'navigation-filled': (color() == 'navigation' && type() =='filled'),\r\n                    'primary-outline': (color() == 'primary' && type() =='outline'),\r\n                    'secondary-outline': (color() == 'secondary' && type() =='outline'),\r\n                    'success-outline': (color() == 'success' && type() =='outline'),\r\n                    'warning-outline': (color() == 'warning' && type() =='outline'),\r\n                    'danger-outline': (color() == 'danger' && type() =='outline'),\r\n                    'navigation-outline': (color() == 'navigation'),\r\n                    'readonly': isDisabled(),\r\n                    'cursor-wait': isLoading()\r\n                }\"\r\n                [ngStyle]=\"{\r\n                    'width': width(),\r\n                    'min-width': minWidth(),\r\n                    'height': height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n                <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n                    <span *ngIf=\"(iconPosition() == 'left')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\r\n\r\n                    <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n                        <ng-content></ng-content>\r\n                    </span>\r\n\r\n                    <span *ngIf=\"(iconPosition() == 'right')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\r\n                </span>\r\n\r\n                <ng-template #loading>\r\n                    <span class=\"slot fa-fade\">\r\n                        <span class=\"me-2\"> Loading </span>\r\n                        <i class=\"spinner-border\"></i>\r\n                    </span>\r\n                </ng-template>\r\n            </button>\r\n        }\r\n\r\n        @else {\r\n            @if (type() == 'icon') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    (click)=\"Click($event)\"\r\n                    [ngClass]=\"{\r\n                        'primary-filled': (color() == 'primary'),\r\n                        'secondary-filled': (color() == 'secondary'),\r\n                        'success-filled': (color() == 'success'),\r\n                        'warning-filled': (color() == 'warning'),\r\n                        'danger-filled': (color() == 'danger'),\r\n                        'navigation-filled': (color() == 'navigation'),\r\n                        'readonly': (isDisabled() || isLoading()),\r\n                        'cursor-wait': isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-outline') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    (click)=\"Click($event)\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline': (color() == 'primary'),\r\n                        'secondary-outline': (color() == 'secondary'),\r\n                        'success-outline': (color() == 'success'),\r\n                        'warning-outline': (color() == 'warning'),\r\n                        'danger-outline': (color() == 'danger'),\r\n                        'navigation-outline': (color() == 'navigation'),\r\n                        'readonly': (isDisabled() || isLoading()),\r\n                        'cursor-wait': isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-no-border') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    (click)=\"Click($event)\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline': (color() == 'primary'),\r\n                        'secondary-outline': (color() == 'secondary'),\r\n                        'success-outline': (color() == 'success'),\r\n                        'warning-outline': (color() == 'warning'),\r\n                        'danger-outline': (color() == 'danger'),\r\n                        'navigation-outline': (color() == 'navigation'),\r\n                        'readonly': (isDisabled() || isLoading()),\r\n                        'icon-no-border': true\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n        }\r\n    </a>\r\n</div>", styles: [".text-blue{color:#0d6efd!important}.text-blue-bold{color:#0d6efd!important;font-weight:700!important}.background-blue{background-color:#0d6efd!important}.background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}.border-blue{border-color:#0d6efd!important}.text-gray{color:#6c757d!important}.text-gray-bold{color:#6c757d!important;font-weight:700!important}.background-gray{background-color:#6c757d!important}.background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}.border-gray{border-color:#6c757d!important}.text-green{color:#198754!important}.text-green-bold{color:#198754!important;font-weight:700!important}.background-green{background-color:#198754!important}.background-border-green{background-color:#198754!important;border-color:#198754!important}.border-green{border-color:#198754!important}.text-yellow{color:#ffc107!important}.text-yellow-bold{color:#ffc107!important;font-weight:700!important}.background-yellow{background-color:#ffc107!important}.background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}.border-yellow{border-color:#ffc107!important}.text-red{color:#dc3545!important}.text-red-bold{color:#dc3545!important;font-weight:700!important}.background-red{background-color:#dc3545!important}.background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}.border-red{border-color:#dc3545!important}.text-white{color:#f5f5f5!important}.text-white-bold{color:#f5f5f5!important;font-weight:700!important}.background-white{background-color:#f5f5f5!important}.background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}.border-white{border-color:#f5f5f5!important}.text-black{color:#252525!important}.text-black-bold{color:#252525!important;font-weight:700!important}.background-black{background-color:#252525!important}.background-border-black{background-color:#252525!important;border-color:#252525!important}.border-black{border-color:#252525!important}.text-orange{color:#fd6031!important}.text-orange-bold{color:#fd6031!important;font-weight:700!important}.background-orange{background-color:#fd6031!important}.background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}.border-orange{border-color:#fd6031!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-overflow:ellipsis!important;overflow:hidden!important}div.coer-button button.primary-filled{background-color:#0d6efd!important;color:#f5f5f5!important}div.coer-button button.secondary-filled{background-color:#6c757d!important;color:#f5f5f5!important}div.coer-button button.success-filled{background-color:#198754!important;color:#f5f5f5!important}div.coer-button button.warning-filled{background-color:#ffc107!important;color:#252525!important}div.coer-button button.danger-filled{background-color:#dc3545!important;color:#f5f5f5!important}div.coer-button button.navigation-filled{background-color:#fd6031!important;color:#f5f5f5!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid #0d6efd!important;color:#0d6efd!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid #6c757d!important;color:#6c757d!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid #198754!important;color:#198754!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid #ffc107!important;color:#ffc107!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid #dc3545!important;color:#dc3545!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid #fd6031!important;color:#fd6031!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus,div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus,div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus,div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus,div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px #0d6efd!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px #6c757d!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px #198754!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px #ffc107!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px #dc3545!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px #fd6031!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:#fff!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{vertical-align:middle!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div#coer-tool-bar coer-button *{color:#fd6031!important}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'coer-button', template: "<div [ngClass]=\"{ 'coer-button': true, 'invisible': isInvisible() }\">\r\n    <a [id]=\"_id + '-container'\"\r\n        [routerLink]=\"(path().length > 0 && _isEnable()) ? path() : null\"\r\n        [ngClass]=\"{ 'loading': isLoading(), 'animate__animated animate__zoomIn': true, 'animate__disabled': !animation() }\"\r\n        [ngStyle]=\"{ 'margin-top': marginTop(), 'margin-right': marginRight(), 'margin-bottom': marginBottom(), 'margin-left': marginLeft()  }\">\r\n        @if(type() =='filled' || type() == 'outline') {\r\n            <button mat-button\r\n                [id]=\"_id + '-inner-button'\"\r\n                type=\"button\"\r\n                (click)=\"Click($event)\"\r\n                [ngClass]=\"{\r\n                    'primary-filled': (color() == 'primary' && type() =='filled'),\r\n                    'secondary-filled': (color() == 'secondary' && type() =='filled'),\r\n                    'success-filled': (color() == 'success' && type() =='filled'),\r\n                    'warning-filled': (color() == 'warning' && type() =='filled'),\r\n                    'danger-filled': (color() == 'danger' && type() =='filled'),\r\n                    'navigation-filled': (color() == 'navigation' && type() =='filled'),\r\n                    'primary-outline': (color() == 'primary' && type() =='outline'),\r\n                    'secondary-outline': (color() == 'secondary' && type() =='outline'),\r\n                    'success-outline': (color() == 'success' && type() =='outline'),\r\n                    'warning-outline': (color() == 'warning' && type() =='outline'),\r\n                    'danger-outline': (color() == 'danger' && type() =='outline'),\r\n                    'navigation-outline': (color() == 'navigation'),\r\n                    'readonly': isDisabled(),\r\n                    'cursor-wait': isLoading()\r\n                }\"\r\n                [ngStyle]=\"{\r\n                    'width': width(),\r\n                    'min-width': minWidth(),\r\n                    'height': height(),\r\n                    'min-height': minHeight()\r\n                }\">\r\n                <span class=\"slot\" *ngIf=\"!isLoading(); else loading\" >\r\n                    <span *ngIf=\"(iconPosition() == 'left')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\r\n\r\n                    <span [ngClass]=\"{ 'ms-2': (iconPosition() == 'left'), 'me-2': (iconPosition() == 'right') }\">\r\n                        <ng-content></ng-content>\r\n                    </span>\r\n\r\n                    <span *ngIf=\"(iconPosition() == 'right')\">\r\n                        <i [class]=\"_icon()\"></i>\r\n                    </span>\r\n                </span>\r\n\r\n                <ng-template #loading>\r\n                    <span class=\"slot fa-fade\">\r\n                        <span class=\"me-2\"> Loading </span>\r\n                        <i class=\"spinner-border\"></i>\r\n                    </span>\r\n                </ng-template>\r\n            </button>\r\n        }\r\n\r\n        @else {\r\n            @if (type() == 'icon') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    (click)=\"Click($event)\"\r\n                    [ngClass]=\"{\r\n                        'primary-filled': (color() == 'primary'),\r\n                        'secondary-filled': (color() == 'secondary'),\r\n                        'success-filled': (color() == 'success'),\r\n                        'warning-filled': (color() == 'warning'),\r\n                        'danger-filled': (color() == 'danger'),\r\n                        'navigation-filled': (color() == 'navigation'),\r\n                        'readonly': (isDisabled() || isLoading()),\r\n                        'cursor-wait': isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-outline') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    (click)=\"Click($event)\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline': (color() == 'primary'),\r\n                        'secondary-outline': (color() == 'secondary'),\r\n                        'success-outline': (color() == 'success'),\r\n                        'warning-outline': (color() == 'warning'),\r\n                        'danger-outline': (color() == 'danger'),\r\n                        'navigation-outline': (color() == 'navigation'),\r\n                        'readonly': (isDisabled() || isLoading()),\r\n                        'cursor-wait': isLoading()\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n\r\n            @else if (type() == 'icon-no-border') {\r\n                <button mat-icon-button\r\n                    [id]=\"_id + '-inner-button'\"\r\n                    (click)=\"Click($event)\"\r\n                    [ngClass]=\"{\r\n                        'primary-outline': (color() == 'primary'),\r\n                        'secondary-outline': (color() == 'secondary'),\r\n                        'success-outline': (color() == 'success'),\r\n                        'warning-outline': (color() == 'warning'),\r\n                        'danger-outline': (color() == 'danger'),\r\n                        'navigation-outline': (color() == 'navigation'),\r\n                        'readonly': (isDisabled() || isLoading()),\r\n                        'icon-no-border': true\r\n                    }\">\r\n                    <i [class]=\"_icon()\"></i>\r\n                </button>\r\n            }\r\n        }\r\n    </a>\r\n</div>", styles: [".text-blue{color:#0d6efd!important}.text-blue-bold{color:#0d6efd!important;font-weight:700!important}.background-blue{background-color:#0d6efd!important}.background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}.border-blue{border-color:#0d6efd!important}.text-gray{color:#6c757d!important}.text-gray-bold{color:#6c757d!important;font-weight:700!important}.background-gray{background-color:#6c757d!important}.background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}.border-gray{border-color:#6c757d!important}.text-green{color:#198754!important}.text-green-bold{color:#198754!important;font-weight:700!important}.background-green{background-color:#198754!important}.background-border-green{background-color:#198754!important;border-color:#198754!important}.border-green{border-color:#198754!important}.text-yellow{color:#ffc107!important}.text-yellow-bold{color:#ffc107!important;font-weight:700!important}.background-yellow{background-color:#ffc107!important}.background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}.border-yellow{border-color:#ffc107!important}.text-red{color:#dc3545!important}.text-red-bold{color:#dc3545!important;font-weight:700!important}.background-red{background-color:#dc3545!important}.background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}.border-red{border-color:#dc3545!important}.text-white{color:#f5f5f5!important}.text-white-bold{color:#f5f5f5!important;font-weight:700!important}.background-white{background-color:#f5f5f5!important}.background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}.border-white{border-color:#f5f5f5!important}.text-black{color:#252525!important}.text-black-bold{color:#252525!important;font-weight:700!important}.background-black{background-color:#252525!important}.background-border-black{background-color:#252525!important;border-color:#252525!important}.border-black{border-color:#252525!important}.text-orange{color:#fd6031!important}.text-orange-bold{color:#fd6031!important;font-weight:700!important}.background-orange{background-color:#fd6031!important}.background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}.border-orange{border-color:#fd6031!important}coer-button{display:contents!important}div.coer-button{display:contents!important}div.coer-button a{display:inline-block!important}div.coer-button a.animate__disabled{animation-duration:0s!important}div.coer-button button{font-size:17px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}div.coer-button .slot{width:100px!important;display:flex!important;align-items:center!important;justify-content:center!important;text-overflow:ellipsis!important;overflow:hidden!important}div.coer-button button.primary-filled{background-color:#0d6efd!important;color:#f5f5f5!important}div.coer-button button.secondary-filled{background-color:#6c757d!important;color:#f5f5f5!important}div.coer-button button.success-filled{background-color:#198754!important;color:#f5f5f5!important}div.coer-button button.warning-filled{background-color:#ffc107!important;color:#252525!important}div.coer-button button.danger-filled{background-color:#dc3545!important;color:#f5f5f5!important}div.coer-button button.navigation-filled{background-color:#fd6031!important;color:#f5f5f5!important}div.coer-button button.primary-outline{background-color:#fff!important;border:1px solid #0d6efd!important;color:#0d6efd!important}div.coer-button button.secondary-outline{background-color:#fff!important;border:1px solid #6c757d!important;color:#6c757d!important}div.coer-button button.success-outline{background-color:#fff!important;border:1px solid #198754!important;color:#198754!important}div.coer-button button.warning-outline{background-color:#fff!important;border:1px solid #ffc107!important;color:#ffc107!important}div.coer-button button.danger-outline{background-color:#fff!important;border:1px solid #dc3545!important;color:#dc3545!important}div.coer-button button.navigation-outline{background-color:#fff!important;border:1px solid #fd6031!important;color:#fd6031!important}div.coer-button button.primary-filled:not(.readonly):hover,div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):hover,div.coer-button button.primary-outline:not(.readonly):focus,div.coer-button button.secondary-filled:not(.readonly):hover,div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):hover,div.coer-button button.secondary-outline:not(.readonly):focus,div.coer-button button.success-filled:not(.readonly):hover,div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):hover,div.coer-button button.success-outline:not(.readonly):focus,div.coer-button button.warning-filled:not(.readonly):hover,div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):hover,div.coer-button button.warning-outline:not(.readonly):focus,div.coer-button button.danger-filled:not(.readonly):hover,div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):hover,div.coer-button button.danger-outline:not(.readonly):focus{filter:brightness(1.1)!important}div.coer-button button.primary-filled:not(.readonly):focus,div.coer-button button.primary-outline:not(.readonly):focus{box-shadow:0 0 20px #0d6efd!important}div.coer-button button.secondary-filled:not(.readonly):focus,div.coer-button button.secondary-outline:not(.readonly):focus{box-shadow:0 0 20px #6c757d!important}div.coer-button button.success-filled:not(.readonly):focus,div.coer-button button.success-outline:not(.readonly):focus{box-shadow:0 0 20px #198754!important}div.coer-button button.warning-filled:not(.readonly):focus,div.coer-button button.warning-outline:not(.readonly):focus{box-shadow:0 0 20px #ffc107!important}div.coer-button button.danger-filled:not(.readonly):focus,div.coer-button button.danger-outline:not(.readonly):focus{box-shadow:0 0 20px #dc3545!important}div.coer-button button.navigation-filled:not(.readonly):focus,div.coer-button button.navigation-outline:not(.readonly):focus{box-shadow:0 0 20px #fd6031!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button{width:40px!important;height:40px!important;padding:0!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border{width:25px!important;height:25px!important;background-color:transparent!important;border:none!important;overflow:visible!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border *{font-size:medium!important}div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-left,div.coer-button button.mdc-icon-button.mat-mdc-icon-button.icon-no-border i.bi-box-arrow-in-right{font-size:20px!important}div.coer-button button.readonly,div.coer-button button.readonly:hover,div.coer-button button.readonly:focus{background-color:#dfdede!important;border-color:#dfdede!important;color:#fff!important}div.coer-button coer-button[ishidden=true],div.coer-button coer-button[ng-reflect-invisible=true]{position:relative!important;top:10000vh;left:10000vw}div.coer-button a.loading{cursor:wait!important}div.coer-button i{vertical-align:middle!important}div.coer-button i.spinner-border{width:15px!important;height:15px!important;font-size:16px!important}div.coer-button span{font-weight:700!important}div#coer-tool-bar coer-button *{color:#fd6031!important}\n"] }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], tooltip: [{
+                type: Input
+            }], onClick: [{
+                type: Output
+            }] } });
+
 //import { CoerCheckbox } from './coer-checkbox/coer-checkbox.component';
 //import { CoerFilebox } from './coer-filebox/coer-filebox.component';
 //import { CoerForm } from './coer-form/coer-form.component';
@@ -244,14 +1058,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 //import { CoerTextBox } from './coer-textbox/coer-textbox.component';
 class ComponentsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, declarations: [CoerAlert], imports: [CommonModule,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, declarations: [CoerAlert,
+            CoerButton], imports: [CommonModule,
             RouterModule,
             FormsModule,
-            ReactiveFormsModule], exports: [CoerAlert] }); }
+            ReactiveFormsModule,
+            //PipesModule,
+            MatButtonModule], exports: [CoerAlert,
+            CoerButton] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
             RouterModule,
             FormsModule,
-            ReactiveFormsModule] }); }
+            ReactiveFormsModule,
+            //PipesModule,
+            MatButtonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, decorators: [{
             type: NgModule,
@@ -262,7 +1082,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                         FormsModule,
                         ReactiveFormsModule,
                         //PipesModule,
-                        //MatButtonModule,
+                        MatButtonModule,
                         //MatCheckboxModule,
                         //MatInputModule,
                         //MatFormFieldModule,
@@ -272,7 +1092,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     ],
                     declarations: [
                         CoerAlert,
-                        //CoerButton,
+                        CoerButton,
                         //CoerCheckbox,
                         //CoerFilebox,
                         //CoerForm,
@@ -288,7 +1108,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     ],
                     exports: [
                         CoerAlert,
-                        //CoerButton,
+                        CoerButton,
                         //CoerCheckbox,
                         //CoerFilebox,
                         //CoerForm,
@@ -305,53 +1125,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
-const CONTROL_VALUE = (component) => {
-    return {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: forwardRef(() => component),
-        multi: true
-    };
-};
-class ControlValue {
-    constructor() {
-        this._isTouched = false;
-    }
-    get isTouched() {
-        return this._isTouched;
-    }
-    /** */
-    SetValue(value) {
-        if (typeof this._UpdateValue === 'function') {
-            this._UpdateValue(value);
-        }
-        this._value = value;
-    }
-    /** */
-    SetTouched(isTouched) {
-        if (typeof this._IsTouched === 'function') {
-            this._IsTouched(isTouched);
-        }
-        this._isTouched = isTouched;
-    }
-    /** */
-    writeValue(value) {
-        this._value = value;
-    }
-    /** */
-    registerOnChange(callback) {
-        this._UpdateValue = callback;
-    }
-    /** */
-    registerOnTouched(callback) {
-        this._IsTouched = callback;
-    }
-    /** */
-    setDisabledState(isDisabled) { }
-}
+const breakpointSIGNAL = signal(Screen?.BREAKPOINT || 'xs');
+
+const isLoadingSIG = signal(false);
+
+const isModalOpenSIG = signal(false);
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CONTROL_VALUE, CoerAlert, ComponentsModule, ControlValue };
+export { Breadcrumbs, CONTROL_VALUE, CoerAlert, CoerButton, ComponentsModule, ControlValue, DateTime, Files, Page, Screen, Source, Tools, breakpointSIGNAL, isLoadingSIG, isModalOpenSIG };
 //# sourceMappingURL=coer-elements.mjs.map