coer-elements 1.0.9 → 1.0.11

package/Tools/Page.class.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, Inject, inject, OnDestroy } from '@angular/core';
 import { Breadcrumbs } from "./Breadcrumbs.class";
 import { Source } from './Source.class';
-//import { CoerAlert } from 'src/app/shared/components/coer-alert/coer-alert.component';
+import { CoerAlert } from '../components';
 import { IAppSource, IBreadcrumb, IGoBack } from '../interfaces';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Tools } from './Tools';
@@ -10,7 +10,7 @@ import { Tools } from './Tools';
 export class Page implements AfterViewInit, OnDestroy {
 
     //Injection
-    //protected readonly alert = inject(CoerAlert);
+    protected readonly alert = inject(CoerAlert);
     protected readonly router = inject(Router);
     private readonly activatedRoute = inject(ActivatedRoute);
 

package/components/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/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/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';
+                    break;
+                };
+
+                case 'success': {
+                    if (icon == null) icon = 'bi-check-circle';
+                    iconType = 'info';
+                    color = '#198754';
+                    break;
+                };
+
+                case 'info': {
+                    if (icon == null) icon = 'bi-info-circle';
+                    iconType = 'error';
+                    color = '#0d6efd';
+                    break
+                };
+
+                default: {
+                    if (icon == null) icon = 'bi-exclamation-triangle-fill';
+                    iconType = 'warning';
+                    color = '#ffc107';
+                    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;
+    }
+}

package/components/index.ts

@@ -0,0 +1,97 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+//import { DirectivesModule } from 'src/app/shared/directives/directives.module';
+//import { PipesModule } from 'src/app/shared/pipes/pipes.module';
+
+//Angular Material
+//import { MatButtonModule } from '@angular/material/button';
+//import { MatCheckboxModule } from '@angular/material/checkbox';
+//import { MatInputModule } from '@angular/material/input';
+//import { MatFormFieldModule } from '@angular/material/form-field';
+//import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+//import { MatTabsModule } from '@angular/material/tabs';
+
+//Components
+import { CoerAlert } from './coer-alert/coer-alert.component';
+//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';
+
+@NgModule({
+    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,
+    ]
+})
+export class ComponentsModule { }
+export * from './coer-alert/coer-alert.component';
+//export * from './coer-button/coer-button.component';
+//export * from './coer-checkbox/coer-checkbox.component';
+//export * from './coer-filebox/coer-filebox.component';
+//export * from './coer-filebox/coer-filebox.interface';
+//export * from './coer-form/coer-form.component';
+//export * from './coer-grid/coer-grid.component';
+//export * from './coer-grid/coer-grid.interface';
+//export * from './coer-grid/coer-grid.templates';
+//export * from './coer-modal/coer-modal.component';
+//export * from './coer-numberbox/coer-numberbox.component';
+//export * from './coer-page-title/coer-page-title.component';
+//export * from './coer-page-title/pageTitle.interface';
+//export * from './coer-selectbox/coer-selectbox.component';
+//export * from './coer-switch/coer-switch.component';
+//export * from './coer-tab/coer-tab.component';
+//export * from './coer-textbox/coer-textbox.component';

package/dist_browser/Tools/Breadcrumbs.class.js

@@ -0,0 +1,66 @@
+import { Tools } from './Tools';
+var Breadcrumbs = /** @class */ (function () {
+    function Breadcrumbs() {
+    }
+    /** */
+    Breadcrumbs.Add = function (page, path) {
+        var breadcrumbs = this.Get();
+        var paths = breadcrumbs.map(function (item) { return item.path; });
+        if (!paths.includes(path)) {
+            breadcrumbs.push({ page: page, path: path });
+            this.Save(breadcrumbs);
+        }
+    };
+    /** */
+    Breadcrumbs.Get = function () {
+        var storage = sessionStorage.getItem(this.storage);
+        if (storage) {
+            storage = JSON.parse(storage);
+            if (storage.hasOwnProperty('breadcrumbs')) {
+                return Tools.BreakReference(storage.breadcrumbs);
+            }
+        }
+        return [];
+    };
+    /** Source */
+    Breadcrumbs.GetFirst = function () {
+        var breadcrumbs = this.Get();
+        return (breadcrumbs.length > 0) ? breadcrumbs.shift() : null;
+    };
+    /** */
+    Breadcrumbs.Save = function (breadcrumbs) {
+        var storage = sessionStorage.getItem(this.storage);
+        if (storage)
+            storage = JSON.parse(storage);
+        storage = Object.assign({}, storage, { breadcrumbs: breadcrumbs });
+        sessionStorage.setItem(this.storage, JSON.stringify(storage));
+    };
+    /** */
+    Breadcrumbs.Remove = function (path) {
+        var breadcrumbs = this.Get();
+        var index = breadcrumbs.findIndex(function (x) { return x.path.toLowerCase().trim() === path.toLowerCase().trim(); });
+        if (index >= 0) {
+            breadcrumbs = Tools.BreakReference(breadcrumbs).splice(0, index + 1);
+            this.Save(breadcrumbs);
+        }
+    };
+    /** */
+    Breadcrumbs.SetLast = function (page, path) {
+        var breadcrumbs = this.Get();
+        if (breadcrumbs.length > 0) {
+            breadcrumbs[breadcrumbs.length - 1] = { page: page, path: path };
+            this.Save(breadcrumbs);
+        }
+    };
+    /** */
+    Breadcrumbs.RemoveLast = function () {
+        var breadcrumbs = this.Get();
+        if (breadcrumbs.length > 0) {
+            breadcrumbs.pop();
+            this.Save(breadcrumbs);
+        }
+    };
+    Breadcrumbs.storage = 'COER-System';
+    return Breadcrumbs;
+}());
+export { Breadcrumbs };

package/dist_browser/Tools/ControlValue.js

@@ -0,0 +1,49 @@
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { forwardRef } from "@angular/core";
+export var CONTROL_VALUE = function (component) {
+    return {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: forwardRef(function () { return component; }),
+        multi: true
+    };
+};
+var ControlValue = /** @class */ (function () {
+    function ControlValue() {
+        this._isTouched = false;
+    }
+    Object.defineProperty(ControlValue.prototype, "isTouched", {
+        get: function () {
+            return this._isTouched;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /** */
+    ControlValue.prototype.SetValue = function (value) {
+        if (typeof this._UpdateValue === 'function') {
+            this._UpdateValue(value);
+        }
+        this._value = value;
+    };
+    /** */
+    ControlValue.prototype.SetTouched = function (isTouched) {
+        if (typeof this._IsTouched === 'function') {
+            this._IsTouched(isTouched);
+        }
+        this._isTouched = isTouched;
+    };
+    /** */
+    ControlValue.prototype.writeValue = function (value) {
+        this._value = value;
+    };
+    /** */
+    ControlValue.prototype.registerOnChange = function (callback) {
+        this._UpdateValue = callback;
+    };
+    /** */
+    ControlValue.prototype.registerOnTouched = function (callback) {
+        this._IsTouched = callback;
+    };
+    return ControlValue;
+}());
+export { ControlValue };