coer-elements 0.0.8 → 0.0.9

package/styles/{index.css → coer-elements.css}

@@ -1,3 +1,26 @@
+* {
+  font-family: sans-serif;
+  letter-spacing: normal;
+}
+
+h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
+  margin: 0px;
+  padding: 0px;
+}
+
+input[type=file] {
+  display: none !important;
+}
+
+.readonly {
+  color: black !important;
+  background-color: rgba(187, 187, 187, 0.5137254902) !important;
+}
+
+.no-selection::selection {
+  background-color: transparent !important;
+}
+
 .text-blue {
   color: #0d6efd !important;
 }
@@ -16,6 +39,10 @@
   border-color: #0d6efd !important;
 }
 
+.border-blue {
+  border-color: #0d6efd !important;
+}
+
 .text-gray {
   color: #6c757d !important;
 }
@@ -34,6 +61,10 @@
   border-color: #6c757d !important;
 }
 
+.border-gray {
+  border-color: #6c757d !important;
+}
+
 .text-green {
   color: #198754 !important;
 }
@@ -52,6 +83,10 @@
   border-color: #198754 !important;
 }
 
+.border-green {
+  border-color: #198754 !important;
+}
+
 .text-yellow {
   color: #ffc107 !important;
 }
@@ -70,6 +105,10 @@
   border-color: #ffc107 !important;
 }
 
+.border-yellow {
+  border-color: #ffc107 !important;
+}
+
 .text-red {
   color: #dc3545 !important;
 }
@@ -88,6 +127,10 @@
   border-color: #dc3545 !important;
 }
 
+.border-red {
+  border-color: #dc3545 !important;
+}
+
 .text-white {
   color: #f5f5f5 !important;
 }
@@ -106,6 +149,10 @@
   border-color: #f5f5f5 !important;
 }
 
+.border-white {
+  border-color: #f5f5f5 !important;
+}
+
 .text-black {
   color: #252525 !important;
 }
@@ -124,6 +171,10 @@
   border-color: #252525 !important;
 }
 
+.border-black {
+  border-color: #252525 !important;
+}
+
 .text-orange {
   color: #fd6031 !important;
 }
@@ -142,20 +193,18 @@
   border-color: #fd6031 !important;
 }
 
-* {
-  font-family: sans-serif;
-  letter-spacing: normal;
-}
-
-.fill-space {
-  flex: 1 1 auto;
+.border-orange {
+  border-color: #fd6031 !important;
 }
 
-h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
-  margin: 0px;
-  padding: 0px;
+@keyframes fadeId {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-
 .coer-container {
   margin: 15px 30px 0px 30px;
   padding: 10px;
@@ -197,14 +246,6 @@ h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
   padding-bottom: 5px;
 }
 
-@keyframes fadeId {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
 .cursor-default {
   cursor: default !important;
 }
@@ -217,17 +258,180 @@ h1, h2, h3, h4, h5, h6, p, pre, hr, figure, fieldset {
   cursor: wait !important;
 }
 
-input[type=file] {
-  display: none !important;
+.text-blue {
+  color: #0d6efd !important;
 }
 
-.readonly {
-  color: black !important;
-  background-color: rgba(187, 187, 187, 0.5137254902) !important;
+.text-blue-bold {
+  color: #0d6efd !important;
+  font-weight: bold !important;
 }
 
-.no-selection::selection {
-  background-color: transparent !important;
+.background-blue {
+  background-color: #0d6efd !important;
+}
+
+.background-border-blue {
+  background-color: #0d6efd !important;
+  border-color: #0d6efd !important;
+}
+
+.border-blue {
+  border-color: #0d6efd !important;
+}
+
+.text-gray {
+  color: #6c757d !important;
+}
+
+.text-gray-bold {
+  color: #6c757d !important;
+  font-weight: bold !important;
+}
+
+.background-gray {
+  background-color: #6c757d !important;
+}
+
+.background-border-gray {
+  background-color: #6c757d !important;
+  border-color: #6c757d !important;
+}
+
+.border-gray {
+  border-color: #6c757d !important;
+}
+
+.text-green {
+  color: #198754 !important;
+}
+
+.text-green-bold {
+  color: #198754 !important;
+  font-weight: bold !important;
+}
+
+.background-green {
+  background-color: #198754 !important;
+}
+
+.background-border-green {
+  background-color: #198754 !important;
+  border-color: #198754 !important;
+}
+
+.border-green {
+  border-color: #198754 !important;
+}
+
+.text-yellow {
+  color: #ffc107 !important;
+}
+
+.text-yellow-bold {
+  color: #ffc107 !important;
+  font-weight: bold !important;
+}
+
+.background-yellow {
+  background-color: #ffc107 !important;
+}
+
+.background-border-yellow {
+  background-color: #ffc107 !important;
+  border-color: #ffc107 !important;
+}
+
+.border-yellow {
+  border-color: #ffc107 !important;
+}
+
+.text-red {
+  color: #dc3545 !important;
+}
+
+.text-red-bold {
+  color: #dc3545 !important;
+  font-weight: bold !important;
+}
+
+.background-red {
+  background-color: #dc3545 !important;
+}
+
+.background-border-red {
+  background-color: #dc3545 !important;
+  border-color: #dc3545 !important;
+}
+
+.border-red {
+  border-color: #dc3545 !important;
+}
+
+.text-white {
+  color: #f5f5f5 !important;
+}
+
+.text-white-bold {
+  color: #f5f5f5 !important;
+  font-weight: bold !important;
+}
+
+.background-white {
+  background-color: #f5f5f5 !important;
+}
+
+.background-border-white {
+  background-color: #f5f5f5 !important;
+  border-color: #f5f5f5 !important;
+}
+
+.border-white {
+  border-color: #f5f5f5 !important;
+}
+
+.text-black {
+  color: #252525 !important;
+}
+
+.text-black-bold {
+  color: #252525 !important;
+  font-weight: bold !important;
+}
+
+.background-black {
+  background-color: #252525 !important;
+}
+
+.background-border-black {
+  background-color: #252525 !important;
+  border-color: #252525 !important;
+}
+
+.border-black {
+  border-color: #252525 !important;
+}
+
+.text-orange {
+  color: #fd6031 !important;
+}
+
+.text-orange-bold {
+  color: #fd6031 !important;
+  font-weight: bold !important;
+}
+
+.background-orange {
+  background-color: #fd6031 !important;
+}
+
+.background-border-orange {
+  background-color: #fd6031 !important;
+  border-color: #fd6031 !important;
+}
+
+.border-orange {
+  border-color: #fd6031 !important;
 }
 
 *::-webkit-scrollbar {
@@ -248,3 +452,41 @@ input[type=file] {
 *::-webkit-scrollbar-thumb:active {
   background-color: #6c757d;
 }
+
+.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;
+}
+
+.tooltip-inner {
+  min-width: 125px;
+  max-width: 250px;
+  min-height: 35px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  word-break: break-word;
+}
+
+.invisible {
+  visibility: hidden !important;
+  width: 0px !important;
+  height: 0px !important;
+}

package/components/index.ts

@@ -1,2 +0,0 @@
-export * from './src/components.module';
-export * from './src/coer-alert/coer-alert.component';

package/components/src/coer-alert/coer-alert.component.html

@@ -1,56 +0,0 @@
-<aside class="toast-container coer-alert">
-    <!-- Success -->
-    <div id="alert-success" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
-        <div class="toast-header">
-            <i id="alert-success-icon"></i>
-            <strong id="alert-success-title"></strong>
-            <button type="button" (click)="Close('alert-success')" class="btn-close btn-close-white"></button>
-        </div>
-
-        <div class="toast-body">
-            <pre id="alert-success-message"></pre>
-        </div>
-    </div>
-
-
-    <!-- Error -->
-    <div id="alert-error" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
-        <div class="toast-header">
-            <i id="alert-error-icon"></i>
-            <strong id="alert-error-title"></strong>
-            <button type="button" (click)="Close('alert-error')" class="btn-close btn-close-white"></button>
-        </div>
-
-        <div class="toast-body">
-            <pre id="alert-error-message"></pre>
-        </div>
-    </div>
-
-
-    <!-- Info -->
-    <div id="alert-info" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
-       <div class="toast-header">
-            <i id="alert-info-icon"></i>
-            <strong id="alert-info-title"></strong>
-            <button type="button" (click)="Close('alert-info')" class="btn-close btn-close-white"></button>
-        </div>
-
-        <div class="toast-body">
-            <pre id="alert-info-message"></pre>
-        </div>
-    </div>
-
-
-    <!-- Warning -->
-    <div id="alert-warning" role="alert" aria-live="assertive" aria-atomic="true" class="toast">
-        <div class="toast-header">
-            <i id="alert-warning-icon"></i>
-            <strong id="alert-warning-title"></strong>
-            <button type="button" (click)="Close('alert-warning')" class="btn-close"></button>
-        </div>
-
-        <div class="toast-body">
-            <pre id="alert-warning-message"></pre>
-        </div>
-    </div>
-</aside>

package/components/src/coer-alert/coer-alert.component.scss

@@ -1,100 +0,0 @@
-@import "../../../styles/colors.scss";
-
-aside.toast-container {
-    position: fixed;
-    bottom: 0px;
-    right: 0px;
-    padding: 15px !important;
-    z-index: 2000 !important;
-
-    i, svg {
-        display: flex;
-        align-items: center;
-    }
-
-    strong {
-        margin: 0px auto 0px 5px;
-    }
-
-    div.toast,
-    div.toast-header {
-        border-top-left-radius: 10px;
-        border-top-right-radius: 10px;
-        color: $white;
-    }
-
-    div.toast,
-    div.toast-body {
-        border-bottom-left-radius: 10px;
-        border-bottom-right-radius: 10px;
-        color: $white;
-    }
-
-    div.toast-body {
-        min-height: 36px;
-    }
-
-    pre {
-        font-family: Roboto, RobotoFallback, "Noto Kufi Arabic", Helvetica, Arial, sans-serif;
-        white-space: pre-wrap;
-        font-size: medium;
-    }
-
-    button {
-        margin: 0px 2px !important;
-        width: 10px !important;
-        height: 10px !important;
-        box-shadow: none !important;
-        outline: none !important;
-        border: none !important;
-    }
-
-    div#alert-success div.toast-header,
-    div#alert-success div.toast-body {
-        background-color: $green;
-    }
-
-    div#alert-info div.toast-header,
-    div#alert-info div.toast-body {
-        background-color: $blue;
-    }
-
-    div#alert-error div.toast-header,
-    div#alert-error div.toast-body {
-        background-color: $red;
-    }
-
-    div#alert-warning div.toast-header,
-    div#alert-warning div.toast-body {
-        background-color: $yellow;
-        border-color: $black;
-        color: $black;
-    }
-
-    div#alert-success:hover,
-    div#alert-info:hover,
-    div#alert-error:hover,
-    div#alert-warning:hover {
-        transform: scale(1.01);
-        box-shadow: 2px 2px 10px lightslategray;
-        cursor: default;
-    }
-}
-
-button.sweet-alert-button {
-    width: 100px !important;
-    height: 40px !important;
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    margin: 0px 5px !important;
-    outline: none !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-aside.toast-container > * {
-    border: none !important;
-    z-index: 2000 !important;
-    margin: 15px 0px 0px 0px !important;
-}