coer-elements 2.0.11 → 2.0.15

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "2.0.11",
+  "version": "2.0.15",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "Components",
@@ -61,10 +61,6 @@
       "types": "./components/index.d.ts",
       "default": "./fesm2022/coer-elements-components.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"
@@ -73,14 +69,18 @@
       "types": "./extensions/index.d.ts",
       "default": "./fesm2022/coer-elements-extensions.mjs"
     },
-    "./interfaces": {
-      "types": "./interfaces/index.d.ts",
-      "default": "./fesm2022/coer-elements-interfaces.mjs"
+    "./guards": {
+      "types": "./guards/index.d.ts",
+      "default": "./fesm2022/coer-elements-guards.mjs"
     },
     "./interceptors": {
       "types": "./interceptors/index.d.ts",
       "default": "./fesm2022/coer-elements-interceptors.mjs"
     },
+    "./interfaces": {
+      "types": "./interfaces/index.d.ts",
+      "default": "./fesm2022/coer-elements-interfaces.mjs"
+    },
     "./pages": {
       "types": "./pages/index.d.ts",
       "default": "./fesm2022/coer-elements-pages.mjs"

package/styles/coer-elements.css

@@ -43,7 +43,7 @@ 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-focus-inner: var(--app-sidenav-focus, var(--orange));
+  --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));
 }
@@ -922,42 +922,42 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   border-color: var(--sidenav-text-inner) !important;
 }
 
-.text-app-sidenav-focus {
-  color: var(--sidenav-focus-inner) !important;
+.text-app-sidenav-active {
+  color: var(--sidenav-active-inner) !important;
 }
 
-.text-app-sidenav-focus-bold {
-  color: var(--sidenav-focus-inner) !important;
+.text-app-sidenav-active-bold {
+  color: var(--sidenav-active-inner) !important;
   font-weight: bold !important;
 }
 
-.border-app-sidenav-focus {
-  border-color: var(--sidenav-focus-inner) !important;
+.border-app-sidenav-active {
+  border-color: var(--sidenav-active-inner) !important;
 }
 
-.border-top-app-sidenav-focus {
-  border-top-color: var(--sidenav-focus-inner) !important;
+.border-top-app-sidenav-active {
+  border-top-color: var(--sidenav-active-inner) !important;
 }
 
-.border-right-app-sidenav-focus {
-  border-right-color: var(--sidenav-focus-inner) !important;
+.border-right-app-sidenav-active {
+  border-right-color: var(--sidenav-active-inner) !important;
 }
 
-.border-bottom-app-sidenav-focus {
-  border-bottom-color: var(--sidenav-focus-inner) !important;
+.border-bottom-app-sidenav-active {
+  border-bottom-color: var(--sidenav-active-inner) !important;
 }
 
-.border-left-app-sidenav-focus {
-  border-left-color: var(--sidenav-focus-inner) !important;
+.border-left-app-sidenav-active {
+  border-left-color: var(--sidenav-active-inner) !important;
 }
 
-.background-app-sidenav-focus {
-  background-color: var(--sidenav-focus-inner) !important;
+.background-app-sidenav-active {
+  background-color: var(--sidenav-active-inner) !important;
 }
 
-.background-border-app-sidenav-focus {
-  background-color: var(--sidenav-focus-inner) !important;
-  border-color: var(--sidenav-focus-inner) !important;
+.background-border-app-sidenav-active {
+  background-color: var(--sidenav-active-inner) !important;
+  border-color: var(--sidenav-active-inner) !important;
 }
 
 .text-app-toolbar {
@@ -2147,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;
@@ -2194,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 {
@@ -2250,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,19 +21,22 @@
     --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));
+    --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));
-    --sidenav-focus-inner: var(--app-sidenav-focus, var(--orange));
+    //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: (
+    //Fixed colors
     'transparent': transparent, 
     'blue'  : var(--blue), 
     'gray'  : var(--gray), 
@@ -45,6 +48,8 @@ $colors: (
     'orange': var(--orange), 
     'white' : var(--white), 
     'purple': var(--purple),
+
+    //Action Colors
     'primary'    : var(--primary-inner), 
     'secondary'  : var(--secondary-inner), 
     'success'    : var(--success-inner), 
@@ -52,14 +57,20 @@ $colors: (
     '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-sidenav-focus': var(--sidenav-focus-inner),
-    'app-toolbar'      : var(--toolbar-inner),    
-    'app-toolbar-text' : var(--toolbar-text-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) 
 );