coer-elements 2.0.45 → 2.0.49

package/styles/colors.scss

@@ -23,8 +23,14 @@
     //App Colors
     --breadcrumbs-inner: var(--breadcrumbs,    var(--blue) ); 
     --containers-inner:  var(--containers,     var(--white));
-    --background-inner:  var(--app-background, var(--smoke));   
-
+    --background-inner:  var(--app-background, var(--smoke));  
+    
+    //Inputs
+    --inputs-inner      : var(--inputs,       var(--smoke));   
+    --inputs-text-inner : var(--inputs-text,  var(--black));
+    --inputs-items-inner: var(--inputs-items, var(--blue) );    
+    --inputs-icons-inner: var(--inputs-icons, var(--gray) );   
+    
     //Sidenav
     --sidenav-inner:        var(--sidenav,        var(--black) );
     --sidenav-text-inner:   var(--sidenav-text,   var(--smoke) );
@@ -65,6 +71,12 @@
         'app-background': var(--background-inner), 
         'containers'    : var(--containers-inner),  
 
+        //Inputs
+        'inputs'       : var(--inputs-inner),
+        'inputs-text'  : var(--inputs-text-inner),
+        'inputs-items' : var(--inputs-items-inner), 
+        'inputs-icons' : var(--inputs-icons-inner), 
+
         //Sidenav
         'sidenav'       : var(--sidenav-inner),    
         'sidenav-text'  : var(--sidenav-text-inner),

package/styles/components.scss

@@ -25,17 +25,16 @@ input[type="file"] {
     display: none !important;
 }
 
+
 .readonly {
+    cursor: default !important; 
+    background-color: color-mix(in srgb, var(--gray), var(--white) 70%) !important;
     color: black !important;
-    background-color: #bbbbbb83 !important;
 }
 
-.tooltip-inner {
-    min-width: 125px;
-    max-width: 250px;
-    min-height: 35px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    word-break: break-word;
-}  
+
+.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; 
+} 

package/styles/icons/icons-fill.scss

@@ -11,9 +11,12 @@ $icons: (
     'caret-right',
     'caret-up',
     'circle-info',
+    'circle-check',
+    'circle-exclamation',
     'cloud',
     'colors',
     'components',
+    'copy',
     'css',
     'directive',
     'disk-floppy', 

package/styles/index.scss

@@ -17,10 +17,7 @@
 @use "./paragraphs"            as _paragraphs;
 @use "./positions.scss"        as _positions;
 @use "./scroll-bars.scss"; 
-@use "./width-height.scss"     as _width-height; 
- 
- 
-
+@use "./width-height.scss"     as _width-height;  
 
 //BREAKPOINTS
 @each $breakpoint, $min-width in (      
@@ -75,4 +72,13 @@
             @include _width-height.mixin($breakpoint); 
         } 
     }
-}   
+}   
+
+h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset, ul, ol {
+    margin: 0px;
+    padding: 0px;
+}
+
+.no-selection::selection {
+    background-color: transparent !important;
+} 

package/styles/paragraphs.scss

@@ -1,12 +1,3 @@
-h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
-    margin: 0px;
-    padding: 0px;
-}
-
-.no-selection::selection {
-    background-color: transparent !important;
-} 
-
 @mixin mixin($breakpoint) {
     
     @each $key, $value in ( 

package/svg/fill/circle-check.fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<!-- COER System -->
+	<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/>
+</svg>

package/svg/fill/circle-exclamation.fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<!-- COER System -->
+	<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/>
+</svg>

package/svg/fill/copy.fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+	<!-- COER System -->
+	<path d="M208 0L332.1 0c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9L448 336c0 26.5-21.5 48-48 48l-192 0c-26.5 0-48-21.5-48-48l0-288c0-26.5 21.5-48 48-48zM48 128l80 0 0 64-64 0 0 256 192 0 0-32 64 0 0 48c0 26.5-21.5 48-48 48L48 512c-26.5 0-48-21.5-48-48L0 176c0-26.5 21.5-48 48-48z"/>
+</svg>

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

@@ -2,13 +2,11 @@ export declare class HTMLElements {
     /** */
     static GetElement: (selector: string) => HTMLElement | null;
     /** */
-    static Scroll: (selector: string, y?: number, x?: number) => void;
+    static Scroll: (element: string | HTMLElement | null | undefined, y?: number, x?: number) => void;
     /** */
-    static ScrollToElement: (selector: string, selectorContainer?: string) => void;
+    static ScrollToElement: (element: string | HTMLElement | null | undefined, container?: string | HTMLElement) => void;
     /** */
-    static GetCssValueBySelector: (selector: string, style: string) => string;
-    /** */
-    static GetCssValue: (element: HTMLElement | null, style: string) => string;
+    static GetCssValue: (element: string | HTMLElement | null | undefined, style: string) => string;
     /** Gets the width of the element in px */
     static GetElementWidth: (element: HTMLElement | null | undefined, ...args: (number | HTMLElement | null | undefined)[]) => string;
     /** Gets the height of the element in px */
@@ -16,5 +14,11 @@ export declare class HTMLElements {
     /** */
     static IsInvalidElement: (element: any) => boolean;
     /** Gets the color of the element in hexadecimal */
-    static GetElementColor: (element: HTMLElement | null | undefined) => string;
+    static GetElementColor: (element: string | HTMLElement | null | undefined) => string;
+    /** */
+    static HasClass: (element: string | HTMLElement | null | undefined, className: string) => boolean;
+    /** */
+    static AddClass: (element: string | HTMLElement | null | undefined, className: string) => Promise<boolean>;
+    /** */
+    static RemoveClass: (element: string | HTMLElement | null | undefined, className: string) => boolean;
 }