coer-elements 0.0.19 → 0.0.21

package/fesm2022/coer-elements.mjs

@@ -25,6 +25,7 @@ import Swal from 'sweetalert2';
 import * as XLSX from 'xlsx';
 import { Observable } from 'rxjs';
 import moment from 'moment';
+import { HttpClient, HttpRequest } from '@angular/common/http';
 
 class CoerRefDirective {
     constructor(template) {
@@ -51,10 +52,14 @@ class LifeCycleDirective {
     constructor(element) {
         this.element = element;
         //Outputs
+        this.OnChanges = output();
         this.onInit = output();
         this.afterViewInit = output();
         this.onDestroy = output();
     }
+    ngOnChanges(changes) {
+        this.OnChanges.emit(changes);
+    }
     ngOnInit() {
         this.onInit.emit(this.element.nativeElement);
     }
@@ -65,7 +70,7 @@ class LifeCycleDirective {
         this.onDestroy.emit(this.element.nativeElement);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LifeCycleDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LifeCycleDirective, selector: "[lifecycle]", outputs: { onInit: "onInit", afterViewInit: "afterViewInit", onDestroy: "onDestroy" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LifeCycleDirective, selector: "[lifecycle]", outputs: { OnChanges: "OnChanges", onInit: "onInit", afterViewInit: "afterViewInit", onDestroy: "onDestroy" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LifeCycleDirective, decorators: [{
             type: Directive,
@@ -331,7 +336,7 @@ const Tools = {
 
 class NoImagePipe {
     transform(value) {
-        const NO_IMAGE = '../../images/no-image.png';
+        const NO_IMAGE = '../../../images/no-image.png';
         if (Tools.IsOnlyWhiteSpace(value)) {
             return NO_IMAGE;
         }
@@ -3234,7 +3239,7 @@ class CoerTab {
             this._tooltipList.splice(index, 1);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerTab, selector: "coer-tab", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], viewQueries: [{ propertyName: "matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex\"\r\n        (selectedIndexChange)=\"SelectedIndexChange($event)\">\r\n\r\n        @for(tab of contentList(); track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"SetToolTip(tab)\" class=\"tab\" lifecycle (onDestroy)=\"RemoveTooltip($event)\">\r\n                            <i [class]=\"GetIcon(tab)\"></i>\r\n                            <span [class]=\"GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>", styles: ["div.coer-tab *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-tab .text-blue{color:#0d6efd!important}div.coer-tab .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-tab .background-blue{background-color:#0d6efd!important}div.coer-tab .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-tab .border-blue{border-color:#0d6efd!important}div.coer-tab .text-gray{color:#6c757d!important}div.coer-tab .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-tab .background-gray{background-color:#6c757d!important}div.coer-tab .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-tab .border-gray{border-color:#6c757d!important}div.coer-tab .text-green{color:#198754!important}div.coer-tab .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-tab .background-green{background-color:#198754!important}div.coer-tab .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-tab .border-green{border-color:#198754!important}div.coer-tab .text-yellow{color:#ffc107!important}div.coer-tab .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-tab .background-yellow{background-color:#ffc107!important}div.coer-tab .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-tab .border-yellow{border-color:#ffc107!important}div.coer-tab .text-red{color:#dc3545!important}div.coer-tab .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-tab .background-red{background-color:#dc3545!important}div.coer-tab .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-tab .border-red{border-color:#dc3545!important}div.coer-tab .text-white{color:#f5f5f5!important}div.coer-tab .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-tab .background-white{background-color:#f5f5f5!important}div.coer-tab .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-tab .border-white{border-color:#f5f5f5!important}div.coer-tab .text-black{color:#252525!important}div.coer-tab .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-tab .background-black{background-color:#252525!important}div.coer-tab .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-tab .border-black{border-color:#252525!important}div.coer-tab .text-orange{color:#fd6031!important}div.coer-tab .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-tab .background-orange{background-color:#fd6031!important}div.coer-tab .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-tab .border-orange{border-color:#fd6031!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid whitesmoke!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:#fd6031!important;border-color:#fd6031!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$4.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: LifeCycleDirective, selector: "[lifecycle]", outputs: ["onInit", "afterViewInit", "onDestroy"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: CoerTab, selector: "coer-tab", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, minHeight: { classPropertyName: "minHeight", publicName: "minHeight", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: false, isRequired: false, transformFunction: null }, alignTabs: { classPropertyName: "alignTabs", publicName: "alignTabs", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onSelectedTab: "onSelectedTab" }, queries: [{ propertyName: "contentRef", predicate: CoerRefDirective }], viewQueries: [{ propertyName: "matTabGroup", first: true, predicate: ["matTabGroup"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"coer-tab\">\r\n    <mat-tab-group #matTabGroup\r\n        mat-stretch-tabs=\"false\"\r\n        [selectedIndex]=\"_selectedIndex\"\r\n        (selectedIndexChange)=\"SelectedIndexChange($event)\">\r\n\r\n        @for(tab of contentList(); track tab.coerRef()) {\r\n            @if(tab.show()) {\r\n                <mat-tab [label]=\"tab.coerRef()\" [disabled]=\"tab.isDisabled()\">\r\n                    <ng-template mat-tab-label>\r\n                        <span [id]=\"SetToolTip(tab)\" class=\"tab\" lifecycle (onDestroy)=\"RemoveTooltip($event)\">\r\n                            <i [class]=\"GetIcon(tab)\"></i>\r\n                            <span [class]=\"GetIcon(tab).length > 0 ? 'ms-2' : ''\">\r\n                                {{ GetTitle(tab) }}\r\n                            </span>\r\n                        </span>\r\n                    </ng-template>\r\n\r\n                    <ng-template matTabContent>\r\n                        <div class=\"tab-content\"\r\n                            [ngStyle]=\"{\r\n                                'height': height(),\r\n                                'min-height': minHeight(),\r\n                                'max-height': maxHeight()\r\n                            }\">\r\n\r\n                            <ng-container [ngTemplateOutlet]=\"tab.template\"></ng-container>\r\n                        </div>\r\n                    </ng-template>\r\n                </mat-tab>\r\n            }\r\n        }\r\n    </mat-tab-group>\r\n</div>", styles: ["div.coer-tab *{--blue: #0d6efd;--gray: #6c757d;--green: #198754;--yellow: #ffc107;--red: #dc3545;--white: #f5f5f5;--black: #252525;--orange: #fd6031}div.coer-tab .text-blue{color:#0d6efd!important}div.coer-tab .text-blue-bold{color:#0d6efd!important;font-weight:700!important}div.coer-tab .background-blue{background-color:#0d6efd!important}div.coer-tab .background-border-blue{background-color:#0d6efd!important;border-color:#0d6efd!important}div.coer-tab .border-blue{border-color:#0d6efd!important}div.coer-tab .text-gray{color:#6c757d!important}div.coer-tab .text-gray-bold{color:#6c757d!important;font-weight:700!important}div.coer-tab .background-gray{background-color:#6c757d!important}div.coer-tab .background-border-gray{background-color:#6c757d!important;border-color:#6c757d!important}div.coer-tab .border-gray{border-color:#6c757d!important}div.coer-tab .text-green{color:#198754!important}div.coer-tab .text-green-bold{color:#198754!important;font-weight:700!important}div.coer-tab .background-green{background-color:#198754!important}div.coer-tab .background-border-green{background-color:#198754!important;border-color:#198754!important}div.coer-tab .border-green{border-color:#198754!important}div.coer-tab .text-yellow{color:#ffc107!important}div.coer-tab .text-yellow-bold{color:#ffc107!important;font-weight:700!important}div.coer-tab .background-yellow{background-color:#ffc107!important}div.coer-tab .background-border-yellow{background-color:#ffc107!important;border-color:#ffc107!important}div.coer-tab .border-yellow{border-color:#ffc107!important}div.coer-tab .text-red{color:#dc3545!important}div.coer-tab .text-red-bold{color:#dc3545!important;font-weight:700!important}div.coer-tab .background-red{background-color:#dc3545!important}div.coer-tab .background-border-red{background-color:#dc3545!important;border-color:#dc3545!important}div.coer-tab .border-red{border-color:#dc3545!important}div.coer-tab .text-white{color:#f5f5f5!important}div.coer-tab .text-white-bold{color:#f5f5f5!important;font-weight:700!important}div.coer-tab .background-white{background-color:#f5f5f5!important}div.coer-tab .background-border-white{background-color:#f5f5f5!important;border-color:#f5f5f5!important}div.coer-tab .border-white{border-color:#f5f5f5!important}div.coer-tab .text-black{color:#252525!important}div.coer-tab .text-black-bold{color:#252525!important;font-weight:700!important}div.coer-tab .background-black{background-color:#252525!important}div.coer-tab .background-border-black{background-color:#252525!important;border-color:#252525!important}div.coer-tab .border-black{border-color:#252525!important}div.coer-tab .text-orange{color:#fd6031!important}div.coer-tab .text-orange-bold{color:#fd6031!important;font-weight:700!important}div.coer-tab .background-orange{background-color:#fd6031!important}div.coer-tab .background-border-orange{background-color:#fd6031!important;border-color:#fd6031!important}div.coer-tab .border-orange{border-color:#fd6031!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header{background-color:#f5f5f562!important;border-bottom:1px solid whitesmoke!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab.mat-mdc-tab{padding:0!important;height:35px!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header div.mat-mdc-tab-label-container div.mat-mdc-tab-list div.mat-mdc-tab-labels div.mdc-tab--active.mdc-tab-indicator--active *{color:#fd6031!important;border-color:#fd6031!important}div.coer-tab mat-tab-group mat-tab-header.mat-mdc-tab-header span.tab{padding:10px 20px!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body{overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content{width:auto!important;overflow:visible!important}div.coer-tab mat-tab-group div.mat-mdc-tab-body-wrapper mat-tab-body div.mat-mdc-tab-body-content div.tab-content{padding:5px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2$4.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i2$4.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i2$4.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass"], exportAs: ["matTab"] }, { kind: "component", type: i2$4.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "directive", type: LifeCycleDirective, selector: "[lifecycle]", outputs: ["OnChanges", "onInit", "afterViewInit", "onDestroy"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CoerTab, decorators: [{
             type: Component,
@@ -3537,6 +3542,10 @@ const breakpointSIGNAL = signal(Screen?.BREAKPOINT || 'xs');
 
 const isLoadingSIGNAL = signal(false);
 
+const isMenuOpenSIGNAL = signal(false);
+
+const menuSIGNAL = signal([]);
+
 class Breadcrumbs {
     static { this.storage = 'COER-System'; }
     /** */
@@ -3824,9 +3833,253 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     args: [String]
                 }] }] });
 
+class Service {
+    constructor() {
+        //Injections
+        this.alert = inject(CoerAlert);
+        this.http = inject(HttpClient);
+        this.httpCode = {
+            Ok: 200,
+            Created: 201,
+            NoContent: 204,
+            BadRequest: 400,
+            Unauthorize: 401,
+            NotFound: 404,
+            NotAllowed: 405,
+            NotAcceptable: 406,
+            Conflict: 409,
+            PayloadTooLarge: 413,
+            InnerError: 500
+        };
+    }
+    /** */
+    ReleaseSubscription(subscription) {
+        if (subscription && !subscription.closed)
+            subscription.unsubscribe();
+    }
+    /** HTTP GET */
+    HTTP_GET(request) {
+        return new Promise(Resolve => {
+            this.ReleaseSubscription(this._GET$);
+            this._GET$ = this.http.request(new HttpRequest("GET", request.url, { params: request.queryParams, headers: request.headers })).subscribe({
+                next: (response) => {
+                    if (response.type > 0) {
+                        Resolve({
+                            body: Tools.BreakReference(response.body),
+                            status: response.status,
+                            message: response.statusText,
+                            ok: true
+                        });
+                    }
+                },
+                error: (httpError) => {
+                    this.ReleaseSubscription(this._GET$);
+                    this.AlertError(httpError, request.alertError);
+                    Resolve({
+                        body: {},
+                        status: httpError.status,
+                        message: httpError.error?.message || httpError.error,
+                        ok: false
+                    });
+                },
+                complete: () => {
+                    this.ReleaseSubscription(this._GET$);
+                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
+                        this.alert.Success(request.alertSuccess);
+                    }
+                }
+            });
+        });
+    }
+    /** HTTP POST */
+    HTTP_POST(request) {
+        return new Promise(Resolve => {
+            this.ReleaseSubscription(this._POST$);
+            this._POST$ = this.http.request(new HttpRequest("POST", request.url, request.body, { params: request.queryParams, headers: request.headers })).subscribe({
+                next: (response) => {
+                    if (response.type > 0) {
+                        Resolve({
+                            body: Tools.BreakReference(response.body),
+                            status: response.status,
+                            message: response.statusText,
+                            ok: true
+                        });
+                    }
+                },
+                error: (httpError) => {
+                    this.ReleaseSubscription(this._POST$);
+                    this.AlertError(httpError, request.alertError);
+                    Resolve({
+                        body: {},
+                        status: httpError.status,
+                        message: httpError.error?.message || httpError.error,
+                        ok: false
+                    });
+                },
+                complete: () => {
+                    this.ReleaseSubscription(this._POST$);
+                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
+                        this.alert.Success(request.alertSuccess);
+                    }
+                }
+            });
+        });
+    }
+    /** HTTP PUT */
+    HTTP_PUT(request) {
+        return new Promise(Resolve => {
+            this.ReleaseSubscription(this._PUT$);
+            this._PUT$ = this.http.request(new HttpRequest("PUT", request.url, request.body, { params: request.queryParams, headers: request.headers })).subscribe({
+                next: (response) => {
+                    if (response.type > 0) {
+                        Resolve({
+                            body: {},
+                            status: response.status,
+                            message: response.statusText,
+                            ok: true
+                        });
+                    }
+                },
+                error: (httpError) => {
+                    this.ReleaseSubscription(this._PUT$);
+                    this.AlertError(httpError, request.alertError);
+                    Resolve({
+                        body: {},
+                        status: httpError.status,
+                        message: httpError.error?.message || httpError.error,
+                        ok: false
+                    });
+                },
+                complete: () => {
+                    this.ReleaseSubscription(this._PUT$);
+                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
+                        this.alert.Success(request.alertSuccess, 'Updated', 'fa-solid fa-arrows-rotate fa-spin');
+                    }
+                }
+            });
+        });
+    }
+    /** HTTP PATCH */
+    HTTP_PATCH(request) {
+        return new Promise(Resolve => {
+            this.ReleaseSubscription(this._PATCH$);
+            this._PATCH$ = this.http.request(new HttpRequest("PATCH", request.url, request.body, { params: request.queryParams, headers: request.headers })).subscribe({
+                next: (response) => {
+                    if (response.type > 0) {
+                        Resolve({
+                            body: {},
+                            status: response.status,
+                            message: response.statusText,
+                            ok: true
+                        });
+                    }
+                },
+                error: (httpError) => {
+                    this.ReleaseSubscription(this._PATCH$);
+                    this.AlertError(httpError, request.alertError);
+                    Resolve({
+                        body: {},
+                        status: httpError.status,
+                        message: httpError.error?.message || httpError.error,
+                        ok: false
+                    });
+                },
+                complete: () => {
+                    this.ReleaseSubscription(this._PATCH$);
+                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
+                        this.alert.Success(request.alertSuccess, 'Updated', 'fa-solid fa-arrows-rotate fa-spin');
+                    }
+                }
+            });
+        });
+    }
+    /** HTTP DELETE */
+    HTTP_DELETE(request) {
+        return new Promise(Resolve => {
+            this.ReleaseSubscription(this._DELETE$);
+            this._DELETE$ = this.http.request(new HttpRequest("DELETE", request.url, { params: request.queryParams, headers: request.headers })).subscribe({
+                next: (response) => {
+                    if (response.type > 0) {
+                        Resolve({
+                            body: {},
+                            status: response.status,
+                            message: response.statusText,
+                            ok: true
+                        });
+                    }
+                },
+                error: (httpError) => {
+                    this.ReleaseSubscription(this._DELETE$);
+                    this.AlertError(httpError, request.alertError);
+                    Resolve({
+                        body: {},
+                        status: httpError.status,
+                        message: httpError.error?.message || httpError.error,
+                        ok: false
+                    });
+                },
+                complete: () => {
+                    this.ReleaseSubscription(this._DELETE$);
+                    if (Tools.IsNotOnlyWhiteSpace(request.alertSuccess)) {
+                        this.alert.Success(request.alertSuccess, 'Deleted', 'fa-regular fa-trash-can');
+                    }
+                }
+            });
+        });
+    }
+    /** */
+    AlertError(httpError, message) {
+        if (httpError.status >= 500) {
+            if (Tools.IsNotOnlyWhiteSpace(message)) {
+                this.alert.Error('', message, 'fa-solid fa-bug', null);
+            }
+        }
+        else if (httpError.status < 500) {
+            switch (httpError.status) {
+                case 400: {
+                    this.alert.Warning(httpError.error?.message || httpError.error, 'Bad Request', 'fa-regular fa-face-grin-beam-sweat fa-lg');
+                    break;
+                }
+                case 401: {
+                    this.alert.Warning(httpError.error?.message || httpError.error, 'Unauthorize', 'fa-regular fa-face-rolling-eyes fa-lg');
+                    break;
+                }
+                case 404: {
+                    this.alert.Warning(httpError.error?.message || httpError.error, 'Not Found', 'fa-regular fa-face-meh fa-lg');
+                    break;
+                }
+                case 405: {
+                    this.alert.Warning(httpError.error?.message || httpError.error, 'Not Allowed', 'fa-regular fa-face-grimace fa-lg');
+                    break;
+                }
+                case 406: {
+                    this.alert.Warning(httpError.error?.message || httpError.error, 'Not Acceptable', 'fa-regular fa-face-frown-open fa-lg');
+                    break;
+                }
+                case 409: {
+                    this.alert.Warning(httpError.error?.message || httpError.error, 'Conflict', 'fa-regular fa-face-dizzy fa-lg');
+                    break;
+                }
+                case 413: {
+                    this.alert.Warning(httpError.error?.message || httpError.error, 'Too Large', 'fa-regular fa-face-flushed fa-lg');
+                    break;
+                }
+                default: {
+                    if (httpError.status <= 0) {
+                        this.alert.Warning('Without Connection', 'WEB API DOWN', 'fa-solid fa-plug-circle-xmark fa-lg', null);
+                    }
+                    else
+                        this.alert.Warning(httpError.error?.message || httpError.error);
+                    break;
+                }
+            }
+        }
+    }
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Breadcrumbs, CONTROL_VALUE, CoerAlert, CoerButton, CoerCheckbox, CoerFilebox, CoerForm, CoerGrid, CoerModal, CoerNumberBox, CoerPageTitle, CoerRefDirective, CoerSelectbox, CoerSwitch, CoerTab, CoerTextBox, CoerTextarea, ComponentsModule, ControlValue, DateTime, DirectivesModule, Files, GridTemplates, HtmlPipe, LifeCycleDirective, Menu, NoImagePipe, NumericFormatPipe, Page, PipesModule, Screen, Source, Tools, breakpointSIGNAL, isLoadingSIGNAL, isModalOpenSIGNAL };
+export { Breadcrumbs, CONTROL_VALUE, CoerAlert, CoerButton, CoerCheckbox, CoerFilebox, CoerForm, CoerGrid, CoerModal, CoerNumberBox, CoerPageTitle, CoerRefDirective, CoerSelectbox, CoerSwitch, CoerTab, CoerTextBox, CoerTextarea, ComponentsModule, ControlValue, DateTime, DirectivesModule, Files, GridTemplates, HtmlPipe, LifeCycleDirective, Menu, NoImagePipe, NumericFormatPipe, Page, PipesModule, Screen, Service, Source, Tools, breakpointSIGNAL, isLoadingSIGNAL, isMenuOpenSIGNAL, isModalOpenSIGNAL, menuSIGNAL };
 //# sourceMappingURL=coer-elements.mjs.map