coer-elements 2.0.57 → 2.0.59

package/styles/components.scss

@@ -2,7 +2,8 @@
 @use "../components/lib/coer-accordion/coer-accordion.component.scss";
 @use "../components/lib/coer-button/coer-button.component.scss";
 @use "../components/lib/coer-checkbox/coer-checkbox.component.scss";
-@use "../components/lib/coer-grid/coer-grid.component.scss";
+@use "../components/lib/coer-grid/coer-grid.component.scss"; 
+@use "../components/lib/coer-grid/coer-grid-body/coer-grid-body.component.scss"; 
 @use "../components/lib/coer-list/coer-list.component.scss";
 @use "../components/lib/coer-modal/coer-modal.component.scss"; 
 @use "../components/lib/coer-page-title/coer-page-title.component.scss"; 
@@ -50,7 +51,7 @@ div.coer-form-field-component {
 
         mat-form-field { 
             div.mat-mdc-text-field-wrapper.mdc-text-field { 
-                background-color: var(--inputs-inner) !important;
+                background-color: var(--inputs-inner);
                 border-top-left-radius:  inherit !important;
                 border-top-right-radius: inherit !important;
         
@@ -189,10 +190,10 @@ div.coer-form-field-component {
         //Dropdown
         div.dropdown-options {
             position: absolute !important;
-            top: 40px !important;
+            top: 40px;
             left: 0px !important;
             right: 0px !important;
-            border: 1px solid var(--inputs-inner) !important;
+            border: 2px solid var(--inputs-inner) !important;
             border-top: none !important;
             border-radius: 0px 0px 10px 10px !important;
             padding: 0px !important;
@@ -264,26 +265,34 @@ div.coer-form-field-component {
 
 
 //Inner Grid
-coer-grid table tbody tr td {
-    mat-form-field {
-        div.mat-mdc-text-field-wrapper.mdc-text-field {
+coer-grid {
+    table tbody mat-form-field,
+    table tbody mat-form-field.mat-focused { 
+    
+        div.mat-mdc-text-field-wrapper,
+        div.mat-mdc-text-field-wrapper.mdc-text-field--focused {
             background-color: transparent !important;
+            border-radius: 0px !important;
             padding-left: 9px !important;
             padding-right: 9px !important;
     
-            div.mdc-line-ripple,
-            div.mdc-line-ripple::before,
-            div.mdc-line-ripple::after,
-            div.mdc-line-ripple.actived-component::before { 
+            div.mat-mdc-form-field-focus-overlay {
+                opacity: 0% !important;
+            }
+        
+            div.mdc-line-ripple:not(.mdc-line-ripple--active),
+            div.mdc-line-ripple:not(.mdc-line-ripple--active)::before,
+            div.mdc-line-ripple:not(.mdc-line-ripple--active)::after,
+            div.mdc-line-ripple.actived-component:not(.mdc-line-ripple--active)::before { 
                 border-color: transparent !important;
             }
-    
+        
             div.mat-mdc-form-field-flex {
-                height: 28px !important;
-    
+                height: 30px !important;
+        
                 div.mat-mdc-form-field-infix {
-                    height: 28px !important;
-    
+                    height: 30px !important;
+        
                     input {
                         margin-top: 3px !important;
                         font-size: 14px !important;
@@ -291,39 +300,46 @@ coer-grid table tbody tr td {
                 }
             }
         }
-    
+        
         span.icon-container {
             transform: translate(-5px, -6px) !important;
-        }
+        } 
     }
-}
+
+    table tbody div.dropdown-options { 
+        top: 30px !important;
+    } 
+} 
 
 
 //DatePicker
-.cdk-overlay-container {
-    width: 0px !important;
-    height: 0px !important;
+// .cdk-overlay-container {
+//     width: 0px !important;
+//     height: 0px !important;
 
-    .cdk-overlay-backdrop {
-        position: relative !important; 
-    }
+//     .cdk-overlay-backdrop {
+//         position: relative !important; 
+//     }
     
-    .cdk-overlay-connected-position-bounding-box {
-        width: 0px !important;
-        height: 0px !important;
+//     .cdk-overlay-connected-position-bounding-box {
+//         width: 0px !important;
+//         height: 0px !important;
     
-        .cdk-overlay-pane.mat-datepicker-popup {
-            .mat-datepicker-content {
-                .mat-datepicker-content-container {
-                    background-color: white !important;
-                    border: 1px solid lightgray !important;
-                }
-            }
-        }
-    }
-}
+//         .cdk-overlay-pane.mat-datepicker-popup {
+//             .mat-datepicker-content {
+//                 .mat-datepicker-content-container {
+//                     background-color: white !important;
+//                     border: 1px solid lightgray !important;
+//                 }
+//             }
+//         }
+//     }
+// }
 
 
+coer-switch,
+coer-textbox,
+coer-numberbox,
 coer-dropdown,
 coer-selectbox {
     display: contents !important;

package/styles/displays.scss

@@ -20,5 +20,5 @@
         .#{$breakpoint}#{$key} {  
             visibility: $value !important;
         } 
-    }
+    } 
 } 

package/styles/paragraphs.scss

@@ -13,6 +13,19 @@
     }
 
 
+    @each $key, $value in ( 
+        ''         : break-word,
+        '-none'    : keep-all, 
+        '-all'     : break-all, 
+        '-inherit' : inherit,
+        '-normal'  : normal
+    ) {   
+        .#{$breakpoint}word-break#{$key} {
+            word-break: $value !important; 
+        }
+    }
+
+
     @each $key, $value in ( 
         'left'    : left, 
         'center'  : center, 

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

@@ -6,6 +6,8 @@ export declare class HTMLElements {
     /** */
     static ScrollToElement: (element: string | HTMLElement | null | undefined, container?: string | HTMLElement) => void;
     /** */
+    static GetOffsetTop: (element: string | HTMLElement | null | undefined) => number;
+    /** */
     static GetCssValue: (element: string | HTMLElement | null | undefined, style: string) => string;
     /** Gets the width of the element in px */
     static GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
@@ -21,4 +23,12 @@ export declare class HTMLElements {
     static AddClass: (element: string | HTMLElement | null | undefined, className: string) => Promise<boolean>;
     /** */
     static RemoveClass: (element: string | HTMLElement | null | undefined, className: string) => boolean;
+    /** */
+    static HasChildren: (element: string | HTMLElement | null | undefined) => boolean;
+    /** */
+    static GetChildren: (element: string | HTMLElement | null | undefined) => HTMLElement[];
+    /** */
+    static GetFather: (element: string | HTMLElement | null | undefined) => HTMLElement | null;
+    /** */
+    static GetGrandfather: (element: string | HTMLElement | null | undefined) => HTMLElement | null;
 }

package/tools/lib/numbers.tools.d.ts

@@ -6,4 +6,6 @@ export declare class Numbers {
     static IsNotNumber(value: any): boolean;
     /** Return a string with numeric format */
     static GetNumericFormat(value: string | number | null | undefined, decimals?: number): string;
+    /** Return a string with currency format */
+    static GetCurrencyFormat(value: string | number | null | undefined, symbol?: string, currency?: string): string;
 }

package/tools/lib/tools.d.ts

@@ -15,7 +15,7 @@ export declare const Tools: {
     /** Break reference of a object or array */
     BreakReference: <T>(object: T) => T;
     /** Get properties of an object */
-    GetPropertyList: <T extends object | null | undefined>(object: T | null | undefined) => string[];
+    GetPropertyList: <T>(object: T | object | null | undefined) => string[];
     /** Wait the time indicated */
     Sleep: (milliseconds?: number, reference?: string | null) => Promise<void>;
     /** Send text to the computer's clipboard */

package/signals/lib/component-content.signal.d.ts

@@ -1 +0,0 @@
-export declare const componentContentSIGNAL: import("@angular/core").WritableSignal<string>;