coer-elements 2.0.15 → 2.0.17

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,5 +1,4 @@
-@use 'sass:color';
-@use "./angular-material.scss";
+@use "./components.scss";
 @use "./bootstrap.scss";
 @use "./colors.scss";
 @use "./containers.scss";
@@ -8,6 +7,8 @@
 @use "./layout.scss";
 @use "./animations.scss";
 @use "./position.scss";
+@use "./font.scss";
+@use "./space.scss";
 
 * {
     font-family: sans-serif;

package/styles/layout.scss

@@ -1,49 +1,125 @@
-.flex-center {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-}
+@each $key, $value in (
+    'top': flex-start, 
+    'middle': center, 
+    'bottom': flex-end
+    ) {
 
-.flex-center-left {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
-}
+    .flex-#{$key}-left {
+        display: flex;
+        align-items: $value;
+        justify-content: flex-start;
+    }  
 
-.flex-center-right {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-end !important;
-}
+    .flex-wrap-#{$key}-left { 
+        display: flex; 
+        align-items: $value;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 10px;
+    } 
 
-.fill-space {
-    flex: 1 1 auto;
-}
+    .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;
+    }
 
-@mixin FlexWrap() {
-    display: flex !important; 
-    flex-wrap: wrap !important;
-    gap: 10px !important;
-} 
+    .flex-#{$key}-right {
+        display: flex;
+        align-items: $value;
+        justify-content: flex-end;
+    } 
 
-.flex-wrap-left { 
-    @include FlexWrap();
-    align-items: flex-start !important;
-}
+    .flex-wrap-#{$key}-right { 
+        display: flex; 
+        align-items: $value;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+        gap: 10px;
+    }
 
-.flex-wrap,
-.flex-wrap-center { 
-    @include FlexWrap();
-    align-items: center !important;
-}
+    .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-wrap-end { 
-    @include FlexWrap();
-    align-items: flex-end !important;
+    .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;
+        } 
+    } 
+} 
+
 
-.flex-wrap-item {
-    flex-grow: 1 !important;
-    flex-basis: 200 !important;
-}
+@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/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} {
+        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/tools.d.ts

@@ -39,4 +39,10 @@ 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;
+    /** */
+    RemoveLastChar: (text: string) => string;
 };

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;
-}