coer-elements 2.0.18 → 2.0.19

package/styles/icons.scss

@@ -0,0 +1,20 @@
+@mixin Icon() {
+    min-width: 5px !important;
+    min-height: 5px !important; 
+    width: 1em !important;
+    height: 1em !important;
+    mask-size: contain !important; 
+    mask-repeat: no-repeat !important;
+    mask-position: center !important; 
+    display: inline-block !important; 
+    background-color: currentColor !important;
+}
+
+.coer-icon {
+    @include Icon();
+} 
+
+.coer-icon-house-fill { 
+    @include Icon();
+    mask-image: url('../svg/house.svg'); 
+}

package/styles/index.scss

@@ -1,15 +1,19 @@
-@use "./components.scss";
-@use "./bootstrap.scss";
+@use "./animations.scss";
 @use "./colors.scss";
+@use "./components.scss";
 @use "./containers.scss";
 @use "./cursores.scss";
-@use "./scroll-bar.scss"; 
+@use "./font.scss";
+@use "./icons.scss";
+@use "./layout-flex-wrap.scss";
 @use "./layout-flex.scss";
 @use "./layout-grid.scss";
-@use "./animations.scss";
+@use "./margin.scss";
+@use "./overflow.scss";
+@use "./padding.scss";
 @use "./position.scss";
-@use "./font.scss";
-@use "./space.scss";
+@use "./scroll-bar.scss"; 
+
 
 * {
     font-family: sans-serif;
@@ -32,4 +36,18 @@ input[type="file"] {
 
 .no-selection::selection {
     background-color: transparent !important;
-}    
+}    
+
+.fill-space {
+    flex: 1 1 auto;
+} 
+
+.tooltip-inner {
+    min-width: 125px;
+    max-width: 250px;
+    min-height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    word-break: break-word;
+}

package/styles/layout-flex-wrap.scss

@@ -0,0 +1,108 @@
+@each $key, $value in (
+    'top': flex-start, 
+    'middle': center, 
+    'bottom': flex-end
+    ) { 
+
+    .flex-wrap-#{$key}-left { 
+        display: flex !important; 
+        align-items: $value !important;
+        justify-content: flex-start !important;
+        flex-wrap: wrap !important;
+        gap: 10px;
+    } 
+
+    .flex-wrap-#{$key}-center { 
+        display: flex !important; 
+        align-items: $value !important;
+        justify-content: center !important;
+        flex-wrap: wrap !important;
+        gap: 10px;
+    }
+
+    .flex-wrap-#{$key}-right { 
+        display: flex !important; 
+        align-items: $value !important;
+        justify-content: flex-end !important;
+        flex-wrap: wrap !important;
+        gap: 10px;
+    }
+
+    .flex-wrap-#{$key}-between { 
+        display: flex !important; 
+        align-items: $value !important;
+        justify-content: space-between !important;
+        flex-wrap: wrap !important;
+        gap: 10px;
+    }
+
+    .flex-wrap-#{$key}-around { 
+        display: flex !important; 
+        align-items: $value !important;
+        justify-content: space-around !important;
+        flex-wrap: wrap !important;
+        gap: 10px;
+    }
+
+    .flex-wrap-#{$key}-evenly { 
+        display: flex !important; 
+        align-items: $value !important;
+        justify-content: space-evenly !important;
+        flex-wrap: wrap !important;
+        gap: 10px;
+    }
+}
+ 
+
+@for $i from 1 through 10 { 
+    @if($i == 1) {
+        .flex-item-50px {
+            flex-basis: 50px;
+        } 
+
+        .flex-item-grow-50px {
+            flex-grow: 1 !important;
+            flex-basis: 50px;
+        } 
+    } 
+
+    .flex-item-#{$i * 10} {
+        flex-basis: $i * 10%;
+    }
+
+    .flex-item-#{$i * 100}px {
+        flex-basis: $i * 100px;
+    }
+
+    .flex-item-grow-#{$i * 10} {
+        flex-grow: 1 !important;
+        flex-basis: $i * 10%;
+    } 
+
+    .flex-item-grow-#{$i * 100}px {
+        flex-grow: 1 !important;
+        flex-basis: $i * 100px;
+    } 
+    
+    @if($i * 100 + 50 < 1000) {
+        .flex-item-#{$i * 100 + 50}px {
+            flex-basis: $i * 100px + 50px;
+        } 
+
+        .flex-item-grow-#{$i * 100 + 50}px {
+            flex-grow: 1 !important;
+            flex-basis: $i * 100px + 50px;
+        } 
+    }  
+
+    @if($i * 10 + 5 < 100) {
+        .flex-item-#{$i * 10 + 5} {
+            flex-basis: $i * 10%;
+        } 
+
+        .flex-item-grow-#{$i * 10 + 5} {
+            flex-grow: 1 !important;
+            flex-basis: $i * 10% + 5%;
+        }
+    }   
+}    

package/styles/layout-flex.scss

@@ -5,143 +5,41 @@
     ) {
 
     .flex-#{$key}-left {
-        display: flex;
-        align-items: $value;
-        justify-content: flex-start;
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: flex-start !important;
     }  
 
-    .flex-wrap-#{$key}-left { 
-        display: flex; 
-        align-items: $value;
-        justify-content: flex-start;
-        flex-wrap: wrap;
-        gap: 10px;
-    } 
-
     .flex-#{$key}-center {
-        display: flex;
-        align-items: $value;
-        justify-content: center;
-    } 
-
-    .flex-wrap-#{$key}-center { 
-        display: flex; 
-        align-items: $value;
-        justify-content: center;
-        flex-wrap: wrap;
-        gap: 10px;
-    }
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: center !important;
+    }   
 
     .flex-#{$key}-right {
-        display: flex;
-        align-items: $value;
-        justify-content: flex-end;
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: flex-end !important;
     } 
-
-    .flex-wrap-#{$key}-right { 
-        display: flex; 
-        align-items: $value;
-        justify-content: flex-end;
-        flex-wrap: wrap;
-        gap: 10px;
-    }
-
+    
     .flex-#{$key}-between {
-        display: flex;
-        align-items: $value;
-        justify-content: space-between;
-    } 
-
-    .flex-wrap-#{$key}-between { 
-        display: flex; 
-        align-items: $value;
-        justify-content: space-between;
-        flex-wrap: wrap;
-        gap: 10px;
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: space-between !important;
     }
 
     .flex-#{$key}-around {
-        display: flex;
-        align-items: $value;
-        justify-content: space-around;
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: space-around !important;
     } 
 
-    .flex-wrap-#{$key}-around { 
-        display: flex; 
-        align-items: $value;
-        justify-content: space-around;
-        flex-wrap: wrap;
-        gap: 10px;
-    }
-
     .flex-#{$key}-evenly {
-        display: flex;
-        align-items: $value;
-        justify-content: space-evenly;
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: space-evenly !important;
     } 
-
-    .flex-wrap-#{$key}-evenly { 
-        display: flex; 
-        align-items: $value;
-        justify-content: space-evenly;
-        flex-wrap: wrap;
-        gap: 10px;
-    }
 }
- 
-
-@for $i from 1 through 10 { 
-    @if($i == 1) {
-        .flex-item-50px {
-            flex-basis: 50px;
-        } 
-
-        .flex-item-grow-50px {
-            flex-grow: 1;
-            flex-basis: 50px;
-        } 
-    } 
-
-    .flex-item-#{$i * 10} {
-        flex-basis: $i * 10%;
-    }
-
-    .flex-item-#{$i * 100}px {
-        flex-basis: $i * 100px;
-    }
-
-    .flex-item-grow-#{$i * 10} {
-        flex-grow: 1;
-        flex-basis: $i * 10%;
-    } 
-
-    .flex-item-grow-#{$i * 100}px {
-        flex-grow: 1;
-        flex-basis: $i * 100px;
-    } 
-    
-    @if($i * 100 + 50 < 1000) {
-        .flex-item-#{$i * 100 + 50}px {
-            flex-basis: $i * 100px + 50px;
-        } 
-
-        .flex-item-grow-#{$i * 100 + 50}px {
-            flex-grow: 1;
-            flex-basis: $i * 100px + 50px;
-        } 
-    }  
-
-    @if($i * 10 + 5 < 100) {
-        .flex-item-#{$i * 10 + 5} {
-            flex-basis: $i * 10%;
-        } 
-
-        .flex-item-grow-#{$i * 10 + 5} {
-            flex-grow: 1;
-            flex-basis: $i * 10% + 5%;
-        }
-    }   
-}   
 
 
 @each $key, $value in (
@@ -151,7 +49,14 @@
     'column-reverse': column-reverse
 ) {
     .flex-#{$key} { 
-        display: flex;
-        flex-direction: $value;
+        display: flex !important;
+        flex-direction: $value !important;
+    } 
+}  
+
+
+@for $i from 0 through 30 {  
+    .gap-#{$i}px {
+        gap: $i * 1px;
     } 
-}  
+} 

package/styles/layout-grid.scss

@@ -1,6 +1,6 @@
 .grid { 
     margin: 15px 30px;
-    display: grid; 
+    display: grid !important; 
     gap: 15px;  
 }
 
@@ -8,7 +8,4 @@
     .grid-columns-#{$i} { 
         grid-template-columns: repeat($i, 1fr);
     } 
-} 
-
-
-
+} 

package/styles/margin.scss

@@ -0,0 +1,21 @@
+@for $i from 0 through 30 {
+    .margin-#{$i}px {
+        margin: $i * 1px !important;
+    }
+
+    .margin-top-#{$i}px {
+        margin-top: $i * 1px !important;
+    } 
+    
+    .margin-right-#{$i}px {
+        margin-right: $i * 1px !important;
+    }  
+
+    .margin-bottom-#{$i}px {
+        margin-bottom: $i * 1px !important;
+    }  
+
+    .margin-left-#{$i}px {
+        margin-left: $i * 1px !important;
+    }   
+}  

package/styles/overflow.scss

@@ -0,0 +1,9 @@
+@each $key, $value in (
+    'auto': auto, 
+    'visible': visible, 
+    'hidden': hidden,  
+) {
+    .overflow-#{$key} {  
+        overflow: $value !important;
+    } 
+} 

package/styles/padding.scss

@@ -0,0 +1,21 @@
+@for $i from 0 through 30 {   
+    .padding-#{$i}px {
+        padding: $i * 1px !important;
+    }
+
+    .padding-top-#{$i}px {
+        padding-top: $i * 1px !important;
+    } 
+    
+    .padding-right-#{$i}px {
+        padding-right: $i * 1px !important;
+    }  
+
+    .padding-bottom-#{$i}px {
+        padding-bottom: $i * 1px !important;
+    }  
+
+    .padding-left-#{$i}px {
+        padding-left: $i * 1px !important;
+    }  
+} 

package/styles/position.scss

@@ -15,4 +15,22 @@ $counter: 10;
     .position-#{$key} { 
         position: $value !important;
     } 
-}  
+}   
+
+@for $i from 0 through 50 {   
+    .top-#{$i}px {
+        top: $i * 1px !important;
+    } 
+    
+    .right-#{$i}px {
+        right: $i * 1px !important;
+    }   
+ 
+    .bottom-#{$i}px {
+        bottom: $i * 1px !important;
+    }   
+
+    .left-#{$i}px {
+        left: $i * 1px !important;
+    }  
+} 

package/styles/scroll-bar.scss

@@ -1,20 +1,20 @@
 @use 'sass:color';
 
 *::-webkit-scrollbar {
-    background-color: color.adjust(#6c757d, $lightness: 48%);
-    width: 5px;
-    height: 5px;
+    background-color: color.adjust(#6c757d, $lightness: 48%) !important;
+    width: 5px !important;
+    height: 5px !important;
 }
 
 *::-webkit-scrollbar-thumb{
-    background-color: color.adjust(#6c757d, $lightness: 35%) ;
-    border-radius: 4px;
+    background-color: color.adjust(#6c757d, $lightness: 35%) !important;
+    border-radius: 4px !important;
 }
 
 *::-webkit-scrollbar-thumb:hover {
-    background-color: var(--gray);
+    background-color: var(--gray) !important;
 }
 
 *::-webkit-scrollbar-thumb:active {
-    background-color: var(--gray);
+    background-color: var(--gray) !important;
 }

package/svg/house.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+	<path d="M575.8 255.5c0 18-15 32.1-32 32.1l-32 0 .7 160.2c0 2.7-.2 5.4-.5 8.1l0 16.2c0 22.1-17.9 40-40 40l-16 0c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1L416 512l-24 0c-22.1 0-40-17.9-40-40l0-24 0-64c0-17.7-14.3-32-32-32l-64 0c-17.7 0-32 14.3-32 32l0 64 0 24c0 22.1-17.9 40-40 40l-24 0-31.9 0c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2l-16 0c-22.1 0-40-17.9-40-40l0-112c0-.9 0-1.9 .1-2.8l0-69.7-32 0c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>
+</svg>

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

@@ -1,16 +1,16 @@
-export declare const ElementsHTML: {
+export declare class ElementsHTML {
     /** */
-    GetElement: (selector: string) => HTMLElement | null;
+    static GetElement: (selector: string) => HTMLElement | null;
     /** */
-    GetCssValueBy: (selector: string, style: string) => string;
+    static GetCssValueBy: (selector: string, style: string) => string;
     /** */
-    GetCssValue: (element: Element | null, style: string) => string;
+    static GetCssValue: (element: Element | null, style: string) => string;
     /** Get width in px */
-    GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
+    static 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;
+    static GetElementHeight: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
     /** */
-    IsInvalidElement: (element: any) => boolean;
+    static IsInvalidElement: (element: any) => boolean;
     /** Get color in hexadecimal format */
-    GetElementColor: (element: HTMLElement | null | undefined) => string;
-};
+    static GetElementColor: (element: HTMLElement | null | undefined) => string;
+}

package/tools/lib/string.tools.d.ts

@@ -9,8 +9,10 @@ export declare class StringTools {
     static ToTitle(value: string | number | null | undefined): string;
     /** Removes the last character */
     static RemoveLastChar(value: string | number | null | undefined): string;
-    /** Removes accents and special characters */
-    static RemoveAccents(value: string | number | null | undefined, onlyAlphaNumeric?: boolean): string;
+    /** Removes accents */
+    static RemoveAccents(value: string | number | null | undefined, except?: string[]): string;
+    /** Removes special characters */
+    static OnlyAlphaNumeric(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;
 }

package/styles/bootstrap.scss

@@ -1,9 +0,0 @@
-.tooltip-inner {
-    min-width: 125px;
-    max-width: 250px;
-    min-height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    word-break: break-word;
-}

package/styles/space.scss

@@ -1,70 +0,0 @@
-@for $i from 0 through 30 {  
-    //padding
-    .padding-#{$i}px {
-        padding: $i * 1px;
-    }
-
-    .padding-top-#{$i}px {
-        padding-top: $i * 1px;
-    } 
-    
-    .padding-right-#{$i}px {
-        padding-right: $i * 1px;
-    }  
-
-    .padding-bottom-#{$i}px {
-        padding-bottom: $i * 1px;
-    }  
-
-    .padding-left-#{$i}px {
-        padding-left: $i * 1px;
-    } 
-    
-    //margin
-    .margin-#{$i}px {
-        margin: $i * 1px;
-    }
-
-    .margin-top-#{$i}px {
-        margin-top: $i * 1px;
-    } 
-    
-    .margin-right-#{$i}px {
-        margin-right: $i * 1px;
-    }  
-
-    .margin-bottom-#{$i}px {
-        margin-bottom: $i * 1px;
-    }  
-
-    .margin-left-#{$i}px {
-        margin-left: $i * 1px;
-    }  
-
-    //position
-    .top-#{$i}px {
-        top: $i * 1px;
-    } 
-    
-    .right-#{$i}px {
-        right: $i * 1px;
-    }   
- 
-    .bottom-#{$i}px {
-        bottom: $i * 1px;
-    }   
-
-    .left-#{$i}px {
-        left: $i * 1px;
-    } 
-
-    //gap
-    .gap-#{$i}px {
-        gap: $i * 1px;
-    } 
-} 
-
-
-.fill-space {
-    flex: 1 1 auto;
-}