coer-elements 2.0.7 → 2.0.8

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

@@ -3,7 +3,7 @@ export interface IColors {
     actionColors: IActionColors;
     appColors: IAppColors;
 }
-interface IFixedColors {
+export interface IFixedColors {
     blue: string;
     gray: string;
     green: string;
@@ -15,7 +15,7 @@ interface IFixedColors {
     white: string;
     purple: string;
 }
-interface IActionColors {
+export interface IActionColors {
     primary: string;
     secondary: string;
     success: string;
@@ -24,7 +24,7 @@ interface IActionColors {
     navigation: string;
     information: string;
 }
-interface IAppColors {
+export interface IAppColors {
     breadcrumbs: string;
     background: string;
     containers: string;
@@ -33,4 +33,3 @@ interface IAppColors {
     toolbar: string;
     toolbarText: string;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "2.0.7",
+  "version": "2.0.8",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "Components",
@@ -61,14 +61,14 @@
       "types": "./components/index.d.ts",
       "default": "./fesm2022/coer-elements-components.mjs"
     },
-    "./extensions": {
-      "types": "./extensions/index.d.ts",
-      "default": "./fesm2022/coer-elements-extensions.mjs"
-    },
     "./directives": {
       "types": "./directives/index.d.ts",
       "default": "./fesm2022/coer-elements-directives.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"

package/styles/angular-material.scss

@@ -13,6 +13,7 @@
 @use "../components/lib/coer-sidenav/coer-sidenav.component.scss";
 @use "../components/lib/coer-sidenav/coer-menu-option/coer-menu-option.component.scss";
 @use "../components/lib/coer-sidenav/coer-tree-accordion/coer-tree-accordion.component.scss";
+@use "../components/lib/coer-sidenav/coer-toolbar/coer-toolbar.component.scss";
 @use "../components/lib/coer-switch/coer-switch.component.scss";
 @use "../components/lib/coer-tab/coer-tab.component.scss";
 @use "../components/lib/coer-textarea/coer-textarea.component.scss";

package/styles/coer-elements.css

@@ -31,7 +31,7 @@ mat-expansion-panel.coer-accordion div.mat-expansion-panel-body {
   --orange:#fd6031;
   --white: #ffffff;
   --purple:#a615bc;
-  --primary-inner: var(--primary, var(--blue));
+  --primary-inner: var(--primary, var(--orange));
   --secondary-inner: var(--secondary, var(--gray));
   --success-inner: var(--success, var(--green));
   --warning-inner: var(--warning, var(--yellow));
@@ -1030,67 +1030,108 @@ div.coer-button .slot {
 }
 div.coer-button button.primary-filled {
   background-color: var(--primary-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.secondary-filled {
-  background-color: var(--secondary-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.success-filled {
-  background-color: var(--success-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.warning-filled {
-  background-color: var(--warning-inner) !important;
-  color: var(--black) !important;
-}
-div.coer-button button.danger-filled {
-  background-color: var(--danger-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.navigation-filled {
-  background-color: var(--navigation-inner) !important;
-  color: var(--smoke) !important;
-}
-div.coer-button button.dark-filled {
-  background-color: var(--black) !important;
-  color: var(--smoke) !important;
+  color: var(--white) !important;
 }
 div.coer-button button.primary-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--primary-inner) !important;
   color: var(--primary-inner) !important;
 }
+div.coer-button button.primary-filled:not(.readonly):focus,
+div.coer-button button.primary-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--primary-inner) !important;
+}
+div.coer-button button.secondary-filled {
+  background-color: var(--secondary-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.secondary-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--secondary-inner) !important;
   color: var(--secondary-inner) !important;
 }
+div.coer-button button.secondary-filled:not(.readonly):focus,
+div.coer-button button.secondary-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--secondary-inner) !important;
+}
+div.coer-button button.success-filled {
+  background-color: var(--success-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.success-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--success-inner) !important;
   color: var(--success-inner) !important;
 }
+div.coer-button button.success-filled:not(.readonly):focus,
+div.coer-button button.success-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--success-inner) !important;
+}
+div.coer-button button.warning-filled {
+  background-color: var(--warning-inner) !important;
+  color: var(--black) !important;
+}
 div.coer-button button.warning-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--warning-inner) !important;
   color: var(--warning-inner) !important;
 }
+div.coer-button button.warning-filled:not(.readonly):focus,
+div.coer-button button.warning-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--warning-inner) !important;
+}
+div.coer-button button.danger-filled {
+  background-color: var(--danger-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.danger-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--danger-inner) !important;
   color: var(--danger-inner) !important;
 }
+div.coer-button button.danger-filled:not(.readonly):focus,
+div.coer-button button.danger-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--danger-inner) !important;
+}
+div.coer-button button.navigation-filled {
+  background-color: var(--navigation-inner) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.navigation-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--navigation-inner) !important;
   color: var(--navigation-inner) !important;
 }
+div.coer-button button.navigation-filled:not(.readonly):focus,
+div.coer-button button.navigation-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--navigation-inner) !important;
+}
+div.coer-button button.information-filled {
+  background-color: var(--information-inner) !important;
+  color: var(--white) !important;
+}
+div.coer-button button.information-outline {
+  background-color: var(--white) !important;
+  border: 1px solid var(--information-inner) !important;
+  color: var(--information-inner) !important;
+}
+div.coer-button button.information-filled:not(.readonly):focus,
+div.coer-button button.information-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--information-inner) !important;
+}
+div.coer-button button.dark-filled {
+  background-color: var(--black) !important;
+  color: var(--white) !important;
+}
 div.coer-button button.dark-outline {
   background-color: var(--white) !important;
   border: 1px solid var(--black) !important;
   color: var(--black) !important;
 }
+div.coer-button button.dark-filled:not(.readonly):focus,
+div.coer-button button.dark-outline:not(.readonly):focus {
+  box-shadow: 0px 0px 20px var(--black) !important;
+}
 div.coer-button button.primary-filled:not(.readonly):hover, div.coer-button button.primary-filled:not(.readonly):focus,
 div.coer-button button.primary-outline:not(.readonly):hover, div.coer-button button.primary-outline:not(.readonly):focus,
 div.coer-button button.secondary-filled:not(.readonly):hover, div.coer-button button.secondary-filled:not(.readonly):focus,
@@ -1107,34 +1148,6 @@ div.coer-button button.dark-filled:not(.readonly):hover, div.coer-button button.
 div.coer-button button.dark-outline:not(.readonly):hover, div.coer-button button.dark-outline:not(.readonly):focus {
   filter: brightness(1.1) !important;
 }
-div.coer-button button.primary-filled:not(.readonly):focus,
-div.coer-button button.primary-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--primary-inner) !important;
-}
-div.coer-button button.secondary-filled:not(.readonly):focus,
-div.coer-button button.secondary-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--secondary-inner) !important;
-}
-div.coer-button button.success-filled:not(.readonly):focus,
-div.coer-button button.success-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--success-inner) !important;
-}
-div.coer-button button.warning-filled:not(.readonly):focus,
-div.coer-button button.warning-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--warning-inner) !important;
-}
-div.coer-button button.danger-filled:not(.readonly):focus,
-div.coer-button button.danger-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--danger-inner) !important;
-}
-div.coer-button button.navigation-filled:not(.readonly):focus,
-div.coer-button button.navigation-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--navigation-inner) !important;
-}
-div.coer-button button.dark-filled:not(.readonly):focus,
-div.coer-button button.dark-outline:not(.readonly):focus {
-  box-shadow: 0px 0px 20px var(--black) !important;
-}
 div.coer-button button.mdc-icon-button.mat-mdc-icon-button {
   width: 40px !important;
   height: 40px !important;
@@ -2204,6 +2217,101 @@ mat-accordion.coer-tree-accordion mat-expansion-panel mat-expansion-panel-header
   background-color: color-mix(in srgb, var(--app-sidenav), white 20%) !important;
 }
 
+div#coer-tool-bar {
+  z-index: 1;
+}
+div#coer-tool-bar mat-toolbar {
+  height: 45px !important;
+  position: relative !important;
+  z-index: 10 !important;
+  padding: 0px !important;
+  background-color: var(--toolbar-inner) !important;
+  color: var(--toolbar-text-inner) !important;
+}
+div#coer-tool-bar mat-toolbar span.app-name {
+  height: 40px !important;
+  display: contents !important;
+  max-width: 45%;
+}
+div#coer-tool-bar mat-toolbar div.logo-image-container {
+  height: 45px !important;
+  min-width: 100px;
+}
+div#coer-tool-bar mat-toolbar div.logo-image-container div.logo-image {
+  background-size: contain !important;
+  background-repeat: no-repeat !important;
+  background-position-y: bottom;
+  width: 100% !important;
+  height: 100% !important;
+  cursor: pointer !important;
+}
+div#coer-tool-bar mat-toolbar div.button-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+}
+div#coer-tool-bar mat-toolbar div.user-container {
+  max-width: 45%;
+  display: flex;
+  align-items: center;
+  font-size: small !important;
+  font-weight: bold;
+  height: 0px !important;
+  max-height: 0px !important;
+  padding-left: 2px !important;
+  margin-right: 10px !important;
+  border-radius: 8px !important;
+  cursor: pointer !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-image {
+  min-width: 35px !important;
+  max-width: 35px !important;
+  min-height: 35px !important;
+  max-height: 35px !important;
+  border-radius: 25px;
+  background: transparent;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: top;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-identity {
+  height: 40px !important;
+  max-height: 40px !important;
+  min-width: 70px !important;
+  overflow: hidden !important;
+  display: flex !important;
+  flex-flow: column !important;
+  justify-content: center !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-identity p {
+  line-height: normal !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+div#coer-tool-bar mat-toolbar div.user-container div.user-identity p::selection {
+  background-color: transparent !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container coer-dropdown {
+  position: absolute;
+  transform: translate(-3px, 0px);
+}
+div#coer-tool-bar mat-toolbar div.user-container coer-dropdown ul {
+  right: 0px !important;
+}
+div#coer-tool-bar mat-toolbar div.user-container:hover {
+  transform: scale(1.03);
+  box-shadow: 0px 0px 15px -5px black !important;
+}
+div#coer-tool-bar div.shadow {
+  box-shadow: 1px -10px 20px black !important;
+  width: 100vw;
+  height: 45px;
+  position: absolute;
+  top: 0;
+  z-index: 8;
+}
+
 div.coer-switch {
   height: 40px;
   display: flex !important;

package/styles/colors.scss

@@ -12,7 +12,7 @@
     --purple:#a615bc; 
 
     //Action Colors
-    --primary-inner:     var(--primary,     var(--blue));
+    --primary-inner:     var(--primary,     var(--orange));
     --secondary-inner:   var(--secondary,   var(--gray));
     --success-inner:     var(--success,     var(--green));
     --warning-inner:     var(--warning,     var(--yellow));

package/tools/lib/colors.class.d.ts

@@ -1,34 +1,8 @@
+import { IActionColors, IAppColors, IFixedColors } from "coer-elements/interfaces";
 export declare class Colors {
-    static readonly fixedColors: {
-        blue: string;
-        gray: string;
-        green: string;
-        yellow: string;
-        red: string;
-        smoke: string;
-        black: string;
-        orange: string;
-        white: string;
-        purple: string;
-    };
-    static readonly actionColors: {
-        primary: string;
-        secondary: string;
-        success: string;
-        warning: string;
-        danger: string;
-        navigation: string;
-        information: string;
-    };
-    static readonly appColors: {
-        appBreadcrumbs: string;
-        appBackground: string;
-        appContainers: string;
-        appSidenav: string;
-        appSidenavText: string;
-        appToolbar: string;
-        appToolbarText: string;
-    };
+    static get fixedColors(): IFixedColors;
+    static get actionColors(): IActionColors;
+    static get appColors(): IAppColors;
     static ToHexadecimal(r: number, g: number, b: number, a?: number): string;
     /** Returns a random color in hexadecimal
     public static GetRandomColorHex = (): string => "#xxxxxx".replace(/x/g, () => (Math.random() * 16 | 0).toString(16)); */