coer-elements 0.0.74 → 0.0.76

package/fesm2022/coer-elements.mjs

@@ -2,13 +2,15 @@ import * as i0 from '@angular/core';
 import { NgModule } from '@angular/core';
 import { CoerAlert } from 'coer-elements/tools';
 import * as components from 'coer-elements/components';
+import * as pages from 'coer-elements/pages';
 import * as directives from 'coer-elements/directives';
 import * as pipes from 'coer-elements/pipes';
 
 class CoerElementsModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerElementsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: CoerElementsModule, imports: [components.ComponentsModule, directives.DirectivesModule, pipes.PipesModule, CoerAlert], exports: [CoerAlert, components.CoerButton, components.CoerCheckbox, components.CoerDateBox, components.CoerFilebox, components.CoerForm, components.CoerGrid, components.CoerList, components.CoerModal, components.CoerNumberBox, components.CoerPageTitle, components.CoerSelectbox, components.CoerSidenav, components.CoerSwitch, components.CoerTextarea, components.CoerTab, components.CoerTextBox, components.CoerToolbar, directives.CoerRefDirective, directives.LifeCycleDirective, pipes.HtmlPipe, pipes.NoImagePipe, pipes.NumericFormatPipe] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.1", ngImport: i0, type: CoerElementsModule, imports: [components.ComponentsModule, pages.PagesModule, directives.DirectivesModule, pipes.PipesModule, CoerAlert], exports: [CoerAlert, components.CoerAccordion, components.CoerButton, components.CoerCheckbox, components.CoerDateBox, components.CoerFilebox, components.CoerForm, components.CoerGrid, components.CoerList, components.CoerModal, components.CoerNumberBox, components.CoerPageTitle, components.CoerSelectbox, components.CoerSidenav, components.CoerSwitch, components.CoerTextarea, components.CoerTab, components.CoerTextBox, components.CoerToolbar, pages.CoerMenuPage, pages.HomePage, directives.CoerRefDirective, directives.LifeCycleDirective, pipes.HtmlPipe, pipes.NoImagePipe, pipes.NumericFormatPipe] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: CoerElementsModule, imports: [components.ComponentsModule,
+            pages.PagesModule,
             directives.DirectivesModule,
             pipes.PipesModule,
             CoerAlert] }); }
@@ -18,12 +20,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
             args: [{
                     imports: [
                         components.ComponentsModule,
+                        pages.PagesModule,
                         directives.DirectivesModule,
                         pipes.PipesModule,
                         CoerAlert
                     ],
                     exports: [
                         CoerAlert,
+                        components.CoerAccordion,
                         components.CoerButton,
                         components.CoerCheckbox,
                         components.CoerDateBox,
@@ -41,6 +45,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImpor
                         components.CoerTab,
                         components.CoerTextBox,
                         components.CoerToolbar,
+                        pages.CoerMenuPage,
+                        pages.HomePage,
                         directives.CoerRefDirective,
                         directives.LifeCycleDirective,
                         pipes.HtmlPipe,

package/fesm2022/coer-elements.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"coer-elements.mjs","sources":["../../../projects/coer-elements/index.ts","../../../projects/coer-elements/coer-elements.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\r\n\r\n//Components\r\nimport { CoerAlert } from 'coer-elements/tools';\r\nimport * as components from 'coer-elements/components';\r\nimport * as directives from 'coer-elements/directives';\r\nimport * as pipes from 'coer-elements/pipes';\r\n\r\n\r\n@NgModule({\r\n    imports: [\r\n        components.ComponentsModule, \r\n        directives.DirectivesModule,\r\n        pipes.PipesModule,\r\n        CoerAlert\r\n    ],\r\n    exports: [\r\n        CoerAlert,\r\n        components.CoerButton,\r\n        components.CoerCheckbox,\r\n        components.CoerDateBox,\r\n        components.CoerFilebox,\r\n        components.CoerForm,\r\n        components.CoerGrid,\r\n        components.CoerList,\r\n        components.CoerModal,\r\n        components.CoerNumberBox,\r\n        components.CoerPageTitle,\r\n        components.CoerSelectbox,\r\n        components.CoerSidenav,\r\n        components.CoerSwitch,\r\n        components.CoerTextarea,\r\n        components.CoerTab,\r\n        components.CoerTextBox,\r\n        components.CoerToolbar,\r\n        directives.CoerRefDirective,\r\n        directives.LifeCycleDirective,\r\n        pipes.HtmlPipe,\r\n        pipes.NoImagePipe,\r\n        pipes.NumericFormatPipe\r\n    ]\r\n})\r\nexport class CoerElementsModule { }","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2","i3"],"mappings":";;;;;;;MA0Ca,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAlB,kBAAkB,EAAA,OAAA,EAAA,CAAAA,UAAA,CAAA,gBAAA,EAAAC,UAAA,CAAA,gBAAA,EAAAC,KAAA,CAAA,WAAA,EA5BvB,SAAS,CAAA,EAAA,OAAA,EAAA,CAGT,SAAS,EAAAF,UAAA,CAAA,UAAA,EAAAA,UAAA,CAAA,YAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,QAAA,EAAAA,UAAA,CAAA,QAAA,EAAAA,UAAA,CAAA,QAAA,EAAAA,UAAA,CAAA,SAAA,EAAAA,UAAA,CAAA,aAAA,EAAAA,UAAA,CAAA,aAAA,EAAAA,UAAA,CAAA,aAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,UAAA,EAAAA,UAAA,CAAA,YAAA,EAAAA,UAAA,CAAA,OAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,WAAA,EAAAC,UAAA,CAAA,gBAAA,EAAAA,UAAA,CAAA,kBAAA,EAAAC,KAAA,CAAA,QAAA,EAAAA,KAAA,CAAA,WAAA,EAAAA,KAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,CAAA;+GAyBJ,kBAAkB,EAAA,OAAA,EAAA,CA/BvB,UAAU,CAAC,gBAAgB;AAC3B,YAAA,UAAU,CAAC,gBAAgB;AAC3B,YAAA,KAAK,CAAC,WAAW;YACjB,SAAS,CAAA,EAAA,CAAA,CAAA;;2FA4BJ,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAjC9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;AACL,wBAAA,UAAU,CAAC,gBAAgB;AAC3B,wBAAA,UAAU,CAAC,gBAAgB;AAC3B,wBAAA,KAAK,CAAC,WAAW;wBACjB;AACH,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,SAAS;AACT,wBAAA,UAAU,CAAC,UAAU;AACrB,wBAAA,UAAU,CAAC,YAAY;AACvB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,QAAQ;AACnB,wBAAA,UAAU,CAAC,QAAQ;AACnB,wBAAA,UAAU,CAAC,QAAQ;AACnB,wBAAA,UAAU,CAAC,SAAS;AACpB,wBAAA,UAAU,CAAC,aAAa;AACxB,wBAAA,UAAU,CAAC,aAAa;AACxB,wBAAA,UAAU,CAAC,aAAa;AACxB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,UAAU;AACrB,wBAAA,UAAU,CAAC,YAAY;AACvB,wBAAA,UAAU,CAAC,OAAO;AAClB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,gBAAgB;AAC3B,wBAAA,UAAU,CAAC,kBAAkB;AAC7B,wBAAA,KAAK,CAAC,QAAQ;AACd,wBAAA,KAAK,CAAC,WAAW;AACjB,wBAAA,KAAK,CAAC;AACT;AACJ,iBAAA;;;ACzCD;;AAEG;;;;"}
+{"version":3,"file":"coer-elements.mjs","sources":["../../../projects/coer-elements/index.ts","../../../projects/coer-elements/coer-elements.ts"],"sourcesContent":["import { NgModule } from '@angular/core';\r\n\r\n//Components\r\nimport { CoerAlert } from 'coer-elements/tools';\r\nimport * as components from 'coer-elements/components';\r\nimport * as pages from 'coer-elements/pages';\r\nimport * as directives from 'coer-elements/directives';\r\nimport * as pipes from 'coer-elements/pipes';\r\n\r\n\r\n@NgModule({\r\n    imports: [\r\n        components.ComponentsModule, \r\n        pages.PagesModule,\r\n        directives.DirectivesModule,\r\n        pipes.PipesModule,\r\n        CoerAlert\r\n    ],\r\n    exports: [\r\n        CoerAlert,\r\n        components.CoerAccordion,\r\n        components.CoerButton,\r\n        components.CoerCheckbox,\r\n        components.CoerDateBox,\r\n        components.CoerFilebox,\r\n        components.CoerForm,\r\n        components.CoerGrid,\r\n        components.CoerList, \r\n        components.CoerModal,\r\n        components.CoerNumberBox,\r\n        components.CoerPageTitle,\r\n        components.CoerSelectbox,\r\n        components.CoerSidenav,\r\n        components.CoerSwitch,\r\n        components.CoerTextarea,\r\n        components.CoerTab,\r\n        components.CoerTextBox,\r\n        components.CoerToolbar, \r\n        pages.CoerMenuPage,\r\n        pages.HomePage,\r\n        directives.CoerRefDirective,\r\n        directives.LifeCycleDirective,\r\n        pipes.HtmlPipe,\r\n        pipes.NoImagePipe,\r\n        pipes.NumericFormatPipe\r\n    ]\r\n})\r\nexport class CoerElementsModule { }","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["i1","i2","i3","i4"],"mappings":";;;;;;;;MA+Ca,kBAAkB,CAAA;8GAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAlB,kBAAkB,EAAA,OAAA,EAAA,CAAAA,UAAA,CAAA,gBAAA,EAAAC,KAAA,CAAA,WAAA,EAAAC,UAAA,CAAA,gBAAA,EAAAC,KAAA,CAAA,WAAA,EA/BvB,SAAS,CAAA,EAAA,OAAA,EAAA,CAGT,SAAS,EAAAH,UAAA,CAAA,aAAA,EAAAA,UAAA,CAAA,UAAA,EAAAA,UAAA,CAAA,YAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,QAAA,EAAAA,UAAA,CAAA,QAAA,EAAAA,UAAA,CAAA,QAAA,EAAAA,UAAA,CAAA,SAAA,EAAAA,UAAA,CAAA,aAAA,EAAAA,UAAA,CAAA,aAAA,EAAAA,UAAA,CAAA,aAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,UAAA,EAAAA,UAAA,CAAA,YAAA,EAAAA,UAAA,CAAA,OAAA,EAAAA,UAAA,CAAA,WAAA,EAAAA,UAAA,CAAA,WAAA,EAAAC,KAAA,CAAA,YAAA,EAAAA,KAAA,CAAA,QAAA,EAAAC,UAAA,CAAA,gBAAA,EAAAA,UAAA,CAAA,kBAAA,EAAAC,KAAA,CAAA,QAAA,EAAAA,KAAA,CAAA,WAAA,EAAAA,KAAA,CAAA,iBAAA,CAAA,EAAA,CAAA,CAAA;+GA4BJ,kBAAkB,EAAA,OAAA,EAAA,CAnCvB,UAAU,CAAC,gBAAgB;AAC3B,YAAA,KAAK,CAAC,WAAW;AACjB,YAAA,UAAU,CAAC,gBAAgB;AAC3B,YAAA,KAAK,CAAC,WAAW;YACjB,SAAS,CAAA,EAAA,CAAA,CAAA;;2FA+BJ,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBArC9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACN,oBAAA,OAAO,EAAE;AACL,wBAAA,UAAU,CAAC,gBAAgB;AAC3B,wBAAA,KAAK,CAAC,WAAW;AACjB,wBAAA,UAAU,CAAC,gBAAgB;AAC3B,wBAAA,KAAK,CAAC,WAAW;wBACjB;AACH,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACL,SAAS;AACT,wBAAA,UAAU,CAAC,aAAa;AACxB,wBAAA,UAAU,CAAC,UAAU;AACrB,wBAAA,UAAU,CAAC,YAAY;AACvB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,QAAQ;AACnB,wBAAA,UAAU,CAAC,QAAQ;AACnB,wBAAA,UAAU,CAAC,QAAQ;AACnB,wBAAA,UAAU,CAAC,SAAS;AACpB,wBAAA,UAAU,CAAC,aAAa;AACxB,wBAAA,UAAU,CAAC,aAAa;AACxB,wBAAA,UAAU,CAAC,aAAa;AACxB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,UAAU;AACrB,wBAAA,UAAU,CAAC,YAAY;AACvB,wBAAA,UAAU,CAAC,OAAO;AAClB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,UAAU,CAAC,WAAW;AACtB,wBAAA,KAAK,CAAC,YAAY;AAClB,wBAAA,KAAK,CAAC,QAAQ;AACd,wBAAA,UAAU,CAAC,gBAAgB;AAC3B,wBAAA,UAAU,CAAC,kBAAkB;AAC7B,wBAAA,KAAK,CAAC,QAAQ;AACd,wBAAA,KAAK,CAAC,WAAW;AACjB,wBAAA,KAAK,CAAC;AACT;AACJ,iBAAA;;;AC9CD;;AAEG;;;;"}

package/index.d.ts

@@ -1,10 +1,11 @@
 import * as i0 from "@angular/core";
 import * as i1 from "coer-elements/components";
-import * as i2 from "coer-elements/directives";
-import * as i3 from "coer-elements/pipes";
-import * as i4 from "coer-elements/tools";
+import * as i2 from "coer-elements/pages";
+import * as i3 from "coer-elements/directives";
+import * as i4 from "coer-elements/pipes";
+import * as i5 from "coer-elements/tools";
 export declare class CoerElementsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CoerElementsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CoerElementsModule, never, [typeof i1.ComponentsModule, typeof i2.DirectivesModule, typeof i3.PipesModule, typeof i4.CoerAlert], [typeof i4.CoerAlert, typeof i1.CoerButton, typeof i1.CoerCheckbox, typeof i1.CoerDateBox, typeof i1.CoerFilebox, typeof i1.CoerForm, typeof i1.CoerGrid, typeof i1.CoerList, typeof i1.CoerModal, typeof i1.CoerNumberBox, typeof i1.CoerPageTitle, typeof i1.CoerSelectbox, typeof i1.CoerSidenav, typeof i1.CoerSwitch, typeof i1.CoerTextarea, typeof i1.CoerTab, typeof i1.CoerTextBox, typeof i1.CoerToolbar, typeof i2.CoerRefDirective, typeof i2.LifeCycleDirective, typeof i3.HtmlPipe, typeof i3.NoImagePipe, typeof i3.NumericFormatPipe]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CoerElementsModule, never, [typeof i1.ComponentsModule, typeof i2.PagesModule, typeof i3.DirectivesModule, typeof i4.PipesModule, typeof i5.CoerAlert], [typeof i5.CoerAlert, typeof i1.CoerAccordion, typeof i1.CoerButton, typeof i1.CoerCheckbox, typeof i1.CoerDateBox, typeof i1.CoerFilebox, typeof i1.CoerForm, typeof i1.CoerGrid, typeof i1.CoerList, typeof i1.CoerModal, typeof i1.CoerNumberBox, typeof i1.CoerPageTitle, typeof i1.CoerSelectbox, typeof i1.CoerSidenav, typeof i1.CoerSwitch, typeof i1.CoerTextarea, typeof i1.CoerTab, typeof i1.CoerTextBox, typeof i1.CoerToolbar, typeof i2.CoerMenuPage, typeof i2.HomePage, typeof i3.CoerRefDirective, typeof i3.LifeCycleDirective, typeof i4.HtmlPipe, typeof i4.NoImagePipe, typeof i4.NumericFormatPipe]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CoerElementsModule>;
 }

package/interfaces/lib/coer-menu/menu.interface.d.ts

@@ -5,4 +5,5 @@ export interface IMenu {
     path?: string;
     secuence?: number;
     items?: IMenu[];
+    show?: 'LIST' | 'GRID';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "0.0.74",
+  "version": "0.0.76",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "COER",
@@ -46,6 +46,10 @@
       "types": "./interfaces/index.d.ts",
       "default": "./fesm2022/coer-elements-interfaces.mjs"
     },
+    "./pages": {
+      "types": "./pages/index.d.ts",
+      "default": "./fesm2022/coer-elements-pages.mjs"
+    },
     "./pipes": {
       "types": "./pipes/index.d.ts",
       "default": "./fesm2022/coer-elements-pipes.mjs"

package/pages/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="coer-elements/pages" />
+export * from './public-api';

package/pages/lib/coer-menu/coer-menu.component.d.ts

@@ -0,0 +1,12 @@
+import { WritableSignal } from '@angular/core';
+import { Page } from 'coer-elements/tools';
+import { IMenuSelected } from 'coer-elements/interfaces';
+import * as i0 from "@angular/core";
+export declare class CoerMenuPage extends Page {
+    protected menu: WritableSignal<IMenuSelected | null>;
+    constructor();
+    /** */
+    protected RunPage(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CoerMenuPage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CoerMenuPage, "coer-menu-page", never, {}, {}, never, never, false, never>;
+}

package/pages/lib/home/home.component.d.ts

@@ -0,0 +1,7 @@
+import { Page } from 'coer-elements/tools';
+import * as i0 from "@angular/core";
+export declare class HomePage extends Page {
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<HomePage, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<HomePage, "home-page", never, {}, {}, never, never, false, never>;
+}

package/pages/lib/pages.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./coer-menu/coer-menu.component";
+import * as i2 from "./home/home.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@angular/router";
+import * as i5 from "coer-elements/components";
+export declare const ROUTES: any;
+export declare class PagesModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<PagesModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PagesModule, [typeof i1.CoerMenuPage, typeof i2.HomePage], [typeof i3.CommonModule, typeof i4.RouterModule, typeof i5.ComponentsModule], [typeof i1.CoerMenuPage, typeof i2.HomePage]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<PagesModule>;
+}

package/pages/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './lib/pages.module';
+export * from './lib/coer-menu/coer-menu.component';
+export * from './lib/home/home.component';

package/signals/lib/menu-selected.signal.d.ts

@@ -0,0 +1,2 @@
+import { IMenuSelected } from "coer-elements/interfaces";
+export declare const menuSelectedSIGNAL: import("@angular/core").WritableSignal<IMenuSelected | null>;

package/signals/public-api.d.ts

@@ -2,4 +2,5 @@ export * from './lib/breakpoint.signal';
 export * from './lib/is-loading.signal';
 export * from './lib/is-menu-open.signal';
 export * from './lib/is-modal-open.signal';
+export * from './lib/menu-selected.signal';
 export * from './lib/navigation.signal';

package/styles/animations.scss

@@ -0,0 +1,11 @@
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.fade-in {
+    animation-name: fadeIn;
+    animation-duration: 1.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+} 

package/styles/coer-elements.css

@@ -1375,15 +1375,15 @@ div.coer-switch {
   align-items: center !important;
   position: relative !important;
 }
-div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button div.mdc-switch__track::after {
+div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__track::after {
   background-color: var(--orange) !important;
   filter: opacity(0.6) !important;
 }
-div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button div.mdc-switch__handle-track div.mdc-switch__ripple {
+div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button .mdc-switch__handle-track .mdc-switch__ripple {
   width: 30px !important;
   height: 30px !important;
 }
-div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked div.mdc-switch__handle-track div.mdc-switch__handle div.mdc-switch__icons {
+div.coer-switch mat-slide-toggle div.mdc-form-field.mat-internal-form-field button.mdc-switch.mdc-switch--selected.mdc-switch--checked .mdc-switch__handle-track .mdc-switch__handle .mdc-switch__icons {
   background-color: var(--orange) !important;
   border-radius: 20px !important;
 }
@@ -1736,7 +1736,7 @@ aside.toast-container > * {
   word-break: break-word;
 }
 
-@keyframes fadeId {
+@keyframes fadeIn {
   from {
     opacity: 0;
   }
@@ -1750,11 +1750,29 @@ aside.toast-container > * {
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
   background-color: white;
-  animation-name: fadeId;
+  animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   min-height: 60px;
+  position: relative;
+  z-index: 0;
+}
+
+.coer-container-accordion {
+  margin: 15px 30px 0px 30px;
+  padding: 10px;
+  box-shadow: 0px 0px 10px -10px black;
+  border-radius: 8px;
+  background-color: white;
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+  min-height: 60px;
+  position: relative;
+  z-index: 0;
+  min-height: 55px;
 }
 
 .coer-container-tab {
@@ -1763,11 +1781,13 @@ aside.toast-container > * {
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
   background-color: white;
-  animation-name: fadeId;
+  animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   min-height: 60px;
+  position: relative;
+  z-index: 0;
   padding: 0px;
 }
 .coer-container-tab .row {
@@ -1780,11 +1800,13 @@ aside.toast-container > * {
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
   background-color: white;
-  animation-name: fadeId;
+  animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   min-height: 60px;
+  position: relative;
+  z-index: 0;
   padding-bottom: 5px;
 }
 
@@ -1794,11 +1816,13 @@ aside.toast-container > * {
   box-shadow: 0px 0px 10px -10px black;
   border-radius: 8px;
   background-color: white;
-  animation-name: fadeId;
+  animation-name: fadeIn;
   animation-duration: 1.5s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   min-height: 60px;
+  position: relative;
+  z-index: 0;
   padding: 0px;
 }
 
@@ -1863,10 +1887,25 @@ aside.toast-container > * {
   flex: 1 1 auto;
 }
 
-.flex-wrap {
+.flex-wrap-left {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 10px !important;
+  align-items: flex-start !important;
+}
+
+.flex-wrap .flex-wrap-center {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 10px !important;
+  align-items: center !important;
+}
+
+.flex-wrap-end {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 10px !important;
+  align-items: flex-end !important;
 }
 
 .flex-wrap-item {
@@ -1874,6 +1913,21 @@ aside.toast-container > * {
   flex-basis: 200 !important;
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.fade-in {
+  animation-name: fadeIn;
+  animation-duration: 1.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: both;
+}
+
 * {
   font-family: sans-serif;
   letter-spacing: normal;

package/styles/containers.scss

@@ -1,4 +1,4 @@
-@keyframes fadeId {
+@keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }
@@ -9,17 +9,39 @@
     box-shadow: 0px 0px 10px -10px black;
     border-radius: 8px;
     background-color: white;
-    animation-name: fadeId;
+    animation-name: fadeIn;
     animation-duration: 1.5s;
     animation-iteration-count: 1;
     animation-fill-mode: both;
     min-height: 60px;
+    position: relative;
+    z-index: 0;
+}
+
+@mixin Container() {
+    margin: 15px 30px 0px 30px;
+    padding: 10px;
+    box-shadow: 0px 0px 10px -10px black;
+    border-radius: 8px;
+    background-color: white;
+    animation-name: fadeIn;
+    animation-duration: 1.5s;
+    animation-iteration-count: 1;
+    animation-fill-mode: both;
+    min-height: 60px;
+    position: relative;
+    z-index: 0;
 }
 
 .coer-container {
     @include Container();
 }
 
+.coer-container-accordion {
+    @include Container();
+    min-height: 55px;
+}
+
 .coer-container-tab {
     @include Container();
     padding: 0px;

package/styles/index.scss

@@ -5,6 +5,7 @@
 @use "./cursores.scss";
 @use "./scroll-bar.scss"; 
 @use "./layout.scss";
+@use "./animations.scss";
 
 * {
     font-family: sans-serif;

package/styles/layout.scss

@@ -20,10 +20,27 @@
     flex: 1 1 auto;
 }
 
-.flex-wrap {
+
+@mixin FlexWrap() {
     display: flex !important; 
     flex-wrap: wrap !important;
     gap: 10px !important;
+} 
+
+.flex-wrap-left { 
+    @include FlexWrap();
+    align-items: flex-start !important;
+}
+
+.flex-wrap
+.flex-wrap-center { 
+    @include FlexWrap();
+    align-items: center !important;
+}
+
+.flex-wrap-end { 
+    @include FlexWrap();
+    align-items: flex-end !important;
 }
 
 .flex-wrap-item {

package/styles/position.scss

@@ -0,0 +1,5 @@
+@for $i from 1 through 10 {
+    .z-index-#{$i} {
+        z-index: $i !important;
+    }
+}