coer-elements 0.0.95 → 0.0.97

package/interfaces/lib/login-response.interface.d.ts

@@ -2,6 +2,7 @@
 export interface ILogInResponse {
     userId: string;
     user: string;
+    nickname: string;
     fullName: string;
     role: string;
     jwt: string;

package/interfaces/lib/screen-size.interface.d.ts

@@ -1,5 +1,5 @@
 export interface IScreenSize {
     width: number;
     height: number;
-    breakpoin: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    breakpoint: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "coer-elements",
-  "version": "0.0.95",
+  "version": "0.0.97",
   "author": "Christian Omar Escamilla Rodríguez",
   "keywords": [
     "COER",

package/styles/angular-material.scss

@@ -17,5 +17,4 @@
 @use "../components/lib/coer-tab/coer-tab.component.scss";
 @use "../components/lib/coer-textarea/coer-textarea.component.scss";
 @use "../components/lib/coer-textbox/coer-textbox.component.scss";
-@use "../tools/lib/coer-alert/coer-alert.component.scss";
- 
+@use "../tools/lib/coer-alert/coer-alert.component.scss"; 

package/styles/coer-elements.css

@@ -405,13 +405,6 @@ div.coer-button .mat-mdc-button-touch-target {
   height: 0px !important;
 }
 
-div#coer-tool-bar coer-button * {
-  color: var(--orange) !important;
-}
-div#coer-tool-bar coer-dropdown coer-button * {
-  color: transparent !important;
-}
-
 div.coer-checkbox mat-checkbox div.mdc-form-field.mat-internal-form-field div.mdc-checkbox {
   padding: 10px !important;
 }
@@ -694,6 +687,7 @@ div.coer-grid div.loading {
   background-color: rgba(187, 187, 187, 0.5137254902) !important;
   flex-direction: column !important;
   gap: 10px !important;
+  z-index: 1;
 }
 div.coer-grid div.loading span.fa-fade {
   position: relative !important;
@@ -1025,13 +1019,17 @@ header.coer-page-title h2 span {
   font-size: 20px !important;
 }
 header.coer-page-title nav {
-  height: 25px;
+  height: auto;
+  min-height: 25px;
   font-size: small;
   background-color: whitesmoke;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
+header.coer-page-title nav a.go-back-button {
+  min-width: 60px;
+}
 header.coer-page-title ol, header.coer-page-title a, header.coer-page-title .bi-info-circle {
   margin: 0px;
   padding-left: 5px;
@@ -1071,7 +1069,7 @@ div.coer-dropdown ul.dropdown-menu {
   border-top-left-radius: 0px !important;
   border-top-right-radius: 0px !important;
   max-height: 205px !important;
-  width: 100% !important;
+  width: 100%;
   overflow: auto !important;
   padding: 0px !important;
 }
@@ -1269,7 +1267,6 @@ mat-drawer-container mat-drawer {
   width: auto;
   min-width: 200px;
   background-color: var(--black) !important;
-  z-index: 1 !important;
 }
 mat-drawer-container mat-drawer div.mat-drawer-inner-container::-webkit-scrollbar {
   width: 1px !important;
@@ -1351,6 +1348,9 @@ mat-nav-list.coer-menu-option mat-list-item span.icon-container {
   max-width: 20px !important;
   color: var(--white);
 }
+mat-nav-list.coer-menu-option mat-list-item span.icon-container i {
+  min-height: 16px !important;
+}
 mat-nav-list.coer-menu-option mat-list-item span.label-container {
   justify-content: flex-start !important;
   display: inline-flex !important;
@@ -2044,3 +2044,21 @@ input[type=file] {
 .no-selection::selection {
   background-color: transparent !important;
 }
+
+div#coer-tool-bar coer-button * {
+  color: var(--orange) !important;
+}
+div#coer-tool-bar coer-dropdown coer-button * {
+  color: transparent !important;
+}
+div#coer-tool-bar coer-dropdown ul {
+  right: 0px !important;
+  width: auto !important;
+  top: 2px !important;
+  border-top: 0px !important;
+  background-color: whitesmoke !important;
+}
+div#coer-tool-bar coer-dropdown ul li:not(.no-options):hover {
+  color: black !important;
+  background-color: rgb(240.618852459, 246.3831967213, 254.881147541) !important;
+}

package/styles/index.scss

@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use "./angular-material.scss";
 @use "./bootstrap.scss";
 @use "./colors.scss";
@@ -29,4 +30,29 @@ input[type="file"] {
 
 .no-selection::selection {
     background-color: transparent !important;
-}
+} 
+
+
+div#coer-tool-bar {  
+    coer-button * {
+        color: var(--orange) !important;
+    }
+
+    coer-dropdown coer-button * {
+        color: transparent !important;
+    } 
+
+    coer-dropdown ul {
+        right: 0px !important;
+        width: auto !important;
+        top: 2px !important;
+        border-top: 0px !important;
+        background-color: whitesmoke !important;
+    
+        li:not(.no-options):hover{
+            color: black !important;
+            background-color: color.adjust(#0d6efd, $lightness: 45%) !important;
+        }
+    }
+}
+

package/tools/lib/elements-html.class.d.ts

@@ -0,0 +1,6 @@
+export declare const ElementsHTML: {
+    /** Get width in px */
+    GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
+    /** Get height in px */
+    GetElementHeight: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
+};

package/tools/public-api.d.ts

@@ -4,6 +4,7 @@ export * from './lib/coer-grid.templates';
 export * from './lib/colors.class';
 export * from './lib/control-value.class';
 export * from './lib/date-time.class';
+export * from './lib/elements-html.class';
 export * from './lib/files.class';
 export * from './lib/user.class';
 export * from './lib/filters.class';