otimus-library 0.0.48 → 0.0.49

package/esm2022/public-api.mjs

@@ -3,6 +3,7 @@
 */
 export * from './lib/otimus-library.service';
 export * from './lib/otimus-library.component';
+export * from './lib/services/oc-toast.service';
 export * from './lib/components/oc-table/oc-table.component';
 export * from './lib/components/oc-badge/oc-badge.component';
 export * from './lib/components/oc-filter/oc-filter.component';
@@ -18,4 +19,5 @@ export * from './lib/components/oc-log/oc-log.component';
 export * from './lib/components/oc-pagination/oc-pagination.component';
 export * from './lib/components/oc-not-found/oc-not-found.component';
 export * from './lib/components/oc-menu/oc-menu.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBOztFQUVFO0FBRUYsY0FBYyw4QkFBOEIsQ0FBQTtBQUM1QyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsOENBQThDLENBQUE7QUFDNUQsY0FBYyw4Q0FBOEMsQ0FBQTtBQUM1RCxjQUFjLGdEQUFnRCxDQUFBO0FBQzlELGNBQWMsa0RBQWtELENBQUE7QUFDaEUsY0FBYyw4Q0FBOEMsQ0FBQTtBQUM1RCxjQUFjLDhDQUE4QyxDQUFBO0FBQzVELGNBQWMsc0RBQXNELENBQUE7QUFDcEUsY0FBYyw0Q0FBNEMsQ0FBQTtBQUMxRCxjQUFjLDREQUE0RCxDQUFBO0FBQzFFLGNBQWMsNERBQTRELENBQUE7QUFDMUUsY0FBYyxrREFBa0QsQ0FBQTtBQUNoRSxjQUFjLDBDQUEwQyxDQUFBO0FBQ3hELGNBQWMsd0RBQXdELENBQUE7QUFDdEUsY0FBYyxzREFBc0QsQ0FBQTtBQUNwRSxjQUFjLDRDQUE0QyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiXG4vKlxuKiBQdWJsaWMgQVBJIFN1cmZhY2Ugb2Ygb3RpbXVzLWxpYnJhcnlcbiovXG5cbmV4cG9ydCAqIGZyb20gJy4vbGliL290aW11cy1saWJyYXJ5LnNlcnZpY2UnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9vdGltdXMtbGlicmFyeS5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLXRhYmxlL29jLXRhYmxlLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtYmFkZ2Uvb2MtYmFkZ2UuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1maWx0ZXIvb2MtZmlsdGVyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvb2MtdG9vbHRpcC9vYy10b29sdGlwLmRpcmVjdGl2ZSdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtaW5wdXQvb2MtaW5wdXQuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1tb2RhbC9vYy1tb2RhbC5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLWtleS12YWx1ZS9vYy1rZXktdmFsdWUuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1jaGlwL29jLWNoaXAuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1tb2RhbC1mb290ZXIvb2MtbW9kYWwtZm9vdGVyLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtYXV0b2NvbXBsZXRlL29jLWF1dG9jb21wbGV0ZS5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLXByb2ZpbGUvb2MtcHJvZmlsZS5jb21wb25lbnQnXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLWxvZy9vYy1sb2cuY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1wYWdpbmF0aW9uL29jLXBhZ2luYXRpb24uY29tcG9uZW50J1xuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1ub3QtZm91bmQvb2Mtbm90LWZvdW5kLmNvbXBvbmVudCdcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtbWVudS9vYy1tZW51LmNvbXBvbmVudCciXX0=
+export * from './lib/components/oc-toast/oc-toast.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL290aW11cy1saWJyYXJ5L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUNBOztFQUVFO0FBRUYsY0FBYyw4QkFBOEIsQ0FBQTtBQUM1QyxjQUFjLGdDQUFnQyxDQUFBO0FBQzlDLGNBQWMsaUNBQWlDLENBQUE7QUFDL0MsY0FBYyw4Q0FBOEMsQ0FBQTtBQUM1RCxjQUFjLDhDQUE4QyxDQUFBO0FBQzVELGNBQWMsZ0RBQWdELENBQUE7QUFDOUQsY0FBYyxrREFBa0QsQ0FBQTtBQUNoRSxjQUFjLDhDQUE4QyxDQUFBO0FBQzVELGNBQWMsOENBQThDLENBQUE7QUFDNUQsY0FBYyxzREFBc0QsQ0FBQTtBQUNwRSxjQUFjLDRDQUE0QyxDQUFBO0FBQzFELGNBQWMsNERBQTRELENBQUE7QUFDMUUsY0FBYyw0REFBNEQsQ0FBQTtBQUMxRSxjQUFjLGtEQUFrRCxDQUFBO0FBQ2hFLGNBQWMsMENBQTBDLENBQUE7QUFDeEQsY0FBYyx3REFBd0QsQ0FBQTtBQUN0RSxjQUFjLHNEQUFzRCxDQUFBO0FBQ3BFLGNBQWMsNENBQTRDLENBQUE7QUFDMUQsY0FBYyw4Q0FBOEMsQ0FBQSIsInNvdXJjZXNDb250ZW50IjpbIlxyXG4vKlxyXG4qIFB1YmxpYyBBUEkgU3VyZmFjZSBvZiBvdGltdXMtbGlicmFyeVxyXG4qL1xyXG5cclxuZXhwb3J0ICogZnJvbSAnLi9saWIvb3RpbXVzLWxpYnJhcnkuc2VydmljZSdcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvb3RpbXVzLWxpYnJhcnkuY29tcG9uZW50J1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9zZXJ2aWNlcy9vYy10b2FzdC5zZXJ2aWNlJ1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLXRhYmxlL29jLXRhYmxlLmNvbXBvbmVudCdcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1iYWRnZS9vYy1iYWRnZS5jb21wb25lbnQnXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtZmlsdGVyL29jLWZpbHRlci5jb21wb25lbnQnXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2RpcmVjdGl2ZXMvb2MtdG9vbHRpcC9vYy10b29sdGlwLmRpcmVjdGl2ZSdcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1pbnB1dC9vYy1pbnB1dC5jb21wb25lbnQnXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtbW9kYWwvb2MtbW9kYWwuY29tcG9uZW50J1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLWtleS12YWx1ZS9vYy1rZXktdmFsdWUuY29tcG9uZW50J1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLWNoaXAvb2MtY2hpcC5jb21wb25lbnQnXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtbW9kYWwtZm9vdGVyL29jLW1vZGFsLWZvb3Rlci5jb21wb25lbnQnXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtYXV0b2NvbXBsZXRlL29jLWF1dG9jb21wbGV0ZS5jb21wb25lbnQnXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtcHJvZmlsZS9vYy1wcm9maWxlLmNvbXBvbmVudCdcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1sb2cvb2MtbG9nLmNvbXBvbmVudCdcclxuZXhwb3J0ICogZnJvbSAnLi9saWIvY29tcG9uZW50cy9vYy1wYWdpbmF0aW9uL29jLXBhZ2luYXRpb24uY29tcG9uZW50J1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLW5vdC1mb3VuZC9vYy1ub3QtZm91bmQuY29tcG9uZW50J1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9jb21wb25lbnRzL29jLW1lbnUvb2MtbWVudS5jb21wb25lbnQnXHJcbmV4cG9ydCAqIGZyb20gJy4vbGliL2NvbXBvbmVudHMvb2MtdG9hc3Qvb2MtdG9hc3QuY29tcG9uZW50JyJdfQ==

package/fesm2022/otimus-library.mjs

@@ -23,21 +23,99 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
 
 class OtimusLibraryComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OtimusLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OtimusLibraryComponent, isStandalone: true, selector: "lib-otimus-library", ngImport: i0, template: `
-    <p>
-      otimus-library works!
-    </p>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OtimusLibraryComponent, isStandalone: true, selector: "lib-otimus-library", ngImport: i0, template: `
+    <p>
+      otimus-library works!
+    </p>
   `, isInline: true, styles: [""] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OtimusLibraryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-otimus-library', standalone: true, imports: [], template: `
-    <p>
-      otimus-library works!
-    </p>
+            args: [{ selector: 'lib-otimus-library', standalone: true, imports: [], template: `
+    <p>
+      otimus-library works!
+    </p>
   ` }]
         }] });
 
+class OcToastService {
+    constructor() {
+        this.toastList = [];
+        this.isRunning = false;
+        this.openToast = (toastStatus, toastMessage, toastCounter, promiseKey) => {
+            const toast = {
+                id: this.toastList.length === 0 ? 1 : this.toastList[this.toastList.length - 1].id + 1,
+                counter: toastCounter || 5,
+                status: toastStatus,
+                message: toastMessage,
+                promiseKey,
+                hasAnimation: true,
+            };
+            const toastExists = this.toastList.some((to) => {
+                return to.status === toastStatus && to.message === toastMessage;
+            });
+            if (toastExists)
+                return;
+            const keyExists = this.toastList.find((to) => to.promiseKey === toast.promiseKey);
+            if (keyExists) {
+                this.toastList = this.toastList.map((to) => {
+                    if (to.promiseKey === promiseKey) {
+                        return { ...toast, hasAnimation: false };
+                    }
+                    return to;
+                });
+            }
+            this.toastList.push(toast);
+            if (!this.isRunning) {
+                this.renderToasts();
+            }
+        };
+    }
+    closeToast(id) {
+        this.toastList = this.toastList.map((to) => {
+            if (to.id === id) {
+                return { ...to, counter: 0 };
+            }
+            return to;
+        });
+        this.currentToast = this.toastList[0];
+    }
+    renderToasts() {
+        if (this.toastList.length === 0) {
+            this.isRunning = false;
+            return;
+        }
+        this.isRunning = true;
+        this.currentToast = this.toastList[0];
+        const toastInterval = setInterval(() => {
+            if (this.toastList.length === 0) {
+                clearInterval(toastInterval);
+                this.isRunning = false;
+                return;
+            }
+            this.currentToast = this.toastList[0];
+            if (this.currentToast.status !== 'carregando') {
+                this.currentToast.counter--;
+            }
+            if (this.currentToast.counter <= 0) {
+                this.toastList = this.toastList.filter((to) => {
+                    return to.status !== this.currentToast.status && to.message !== this.currentToast.message;
+                });
+                clearInterval(toastInterval);
+                this.renderToasts();
+            }
+        }, 1000);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcToastService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcToastService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcToastService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 class OcTableComponent {
     constructor() {
         this.columns = [];
@@ -50,11 +128,11 @@ class OcTableComponent {
         this.keys = Object.keys(this.dataSource[0]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcTableComponent, isStandalone: true, selector: "oc-table", inputs: { columns: "columns", dataSource: "dataSource" }, ngImport: i0, template: "<table cdk-table [dataSource]=\"dataSource\">\n\n  <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\n    <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>\n    <td cdk-cell *cdkCellDef=\"let row\"> {{row[keys[i]]}} </td>\n  </ng-container>\n\n  <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\n  <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\n</table>\n", styles: ["table{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i2.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i2.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcTableComponent, isStandalone: true, selector: "oc-table", inputs: { columns: "columns", dataSource: "dataSource" }, ngImport: i0, template: "<table cdk-table [dataSource]=\"dataSource\">\r\n\r\n  <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\r\n    <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>\r\n    <td cdk-cell *cdkCellDef=\"let row\"> {{row[keys[i]]}} </td>\r\n  </ng-container>\r\n\r\n  <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\r\n  <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: CdkTableModule }, { kind: "component", type: i2.CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: i2.CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "directive", type: i2.CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: i2.CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: i2.CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["sticky", "cdkColumnDef", "stickyEnd"] }, { kind: "directive", type: i2.CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "component", type: i2.CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: i2.CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "component", type: i2.CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "directive", type: i2.CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-table', standalone: true, imports: [CommonModule, CdkTableModule], template: "<table cdk-table [dataSource]=\"dataSource\">\n\n  <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\n    <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>\n    <td cdk-cell *cdkCellDef=\"let row\"> {{row[keys[i]]}} </td>\n  </ng-container>\n\n  <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\n  <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\n</table>\n", styles: ["table{width:100%}\n"] }]
+            args: [{ selector: 'oc-table', standalone: true, imports: [CommonModule, CdkTableModule], template: "<table cdk-table [dataSource]=\"dataSource\">\r\n\r\n  <ng-container *ngFor=\"let column of columns; let i = index\" [cdkColumnDef]=\"column\">\r\n    <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>\r\n    <td cdk-cell *cdkCellDef=\"let row\"> {{row[keys[i]]}} </td>\r\n  </ng-container>\r\n\r\n  <tr cdk-header-row *cdkHeaderRowDef=\"columns\"></tr>\r\n  <tr cdk-row *cdkRowDef=\"let row; columns: columns\"></tr>\r\n</table>\r\n", styles: ["table{width:100%}\n"] }]
         }], propDecorators: { columns: [{
                 type: Input
             }], dataSource: [{
@@ -74,11 +152,11 @@ class OcBadgeComponent {
             this.classList.push('waved');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcBadgeComponent, isStandalone: true, selector: "oc-badge", inputs: { ocSize: "ocSize", ocColor: "ocColor", ocWaved: "ocWaved" }, ngImport: i0, template: "<div>\n  <div class=\"oc-badge\" [ngClass]=\"classList\">\n    <ng-content>\n  \n    </ng-content>\n  </div>\n</div>\n", styles: [".oc-badge{border-radius:50%;display:flex;justify-content:center;align-items:center;color:#f8f9ff}.oc-badge>*{color:#f8f9ff;font-weight:600}.notification{background-color:#ed3a3a}.brand-g{background-color:#00dda3}.brand-p{background-color:#5505a2}.success{background-color:#4ab858}.warning{background-color:#ebbc2e}.small{width:22px;height:22px;font-size:1rem}.medium{width:28px;height:28px;font-size:1.25rem}.large{width:34px;height:34px;font-size:1.5rem}.waved{position:relative;z-index:2}.waved:before,.waved:after{z-index:-1;content:\"\";position:absolute;top:0;border-radius:50%;width:100%;height:100%;animation:wave infinite 2s}.waved:after{animation-delay:.6s}.waved.notification:before,.waved.notification:after{background-color:#ed3a3a}.waved.brand-g:before,.waved.brand-g:after{background-color:#00dda3}.waved.brand-p:before,.waved.brand-p:after{background-color:#5505a2}.waved.success:before,.waved.success:after{background-color:#4ab858}.waved.warning:before,.waved.warning:after{background-color:#ebbc2e}@keyframes wave{0%{transform:scale(0)}to{opacity:0;transform:scale(2)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcBadgeComponent, isStandalone: true, selector: "oc-badge", inputs: { ocSize: "ocSize", ocColor: "ocColor", ocWaved: "ocWaved" }, ngImport: i0, template: "<div>\r\n  <div class=\"oc-badge\" [ngClass]=\"classList\">\r\n    <ng-content>\r\n  \r\n    </ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".oc-badge{border-radius:50%;display:flex;justify-content:center;align-items:center;color:#f8f9ff}.oc-badge>*{color:#f8f9ff;font-weight:600}.notification{background-color:#ed3a3a}.brand-g{background-color:#00dda3}.brand-p{background-color:#5505a2}.success{background-color:#4ab858}.warning{background-color:#ebbc2e}.small{width:22px;height:22px;font-size:1rem}.medium{width:28px;height:28px;font-size:1.25rem}.large{width:34px;height:34px;font-size:1.5rem}.waved{position:relative;z-index:2}.waved:before,.waved:after{z-index:-1;content:\"\";position:absolute;top:0;border-radius:50%;width:100%;height:100%;animation:wave infinite 2s}.waved:after{animation-delay:.6s}.waved.notification:before,.waved.notification:after{background-color:#ed3a3a}.waved.brand-g:before,.waved.brand-g:after{background-color:#00dda3}.waved.brand-p:before,.waved.brand-p:after{background-color:#5505a2}.waved.success:before,.waved.success:after{background-color:#4ab858}.waved.warning:before,.waved.warning:after{background-color:#ebbc2e}@keyframes wave{0%{transform:scale(0)}to{opacity:0;transform:scale(2)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcBadgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-badge', standalone: true, imports: [CommonModule], template: "<div>\n  <div class=\"oc-badge\" [ngClass]=\"classList\">\n    <ng-content>\n  \n    </ng-content>\n  </div>\n</div>\n", styles: [".oc-badge{border-radius:50%;display:flex;justify-content:center;align-items:center;color:#f8f9ff}.oc-badge>*{color:#f8f9ff;font-weight:600}.notification{background-color:#ed3a3a}.brand-g{background-color:#00dda3}.brand-p{background-color:#5505a2}.success{background-color:#4ab858}.warning{background-color:#ebbc2e}.small{width:22px;height:22px;font-size:1rem}.medium{width:28px;height:28px;font-size:1.25rem}.large{width:34px;height:34px;font-size:1.5rem}.waved{position:relative;z-index:2}.waved:before,.waved:after{z-index:-1;content:\"\";position:absolute;top:0;border-radius:50%;width:100%;height:100%;animation:wave infinite 2s}.waved:after{animation-delay:.6s}.waved.notification:before,.waved.notification:after{background-color:#ed3a3a}.waved.brand-g:before,.waved.brand-g:after{background-color:#00dda3}.waved.brand-p:before,.waved.brand-p:after{background-color:#5505a2}.waved.success:before,.waved.success:after{background-color:#4ab858}.waved.warning:before,.waved.warning:after{background-color:#ebbc2e}@keyframes wave{0%{transform:scale(0)}to{opacity:0;transform:scale(2)}}\n"] }]
+            args: [{ selector: 'oc-badge', standalone: true, imports: [CommonModule], template: "<div>\r\n  <div class=\"oc-badge\" [ngClass]=\"classList\">\r\n    <ng-content>\r\n  \r\n    </ng-content>\r\n  </div>\r\n</div>\r\n", styles: [".oc-badge{border-radius:50%;display:flex;justify-content:center;align-items:center;color:#f8f9ff}.oc-badge>*{color:#f8f9ff;font-weight:600}.notification{background-color:#ed3a3a}.brand-g{background-color:#00dda3}.brand-p{background-color:#5505a2}.success{background-color:#4ab858}.warning{background-color:#ebbc2e}.small{width:22px;height:22px;font-size:1rem}.medium{width:28px;height:28px;font-size:1.25rem}.large{width:34px;height:34px;font-size:1.5rem}.waved{position:relative;z-index:2}.waved:before,.waved:after{z-index:-1;content:\"\";position:absolute;top:0;border-radius:50%;width:100%;height:100%;animation:wave infinite 2s}.waved:after{animation-delay:.6s}.waved.notification:before,.waved.notification:after{background-color:#ed3a3a}.waved.brand-g:before,.waved.brand-g:after{background-color:#00dda3}.waved.brand-p:before,.waved.brand-p:after{background-color:#5505a2}.waved.success:before,.waved.success:after{background-color:#4ab858}.waved.warning:before,.waved.warning:after{background-color:#ebbc2e}@keyframes wave{0%{transform:scale(0)}to{opacity:0;transform:scale(2)}}\n"] }]
         }], propDecorators: { ocSize: [{
                 type: Input
             }], ocColor: [{
@@ -98,11 +176,11 @@ class OcFilterComponent {
         this.isOpen = !this.isOpen;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcFilterComponent, isStandalone: true, selector: "oc-filter", inputs: { ocText: "ocText", ocActive: "ocActive", ocSide: "ocSide" }, ngImport: i0, template: "<div class=\"oc-filter-row\" [ngClass]=\"{\n  reverse: ocSide === 'right'\n}\">\n  <button class=\"oc-filter-btn\" (click)=\"toggleOpen()\">\n    <span class=\"material-symbols-outlined\">filter_list</span>\n    {{ocText}}\n    <div class=\"badge\">\n      <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\n    </div>\n  </button>\n  \n  <div class=\"filter-row-content\">\n    <ng-content select=\"[row]\"></ng-content>\n  </div>\n  \n</div>\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\n  <ng-content select=\"[body]\">\n  </ng-content>\n</div>\n", styles: [".oc-filter-row{width:100%;display:flex;align-items:center;gap:1rem}.oc-filter-row .filter-row-content{width:100%}.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.2rem;transition:.2s ease;position:relative;cursor:pointer}.oc-filter-btn:hover{filter:brightness(.9)}.oc-filter-btn .material-symbols-outlined{font-size:1rem;color:#f7f7f7}.oc-filter-btn img{width:15px;filter:brightness(0) invert(1)}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-content{width:100%;animation:showing-up .15s ease;overflow:hidden;margin-top:1rem}@keyframes showing-up{0%{height:0px;opacity:0}to{height:100%;opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OcBadgeComponent, selector: "oc-badge", inputs: ["ocSize", "ocColor", "ocWaved"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcFilterComponent, isStandalone: true, selector: "oc-filter", inputs: { ocText: "ocText", ocActive: "ocActive", ocSide: "ocSide" }, ngImport: i0, template: "<div class=\"oc-filter-row\" [ngClass]=\"{\r\n  reverse: ocSide === 'right'\r\n}\">\r\n  <button class=\"oc-filter-btn\" (click)=\"toggleOpen()\">\r\n    <span class=\"material-symbols-outlined\">filter_list</span>\r\n    {{ocText}}\r\n    <div class=\"badge\">\r\n      <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\r\n    </div>\r\n  </button>\r\n  \r\n  <div class=\"filter-row-content\">\r\n    <ng-content select=\"[row]\"></ng-content>\r\n  </div>\r\n  \r\n</div>\r\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\r\n  <ng-content select=\"[body]\">\r\n  </ng-content>\r\n</div>\r\n", styles: [".oc-filter-row{width:100%;display:flex;align-items:center;gap:1rem}.oc-filter-row .filter-row-content{width:100%}.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.2rem;transition:.2s ease;position:relative;cursor:pointer}.oc-filter-btn:hover{filter:brightness(.9)}.oc-filter-btn .material-symbols-outlined{font-size:1rem;color:#f7f7f7}.oc-filter-btn img{width:15px;filter:brightness(0) invert(1)}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-content{width:100%;animation:showing-up .15s ease;overflow:hidden;margin-top:1rem}@keyframes showing-up{0%{height:0px;opacity:0}to{height:100%;opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: OcBadgeComponent, selector: "oc-badge", inputs: ["ocSize", "ocColor", "ocWaved"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-filter', standalone: true, imports: [CommonModule, OcBadgeComponent], template: "<div class=\"oc-filter-row\" [ngClass]=\"{\n  reverse: ocSide === 'right'\n}\">\n  <button class=\"oc-filter-btn\" (click)=\"toggleOpen()\">\n    <span class=\"material-symbols-outlined\">filter_list</span>\n    {{ocText}}\n    <div class=\"badge\">\n      <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\n    </div>\n  </button>\n  \n  <div class=\"filter-row-content\">\n    <ng-content select=\"[row]\"></ng-content>\n  </div>\n  \n</div>\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\n  <ng-content select=\"[body]\">\n  </ng-content>\n</div>\n", styles: [".oc-filter-row{width:100%;display:flex;align-items:center;gap:1rem}.oc-filter-row .filter-row-content{width:100%}.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.2rem;transition:.2s ease;position:relative;cursor:pointer}.oc-filter-btn:hover{filter:brightness(.9)}.oc-filter-btn .material-symbols-outlined{font-size:1rem;color:#f7f7f7}.oc-filter-btn img{width:15px;filter:brightness(0) invert(1)}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-content{width:100%;animation:showing-up .15s ease;overflow:hidden;margin-top:1rem}@keyframes showing-up{0%{height:0px;opacity:0}to{height:100%;opacity:1}}\n"] }]
+            args: [{ selector: 'oc-filter', standalone: true, imports: [CommonModule, OcBadgeComponent], template: "<div class=\"oc-filter-row\" [ngClass]=\"{\r\n  reverse: ocSide === 'right'\r\n}\">\r\n  <button class=\"oc-filter-btn\" (click)=\"toggleOpen()\">\r\n    <span class=\"material-symbols-outlined\">filter_list</span>\r\n    {{ocText}}\r\n    <div class=\"badge\">\r\n      <oc-badge *ngIf=\"ocActive > 0\" ocSize=\"small\" ocColor=\"success\" [ocWaved]=\"true\">{{ocActive}}</oc-badge>\r\n    </div>\r\n  </button>\r\n  \r\n  <div class=\"filter-row-content\">\r\n    <ng-content select=\"[row]\"></ng-content>\r\n  </div>\r\n  \r\n</div>\r\n<div *ngIf=\"isOpen\" class=\"oc-filter-content\">\r\n  <ng-content select=\"[body]\">\r\n  </ng-content>\r\n</div>\r\n", styles: [".oc-filter-row{width:100%;display:flex;align-items:center;gap:1rem}.oc-filter-row .filter-row-content{width:100%}.reverse{flex-direction:row-reverse}.oc-filter-btn{background-color:#5505a2;color:#f8f9ff;border:none;border-radius:.5rem;padding:.4rem .8rem;font-weight:600;display:flex;align-items:center;gap:.2rem;transition:.2s ease;position:relative;cursor:pointer}.oc-filter-btn:hover{filter:brightness(.9)}.oc-filter-btn .material-symbols-outlined{font-size:1rem;color:#f7f7f7}.oc-filter-btn img{width:15px;filter:brightness(0) invert(1)}.oc-filter-btn .badge{position:absolute;top:-8px;right:-12px}.oc-filter-content{width:100%;animation:showing-up .15s ease;overflow:hidden;margin-top:1rem}@keyframes showing-up{0%{height:0px;opacity:0}to{height:100%;opacity:1}}\n"] }]
         }], propDecorators: { ocText: [{
                 type: Input
             }], ocActive: [{
@@ -203,11 +281,11 @@ class OcInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcInputComponent, isStandalone: true, selector: "oc-input", inputs: { ocError: "ocError", ocSize: "ocSize", ocPlaceholder: "ocPlaceholder", ocWidth: "ocWidth" }, ngImport: i0, template: "<div class=\"oc-input-box\" [ngClass]=\"{\n  'small': ocSize === 'small',\n  'large': ocSize === 'large',\n  error: !!ocError\n}\"\n  [ngStyle]=\"{\n    width: ocWidth || '100%'\n  }\"\n  [id]=\"inputId\">\n  <ng-content></ng-content>\n  <label>{{ocPlaceholder}}</label>\n  <small\n    *ngIf=\"ocError\"\n    class=\"error-msg\"\n  >{{ocError}}</small>\n</div>\n\n", styles: [".oc-input-box{position:relative}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.small input,.small textarea,.small select{padding:.3rem .7rem;border-radius:.5rem}.small label{padding:.5rem .7rem}.small input:focus~label,.small input:not(:placeholder-shown)~label,.small textarea:focus~label,.small textarea:not(:placeholder-shown)~label,.small select:focus~label,.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.large input,.large textarea,.large select{padding:1rem;border-radius:1rem}.large label{padding:1rem .7rem}.large input:focus~label,.large input:not(:placeholder-shown)~label,.large textarea:focus~label,.large textarea:not(:placeholder-shown)~label,.large select:focus~label,.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcInputComponent, isStandalone: true, selector: "oc-input", inputs: { ocError: "ocError", ocSize: "ocSize", ocPlaceholder: "ocPlaceholder", ocWidth: "ocWidth" }, ngImport: i0, template: "<div class=\"oc-input-box\" [ngClass]=\"{\r\n  'small': ocSize === 'small',\r\n  'large': ocSize === 'large',\r\n  error: !!ocError\r\n}\"\r\n  [ngStyle]=\"{\r\n    width: ocWidth || '100%'\r\n  }\"\r\n  [id]=\"inputId\">\r\n  <ng-content></ng-content>\r\n  <label>{{ocPlaceholder}}</label>\r\n  <small\r\n    *ngIf=\"ocError\"\r\n    class=\"error-msg\"\r\n  >{{ocError}}</small>\r\n</div>\r\n\r\n", styles: [".oc-input-box{position:relative}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.small input,.small textarea,.small select{padding:.3rem .7rem;border-radius:.5rem}.small label{padding:.5rem .7rem}.small input:focus~label,.small input:not(:placeholder-shown)~label,.small textarea:focus~label,.small textarea:not(:placeholder-shown)~label,.small select:focus~label,.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.large input,.large textarea,.large select{padding:1rem;border-radius:1rem}.large label{padding:1rem .7rem}.large input:focus~label,.large input:not(:placeholder-shown)~label,.large textarea:focus~label,.large textarea:not(:placeholder-shown)~label,.large select:focus~label,.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-input', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"oc-input-box\" [ngClass]=\"{\n  'small': ocSize === 'small',\n  'large': ocSize === 'large',\n  error: !!ocError\n}\"\n  [ngStyle]=\"{\n    width: ocWidth || '100%'\n  }\"\n  [id]=\"inputId\">\n  <ng-content></ng-content>\n  <label>{{ocPlaceholder}}</label>\n  <small\n    *ngIf=\"ocError\"\n    class=\"error-msg\"\n  >{{ocError}}</small>\n</div>\n\n", styles: [".oc-input-box{position:relative}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.small input,.small textarea,.small select{padding:.3rem .7rem;border-radius:.5rem}.small label{padding:.5rem .7rem}.small input:focus~label,.small input:not(:placeholder-shown)~label,.small textarea:focus~label,.small textarea:not(:placeholder-shown)~label,.small select:focus~label,.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.large input,.large textarea,.large select{padding:1rem;border-radius:1rem}.large label{padding:1rem .7rem}.large input:focus~label,.large input:not(:placeholder-shown)~label,.large textarea:focus~label,.large textarea:not(:placeholder-shown)~label,.large select:focus~label,.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}\n"] }]
+            args: [{ selector: 'oc-input', standalone: true, imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"oc-input-box\" [ngClass]=\"{\r\n  'small': ocSize === 'small',\r\n  'large': ocSize === 'large',\r\n  error: !!ocError\r\n}\"\r\n  [ngStyle]=\"{\r\n    width: ocWidth || '100%'\r\n  }\"\r\n  [id]=\"inputId\">\r\n  <ng-content></ng-content>\r\n  <label>{{ocPlaceholder}}</label>\r\n  <small\r\n    *ngIf=\"ocError\"\r\n    class=\"error-msg\"\r\n  >{{ocError}}</small>\r\n</div>\r\n\r\n", styles: [".oc-input-box{position:relative}.oc-input-box select *{background-color:#f8f9ff}.oc-input-box label{position:absolute;left:0;top:0;padding:.5rem .7rem;font-size:.85rem;color:#8f9596;pointer-events:none;transition:.3s ease;border-radius:.5rem;white-space:nowrap}.oc-input-box input,.oc-input-box textarea,.oc-input-box select{font-size:1rem;border-radius:.7rem;background-color:#f8f9ff;border:1px solid #d1d5db;outline:none;padding:.6rem .9rem;width:100%;transition:.3s ease;color:#7e8485;font-weight:500}.oc-input-box input:focus,.oc-input-box textarea:focus,.oc-input-box select:focus{border:1px solid #00dda3;box-shadow:0 4px 3.2px #00dda314}.oc-input-box input:not(:placeholder-shown)~label,.oc-input-box input:focus~label,.oc-input-box textarea:not(:placeholder-shown)~label,.oc-input-box textarea:focus~label,.oc-input-box select:valid~label,.oc-input-box select:focus~label{transform:translateY(-.855rem) translate(.6rem);color:#1e0832;background-color:#f8f9ff;padding:1px 7px;font-weight:500}.error input,.error textarea,.error select{border:1px solid #ed3a3a;box-shadow:0 4px 6.1px #a1000014}.error small,.error label{color:#ed3a3a!important;font-weight:600}.small input,.small textarea,.small select{padding:.3rem .7rem;border-radius:.5rem}.small label{padding:.5rem .7rem}.small input:focus~label,.small input:not(:placeholder-shown)~label,.small textarea:focus~label,.small textarea:not(:placeholder-shown)~label,.small select:focus~label,.small select:valid~label{transform:translateY(-.99rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}.large input,.large textarea,.large select{padding:1rem;border-radius:1rem}.large label{padding:1rem .7rem}.large input:focus~label,.large input:not(:placeholder-shown)~label,.large textarea:focus~label,.large textarea:not(:placeholder-shown)~label,.large select:focus~label,.large select:valid~label{transform:translateY(-.77rem) translate(.6rem);color:#7e8485;background-color:#fff;padding:1px 7px;font-weight:500}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { ocError: [{
                 type: Input
             }], ocSize: [{
@@ -558,11 +636,11 @@ class OcMenuComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcMenuComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.5", type: OcMenuComponent, isStandalone: true, selector: "oc-menu", inputs: { ocMenu: "ocMenu" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["ocMenuEl"], descendants: true }], ngImport: i0, template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\n  <ul>\n    @for(option of ocMenu; track $index) {\n      <li>\n        @if(option.icon) {\n          <span class=\"material-symbols-outlined\">\n            {{option.icon}}\n          </span>\n        }  \n        @if(option.callback){\n          <button (click)=\"option.callback()\">{{option.name}}</button>\n        }\n        @if(option.url){\n          <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\n        }\n        @if (!option.callback && !option.url) {\n          <span>{{option.name}}</span>\n        }\n    </li>\n  }\n  </ul>\n</div>\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;transition:.1s ease}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:500;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.5", type: OcMenuComponent, isStandalone: true, selector: "oc-menu", inputs: { ocMenu: "ocMenu" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["ocMenuEl"], descendants: true }], ngImport: i0, template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\r\n  <ul>\r\n    @for(option of ocMenu; track $index) {\r\n      <li>\r\n        @if(option.icon) {\r\n          <span class=\"material-symbols-outlined\">\r\n            {{option.icon}}\r\n          </span>\r\n        }  \r\n        @if(option.callback){\r\n          <button (click)=\"option.callback()\">{{option.name}}</button>\r\n        }\r\n        @if(option.url){\r\n          <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\r\n        }\r\n        @if (!option.callback && !option.url) {\r\n          <span>{{option.name}}</span>\r\n        }\r\n    </li>\r\n  }\r\n  </ul>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;transition:.1s ease}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:500;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CdkMenuModule }, { kind: "directive", type: i2$2.CdkMenu, selector: "[cdkMenu]", outputs: ["closed"], exportAs: ["cdkMenu"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'oc-menu', standalone: true, imports: [CommonModule, CdkMenuModule], template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\n  <ul>\n    @for(option of ocMenu; track $index) {\n      <li>\n        @if(option.icon) {\n          <span class=\"material-symbols-outlined\">\n            {{option.icon}}\n          </span>\n        }  \n        @if(option.callback){\n          <button (click)=\"option.callback()\">{{option.name}}</button>\n        }\n        @if(option.url){\n          <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\n        }\n        @if (!option.callback && !option.url) {\n          <span>{{option.name}}</span>\n        }\n    </li>\n  }\n  </ul>\n</div>\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;transition:.1s ease}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:500;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
+            args: [{ selector: 'oc-menu', standalone: true, imports: [CommonModule, CdkMenuModule], template: "<div class=\"oc-menu\" *ngIf=\"isMenuShown\" cdkMenu #ocMenuEl>\r\n  <ul>\r\n    @for(option of ocMenu; track $index) {\r\n      <li>\r\n        @if(option.icon) {\r\n          <span class=\"material-symbols-outlined\">\r\n            {{option.icon}}\r\n          </span>\r\n        }  \r\n        @if(option.callback){\r\n          <button (click)=\"option.callback()\">{{option.name}}</button>\r\n        }\r\n        @if(option.url){\r\n          <a [href]=\"option.url\" [target]=\"option.targetBlank ? '_blank' : ''\">{{option.name}}</a>\r\n        }\r\n        @if (!option.callback && !option.url) {\r\n          <span>{{option.name}}</span>\r\n        }\r\n    </li>\r\n  }\r\n  </ul>\r\n</div>\r\n", styles: ["*{box-sizing:border-box}.oc-menu{display:flex;flex-direction:column;border-radius:0 8px 8px;background-color:#f8f9ff;border:2px solid #ffffff;position:absolute;max-height:800px;box-shadow:0 4px 8.7px #00000021;animation:showUp .15s ease}.oc-menu ul{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;width:100%}.oc-menu ul li{text-align:left;text-decoration:none;width:100%;max-height:30px;display:flex;align-items:center;gap:.2rem;white-space:nowrap;transition:.1s ease}.oc-menu ul li a,.oc-menu ul li button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.oc-menu ul li a,.oc-menu ul li button,.oc-menu ul li span{color:#8f9596;text-decoration:none;font-size:1rem;font-weight:500;text-align:left;padding:0;margin:0;border:none;padding:.6rem;background-color:transparent;width:100%;height:100%;cursor:pointer}.oc-menu ul li .material-symbols-outlined{width:.3rem;font-size:1.1rem}.oc-menu ul li:hover{background-color:#fff}@keyframes showUp{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { menu: [{
                 type: ViewChild,
                 args: ['ocMenuEl']
@@ -570,6 +648,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
                 type: Input
             }] } });
 
+class OcToastComponent {
+    constructor(toast) {
+        this.toast = toast;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcToastComponent, deps: [{ token: OcToastService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.5", type: OcToastComponent, isStandalone: true, selector: "oc-toast", ngImport: i0, template: "<div\r\n  class=\"toast\"\r\n  [ngClass]=\"{\r\n    'close-toast': toast.currentToast.counter === 1,\r\n    error: toast.currentToast.status === 'erro',\r\n    success: toast.currentToast.status === 'sucesso',\r\n    loading: toast.currentToast.status === 'carregando',\r\n    animation: toast.currentToast.hasAnimation\r\n  }\"\r\n  *ngIf=\"toast.currentToast && toast.currentToast.counter > 0\"\r\n>\r\n  <header>\r\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n    <h4 class=\"status\">\r\n      {{ toast.currentToast.status[0].toUpperCase() + toast.currentToast.status.slice(1) }}\r\n    </h4>\r\n    <button (click)=\"toast.closeToast(toast.currentToast.id)\">\r\n      <span class=\"material-symbols-outlined\">close</span>\r\n    </button>\r\n  </header>\r\n  <p>{{ toast.currentToast.message }}</p>\r\n</div>\r\n\r\n<ng-template #iconTemplate>\r\n  <span\r\n    class=\"material-symbols-outlined\"\r\n    *ngIf=\"toast.currentToast.status === 'erro'\"\r\n    >error</span\r\n  >\r\n\r\n  <span\r\n    class=\"material-symbols-outlined\"\r\n    *ngIf=\"toast.currentToast.status === 'sucesso'\"\r\n    >check_circle</span\r\n  >\r\n\r\n  <span\r\n    class=\"material-symbols-outlined\"\r\n    *ngIf=\"toast.currentToast.status === 'informa\u00E7\u00E3o'\"\r\n    >info</span\r\n  >\r\n\r\n<svg *ngIf=\"toast.currentToast.status === 'carregando'\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><style>rect{fill:#00DDA3}.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class=\"spinner_zWVm\" x=\"1\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_gfyD\" x=\"8.33\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_T5JJ\" x=\"1\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_E3Wz\" x=\"15.66\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_g2vs\" x=\"8.33\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_ctYB\" x=\"1\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_BDNj\" x=\"15.66\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_rCw3\" x=\"8.33\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_Rszm\" x=\"15.66\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/></svg>\r\n  \r\n\r\n</ng-template>\r\n", styles: [".toast{position:fixed;bottom:30px;right:30px;width:370px!important;min-height:116px!important;display:flex;flex-direction:column;justify-content:space-between;border-radius:17px;padding:1rem 1rem 1.5rem;box-shadow:8px 16px 32px #0000004d;background-color:#fff;z-index:50}.toast p{color:#625270;font-size:13px}.toast>header{color:#5505a2;display:flex;align-items:center;gap:.5rem}.toast>header>button{position:absolute;right:20px;border:none;background-color:transparent;color:#d1d5db;padding:10px 0 10px 10px;cursor:pointer;transition:.3s ease}.toast>header>button:hover{color:#ed3a3a}.toast>header>.icon{border:4px solid #5505a2;border-radius:50%;width:30px;height:30px}.toast>header h4{margin:0;padding:0;font-size:20px}.animation{animation:show-up .5s ease}.error>header{color:#ed3a3a}.error>header h4{color:#ed3a3a}.success>header{color:#4ab858}.success>header h4{color:#4ab858}.loading>header h4{color:#786b84}.loading>header>img,.loading>header svg{transform:rotate(45deg)}.close-toast{animation:close 1.1s ease}@keyframes show-up{0%{opacity:0;transform:translateY(100vw)}to{opacity:1;transform:translate(0)}}@keyframes close{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100vw)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImport: i0, type: OcToastComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'oc-toast', standalone: true, imports: [CommonModule], template: "<div\r\n  class=\"toast\"\r\n  [ngClass]=\"{\r\n    'close-toast': toast.currentToast.counter === 1,\r\n    error: toast.currentToast.status === 'erro',\r\n    success: toast.currentToast.status === 'sucesso',\r\n    loading: toast.currentToast.status === 'carregando',\r\n    animation: toast.currentToast.hasAnimation\r\n  }\"\r\n  *ngIf=\"toast.currentToast && toast.currentToast.counter > 0\"\r\n>\r\n  <header>\r\n    <ng-container [ngTemplateOutlet]=\"iconTemplate\"></ng-container>\r\n    <h4 class=\"status\">\r\n      {{ toast.currentToast.status[0].toUpperCase() + toast.currentToast.status.slice(1) }}\r\n    </h4>\r\n    <button (click)=\"toast.closeToast(toast.currentToast.id)\">\r\n      <span class=\"material-symbols-outlined\">close</span>\r\n    </button>\r\n  </header>\r\n  <p>{{ toast.currentToast.message }}</p>\r\n</div>\r\n\r\n<ng-template #iconTemplate>\r\n  <span\r\n    class=\"material-symbols-outlined\"\r\n    *ngIf=\"toast.currentToast.status === 'erro'\"\r\n    >error</span\r\n  >\r\n\r\n  <span\r\n    class=\"material-symbols-outlined\"\r\n    *ngIf=\"toast.currentToast.status === 'sucesso'\"\r\n    >check_circle</span\r\n  >\r\n\r\n  <span\r\n    class=\"material-symbols-outlined\"\r\n    *ngIf=\"toast.currentToast.status === 'informa\u00E7\u00E3o'\"\r\n    >info</span\r\n  >\r\n\r\n<svg *ngIf=\"toast.currentToast.status === 'carregando'\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><style>rect{fill:#00DDA3}.spinner_zWVm{animation:spinner_5QiW 1.2s linear infinite,spinner_PnZo 1.2s linear infinite}.spinner_gfyD{animation:spinner_5QiW 1.2s linear infinite,spinner_4j7o 1.2s linear infinite;animation-delay:.1s}.spinner_T5JJ{animation:spinner_5QiW 1.2s linear infinite,spinner_fLK4 1.2s linear infinite;animation-delay:.1s}.spinner_E3Wz{animation:spinner_5QiW 1.2s linear infinite,spinner_tDji 1.2s linear infinite;animation-delay:.2s}.spinner_g2vs{animation:spinner_5QiW 1.2s linear infinite,spinner_CMiT 1.2s linear infinite;animation-delay:.2s}.spinner_ctYB{animation:spinner_5QiW 1.2s linear infinite,spinner_cHKR 1.2s linear infinite;animation-delay:.2s}.spinner_BDNj{animation:spinner_5QiW 1.2s linear infinite,spinner_Re6e 1.2s linear infinite;animation-delay:.3s}.spinner_rCw3{animation:spinner_5QiW 1.2s linear infinite,spinner_EJmJ 1.2s linear infinite;animation-delay:.3s}.spinner_Rszm{animation:spinner_5QiW 1.2s linear infinite,spinner_YJOP 1.2s linear infinite;animation-delay:.4s}@keyframes spinner_5QiW{0%,50%{width:7.33px;height:7.33px}25%{width:1.33px;height:1.33px}}@keyframes spinner_PnZo{0%,50%{x:1px;y:1px}25%{x:4px;y:4px}}@keyframes spinner_4j7o{0%,50%{x:8.33px;y:1px}25%{x:11.33px;y:4px}}@keyframes spinner_fLK4{0%,50%{x:1px;y:8.33px}25%{x:4px;y:11.33px}}@keyframes spinner_tDji{0%,50%{x:15.66px;y:1px}25%{x:18.66px;y:4px}}@keyframes spinner_CMiT{0%,50%{x:8.33px;y:8.33px}25%{x:11.33px;y:11.33px}}@keyframes spinner_cHKR{0%,50%{x:1px;y:15.66px}25%{x:4px;y:18.66px}}@keyframes spinner_Re6e{0%,50%{x:15.66px;y:8.33px}25%{x:18.66px;y:11.33px}}@keyframes spinner_EJmJ{0%,50%{x:8.33px;y:15.66px}25%{x:11.33px;y:18.66px}}@keyframes spinner_YJOP{0%,50%{x:15.66px;y:15.66px}25%{x:18.66px;y:18.66px}}</style><rect class=\"spinner_zWVm\" x=\"1\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_gfyD\" x=\"8.33\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_T5JJ\" x=\"1\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_E3Wz\" x=\"15.66\" y=\"1\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_g2vs\" x=\"8.33\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_ctYB\" x=\"1\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_BDNj\" x=\"15.66\" y=\"8.33\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_rCw3\" x=\"8.33\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/><rect class=\"spinner_Rszm\" x=\"15.66\" y=\"15.66\" width=\"7.33\" height=\"7.33\"/></svg>\r\n  \r\n\r\n</ng-template>\r\n", styles: [".toast{position:fixed;bottom:30px;right:30px;width:370px!important;min-height:116px!important;display:flex;flex-direction:column;justify-content:space-between;border-radius:17px;padding:1rem 1rem 1.5rem;box-shadow:8px 16px 32px #0000004d;background-color:#fff;z-index:50}.toast p{color:#625270;font-size:13px}.toast>header{color:#5505a2;display:flex;align-items:center;gap:.5rem}.toast>header>button{position:absolute;right:20px;border:none;background-color:transparent;color:#d1d5db;padding:10px 0 10px 10px;cursor:pointer;transition:.3s ease}.toast>header>button:hover{color:#ed3a3a}.toast>header>.icon{border:4px solid #5505a2;border-radius:50%;width:30px;height:30px}.toast>header h4{margin:0;padding:0;font-size:20px}.animation{animation:show-up .5s ease}.error>header{color:#ed3a3a}.error>header h4{color:#ed3a3a}.success>header{color:#4ab858}.success>header h4{color:#4ab858}.loading>header h4{color:#786b84}.loading>header>img,.loading>header svg{transform:rotate(45deg)}.close-toast{animation:close 1.1s ease}@keyframes show-up{0%{opacity:0;transform:translateY(100vw)}to{opacity:1;transform:translate(0)}}@keyframes close{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100vw)}}\n"] }]
+        }], ctorParameters: () => [{ type: OcToastService }] });
+
 /*
 * Public API Surface of otimus-library
 */
@@ -578,5 +668,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { OcAutocompleteComponent, OcBadgeComponent, OcChipComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcPaginationComponent, OcProfileComponent, OcTableComponent, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService };
+export { OcAutocompleteComponent, OcBadgeComponent, OcChipComponent, OcFilterComponent, OcInputComponent, OcKeyValueComponent, OcLogComponent, OcMenuComponent, OcModalComponent, OcModalFooterComponent, OcNotFoundComponent, OcPaginationComponent, OcProfileComponent, OcTableComponent, OcToastComponent, OcToastService, OcTooltipDirective, OtimusLibraryComponent, OtimusLibraryService };
 //# sourceMappingURL=otimus-library.mjs.map