coer-elements 2.0.49 → 2.0.51

package/styles/components.scss

@@ -2,30 +2,36 @@
 @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-datebox/coer-datebox.component.scss";
 @use "../components/lib/coer-grid/coer-grid.component.scss";
 @use "../components/lib/coer-list/coer-list.component.scss";
-@use "../components/lib/coer-modal/coer-modal.component.scss";
-@use "../components/lib/coer-numberbox/coer-numberbox.component.scss";
-@use "../components/lib/coer-page-title/coer-page-title.component.scss";
-@use "../components/lib/coer-dropdown/coer-dropdown.component.scss";
-@use "../components/lib/coer-selectbox/coer-selectbox.component.scss";
+@use "../components/lib/coer-modal/coer-modal.component.scss"; 
+@use "../components/lib/coer-page-title/coer-page-title.component.scss"; 
 @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";
-@use "../components/lib/coer-textbox/coer-textbox.component.scss";
+@use "../components/lib/coer-tab/coer-tab.component.scss"; 
 @use "../tools/lib/coer-alert/coer-alert.component.scss"; 
-
+@use "../components/lib/coer-textarea/coer-textarea.component.scss";
 
 input[type="file"] {
     display: none !important;
+} 
+
+
+.caret-none {
+    caret-color: transparent !important;
 }
 
 
+.loading {
+    cursor: wait !important;  
+    background-color: color-mix(in srgb, var(--gray), var(--white) 50%) !important;
+    animation: __KeyOpacity50 0.8s ease-in-out infinite alternate both !important; 
+} 
+
+
 .readonly {
     cursor: default !important; 
     background-color: color-mix(in srgb, var(--gray), var(--white) 70%) !important;
@@ -33,8 +39,292 @@ input[type="file"] {
 }
 
 
-.loading {
-    cursor: wait !important;  
-    background-color: color-mix(in srgb, var(--gray), var(--white) 50%) !important;
-    animation: __KeyOpacity50 0.8s ease-in-out infinite alternate both !important; 
-} 
+//Form Field Components
+div.coer-form-field-component {  
+    display: contents !important;
+    
+    div.coer-form-field-content {
+        position: relative !important;
+        align-items: center !important;
+        display: flex;
+
+        mat-form-field { 
+            div.mat-mdc-text-field-wrapper.mdc-text-field { 
+                background-color: var(--inputs-inner) !important;
+                border-top-left-radius:  inherit !important;
+                border-top-right-radius: inherit !important;
+        
+                div.mat-mdc-form-field-flex { 
+                    height: 40px;
+        
+                    div.mat-mdc-form-field-infix { 
+                        width: 100% !important;
+                        padding: 0px !important;
+                        height: 40px;
+                        min-height: 40px;
+        
+                        label {
+                            overflow: visible !important;
+                            position: absolute !important;
+                            top: 20px !important;
+                        }
+        
+                        label.mdc-floating-label--float-above  mat-label {
+                            color: var(--primary-inner) !important;
+                            font-weight: bold !important;
+                            position: relative !important;
+                            left: -10px !important;
+                            top: 2px !important;
+                        }
+        
+                        input, textarea {
+                            font-weight: normal !important;
+                            font-size: 17px !important;
+                            color: var(--inputs-text-inner) !important;
+                        } 
+                    }
+    
+                    .mat-mdc-form-field-icon-suffix {
+                        .mat-datepicker-toggle-active * {
+                            color: var(--primary-inner) !important; 
+                        }
+    
+                        button {
+                            .mat-mdc-button-touch-target,
+                            .mat-ripple.mat-mdc-button-ripple,
+                            .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple {
+                                width: 0px !important;
+                                height: 0px !important;
+                            } 
+                        }
+                    }
+                }
+    
+                div.mdc-line-ripple.actived-component::before {
+                    border: 1px solid var(--primary-inner) !important;
+                }
+            }
+        
+            div.mdc-line-ripple.mdc-line-ripple--active,
+            div.mdc-line-ripple.mdc-line-ripple--active::before,
+            div.mdc-line-ripple.mdc-line-ripple--active::after {
+                border-bottom-color: var(--primary-inner) !important;
+            }
+        
+            div.mat-mdc-form-field-subscript-wrapper.mat-mdc-form-field-bottom-align {
+                height: 0px !important;
+            }
+        
+            span.icon-container {
+                position: absolute !important;
+                top: 1px !important;
+                right: 0px !important;
+                z-index: 5 !important;
+                width: 0px !important;
+                height: 40px !important;
+                display: flex !important;
+                align-items: center !important;
+                justify-content: center !important;
+                gap: 5px !important;
+    
+                span {
+                    display: flex !important;
+                    align-items: center !important;
+                }
+        
+                i {
+                    font-size: 20px !important;
+                    color: color-mix(in srgb, var(--inputs-icons-inner), var(--white) 60%) !important;
+                }  
+    
+                i:not(.icon-circle-check):hover,
+                i:not(.icon-circle-exclamation):hover {
+                    color: color-mix(in srgb, var(--inputs-icons-inner), var(--white) 40%) !important;
+                }
+                
+                i.icon-circle-check.icon-fill {
+                    color: var(--green) !important;
+                }
+        
+                i.icon-circle-exclamation.icon-fill {
+                    color: var(--red) !important;
+                }
+            }
+        }
+        
+        //Readonly
+        mat-form-field.readonly {
+            border-top-left-radius: 4px !important; 
+            border-top-right-radius: 4px !important; 
+        
+            div.mat-mdc-text-field-wrapper.mdc-text-field {
+                background-color: inherit !important;
+            }
+        }
+        
+        
+        //Loading
+        div.loading, div.invisible {
+            height: 40px !important;
+            padding: 0px 16px !important; 
+            display: flex !important;
+            align-items: center !important; 
+        }
+        
+        
+        //External Button
+        div.external-button-container-left,
+        div.external-button-container-right {
+            width: 40px !important;
+            height: 40px !important;
+            display: flex !important;
+            align-items: center !important;
+            justify-content: center !important;     
+            background-color: color-mix(in srgb, var(--inputs-inner), var(--black) 15%) !important; 
+        } 
+        
+        div.external-button-container-left  { border-top-left-radius:  4px !important }
+        div.external-button-container-right { border-top-right-radius: 4px !important } 
+        
+        //Dropdown
+        div.dropdown-options {
+            position: absolute !important;
+            top: 40px !important;
+            left: 0px !important;
+            right: 0px !important;
+            border: 1px solid var(--inputs-inner) !important;
+            border-top: none !important;
+            border-radius: 0px 0px 10px 10px !important;
+            padding: 0px !important;
+            overflow-y: auto !important;
+            z-index: 101 !important;
+             
+            ul {
+                background-color: var(--containers-inner) !important; 
+                overflow: auto !important;
+                max-height: 205px !important;
+    
+    
+                li {
+                    padding: 0px 10px !important;
+                    cursor:  pointer !important;
+                        
+                    div {
+                        gap: 10px !important;
+                        display: flex !important;
+                        align-items: center !important;
+                        height: 40px !important;
+                        color: var(--black) !important;
+                        border-bottom: 1px ridge lightgray !important;
+
+                        span {
+                            display: flex !important;
+                            align-items: center !important;
+                        }
+
+                        .dropdown-menu-icon-container {
+                            width: 16px !important;
+                            min-width: 16px !important;
+                            max-width: 16px !important;
+                            justify-self: center !important; 
+                        }
+                    }                     
+                }  
+    
+                li:last-child div {
+                    border-bottom: none !important;
+                }
+    
+                li::marker {
+                    content: "" !important;
+                    display: none !important;
+                } 
+    
+                li:not(.dropdown-item-focus):hover,
+                li:not(.dropdown-item-focus) > div:hover { 
+                    background-color: color-mix(in srgb, var(--inputs-items-inner), var(--white) 95%) !important; 
+                } 
+    
+                li.dropdown-item-focus,
+                li.dropdown-item-focus > div {
+                    background-color: color-mix(in srgb, var(--inputs-items-inner), var(--white) 65%) !important;
+                }
+            }
+        } 
+    }
+    
+    //Footer
+    footer {
+        padding-top: 2px;
+        text-align: right;
+        font-size: 10px;
+        color: var(--gray);
+    }
+} 
+
+
+//Inner Grid
+coer-grid table tbody tr td {
+    mat-form-field {
+        div.mat-mdc-text-field-wrapper.mdc-text-field {
+            background-color: transparent !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 { 
+                border-color: transparent !important;
+            }
+    
+            div.mat-mdc-form-field-flex {
+                height: 28px !important;
+    
+                div.mat-mdc-form-field-infix {
+                    height: 28px !important;
+    
+                    input {
+                        margin-top: 3px !important;
+                        font-size: 14px !important;
+                    }
+                }
+            }
+        }
+    
+        span.icon-container {
+            transform: translate(-5px, -6px) !important;
+        }
+    }
+}
+
+
+//DatePicker
+.cdk-overlay-container {
+    width: 0px !important;
+    height: 0px !important;
+
+    .cdk-overlay-backdrop {
+        position: relative !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;
+                }
+            }
+        }
+    }
+}
+
+
+coer-dropdown,
+coer-selectbox {
+    display: contents !important;
+}

package/styles/cursors.scss

@@ -4,10 +4,11 @@
         'pointer'  : pointer, 
         'wait'     : wait,
         'grab'     : grab,
-        'grabbing' : grabbing
+        'grabbing' : grabbing,
+        'text'     : text     
     ) {   
         .#{$breakpoint}cursor-#{$key} {
-            cursor: $value !important;
+            cursor: $value !important; 
         }
     }
 }

package/styles/displays.scss

@@ -5,7 +5,8 @@
         'block' :       block, 
         'inline':       inline, 
         'inline-block': inline-block, 
-        'inline-flex' : inline-flex 
+        'inline-flex' : inline-flex,
+        'contents': contents   
     ) {   
         .#{$breakpoint}display-#{$key} {  
             display: $value !important;

package/styles/icons/icons-regular.scss

@@ -39,6 +39,7 @@ $icons: (
     'images',
     'input-text',
     'j',
+    'magnifying-glass',
     'monitor',
     'p',
     'pin-geo',

package/styles/icons/icons.scss

@@ -12,6 +12,7 @@
     mask-position: center !important; 
     display: inline-block !important; 
     background-color: currentColor !important;
+    position: inherit;
 }
 
 

package/styles/width-height.scss

@@ -1,5 +1,6 @@
 @mixin width-content($breakpoint) {
     @each $key, $value in (
+        'inherit'    : inherit,
         'fit-content': fit-content, 
         'min-content': min-content,
         'max-content': max-content, 

package/svg/regular/magnifying-glass.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<!-- COER System -->
+	<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+</svg>

package/tools/lib/strings.tools.d.ts

@@ -16,6 +16,8 @@ export declare class Strings {
     static RemoveSpecialCharacters(value: string | number | null | undefined): string;
     /** Only Alphanumeric */
     static OnlyAlphanumeric(value: string | number | null | undefined): string;
+    /** Only Alphanumeric */
+    static OnlyNumbers(value: string | number | null | undefined): string;
     /** Validates if both strings are equal */
     static Equals(value: string | number | null | undefined, value2: string | number | null | undefined, sensitive?: boolean): boolean;
 }