coer-elements 0.0.1 → 0.0.3

package/Tools/src/Tools.ts

@@ -0,0 +1,217 @@
+import { signal } from "@angular/core";
+const reference_signal = signal<any>({});
+
+export const Tools = {
+    /** Generate a Guid */
+    GetGuid: (seed: string = '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: <T>(value: T | null | undefined): boolean => {
+        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: <T>(value: T | null | undefined): boolean => {
+        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: <T>(value: T | null | undefined): boolean => {
+        if (value === undefined) return true;
+        if (value === null) return true;
+        if((value as string).toString().trim() === '') return true;
+        return false;
+    },
+
+
+    /** Break reference of a object or array */
+    BreakReference: <T>(object: T): T => {
+        if (object === undefined) return undefined as T;
+        if (object === null) return null as T;
+        const OBJECT = JSON.parse(JSON.stringify(object))
+        return (Array.isArray(OBJECT)) ? [...OBJECT] : { ...OBJECT }
+    },
+
+
+    /** Clean extra whitespaces */
+    CleanUpBlanks: (text: string | number): string => {
+        if(Tools.IsNull(text)) return '';
+        let worlds: string[] = String(text).split(' ');
+        worlds = worlds.filter(x => x.length > 0);
+        return worlds.join(' ');
+    },
+
+
+    /** Get properties of an object */
+    GetObjectProperties: <T>(obj: T | null | undefined): string[] => {
+        const properties: string[] = [];
+        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
+     * @returns A new array
+     * */
+    SetIndex: <T>(array: T[], ...args: T[][]): T[] => {
+        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: string | null | undefined): string => {
+        if (Tools.IsNull(text)) return '';
+
+        const textArray: string[] = [];
+        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: string | null | undefined): string => {
+        if (Tools.IsNull(text)) return '';
+
+        const textArray: string[] = [];
+        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: <T>(array: T[], property: string, propertyType: 'string' | 'number' = 'string'): T[] => {
+        switch (propertyType) {
+            case 'string': {
+                return array.sort((x: any, y: any) => {
+                    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: any, y: any) => Number(x[property] - Number(y[property])));
+            }
+        }
+    },
+
+
+    /** Sort an array in descending order by property */
+    SortByDesc: <T>(array: T[], property: string, propertyType: 'string' | 'number' = 'string'): T[] => {
+        switch (propertyType) {
+            case 'string': {
+                return array.sort((x: any, y: any) => {
+                    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: any, y: any) => Number(Number(y[property])) - x[property]);
+            }
+        }
+    },
+
+
+    /** Return a string with forman numeric */
+    GetNumericFormat: (value: string | number | null | undefined, decimals: number = 0): string => {
+        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: string[] = [];
+        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: number = 0, reference: string | null = null) => {
+        if (Tools.IsNull(reference)) {
+            return new Promise(Resolve => setTimeout(Resolve, milliseconds));
+        }
+
+        else return new Promise<void>(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)
+            }));
+        });
+    }
+};

package/components/index.ts

@@ -0,0 +1,2 @@
+export * from './src/components.module';
+export * from './src/coer-alert/coer-alert.component';

package/components/src/coer-alert/coer-alert.component.html

@@ -0,0 +1,56 @@
+<aside class="toast-container coer-alert">
+    <!-- Success -->
+    <div id="alert-success" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
+        <div class="toast-header">
+            <i id="alert-success-icon"></i>
+            <strong id="alert-success-title"></strong>
+            <button type="button" (click)="Close('alert-success')" class="btn-close btn-close-white"></button>
+        </div>
+
+        <div class="toast-body">
+            <pre id="alert-success-message"></pre>
+        </div>
+    </div>
+
+
+    <!-- Error -->
+    <div id="alert-error" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
+        <div class="toast-header">
+            <i id="alert-error-icon"></i>
+            <strong id="alert-error-title"></strong>
+            <button type="button" (click)="Close('alert-error')" class="btn-close btn-close-white"></button>
+        </div>
+
+        <div class="toast-body">
+            <pre id="alert-error-message"></pre>
+        </div>
+    </div>
+
+
+    <!-- Info -->
+    <div id="alert-info" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
+       <div class="toast-header">
+            <i id="alert-info-icon"></i>
+            <strong id="alert-info-title"></strong>
+            <button type="button" (click)="Close('alert-info')" class="btn-close btn-close-white"></button>
+        </div>
+
+        <div class="toast-body">
+            <pre id="alert-info-message"></pre>
+        </div>
+    </div>
+
+
+    <!-- Warning -->
+    <div id="alert-warning" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
+        <div class="toast-header">
+            <i id="alert-warning-icon"></i>
+            <strong id="alert-warning-title"></strong>
+            <button type="button" (click)="Close('alert-warning')" class="btn-close"></button>
+        </div>
+
+        <div class="toast-body">
+            <pre id="alert-warning-message"></pre>
+        </div>
+    </div>
+</aside>

package/components/src/coer-alert/coer-alert.component.scss

@@ -0,0 +1,100 @@
+@import "../../../styles/colors.scss";
+
+aside.toast-container {
+    position: fixed;
+    bottom: 0px;
+    right: 0px;
+    padding: 15px !important;
+    z-index: 2000 !important;
+
+    i, svg {
+        display: flex;
+        align-items: center;
+    }
+
+    strong {
+        margin: 0px auto 0px 5px;
+    }
+
+    div.toast,
+    div.toast-header {
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+        color: $white;
+    }
+
+    div.toast,
+    div.toast-body {
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        color: $white;
+    }
+
+    div.toast-body {
+        min-height: 36px;
+    }
+
+    pre {
+        font-family: Roboto, RobotoFallback, "Noto Kufi Arabic", Helvetica, Arial, sans-serif;
+        white-space: pre-wrap;
+        font-size: medium;
+    }
+
+    button {
+        margin: 0px 2px !important;
+        width: 10px !important;
+        height: 10px !important;
+        box-shadow: none !important;
+        outline: none !important;
+        border: none !important;
+    }
+
+    div#alert-success div.toast-header,
+    div#alert-success div.toast-body {
+        background-color: $green;
+    }
+
+    div#alert-info div.toast-header,
+    div#alert-info div.toast-body {
+        background-color: $blue;
+    }
+
+    div#alert-error div.toast-header,
+    div#alert-error div.toast-body {
+        background-color: $red;
+    }
+
+    div#alert-warning div.toast-header,
+    div#alert-warning div.toast-body {
+        background-color: $yellow;
+        border-color: $black;
+        color: $black;
+    }
+
+    div#alert-success:hover,
+    div#alert-info:hover,
+    div#alert-error:hover,
+    div#alert-warning:hover {
+        transform: scale(1.01);
+        box-shadow: 2px 2px 10px lightslategray;
+        cursor: default;
+    }
+}
+
+button.sweet-alert-button {
+    width: 100px !important;
+    height: 40px !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    margin: 0px 5px !important;
+    outline: none !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+aside.toast-container > * {
+    border: none !important;
+    z-index: 2000 !important;
+    margin: 15px 0px 0px 0px !important;
+}

package/components/src/coer-alert/coer-alert.component.ts

@@ -0,0 +1,249 @@
+import { Component } from '@angular/core';
+import * as bootstrap from 'bootstrap';
+import Swal from 'sweetalert2'
+
+@Component({
+    selector: 'coer-alert',
+    templateUrl: './coer-alert.component.html',
+    styleUrls: ['./coer-alert.component.scss']
+})
+export class CoerAlert {
+
+    /** */
+    public Success(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {
+        //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();
+    }
+
+
+    /** */
+    public Error(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {
+        //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();
+    }
+
+
+    /** */
+    public Info(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {
+        //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();
+    }
+
+
+    /** */
+    public Warning(message: string | null = null, title: string | null = null, icon: string | null = null, autohide: number | null = 3000): void {
+        //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();
+    }
+
+
+    /** */
+    protected Close(alert: 'alert-success' | 'alert-error' | 'alert-info' | 'alert-warning') {
+        return new Promise<void>(Resolve => {
+            const element = document.getElementById(alert)!;
+            const toast = bootstrap.Toast.getOrCreateInstance(element);
+            toast.hide();
+
+            setTimeout(() => { Resolve() }, 200);
+        })
+    }
+
+
+    /** */
+    public Confirm(
+        message: string = 'Proceed?',
+        alertType: 'warning' | 'danger' | 'success' | 'info' = 'warning',
+        icon: string | null = null) {
+        return new Promise<boolean>(Resolve => {
+            let color: string;
+            let iconType: 'warning' | 'error' | 'success' | 'info';
+            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)));
+        });
+    }
+
+
+    /** */
+    private SetIcon(element: HTMLElement, icon: string): void {
+        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: RegExp = / /;
+        if (hasWhiteSpaces.test(icon)) {
+            const classes = icon.split(' ');
+            for (const icon of classes) element.classList.add(icon);
+        }
+
+        else element.classList.add(icon);
+    }
+
+
+    /** */
+    private SetAutoHide(element: HTMLElement, autohide: number | null): void {
+        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');
+    }
+
+
+    /** */
+    private GetIcon(title: string, icon: string | null, iconDefault: string): string {
+        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;
+    }
+}