coer-elements 0.0.7 → 0.0.9

package/fesm2022/coer-elements.mjs

@@ -1,4 +1,313 @@
+import * as i0 from '@angular/core';
+import { Component, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as bootstrap from 'bootstrap';
+import Swal from 'sweetalert2';
+
+class CoerAlert {
+    /** */
+    Success(message = null, title = null, icon = null, autohide = 3000) {
+        //Title
+        if (!title || title == '')
+            title = 'Success';
+        const alertSuccessTitle = document.getElementById('alert-success-title');
+        alertSuccessTitle.textContent = title;
+        //Icon
+        icon = this.GetIcon(title, icon, 'bi-check-circle fa-beat');
+        const alertSuccessIcon = document.getElementById('alert-success-icon');
+        this.SetIcon(alertSuccessIcon, icon);
+        //Message
+        if (!message)
+            message = '';
+        const alertSuccessMessage = document.getElementById('alert-success-message');
+        alertSuccessMessage.innerHTML = message;
+        //Toast
+        const alertSuccess = document.getElementById('alert-success');
+        this.SetAutoHide(alertSuccess, autohide);
+        const toast = bootstrap.Toast.getOrCreateInstance(alertSuccess);
+        toast.show();
+    }
+    /** */
+    Error(message = null, title = null, icon = null, autohide = 3000) {
+        //Title
+        if (!title || title == '')
+            title = 'Error';
+        const alertErrorTitle = document.getElementById('alert-error-title');
+        alertErrorTitle.textContent = title;
+        //Icon
+        icon = this.GetIcon(title, icon, 'bi-exclamation-octagon fa-beat');
+        const alertErrorIcon = document.getElementById('alert-error-icon');
+        this.SetIcon(alertErrorIcon, icon);
+        //Message
+        if (!message)
+            message = '';
+        const alertErrorBody = document.getElementById('alert-error-message');
+        alertErrorBody.innerHTML = message;
+        //Toast
+        const alertError = document.getElementById('alert-error');
+        this.SetAutoHide(alertError, autohide);
+        const toast = bootstrap.Toast.getOrCreateInstance(alertError);
+        toast.show();
+    }
+    /** */
+    Info(message = null, title = null, icon = null, autohide = 3000) {
+        //Title
+        if (!title || title == '')
+            title = 'Info';
+        const alertInfoTitle = document.getElementById('alert-info-title');
+        alertInfoTitle.textContent = title;
+        //Icon
+        icon = this.GetIcon(title, icon, 'bi-info-circle fa-beat');
+        const alertInfoIcon = document.getElementById('alert-info-icon');
+        this.SetIcon(alertInfoIcon, icon);
+        //Message
+        if (!message)
+            message = '';
+        const alertInfoBody = document.getElementById('alert-info-message');
+        alertInfoBody.innerHTML = message;
+        //Toast
+        const alertInfo = document.getElementById('alert-info');
+        this.SetAutoHide(alertInfo, autohide);
+        const toast = bootstrap.Toast.getOrCreateInstance(alertInfo);
+        toast.show();
+    }
+    /** */
+    Warning(message = null, title = null, icon = null, autohide = 3000) {
+        //Title
+        if (!title || title == '')
+            title = 'Warning';
+        const alertWarningTitle = document.getElementById('alert-warning-title');
+        alertWarningTitle.textContent = title;
+        //Icon
+        icon = this.GetIcon(title, icon, 'bi-exclamation-triangle-fill fa-beat');
+        const alertWarningIcon = document.getElementById('alert-warning-icon');
+        this.SetIcon(alertWarningIcon, icon);
+        //Message
+        if (!message)
+            message = '';
+        const alertWarningBody = document.getElementById('alert-warning-message');
+        alertWarningBody.innerHTML = message;
+        //Toast
+        const alertWarning = document.getElementById('alert-warning');
+        this.SetAutoHide(alertWarning, autohide);
+        const toast = bootstrap.Toast.getOrCreateInstance(alertWarning);
+        toast.show();
+    }
+    /** */
+    Close(alert) {
+        return new Promise(Resolve => {
+            const element = document.getElementById(alert);
+            const toast = bootstrap.Toast.getOrCreateInstance(element);
+            toast.hide();
+            setTimeout(() => { Resolve(); }, 200);
+        });
+    }
+    /** */
+    Confirm(message = 'Proceed?', alertType = 'warning', icon = null) {
+        return new Promise(Resolve => {
+            let color;
+            let iconType;
+            switch (alertType) {
+                case 'danger':
+                    {
+                        if (icon == null)
+                            icon = 'bi-exclamation-octagon';
+                        iconType = 'error';
+                        color = '#dc3545'; //red
+                        break;
+                    }
+                    ;
+                case 'success':
+                    {
+                        if (icon == null)
+                            icon = 'bi-check-circle';
+                        iconType = 'info';
+                        color = '#198754'; //green
+                        break;
+                    }
+                    ;
+                case 'info':
+                    {
+                        if (icon == null)
+                            icon = 'bi-info-circle';
+                        iconType = 'error';
+                        color = '#0d6efd'; //blue
+                        break;
+                    }
+                    ;
+                default: {
+                    if (icon == null)
+                        icon = 'bi-exclamation-triangle-fill';
+                    iconType = 'warning';
+                    color = '#ffc107'; //yellow
+                    break;
+                }
+            }
+            switch (icon) {
+                case 'delete':
+                    icon = 'fa-regular fa-trash-can';
+                    break;
+            }
+            Swal.fire({
+                icon: iconType,
+                iconColor: 'transparent',
+                iconHtml: `<i class="${icon}" style="color: ${color};"></i>`,
+                html: message,
+                showConfirmButton: true,
+                confirmButtonText: 'Yes',
+                confirmButtonColor: color,
+                focusConfirm: true,
+                showDenyButton: true,
+                denyButtonColor: color,
+                focusDeny: false,
+                reverseButtons: true,
+                allowOutsideClick: false,
+                allowEscapeKey: false,
+                allowEnterKey: true,
+                customClass: {
+                    denyButton: 'sweet-alert-button',
+                    confirmButton: 'sweet-alert-button'
+                }
+            }).then(({ value }) => setTimeout(() => Resolve(value)));
+        });
+    }
+    /** */
+    SetIcon(element, icon) {
+        for (const item of [...element.classList.value.split(' ')]) {
+            if (item.length > 0) {
+                element.classList.remove(item);
+                element.classList.remove('q');
+            }
+        }
+        icon = icon.trim();
+        const hasWhiteSpaces = / /;
+        if (hasWhiteSpaces.test(icon)) {
+            const classes = icon.split(' ');
+            for (const icon of classes)
+                element.classList.add(icon);
+        }
+        else
+            element.classList.add(icon);
+    }
+    /** */
+    SetAutoHide(element, autohide) {
+        element.removeAttribute('data-bs-autohide');
+        element.removeAttribute('data-bs-delay');
+        if (autohide && autohide > 0) {
+            if (autohide < 1000)
+                autohide = 1000;
+            element.setAttribute('data-bs-autohide', 'true');
+            element.setAttribute('data-bs-delay', String(autohide));
+        }
+        else
+            element.setAttribute('data-bs-autohide', 'false');
+    }
+    /** */
+    GetIcon(title, icon, iconDefault) {
+        if (icon == null || icon == '') {
+            title = title.replaceAll(' ', '').toUpperCase();
+            switch (title) {
+                case 'ENABLED': return 'fa-solid fa-thumbs-up fa-flip-horizontal';
+                case 'ACTIVE': return 'fa-solid fa-thumbs-up fa-flip-horizontal';
+                case 'ACTIVED': return 'fa-solid fa-thumbs-up fa-flip-horizontal';
+                case 'DISABLE': return 'fa-solid fa-thumbs-down fa-flip-horizontal';
+                case 'DISABLED': return 'fa-solid fa-thumbs-down fa-flip-horizontal';
+                case 'DELETE': return 'fa-regular fa-trash-can';
+                case 'DELETED': return 'fa-regular fa-trash-can';
+                default: return iconDefault;
+            }
+        }
+        return icon;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CoerAlert, selector: "coer-alert", ngImport: i0, 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"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerAlert, decorators: [{
+            type: Component,
+            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';
+//import { CoerCheckbox } from './coer-checkbox/coer-checkbox.component';
+//import { CoerFilebox } from './coer-filebox/coer-filebox.component';
+//import { CoerForm } from './coer-form/coer-form.component';
+//import { CoerGrid } from './coer-grid/coer-grid.component';
+//import { CoerModal } from './coer-modal/coer-modal.component';
+//import { CoerNumberBox } from './coer-numberbox/coer-numberbox.component';
+//import { CoerPageTitle } from './coer-page-title/coer-page-title.component';
+//import { CoerSelectbox } from './coer-selectbox/coer-selectbox.component';
+//import { CoerSwitch } from './coer-switch/coer-switch.component';
+//import { CoerTab } from './coer-tab/coer-tab.component';
+//import { CoerTextarea } from './coer-textarea/coer-textarea.component';
+//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,
+            RouterModule,
+            FormsModule,
+            ReactiveFormsModule], exports: [CoerAlert] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, imports: [CommonModule,
+            RouterModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CommonModule,
+                        RouterModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        //PipesModule,
+                        //MatButtonModule,
+                        //MatCheckboxModule,
+                        //MatInputModule,
+                        //MatFormFieldModule,
+                        //MatSlideToggleModule,
+                        //MatTabsModule,
+                        //DirectivesModule
+                    ],
+                    declarations: [
+                        CoerAlert,
+                        //CoerButton,
+                        //CoerCheckbox,
+                        //CoerFilebox,
+                        //CoerForm,
+                        //CoerGrid,
+                        //CoerModal,
+                        //CoerNumberBox,
+                        //CoerPageTitle,
+                        //CoerSelectbox,
+                        //CoerSwitch,
+                        //CoerTextarea,
+                        //CoerTab,
+                        //CoerTextBox,
+                    ],
+                    exports: [
+                        CoerAlert,
+                        //CoerButton,
+                        //CoerCheckbox,
+                        //CoerFilebox,
+                        //CoerForm,
+                        //CoerGrid,
+                        //CoerModal,
+                        //CoerNumberBox,
+                        //CoerPageTitle,
+                        //CoerSelectbox,
+                        //CoerSwitch,
+                        //CoerTextarea,
+                        //CoerTab,
+                        //CoerTextBox,
+                    ]
+                }]
+        }] });
+
 /**
  * Generated bundle index. Do not edit.
  */
+
+export { CoerAlert, ComponentsModule };
 //# sourceMappingURL=coer-elements.mjs.map

package/fesm2022/coer-elements.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"coer-elements.mjs","sources":["../../../projects/coer-elements/coer-elements.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG"}
+{"version":3,"file":"coer-elements.mjs","sources":["../../../projects/coer-elements/src/components/lib/coer-alert/coer-alert.component.ts","../../../projects/coer-elements/src/components/lib/coer-alert/coer-alert.component.html","../../../projects/coer-elements/src/components/lib/components.module.ts","../../../projects/coer-elements/src/coer-elements.ts"],"sourcesContent":["import { Component } from '@angular/core';\r\nimport * as bootstrap from 'bootstrap';\r\nimport Swal from 'sweetalert2'\r\n\r\n@Component({\r\n    selector: 'coer-alert',\r\n    templateUrl: './coer-alert.component.html',\r\n    styleUrls: ['./coer-alert.component.scss']\r\n})\r\nexport class CoerAlert {\r\n\r\n    /** */\r\n    public Success(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {\r\n        //Title\r\n        if (!title || title == '') title = 'Success';\r\n        const alertSuccessTitle = document.getElementById('alert-success-title')!;\r\n        alertSuccessTitle.textContent = title;\r\n\r\n        //Icon\r\n        icon = this.GetIcon(title, icon, 'bi-check-circle fa-beat');\r\n        const alertSuccessIcon = document.getElementById('alert-success-icon')!;\r\n        this.SetIcon(alertSuccessIcon, icon);\r\n\r\n        //Message\r\n        if (!message) message = '';\r\n        const alertSuccessMessage = document.getElementById('alert-success-message')!;\r\n        alertSuccessMessage.innerHTML = message;\r\n\r\n        //Toast\r\n        const alertSuccess = document.getElementById('alert-success')!;\r\n        this.SetAutoHide(alertSuccess, autohide);\r\n\r\n        const toast = bootstrap.Toast.getOrCreateInstance(alertSuccess);\r\n        toast.show();\r\n    }\r\n\r\n\r\n    /** */\r\n    public Error(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {\r\n        //Title\r\n        if (!title || title == '') title = 'Error';\r\n        const alertErrorTitle = document.getElementById('alert-error-title')!;\r\n        alertErrorTitle.textContent = title;\r\n\r\n        //Icon\r\n        icon = this.GetIcon(title, icon, 'bi-exclamation-octagon fa-beat');\r\n        const alertErrorIcon = document.getElementById('alert-error-icon')!;\r\n        this.SetIcon(alertErrorIcon, icon);\r\n\r\n        //Message\r\n        if (!message) message = '';\r\n        const alertErrorBody = document.getElementById('alert-error-message')!;\r\n        alertErrorBody.innerHTML = message;\r\n\r\n        //Toast\r\n        const alertError = document.getElementById('alert-error')!;\r\n        this.SetAutoHide(alertError, autohide);\r\n\r\n        const toast = bootstrap.Toast.getOrCreateInstance(alertError);\r\n        toast.show();\r\n    }\r\n\r\n\r\n    /** */\r\n    public Info(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {\r\n        //Title\r\n        if (!title || title == '') title = 'Info';\r\n        const alertInfoTitle = document.getElementById('alert-info-title')!;\r\n        alertInfoTitle.textContent = title;\r\n\r\n        //Icon\r\n        icon = this.GetIcon(title, icon, 'bi-info-circle fa-beat');\r\n        const alertInfoIcon = document.getElementById('alert-info-icon')!;\r\n        this.SetIcon(alertInfoIcon, icon);\r\n\r\n        //Message\r\n        if (!message) message = '';\r\n        const alertInfoBody = document.getElementById('alert-info-message')!;\r\n        alertInfoBody.innerHTML = message;\r\n\r\n        //Toast\r\n        const alertInfo = document.getElementById('alert-info')!;\r\n        this.SetAutoHide(alertInfo, autohide);\r\n\r\n        const toast = bootstrap.Toast.getOrCreateInstance(alertInfo);\r\n        toast.show();\r\n    }\r\n\r\n\r\n    /** */\r\n    public Warning(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {\r\n        //Title\r\n        if (!title || title == '') title = 'Warning';\r\n        const alertWarningTitle = document.getElementById('alert-warning-title')!;\r\n        alertWarningTitle.textContent = title;\r\n\r\n        //Icon\r\n        icon = this.GetIcon(title, icon, 'bi-exclamation-triangle-fill fa-beat');\r\n        const alertWarningIcon = document.getElementById('alert-warning-icon')!;\r\n        this.SetIcon(alertWarningIcon, icon);\r\n\r\n        //Message\r\n        if (!message) message = '';\r\n        const alertWarningBody = document.getElementById('alert-warning-message')!;\r\n        alertWarningBody.innerHTML = message;\r\n\r\n        //Toast\r\n        const alertWarning = document.getElementById('alert-warning')!;\r\n        this.SetAutoHide(alertWarning, autohide);\r\n\r\n        const toast = bootstrap.Toast.getOrCreateInstance(alertWarning);\r\n        toast.show();\r\n    }\r\n\r\n\r\n    /** */\r\n    protected Close(alert: 'alert-success' | 'alert-error' | 'alert-info' | 'alert-warning') {\r\n        return new Promise<void>(Resolve => {\r\n            const element = document.getElementById(alert)!;\r\n            const toast = bootstrap.Toast.getOrCreateInstance(element);\r\n            toast.hide();\r\n\r\n            setTimeout(() => { Resolve() }, 200);\r\n        })\r\n    }\r\n\r\n\r\n    /** */\r\n    public Confirm(\r\n        message: string = 'Proceed?',\r\n        alertType: 'warning' | 'danger' | 'success' | 'info' = 'warning',\r\n        icon: string | null = null) {\r\n        return new Promise<boolean>(Resolve => {\r\n            let color: string;\r\n            let iconType: 'warning' | 'error' | 'success' | 'info';\r\n            switch(alertType) {\r\n                case 'danger': {\r\n                    if (icon == null) icon = 'bi-exclamation-octagon';\r\n                    iconType = 'error';\r\n                    color = '#dc3545'; //red\r\n                    break;\r\n                };\r\n\r\n                case 'success': {\r\n                    if (icon == null) icon = 'bi-check-circle';\r\n                    iconType = 'info';\r\n                    color = '#198754'; //green\r\n                    break;\r\n                };\r\n\r\n                case 'info': {\r\n                    if (icon == null) icon = 'bi-info-circle';\r\n                    iconType = 'error';\r\n                    color = '#0d6efd'; //blue\r\n                    break\r\n                };\r\n\r\n                default: {\r\n                    if (icon == null) icon = 'bi-exclamation-triangle-fill';\r\n                    iconType = 'warning';\r\n                    color = '#ffc107'; //yellow\r\n                    break;\r\n                }\r\n            }\r\n\r\n            switch(icon) {\r\n                case 'delete': icon = 'fa-regular fa-trash-can'; break;\r\n            }\r\n\r\n            Swal.fire({\r\n                icon: iconType,\r\n                iconColor: 'transparent',\r\n                iconHtml: `<i class=\"${icon}\" style=\"color: ${color};\"></i>`,\r\n                html: message,\r\n                showConfirmButton: true,\r\n                confirmButtonText: 'Yes',\r\n                confirmButtonColor: color,\r\n                focusConfirm: true,\r\n                showDenyButton: true,\r\n                denyButtonColor: color,\r\n                focusDeny: false,\r\n                reverseButtons: true,\r\n                allowOutsideClick: false,\r\n                allowEscapeKey: false,\r\n                allowEnterKey: true,\r\n                customClass: {\r\n                    denyButton: 'sweet-alert-button',\r\n                    confirmButton: 'sweet-alert-button'\r\n                }\r\n            }).then(({ value }) => setTimeout(() => Resolve(value)));\r\n        });\r\n    }\r\n\r\n\r\n    /** */\r\n    private SetIcon(element: HTMLElement, icon: string): void {\r\n        for (const item of [...element.classList.value.split(' ')]) {\r\n            if (item.length > 0) {\r\n                element.classList.remove(item);\r\n                element.classList.remove('q');\r\n            }\r\n        }\r\n\r\n        icon = icon.trim();\r\n        const hasWhiteSpaces: RegExp = / /;\r\n        if (hasWhiteSpaces.test(icon)) {\r\n            const classes = icon.split(' ');\r\n            for (const icon of classes) element.classList.add(icon);\r\n        }\r\n\r\n        else element.classList.add(icon);\r\n    }\r\n\r\n\r\n    /** */\r\n    private SetAutoHide(element: HTMLElement, autohide: number | null): void {\r\n        element.removeAttribute('data-bs-autohide');\r\n        element.removeAttribute('data-bs-delay');\r\n\r\n        if (autohide && autohide > 0) {\r\n            if (autohide < 1000) autohide = 1000;\r\n            element.setAttribute('data-bs-autohide', 'true');\r\n            element.setAttribute('data-bs-delay', String(autohide));\r\n        }\r\n\r\n        else element.setAttribute('data-bs-autohide', 'false');\r\n    }\r\n\r\n\r\n    /** */\r\n    private GetIcon(title: string, icon: string | null, iconDefault: string): string {\r\n        if (icon == null || icon == '') {\r\n            title = title.replaceAll(' ', '').toUpperCase();\r\n\r\n            switch(title) {\r\n                case 'ENABLED': return 'fa-solid fa-thumbs-up fa-flip-horizontal';\r\n                case 'ACTIVE': return 'fa-solid fa-thumbs-up fa-flip-horizontal';\r\n                case 'ACTIVED': return 'fa-solid fa-thumbs-up fa-flip-horizontal';\r\n                case 'DISABLE': return 'fa-solid fa-thumbs-down fa-flip-horizontal';\r\n                case 'DISABLED': return 'fa-solid fa-thumbs-down fa-flip-horizontal';\r\n                case 'DELETE': return 'fa-regular fa-trash-can';\r\n                case 'DELETED': return 'fa-regular fa-trash-can';\r\n                default: return iconDefault;\r\n            }\r\n        }\r\n\r\n        return icon;\r\n    }\r\n}","<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>","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { RouterModule } from '@angular/router';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\n//import { DirectivesModule } from 'src/app/shared/directives/directives.module';\r\n//import { PipesModule } from 'src/app/shared/pipes/pipes.module';\r\n\r\n//Angular Material\r\n//import { MatButtonModule } from '@angular/material/button';\r\n//import { MatCheckboxModule } from '@angular/material/checkbox';\r\n//import { MatInputModule } from '@angular/material/input';\r\n//import { MatFormFieldModule } from '@angular/material/form-field';\r\n//import { MatSlideToggleModule } from '@angular/material/slide-toggle';\r\n//import { MatTabsModule } from '@angular/material/tabs';\r\n\r\n//Components\r\nimport { CoerAlert } from './coer-alert/coer-alert.component';\r\n//import { CoerButton } from './coer-button/coer-button.component';\r\n//import { CoerCheckbox } from './coer-checkbox/coer-checkbox.component';\r\n//import { CoerFilebox } from './coer-filebox/coer-filebox.component';\r\n//import { CoerForm } from './coer-form/coer-form.component';\r\n//import { CoerGrid } from './coer-grid/coer-grid.component';\r\n//import { CoerModal } from './coer-modal/coer-modal.component';\r\n//import { CoerNumberBox } from './coer-numberbox/coer-numberbox.component';\r\n//import { CoerPageTitle } from './coer-page-title/coer-page-title.component';\r\n//import { CoerSelectbox } from './coer-selectbox/coer-selectbox.component';\r\n//import { CoerSwitch } from './coer-switch/coer-switch.component';\r\n//import { CoerTab } from './coer-tab/coer-tab.component';\r\n//import { CoerTextarea } from './coer-textarea/coer-textarea.component';\r\n//import { CoerTextBox } from './coer-textbox/coer-textbox.component';\r\n\r\n@NgModule({\r\n    imports: [\r\n        CommonModule,\r\n        RouterModule,\r\n        FormsModule,\r\n        ReactiveFormsModule,\r\n        //PipesModule,\r\n        //MatButtonModule,\r\n        //MatCheckboxModule,\r\n        //MatInputModule,\r\n        //MatFormFieldModule,\r\n        //MatSlideToggleModule,\r\n        //MatTabsModule,\r\n        //DirectivesModule\r\n    ],\r\n    declarations: [\r\n        CoerAlert,\r\n        //CoerButton,\r\n        //CoerCheckbox,\r\n        //CoerFilebox,\r\n        //CoerForm,\r\n        //CoerGrid,\r\n        //CoerModal,\r\n        //CoerNumberBox,\r\n        //CoerPageTitle,\r\n        //CoerSelectbox,\r\n        //CoerSwitch,\r\n        //CoerTextarea,\r\n        //CoerTab,\r\n        //CoerTextBox,\r\n    ],\r\n    exports: [\r\n        CoerAlert,\r\n        //CoerButton,\r\n        //CoerCheckbox,\r\n        //CoerFilebox,\r\n        //CoerForm,\r\n        //CoerGrid,\r\n        //CoerModal,\r\n        //CoerNumberBox,\r\n        //CoerPageTitle,\r\n        //CoerSelectbox,\r\n        //CoerSwitch,\r\n        //CoerTextarea,\r\n        //CoerTab,\r\n        //CoerTextBox,\r\n    ]\r\n})\r\nexport class ComponentsModule { }\r\n//export * from './coer-alert/coer-alert.component';\r\n//export * from './coer-button/coer-button.component';\r\n//export * from './coer-checkbox/coer-checkbox.component';\r\n//export * from './coer-filebox/coer-filebox.component';\r\n//export * from './coer-filebox/coer-filebox.interface';\r\n//export * from './coer-form/coer-form.component';\r\n//export * from './coer-grid/coer-grid.component';\r\n//export * from './coer-grid/coer-grid.interface';\r\n//export * from './coer-grid/coer-grid.templates';\r\n//export * from './coer-modal/coer-modal.component';\r\n//export * from './coer-numberbox/coer-numberbox.component';\r\n//export * from './coer-page-title/coer-page-title.component';\r\n//export * from './coer-page-title/pageTitle.interface';\r\n//export * from './coer-selectbox/coer-selectbox.component';\r\n//export * from './coer-switch/coer-switch.component';\r\n//export * from './coer-tab/coer-tab.component';\r\n//export * from './coer-textbox/coer-textbox.component';","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "coer",

package/public_api.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/styles/bootstrap.scss

@@ -0,0 +1,15 @@
+.tooltip-inner {
+    min-width: 125px;
+    max-width: 250px;
+    min-height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-word;
+}
+
+.invisible {
+    visibility: hidden !important;
+    width: 0px !important;
+    height: 0px !important;
+}

package/src/styles/coer-elements.scss

@@ -0,0 +1,29 @@
+* {
+    font-family: sans-serif;
+    letter-spacing: normal;
+}
+
+h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
+    margin: 0px;
+    padding: 0px;
+}
+
+input[type="file"] {
+    display: none !important;
+}
+
+.readonly {
+    color: black !important;
+    background-color: #bbbbbb83 !important;
+}
+
+.no-selection::selection {
+    background-color: transparent !important;
+}
+
+@import "./colors.scss";
+@import "./containers.scss";
+@import "./cursores.scss";
+@import "./scroll-bar.scss";
+@import "./layout.scss";
+@import "./bootstrap.scss";

package/{styles → src/styles}/colors.scss

@@ -1,3 +1,4 @@
+
 $blue: #0d6efd;
 $gray: #6c757d;
 $green: #198754;
@@ -10,7 +11,7 @@ $orange: #fd6031;
 //Blue
 .text-blue {
     color: $blue !important;
-} 
+}
 
 .text-blue-bold {
     color: $blue !important;
@@ -26,6 +27,9 @@ $orange: #fd6031;
     border-color: $blue !important;
 }
 
+.border-blue {
+    border-color: $blue !important;
+}
 
 //Gray
 .text-gray {
@@ -46,6 +50,9 @@ $orange: #fd6031;
     border-color: $gray !important;
 }
 
+.border-gray {
+    border-color: $gray !important;
+}
 
 //Green
 .text-green {
@@ -66,6 +73,9 @@ $orange: #fd6031;
     border-color: $green !important;
 }
 
+.border-green {
+    border-color: $green !important;
+}
 
 //Yellow
 .text-yellow {
@@ -86,6 +96,9 @@ $orange: #fd6031;
     border-color: $yellow !important;
 }
 
+.border-yellow {
+    border-color: $yellow !important;
+}
 
 //Red
 .text-red {
@@ -106,6 +119,9 @@ $orange: #fd6031;
     border-color: $red !important;
 }
 
+.border-red {
+    border-color: $red !important;
+}
 
 //White
 .text-white {
@@ -126,6 +142,9 @@ $orange: #fd6031;
     border-color: $white !important;
 }
 
+.border-white {
+    border-color: $white !important;
+}
 
 //Black
 .text-black {
@@ -146,6 +165,9 @@ $orange: #fd6031;
     border-color: $black !important;
 }
 
+.border-black {
+    border-color: $black !important;
+}
 
 //Orange
 .text-orange {
@@ -164,4 +186,8 @@ $orange: #fd6031;
 .background-border-orange {
     background-color: $orange !important;
     border-color: $orange !important;
+}
+
+.border-orange {
+    border-color: $orange !important;
 }

package/src/styles/containers.scss

@@ -0,0 +1,34 @@
+@keyframes fadeId {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@mixin Container() {
+    margin: 15px 30px 0px 30px;
+    padding: 10px;
+    box-shadow: 0px 0px 10px -10px black;
+    border-radius: 8px;
+    background-color: white;
+    animation-name: fadeId;
+    animation-duration: 1.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+}
+
+.coer-container {
+    @include Container();
+}
+
+.coer-container-tab {
+    @include Container();
+    padding: 0px;
+
+    .row {
+        margin: 12px 0px;
+    }
+}
+
+.coer-container-grid {
+    @include Container();
+    padding-bottom: 5px;
+}

package/src/styles/cursores.scss

@@ -0,0 +1,11 @@
+.cursor-default {
+    cursor: default !important;
+}
+
+.cursor-pointer {
+    cursor: pointer !important;
+}
+
+.cursor-wait {
+    cursor: wait !important;
+}

package/src/styles/layout.scss

@@ -0,0 +1,21 @@
+.flex-center {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+
+.flex-center-left {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-start !important;
+}
+
+.flex-center-right {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: flex-end !important;
+}
+
+.fill-space {
+    flex: 1 1 auto;
+}

package/src/styles/scroll-bar.scss

@@ -0,0 +1,20 @@
+@import "./colors.scss";
+
+*::-webkit-scrollbar {
+    background-color: lighten($gray, 48%);
+    width: 5px;
+    height: 5px;
+}
+
+*::-webkit-scrollbar-thumb{
+    background-color: lighten($gray, 35%);
+    border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background-color: $gray;
+}
+
+*::-webkit-scrollbar-thumb:active {
+    background-color: $gray;
+}