coer-elements 2.0.10 → 2.0.13

package/interfaces/lib/colors.interface.d.ts

@@ -30,6 +30,7 @@ export interface IAppColors {
     containers: string;
     sidenav: string;
     sidenavText: string;
+    sidenavActive: string;
     toolbar: string;
     toolbarText: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "2.0.10",
+  "version": "2.0.13",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "Components",
@@ -61,17 +61,17 @@
       "types": "./components/index.d.ts",
       "default": "./fesm2022/coer-elements-components.mjs"
     },
-    "./directives": {
-      "types": "./directives/index.d.ts",
-      "default": "./fesm2022/coer-elements-directives.mjs"
+    "./guards": {
+      "types": "./guards/index.d.ts",
+      "default": "./fesm2022/coer-elements-guards.mjs"
     },
     "./extensions": {
       "types": "./extensions/index.d.ts",
       "default": "./fesm2022/coer-elements-extensions.mjs"
     },
-    "./guards": {
-      "types": "./guards/index.d.ts",
-      "default": "./fesm2022/coer-elements-guards.mjs"
+    "./directives": {
+      "types": "./directives/index.d.ts",
+      "default": "./fesm2022/coer-elements-directives.mjs"
     },
     "./interfaces": {
       "types": "./interfaces/index.d.ts",
@@ -89,6 +89,10 @@
       "types": "./pipes/index.d.ts",
       "default": "./fesm2022/coer-elements-pipes.mjs"
     },
+    "./services": {
+      "types": "./services/index.d.ts",
+      "default": "./fesm2022/coer-elements-services.mjs"
+    },
     "./signals": {
       "types": "./signals/index.d.ts",
       "default": "./fesm2022/coer-elements-signals.mjs"
@@ -96,10 +100,6 @@
     "./tools": {
       "types": "./tools/index.d.ts",
       "default": "./fesm2022/coer-elements-tools.mjs"
-    },
-    "./services": {
-      "types": "./services/index.d.ts",
-      "default": "./fesm2022/coer-elements-services.mjs"
     }
   }
 }

package/styles/coer-elements.css

@@ -43,10 +43,49 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   --containers-inner: var(--app-containers, var(--white));
   --sidenav-inner: var(--app-sidenav, var(--black));
   --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
+  --sidenav-active-inner: var(--app-sidenav-active, var(--orange));
   --toolbar-inner: var(--app-toolbar, var(--smoke));
   --toolbar-text-inner: var(--app-toolbar-text, var(--black));
 }
 
+.text-transparent {
+  color: transparent !important;
+}
+
+.text-transparent-bold {
+  color: transparent !important;
+  font-weight: bold !important;
+}
+
+.border-transparent {
+  border-color: transparent !important;
+}
+
+.border-top-transparent {
+  border-top-color: transparent !important;
+}
+
+.border-right-transparent {
+  border-right-color: transparent !important;
+}
+
+.border-bottom-transparent {
+  border-bottom-color: transparent !important;
+}
+
+.border-left-transparent {
+  border-left-color: transparent !important;
+}
+
+.background-transparent {
+  background-color: transparent !important;
+}
+
+.background-border-transparent {
+  background-color: transparent !important;
+  border-color: transparent !important;
+}
+
 .text-blue {
   color: var(--blue) !important;
 }
@@ -883,6 +922,44 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--sidenav-text-inner) !important;
 }
 
+.text-app-sidenav-active {
+  color: var(--sidenav-active-inner) !important;
+}
+
+.text-app-sidenav-active-bold {
+  color: var(--sidenav-active-inner) !important;
+  font-weight: bold !important;
+}
+
+.border-app-sidenav-active {
+  border-color: var(--sidenav-active-inner) !important;
+}
+
+.border-top-app-sidenav-active {
+  border-top-color: var(--sidenav-active-inner) !important;
+}
+
+.border-right-app-sidenav-active {
+  border-right-color: var(--sidenav-active-inner) !important;
+}
+
+.border-bottom-app-sidenav-active {
+  border-bottom-color: var(--sidenav-active-inner) !important;
+}
+
+.border-left-app-sidenav-active {
+  border-left-color: var(--sidenav-active-inner) !important;
+}
+
+.background-app-sidenav-active {
+  background-color: var(--sidenav-active-inner) !important;
+}
+
+.background-border-app-sidenav-active {
+  background-color: var(--sidenav-active-inner) !important;
+  border-color: var(--sidenav-active-inner) !important;
+}
+
 .text-app-toolbar {
   color: var(--toolbar-inner) !important;
 }
@@ -959,44 +1036,6 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--toolbar-text-inner) !important;
 }
 
-.text-transparent {
-  color: transparent !important;
-}
-
-.text-transparent-bold {
-  color: transparent !important;
-  font-weight: bold !important;
-}
-
-.border-transparent {
-  border-color: transparent !important;
-}
-
-.border-top-transparent {
-  border-top-color: transparent !important;
-}
-
-.border-right-transparent {
-  border-right-color: transparent !important;
-}
-
-.border-bottom-transparent {
-  border-bottom-color: transparent !important;
-}
-
-.border-left-transparent {
-  border-left-color: transparent !important;
-}
-
-.background-transparent {
-  background-color: transparent !important;
-}
-
-.background-border-transparent {
-  background-color: transparent !important;
-  border-color: transparent !important;
-}
-
 coer-button {
   display: contents !important;
 }
@@ -2108,7 +2147,7 @@ mat-drawer-container mat-drawer-content aside.side-nav span.icon-container:hover
   background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
 }
 mat-drawer-container mat-drawer-content aside.side-nav span.icon-container.active-link {
-  color: var(--navigation-inner) !important;
+  color: var(--sidenav-active-inner) !important;
 }
 mat-drawer-container div.backdrop {
   position: absolute !important;
@@ -2155,7 +2194,7 @@ mat-nav-list.coer-menu-option mat-list-item span.label-container {
 }
 mat-nav-list.coer-menu-option mat-list-item span.icon-container.active-link,
 mat-nav-list.coer-menu-option mat-list-item span.label-container.active-link {
-  color: var(--navigation-inner) !important;
+  color: var(--sidenav-active-inner) !important;
 }
 mat-nav-list.coer-menu-option mat-list-item:hover,
 mat-nav-list.coer-menu-option mat-list-item.mdc-list-item:hover::before {
@@ -2211,17 +2250,17 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header span.mat-expansion-indicator::after {
   color: var(--sidenav-text-inner) !important;
 }
-mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-navigation span.mat-expansion-indicator::after {
-  color: var(--navigation-inner) !important;
+mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.text-app-sidenav-active span.mat-expansion-indicator::after {
+  color: var(--sidenav-active-inner) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.cdk-focused {
   background-color: var(--sidenav-inner) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.mat-expanded {
-  background-color: var(--navigation-inner) !important;
+  background-color: var(--sidenav-active-inner) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header.background-navigation:hover {
-  background-color: color-mix(in srgb, var(--navigation-inner), white 10%) !important;
+  background-color: color-mix(in srgb, var(--sidenav-active-inner), white 10%) !important;
 }
 mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel mat-expansion-panel-header.mat-expanded {
   background-color: var(--sidenav-inner) !important;

package/styles/colors.scss

@@ -21,41 +21,56 @@
     --information-inner: var(--information, var(--blue));
     
     //App Colors
-    --breadcrumbs-inner:  var(--app-breadcrumbs,  var(--blue)); 
-    --background-inner:   var(--app-background,   var(--smoke));
-    --containers-inner:   var(--app-containers,   var(--white));
-    --sidenav-inner:      var(--app-sidenav,      var(--black));
-    --sidenav-text-inner: var(--app-sidenav-text, var(--smoke));
+    --breadcrumbs-inner: var(--app-breadcrumbs, var(--blue)); 
+    --background-inner:  var(--app-background,  var(--smoke));
+    --containers-inner:  var(--app-containers,  var(--white));
+   
+    //Sidenav
+    --sidenav-inner:        var(--app-sidenav,        var(--black));
+    --sidenav-text-inner:   var(--app-sidenav-text,   var(--smoke));
+    --sidenav-active-inner: var(--app-sidenav-active, var(--orange));
+   
+    //Toolbar
     --toolbar-inner:      var(--app-toolbar,      var(--smoke));
     --toolbar-text-inner: var(--app-toolbar-text, var(--black));
 } 
 
-$colors: ( 
-    'blue':             var(--blue), 
-    'gray':             var(--gray), 
-    'green':            var(--green), 
-    'yellow':           var(--yellow), 
-    'red':              var(--red), 
-    'smoke':            var(--smoke), 
-    'black':            var(--black), 
-    'orange':           var(--orange), 
-    'white':            var(--white), 
-    'purple':           var(--purple),
-    'primary':          var(--primary-inner), 
-    'secondary':        var(--secondary-inner), 
-    'success':          var(--success-inner), 
-    'warning':          var(--warning-inner), 
-    'danger':           var(--danger-inner), 
-    'navigation':       var(--navigation-inner), 
-    'information':      var(--information-inner),
-    'breadcrumbs':      var(--breadcrumbs-inner),
-    'app-background':   var(--background-inner), 
-    'app-container':    var(--containers-inner),  
-    'app-sidenav':      var(--sidenav-inner),    
-    'app-sidenav-text': var(--sidenav-text-inner),
-    'app-toolbar':      var(--toolbar-inner),    
-    'app-toolbar-text': var(--toolbar-text-inner),
-    'transparent':      transparent
+$colors: (
+    //Fixed colors
+    'transparent': transparent, 
+    'blue'  : var(--blue), 
+    'gray'  : var(--gray), 
+    'green' : var(--green), 
+    'yellow': var(--yellow), 
+    'red'   : var(--red), 
+    'smoke' : var(--smoke), 
+    'black' : var(--black), 
+    'orange': var(--orange), 
+    'white' : var(--white), 
+    'purple': var(--purple),
+
+    //Action Colors
+    'primary'    : var(--primary-inner), 
+    'secondary'  : var(--secondary-inner), 
+    'success'    : var(--success-inner), 
+    'warning'    : var(--warning-inner), 
+    'danger'     : var(--danger-inner), 
+    'navigation' : var(--navigation-inner), 
+    'information': var(--information-inner),
+
+    //App Colors
+    'breadcrumbs'   : var(--breadcrumbs-inner),
+    'app-background': var(--background-inner), 
+    'app-container' : var(--containers-inner),  
+
+    //Sidenav
+    'app-sidenav'       : var(--sidenav-inner),    
+    'app-sidenav-text'  : var(--sidenav-text-inner),
+    'app-sidenav-active': var(--sidenav-active-inner),
+
+    //Toolbar
+    'app-toolbar'     : var(--toolbar-inner),    
+    'app-toolbar-text': var(--toolbar-text-inner) 
 );