coer-elements 1.0.16 → 1.1.1

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

@@ -1,100 +0,0 @@
-@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

@@ -1,249 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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-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/index.ts

@@ -1,8 +0,0 @@
-export * from './Tools/Breadcrumbs.class';
-export * from './Tools/ControlValue';
-export * from './Tools/DateTime.class';
-export * from './Tools/Files.class';
-export * from './Tools/Page.class';
-export * from './Tools/Screen.class';
-export * from './Tools/Source.class';
-export * from './Tools/Tools'

package/interfaces/index.ts

@@ -1,47 +0,0 @@
-import { TemplateRef, WritableSignal } from '@angular/core';
-
-export interface IPatch {
-    op: 'remove' | 'add' | 'replace';
-    path: string;
-    value: any;
-}
-
-
-export interface IScreenSize {
-    width: number;
-    height: number;
-    breakpoin: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-}
-
-
-export interface IAppSource {
-    page: string;
-    path: string;
-}
-
-
-export interface IBreadcrumb {
-    page: string;
-    path?: string | null;
-    queryParams?: any;
-    click?: (() => any);
-}
-
-
-export interface IGoBack {
-    show: boolean;
-    path?: string | null;
-    queryParams?: any;
-    click?: (() => any);
-}
-
-
-export interface ICoerRef {
-    coerRef: WritableSignal<string>;
-    title: WritableSignal<string>;
-    icon: WritableSignal<string>;
-    isDisabled: WritableSignal<boolean>;
-    show: WritableSignal<boolean>;
-    tooltip: WritableSignal<string>;
-    template: TemplateRef<any>;
-}

package/styles/coer.scss

@@ -1,95 +0,0 @@
-* {
-    font-family: sans-serif;
-    letter-spacing: normal;
-}
-
-.fill-space {
-    flex: 1 1 auto;
-}
- 
-h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
-    margin: 0px;
-    padding: 0px;
-}
-
-//Containers
-@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;
-}
-
-@keyframes fadeId {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-//Cursor
-.cursor-default {
-    cursor: default !important;
-}
-
-.cursor-pointer {
-    cursor: pointer !important;
-}
-
-.cursor-wait {
-    cursor: wait !important;
-}
-
-//Input
-input[type="file"] {
-    display: none !important;
-}
-
-.readonly {
-    color: black !important;
-    background-color: #bbbbbb83 !important;
-}
-
-.no-selection::selection {
-    background-color: transparent !important;
-}
-
-*::-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;
-}

package/tsconfig.json

@@ -1,29 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "outDir": "./dist/out-tsc",
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "declaration": false,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "ES2022",
-    "module": "ES2022",
-    "useDefineForClassFields": false,
-    "lib": ["ES2022", "dom"],
-    "baseUrl": "./"
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  }
-}