coer-elements 2.0.17 → 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,14 +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 "./layout.scss";
-@use "./animations.scss";
-@use "./position.scss";
 @use "./font.scss";
-@use "./space.scss";
+@use "./icons.scss";
+@use "./layout-flex-wrap.scss";
+@use "./layout-flex.scss";
+@use "./layout-grid.scss";
+@use "./margin.scss";
+@use "./overflow.scss";
+@use "./padding.scss";
+@use "./position.scss";
+@use "./scroll-bar.scss"; 
+
 
 * {
     font-family: sans-serif;
@@ -31,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

@@ -0,0 +1,62 @@
+@each $key, $value in (
+    'top': flex-start, 
+    'middle': center, 
+    'bottom': flex-end
+    ) {
+
+    .flex-#{$key}-left {
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: flex-start !important;
+    }  
+
+    .flex-#{$key}-center {
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: center !important;
+    }   
+
+    .flex-#{$key}-right {
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: flex-end !important;
+    } 
+    
+    .flex-#{$key}-between {
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: space-between !important;
+    }
+
+    .flex-#{$key}-around {
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: space-around !important;
+    } 
+
+    .flex-#{$key}-evenly {
+        display: flex !important;
+        align-items: $value !important;
+        justify-content: space-evenly !important;
+    } 
+}
+
+
+@each $key, $value in (
+    'row': row, 
+    'row-reverse': row-reverse, 
+    'column': column, 
+    'column-reverse': column-reverse
+) {
+    .flex-#{$key} { 
+        display: flex !important;
+        flex-direction: $value !important;
+    } 
+}  
+
+
+@for $i from 0 through 30 {  
+    .gap-#{$i}px {
+        gap: $i * 1px;
+    } 
+} 

package/styles/layout-grid.scss

@@ -0,0 +1,11 @@
+.grid { 
+    margin: 15px 30px;
+    display: grid !important; 
+    gap: 15px;  
+}
+
+@for $i from 1 through 12 {  
+    .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

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

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

@@ -0,0 +1,18 @@
+export declare class StringTools {
+    /** Sets the first character to lowercase */
+    static FirstCharToLower(value: string | number | null | undefined): string;
+    /** Sets the first character to uppercase */
+    static FirstCharToUpper(value: string | number | null | undefined): string;
+    /** Clean extra whitespaces */
+    static CleanUpBlanks(value: string | number | null | undefined): string;
+    /** Apply title formatting */
+    static ToTitle(value: string | number | null | undefined): string;
+    /** Removes the last character */
+    static RemoveLastChar(value: string | number | null | undefined): 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/tools/lib/tools.d.ts

@@ -11,22 +11,14 @@ export declare const Tools: {
     IsNotOnlyWhiteSpace: (value: any) => boolean;
     /** Avoid Null value */
     AvoidNull: <T>(value: T | null | undefined, type?: "string" | "number" | "boolean" | null) => T;
-    /** */
-    RemoveAccents: (value: string | null | undefined) => string;
     /** Break reference of a object or array */
     BreakReference: <T>(object: T) => T;
-    /** Clean extra whitespaces */
-    CleanUpBlanks: (text: string | number) => string;
     /** Get properties of an object */
     GetPropertyList: <T>(object: T | null | undefined) => string[];
     /**
      * Set an index and merge more arrays of the same type
      * */
     SetIndex: <T>(array: T[], ...args: T[][]) => T[];
-    /** Set First Char To Lower */
-    FirstCharToLower: (text: string | null | undefined) => string;
-    /** Set First Char To Upper */
-    FirstCharToUpper: (text: string | null | undefined) => string;
     /** Sort an array in ascending order by property */
     SortBy: <T>(array: T[], property: string, propertyType?: "string" | "number") => T[];
     /** Sort an array in descending order by property */
@@ -43,6 +35,4 @@ export declare const Tools: {
     IsNumber: (value: any) => boolean;
     /** */
     Clipboard: (text: string, message?: string, title?: string) => void;
-    /** */
-    RemoveLastChar: (text: string) => string;
 };

package/tools/public-api.d.ts

@@ -1,17 +1,18 @@
 export * from './lib/coer-alert/coer-alert.component';
-export * from './lib/breadcrumbs.class';
+export * from './lib/breadcrumbs.tools';
 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/colors.tools';
+export * from './lib/control-value.tools';
+export * from './lib/date-time.tools';
+export * from './lib/elements-html.tools';
+export * from './lib/files.tools';
 export * from './lib/user.class';
-export * from './lib/filters.class';
-export * from './lib/menu.class';
-export * from './lib/page.class';
-export * from './lib/screen.class';
-export * from './lib/section.class';
-export * from './lib/service.class';
-export * from './lib/source.class';
+export * from './lib/filters.tools';
+export * from './lib/menu.tools';
+export * from './lib/page.tools';
+export * from './lib/screen.tools';
+export * from './lib/section.tools';
+export * from './lib/service.tools';
+export * from './lib/source.tools';
+export * from './lib/string.tools';
 export * from './lib/tools';

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/layout.scss

@@ -1,125 +0,0 @@
-@each $key, $value in (
-    'top': flex-start, 
-    'middle': center, 
-    'bottom': flex-end
-    ) {
-
-    .flex-#{$key}-left {
-        display: flex;
-        align-items: $value;
-        justify-content: flex-start;
-    }  
-
-    .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;
-    }
-
-    .flex-#{$key}-right {
-        display: flex;
-        align-items: $value;
-        justify-content: flex-end;
-    } 
-
-    .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;
-    }
-
-    .flex-#{$key}-around {
-        display: flex;
-        align-items: $value;
-        justify-content: space-around;
-    } 
-
-    .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;
-    } 
-
-    .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-wrap-item-50 {
-            flex-grow: 1;
-            flex-basis: 50px ;
-        } 
-    } 
-
-    .flex-wrap-item-#{$i * 100} {
-        flex-grow: 1;
-        flex-basis: $i * 100px;
-    } 
-    
-    @if($i * 100px + 50px < 1000px) {
-        .flex-wrap-item-#{$i * 100 + 50} {
-            flex-grow: 1;
-            flex-basis: $i * 100px + 50px;
-        } 
-    } 
-} 
-
-
-@each $key, $value in (
-    'row': row, 
-    'row-reverse': row-reverse, 
-    'column': column, 
-    'column-reverse': column-reverse
-) {
-    .flex-#{$key} { 
-        display: flex;
-        flex-direction: $value;
-    } 
-}  

package/styles/space.scss

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

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

@@ -1,16 +0,0 @@
-export declare const ElementsHTML: {
-    /** */
-    GetElement: (selector: string) => HTMLElement | null;
-    /** */
-    GetCssValueBy: (selector: string, style: string) => string;
-    /** */
-    GetCssValue: (element: Element | null, style: string) => string;
-    /** 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;
-    /** */
-    IsInvalidElement: (element: any) => boolean;
-    /** Get color in hexadecimal format */
-    GetElementColor: (element: HTMLElement | null | undefined) => string;
-};