coer-elements 2.0.16 → 2.0.18

package/styles/containers.scss

@@ -1,6 +1,6 @@
 @keyframes fadeIn {
     from { opacity: 0; }
-    to { opacity: 1; }
+    to   { opacity: 1; }
 }
 
 @mixin Container() {
@@ -17,7 +17,7 @@
 
 .coer-container {
     @include Container();
-}
+}  
 
 .coer-container-accordion {
     @include Container();
@@ -41,4 +41,13 @@
 .coer-container-list {
     @include Container();
     padding: 0px;
-}
+} 
+
+.coer-container-code {
+    font-family: 'consolas', 'console', monospace !important;
+    background-color: var(--black) !important;
+    color: var(--smoke) !important;
+    border-radius: 10px !important;
+    padding: 10px !important;
+    font-size: 14px;
+}

package/styles/font.scss

@@ -0,0 +1,11 @@
+.font-family-console {
+    font-family: 'consolas', 'console', monospace !important;
+}
+
+.font-weight-normal { 
+    font-weight: normal !important;
+}
+
+.font-weight-bold {
+    font-weight: bold !important;
+}

package/styles/index.scss

@@ -1,13 +1,15 @@
-@use 'sass:color';
-@use "./angular-material.scss";
+@use "./components.scss";
 @use "./bootstrap.scss";
 @use "./colors.scss";
 @use "./containers.scss";
 @use "./cursores.scss";
 @use "./scroll-bar.scss"; 
-@use "./layout.scss";
+@use "./layout-flex.scss";
+@use "./layout-grid.scss";
 @use "./animations.scss";
 @use "./position.scss";
+@use "./font.scss";
+@use "./space.scss";
 
 * {
     font-family: sans-serif;

package/styles/layout-flex.scss

@@ -0,0 +1,157 @@
+@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-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 (
+    'row': row, 
+    'row-reverse': row-reverse, 
+    'column': column, 
+    'column-reverse': column-reverse
+) {
+    .flex-#{$key} { 
+        display: flex;
+        flex-direction: $value;
+    } 
+}  

package/styles/layout-grid.scss

@@ -0,0 +1,14 @@
+.grid { 
+    margin: 15px 30px;
+    display: grid; 
+    gap: 15px;  
+}
+
+@for $i from 1 through 12 {  
+    .grid-columns-#{$i} { 
+        grid-template-columns: repeat($i, 1fr);
+    } 
+} 
+
+
+

package/styles/position.scss

@@ -1,7 +1,18 @@
-@for $i from 1 through 10 {
-    .z-index-#{$i} {
-        z-index: $i !important;
+$counter: 10;
+@for $i from 0 through $counter {
+    .position-#{$i + 1} {
+        z-index: $counter - $i !important;
     }
-}
+} 
 
- 
+@each $key, $value in (
+    'static'  : static, 
+    'relative': relative, 
+    'absolute': absolute, 
+    'fixed'   : fixed,
+    'sticky'  : sticky
+) {
+    .position-#{$key} { 
+        position: $value !important;
+    } 
+}  

package/styles/space.scss

@@ -0,0 +1,70 @@
+@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;
+}

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

@@ -0,0 +1,16 @@
+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 and special characters */
+    static RemoveAccents(value: string | number | null | undefined, onlyAlphaNumeric?: boolean): 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 */
@@ -39,4 +31,8 @@ export declare const Tools: {
     Distinct: <T>(array: T[], ...args: T[][]) => T[];
     /** */
     Except: <T>(array: T[], filter: any[], ...properties: string[]) => T[];
+    /** */
+    IsNumber: (value: any) => boolean;
+    /** */
+    Clipboard: (text: string, message?: string, title?: string) => void;
 };

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/interfaces/lib/colors.interface.d.ts

@@ -1,36 +0,0 @@
-export interface IColors {
-    fixedColors: IFixedColors;
-    actionColors: IActionColors;
-    appColors: IAppColors;
-}
-export interface IFixedColors {
-    blue: string;
-    gray: string;
-    green: string;
-    yellow: string;
-    red: string;
-    smoke: string;
-    black: string;
-    orange: string;
-    white: string;
-    purple: string;
-}
-export interface IActionColors {
-    primary: string;
-    secondary: string;
-    success: string;
-    warning: string;
-    danger: string;
-    navigation: string;
-    information: string;
-}
-export interface IAppColors {
-    breadcrumbs: string;
-    background: string;
-    containers: string;
-    sidenav: string;
-    sidenavText: string;
-    sidenavActive: string;
-    toolbar: string;
-    toolbarText: string;
-}

package/styles/layout.scss

@@ -1,49 +0,0 @@
-.flex-center {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-}
-
-.flex-center-left {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
-}
-
-.flex-center-right {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-end !important;
-}
-
-.fill-space {
-    flex: 1 1 auto;
-}
-
-
-@mixin FlexWrap() {
-    display: flex !important; 
-    flex-wrap: wrap !important;
-    gap: 10px !important;
-} 
-
-.flex-wrap-left { 
-    @include FlexWrap();
-    align-items: flex-start !important;
-}
-
-.flex-wrap,
-.flex-wrap-center { 
-    @include FlexWrap();
-    align-items: center !important;
-}
-
-.flex-wrap-end { 
-    @include FlexWrap();
-    align-items: flex-end !important;
-}
-
-.flex-wrap-item {
-    flex-grow: 1 !important;
-    flex-basis: 200 !important;
-}