cortex-react-ui 0.1.181 → 0.2.0

package/lib/styles/Camera/index.scss

@@ -1,9 +1,10 @@
-@import "../global.scss";
+@use "sass:map";
+@use "../global.scss";
 
 @mixin camera($props: null, $options: null) {
     $internal-props: (
         bgColor: #ffffff,
-        fgColor: $color-grey-darker,
+        fgColor: global.$color-grey-darker,
         captureButtonBg: #2196f3,
         captureButtonHover: #1976d2,
         recordButtonBg: #f44336,
@@ -15,7 +16,7 @@
         offlineModeColor: #d32f2f
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-props: global.safe-map-merge($internal-props, $props);
 
     .camera-container {
         width: 100%;
@@ -23,6 +24,23 @@
         background-color: #000;
     }
 
+    .camera-switch {
+        z-index: 9999;
+        position: absolute;
+        bottom: 2rem;
+        right: 90px;
+        padding: 0.5rem;
+        border-radius: 6px;
+        color: #ffffff;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: map.get($internal-props, captureButtonBg);
+        transition: background-color 0.3s ease;
+    }
+
     .camera-switch-btn {
         all: initial;
         display: flex;
@@ -33,7 +51,7 @@
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        background-color: map-get($internal-props, recordButtonBg);
+        background-color: map.get($internal-props, recordButtonBg);
         animation: clignote 1s infinite;
     }
     
@@ -83,7 +101,7 @@
         justify-content: center;
         align-items: center;
         gap: 7px;
-        background-color: map-get($internal-props, captureButtonBg);
+        background-color: map.get($internal-props, captureButtonBg);
         transition: background-color 0.3s ease;
     }
 
@@ -122,7 +140,7 @@
         border-radius: 50%;
         border: 1px solid;
         padding: 20px 20px;
-        background-color: map-get($internal-props, bgColor);
+        background-color: map.get($internal-props, bgColor);
         cursor: pointer;
     }
 
@@ -145,7 +163,7 @@
             width: 50px;
             height: 50px;
             border: 1px solid black;
-            background-color: map-get($internal-props, bgColor);
+            background-color: map.get($internal-props, bgColor);
         }
 
         &--record {
@@ -154,22 +172,22 @@
             width: 50px;
             height: 50px;
             border: 1px solid black;
-            background-color: map-get($internal-props, bgColor);
+            background-color: map.get($internal-props, bgColor);
         }
 
         &--download {
-            background-color: map-get($internal-props, downloadButtonBg);
+            background-color: map.get($internal-props, downloadButtonBg);
             margin-left: auto;
             &:hover {
-                background-color: map-get($internal-props, downloadButtonHover);
+                background-color: map.get($internal-props, downloadButtonHover);
             }
         }
 
         &--reset {
-            background-color: map-get($internal-props, resetButtonBg);
+            background-color: map.get($internal-props, resetButtonBg);
             margin-right: auto;
             &:hover {
-                background-color: map-get($internal-props, resetButtonHover);
+                background-color: map.get($internal-props, resetButtonHover);
             }
         }
     }
@@ -177,7 +195,7 @@
     .camera-offline-mode {
         font-size: 0.875rem;
         font-family: sans-serif;
-        color: map-get($internal-props, offlineModeColor);
+        color: map.get($internal-props, offlineModeColor);
     }
 
     .camera-screen-animation {

package/lib/styles/Dialog/index.scss

@@ -1,36 +1,36 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin dialog($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         bgColor: #ffffff,
-        fgColor: $color-grey-darker,
-        closeBtnColor: $color-grey,
-        closeBtnHoverColor: $color-blue,
-        closeBtnDisableColor: $color-blue-grey-lighter,
+        fgColor: global.$color-grey-darker,
+        closeBtnColor: global.$color-grey,
+        closeBtnHoverColor: global.$color-blue,
+        closeBtnDisableColor: global.$color-blue-grey-lighter,
         confirm: (
-            headerBgColor: $color-orange-dark,
+            headerBgColor: global.$color-orange-dark,
             headerFgColor: #ffffff,
             bgColor: #ffffff,
-            fgColor: $color-grey-darker,
+            fgColor: global.$color-grey-darker,
         ),
         error: (
-            headerBgColor: $color-red,
+            headerBgColor: global.$color-red,
             headerFgColor: #ffffff,
             bgColor: #ffffff,
-            fgColor: $color-grey-darker,
+            fgColor: global.$color-grey-darker,
         ),
         warning: (
-            headerBgColor: $color-grey,
+            headerBgColor: global.$color-grey,
             headerFgColor: #ffffff,
             bgColor: #ffffff,
-            fgColor: $color-grey-darker,
+            fgColor: global.$color-grey-darker,
         ),        
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     .ui-dialog {
         position: fixed;
@@ -43,7 +43,7 @@
         justify-content: center;
         align-items: center;
         opacity: 1;
-        padding: $spacer;
+        padding: global.$spacer;
     }
 
     .ui-dialog-overlay {
@@ -65,8 +65,8 @@
         max-height: 100%;
         position: relative;
         flex-direction: column;
-        background: get-map-deep($internal-props, "bgColor");
-        color: get-map-deep($internal-props, "fgColor");
+        background: global.get-map-deep($internal-props, "bgColor");
+        color: global.get-map-deep($internal-props, "fgColor");
         border-radius: 4px;
         box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
             0px 9px 46px 8px rgba(0, 0, 0, 0.12);
@@ -121,21 +121,21 @@
         background: none;
         appearance: none;
         border: 0;
-        padding: $spacer-xs;
+        padding: global.$spacer-xs;
         margin: 0;
         display: inline-flex;
         margin-left: auto;
         cursor: pointer;
-        color: get-map-deep($internal-props, "closeBtnColor");
+        color: global.get-map-deep($internal-props, "closeBtnColor");
         transition: color 250ms;
 
         &:not(.ui-dialog-close-disable):hover {
-            color: get-map-deep($internal-props, "closeBtnHoverColor");
+            color: global.get-map-deep($internal-props, "closeBtnHoverColor");
         }
     }
 
     .ui-dialog-close-disable {
-        color: get-map-deep($internal-props, "closeBtnDisableColor");
+        color: global.get-map-deep($internal-props, "closeBtnDisableColor");
     }
 
     .ui-dialog-box {
@@ -199,67 +199,67 @@
 
     .ui-dialog-confirm {
         .ui-dialog-header {
-            background-color: get-map-deep($internal-props, "confirm.headerBgColor");
-            color: get-map-deep($internal-props, "confirm.headerFgColor");
+            background-color: global.get-map-deep($internal-props, "confirm.headerBgColor");
+            color: global.get-map-deep($internal-props, "confirm.headerFgColor");
         }
 
         .ui-dialog-icon {
-            fill: get-map-deep($internal-props, "confirm.headerFgColor");
+            fill: global.get-map-deep($internal-props, "confirm.headerFgColor");
         }
 
         .ui-dialog-content {
             text-align: center;
-            background: get-map-deep($internal-props, "confirm.bgColor");
-            color: get-map-deep($internal-props, "confirm.fgColor");
+            background: global.get-map-deep($internal-props, "confirm.bgColor");
+            color: global.get-map-deep($internal-props, "confirm.fgColor");
         }
 
         .ui-dialog-action-ok {
-            background-color: get-map-deep($internal-props, "confirm.headerBgColor");
-            color: get-map-deep($internal-props, "confirm.headerFgColor");
+            background-color: global.get-map-deep($internal-props, "confirm.headerBgColor");
+            color: global.get-map-deep($internal-props, "confirm.headerFgColor");
         }
     }
 
     .ui-dialog-error {
         .ui-dialog-header {
-            background-color: get-map-deep($internal-props, "error.headerBgColor");
-            color: get-map-deep($internal-props, "error.headerFgColor");
+            background-color: global.get-map-deep($internal-props, "error.headerBgColor");
+            color: global.get-map-deep($internal-props, "error.headerFgColor");
         }
 
         .ui-dialog-icon {
-            fill: get-map-deep($internal-props, "error.headerFgColor");
+            fill: global.get-map-deep($internal-props, "error.headerFgColor");
         }
 
         .ui-dialog-content {
             text-align: center;
-            background: get-map-deep($internal-props, "error.bgColor");
-            color: get-map-deep($internal-props, "error.fgColor");
+            background: global.get-map-deep($internal-props, "error.bgColor");
+            color: global.get-map-deep($internal-props, "error.fgColor");
         }
 
         .ui-dialog-action-ok {
-            background-color: get-map-deep($internal-props, "error.headerBgColor");
-            color: get-map-deep($internal-props, "error.headerFgColor");
+            background-color: global.get-map-deep($internal-props, "error.headerBgColor");
+            color: global.get-map-deep($internal-props, "error.headerFgColor");
         }
     }
 
     .ui-dialog-warning {
         .ui-dialog-header {
-            background-color: get-map-deep($internal-props, "warning.headerBgColor");
-            color: get-map-deep($internal-props, "warning.headerFgColor");
+            background-color: global.get-map-deep($internal-props, "warning.headerBgColor");
+            color: global.get-map-deep($internal-props, "warning.headerFgColor");
         }
 
         .ui-dialog-icon {
-            fill: get-map-deep($internal-props, "warning.headerFgColor");
+            fill: global.get-map-deep($internal-props, "warning.headerFgColor");
         }
 
         .ui-dialog-content {
             text-align: center;
-            background: get-map-deep($internal-props, "warning.bgColor");
-            color: get-map-deep($internal-props, "warning.fgColor");
+            background: global.get-map-deep($internal-props, "warning.bgColor");
+            color: global.get-map-deep($internal-props, "warning.fgColor");
         }
 
         .ui-dialog-action-ok {
-            background-color: get-map-deep($internal-props, "warning.headerBgColor");
-            color: get-map-deep($internal-props, "warning.headerFgColor");
+            background-color: global.get-map-deep($internal-props, "warning.headerBgColor");
+            color: global.get-map-deep($internal-props, "warning.headerFgColor");
         }
     }
 }

package/lib/styles/Icons/index.scss

@@ -1,4 +1,4 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin icons($props: null, $options: null) {
     .ui-icon {

package/lib/styles/Input/index.scss

@@ -1,14 +1,14 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin input($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         color: blue,
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     .ui-input-container {
         display: flex;

package/lib/styles/Map/index.scss

@@ -0,0 +1,50 @@
+@use "../global.scss";
+
+@mixin map($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: #212121,
+        fgColor: #fff,
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .cortex-widget-buttons {
+        margin: 20px;
+        text-align: right;
+      }
+    
+      .leaflet-container {
+        height: 85% !important;
+      }
+    
+      .cortex-widget-viewport {
+        position: absolute;
+        inset: 100px;
+      }
+    
+      .cortex-widget-btn {
+        color: #fff;
+        font-size: 14px;
+        padding: 6px 12px;
+        cursor: pointer;
+        border: 0;
+        border-radius: 3px;
+        box-shadow: none;
+        width: 100px;
+      }
+    
+      .cortex-widget-btn-cancel {
+        margin: 10px;
+        background-color: #337ab7;
+        border-color: #2e6da4;
+      }
+    
+      .cortex-widget-btn-save {
+        color: #fff;
+        background-color: #5cb85c;
+        border-color: #4cae4c;
+      }
+}

package/lib/styles/Menu/index.scss

@@ -1,30 +1,30 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin menu($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         background-color: #fff,
         group: (
             color: #fff,
-            background-color: $color-grey-dark,
+            background-color: global.$color-grey-dark,
         ),
         item: (
             color: #000,
-            colorDisable: $color-grey,
+            colorDisable: global.$color-grey,
             background-color: #fff,
         ),
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     .ui-menu-popper {
         z-index: 3000;
     }
 
     .ui-menu {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
             min-width: 180px;
             user-select: none;
@@ -32,13 +32,13 @@
             padding: 0;
             z-index: 100;
         }
-        @if showColors($internal-options) {
-            background-color: get-map-deep($internal-props, "background-color");
+        @if global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "background-color");
         }
     }
 
     .ui-menuList {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             margin: 0;
             padding: 0;
         }
@@ -54,14 +54,14 @@
     }
 
     .ui-menuItem {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             position: relative;
             display: block;
             white-space: nowrap;
             cursor: pointer;
         }
-        @if showColors($internal-options) {
-            background-color: get-map-deep($internal-props, "item.background-color");
+        @if global.showColors($internal-options) {
+            background-color: global.get-map-deep($internal-props, "item.background-color");
         }
 
         &:hover:not(.ui-menuItem-disable) {
@@ -77,7 +77,7 @@
         cursor: default;
 
         .ui-menuItem-btn {
-            color: get-map-deep($internal-props, "item.colorDisable");
+            color: global.get-map-deep($internal-props, "item.colorDisable");
         }
 
         .ui-menuItem-icon {
@@ -89,21 +89,21 @@
         display: flex;
         align-items: center;
         width: 100%;
-        padding: ($spacer-xs * 3) $spacer-sm ($spacer-xs * 3) $spacer;
+        padding: (global.$spacer-xs * 3) global.$spacer-sm (global.$spacer-xs * 3) global.$spacer;
         background: transparent;
         border: 0;
         font-size: 0.9em;
         cursor: pointer;
 
-        @if showColors($internal-options) {
-            color: get-map-deep($internal-props, "item.color");
+        @if global.showColors($internal-options) {
+            color: global.get-map-deep($internal-props, "item.color");
         }
     }
 
     .ui-menuItem-icon {
         display: flex;
         align-items: center;
-        margin-right: $spacer-sm;
+        margin-right: global.$spacer-sm;
     }
 
     .ui-menuItem-menuIconContainer{
@@ -115,17 +115,17 @@
     }
 
     .ui-group-title {
-        @if showProps($internal-options) {
+        @if global.showProps($internal-options) {
             position: relative;
             display: block;
             white-space: nowrap;
-            padding: $spacer-sm $spacer-md;
+            padding: global.$spacer-sm global.$spacer-md;
             cursor: pointer;
         }
 
-        @if showColors($internal-options) {
-            color: get-map-deep($internal-props, "group.color");
-            background-color: get-map-deep($internal-props, "group.background-color");
+        @if global.showColors($internal-options) {
+            color: global.get-map-deep($internal-props, "group.color");
+            background-color: global.get-map-deep($internal-props, "group.background-color");
         }
     }
 }

package/lib/styles/Popper/index.scss

@@ -1,15 +1,15 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin popper($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         bgColor: #212121,
         fgColor: #fff,
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     // .ui-popper {
     //     @if get-map-deep($internal-options, "properties") == true {

package/lib/styles/Scanner/index.css

@@ -0,0 +1,75 @@
+.btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 0.5rem 1rem;
+	border: 1px solid transparent;
+	border-radius: 0.375rem;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	font-size: 0.875rem;
+	font-weight: 500;
+	line-height: 1.25rem;
+	text-align: center;
+	text-transform: none;
+	white-space: nowrap;
+	vertical-align: middle;
+	user-select: none;
+	background-color: #4F46E5;
+	color: #fff;
+	cursor: pointer;
+	outline: none;
+	transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
+}
+
+.btn-default {
+	background-color: #4F46E5;
+}
+
+.btn-default:hover {
+	opacity: 0.8;
+}
+
+.select {
+	display: block;
+	width: 100%;
+	padding-left: 0.75rem;
+	color: #000;
+	padding-right: 2.5rem;
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	font-size: 1rem;
+	border-radius: 0.375rem;
+}
+
+/* DIALOG */
+.dialog-header {
+	display: flex;
+	justify-content: space-between;
+}
+
+.dialog-header h4 {
+	margin: 0;
+}
+
+.dialog-mask {
+	overflow-x: hidden;
+	overflow-y: auto;
+	display: flex;
+	justify-content: center;
+	padding-top: 2.5rem;
+	padding-bottom: 5rem;
+	background-color: #0005;
+	position: fixed;
+	inset: 0;
+}
+
+.dialog-body {
+	display: flex;
+	flex-direction: column;
+	gap: 1.25rem;
+	padding: 1.25rem;
+	height: max-content;
+	background-color: white;
+}
+
+/* DIALOG */

package/lib/styles/Selected/index.scss

@@ -1,12 +1,12 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin selected($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
   
     $internal-props: ();
   
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
     
     .ui-selected-params {
         float: left;

package/lib/styles/Spinner/index.scss

@@ -1,16 +1,16 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin spinner($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: (
         color: blue,
     );
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
-    @if get-map-deep($internal-options, "properties") == true {
+    @if global.get-map-deep($internal-options, "properties") == true {
         @keyframes ui-spinner-anim {
             to {
                 transform: rotate(360deg);
@@ -19,7 +19,7 @@
     }
 
     .ui-spinner {
-        @if get-map-deep($internal-options, "properties") == true {
+        @if global.get-map-deep($internal-options, "properties") == true {
             display: inline-block;
             width: 2rem;
             height: 2rem;
@@ -30,10 +30,10 @@
             text-indent: -9999em;
         }
 
-        @if get-map-deep($internal-options, "colors") == true {
-            border-left-color: get-map-deep($internal-props, "color");
-            border-top-color: get-map-deep($internal-props, "color");
-            border-bottom-color: get-map-deep($internal-props, "color");
+        @if global.get-map-deep($internal-options, "colors") == true {
+            border-left-color: global.get-map-deep($internal-props, "color");
+            border-top-color: global.get-map-deep($internal-props, "color");
+            border-bottom-color: global.get-map-deep($internal-props, "color");
         }
     }