react-autoql 7.4.0-alpha.0 → 8.0.0-alpha.11

package/dist/autoql.esm.css

@@ -1,4 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
+:root {
+  --react-autoql-danger-color-default: #ca0b00; }
+
 .react-autoql-spinner-centered {
   width: 100%;
   text-align: center;
@@ -404,7 +407,6 @@ a {
       .react-autoql-month-range-picker .react-autoql-month-picker-month-picker .month-picker-month.current-month.active .month-picker-month-text-wrapper .month-picker-month-text:after {
         background: var(--react-autoql-text-color-accent); }
 
-
 .react-autoql-date-picker .rdrCalendarWrapper,
 .react-autoql-date-picker .rdrDateRangeWrapper,
 .react-autoql-date-picker .react-autoql-month-range-picker {
@@ -573,16 +575,16 @@ a {
     opacity: 0.8; }
 
 .react-autoql-btn.react-autoql-btn-danger:not(.btn-filled) {
-  color: var(--react-autoql-danger-color, #ca0b00);
-  border: 1px solid var(--react-autoql-danger-color, #ca0b00);
+  color: var(--react-autoql-danger-color, var(--react-autoql-danger-color-default));
+  border: 1px solid var(--react-autoql-danger-color, var(--react-autoql-danger-color-default));
   background: inherit; }
   .react-autoql-btn.react-autoql-btn-danger:not(.btn-filled):hover {
     background: var(--react-autoql-mask-color); }
 
 .react-autoql-btn.react-autoql-btn-danger.btn-filled {
   color: var(--react-autoql-text-color-accent);
-  background: var(--react-autoql-danger-color, #ca0b00);
-  border: 1px solid var(--react-autoql-danger-color, #ca0b00); }
+  background: var(--react-autoql-danger-color, var(--react-autoql-danger-color-default));
+  border: 1px solid var(--react-autoql-danger-color, var(--react-autoql-danger-color-default)); }
   .react-autoql-btn.react-autoql-btn-danger.btn-filled:hover {
     opacity: 0.8; }
 
@@ -620,10 +622,10 @@ a {
   .react-autoql-table-container.loading {
     pointer-events: none; }
   .react-autoql-table-container.hidden {
-    visibility: hidden;
-    position: absolute;
-    pointer-events: none;
-    opacity: 0; }
+    visibility: hidden !important;
+    position: absolute !important;
+    pointer-events: none !important;
+    opacity: 0 !important; }
   .react-autoql-table-container.empty:not(.filtering) .tabulator-headers {
     overflow: hidden;
     height: 37px !important; }
@@ -678,7 +680,8 @@ a {
   .react-autoql-table-container:not(.filtering) .tabulator-header-filter input {
     opacity: 0;
     visibility: hidden;
-    pointer-events: none; }
+    pointer-events: none;
+    line-height: 14px; }
   .react-autoql-table-container:not(.filtering) .react-autoql-tabulator-container .tabulator-tableholder {
     min-height: calc(100% - 37px) !important;
     height: calc(100% - 37px) !important;
@@ -1531,17 +1534,19 @@ g.legendOrdinal .legendTitle tspan {
   font-size: inherit; }
 
 .no-columns-error-message {
-  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
   padding: 20px;
   font-size: 13px; }
   .no-columns-error-message .warning-icon {
     font-size: 22px;
     display: block;
-    margin-bottom: -13px;
-    text-align: center; }
+    margin-bottom: 10px;
+    color: var(--react-autoql-warning-color); }
   .no-columns-error-message .eye-icon {
-    vertical-align: bottom;
-    line-height: 18px; }
+    vertical-align: middle; }
 
 .query-output-footer {
   display: flex;
@@ -2228,6 +2233,10 @@ g.legendOrdinal .legendTitle tspan {
   .rule-simple-validation-container .expression-term-validation-valid {
     color: var(--react-autoql-success-color); }
 
+.data-alert-condition-statement .data-alert-condition-statement-query1,
+.data-alert-condition-statement .data-alert-condition-statement-query2 {
+  font-style: italic; }
+
 .notification-rule-outer-container {
   position: relative;
   padding-bottom: 5px; }
@@ -2303,9 +2312,6 @@ g.legendOrdinal .legendTitle tspan {
     padding: 10px 20px;
     font-weight: 500;
     color: var(--react-autoql-accent-color); }
-    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-query1,
-    .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-query2 {
-      font-style: italic; }
     .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alert-condition-statement-operator {
       text-decoration: underline; }
     .react-autoql-notification-list-item .react-autoql-notification-condition-statement .data-alerts-container,
@@ -2554,14 +2560,10 @@ g.legendOrdinal .legendTitle tspan {
     opacity: 1;
     top: 0; } }
 
-
 .data-alert-schedule-builder-step .schedule-builder-day-of-year-selector {
   display: inline-flex;
   align-items: flex-end; }
 
-.data-alert-schedule-builder-step .data-alert-condition-statement {
-  font-style: italic; }
-
 .data-alert-schedule-builder-step .schedule-builder-at-connector {
   padding-bottom: 8px; }
 
@@ -2581,7 +2583,7 @@ g.legendOrdinal .legendTitle tspan {
 
 .data-alert-schedule-builder-step .frequency-type-container {
   padding: 3px 5px;
-  margin-bottom: 20px; }
+  margin-bottom: 15px; }
   .data-alert-schedule-builder-step .frequency-type-container .react-autoql-select {
     padding-left: 2px; }
 
@@ -2594,6 +2596,9 @@ g.legendOrdinal .legendTitle tspan {
     width: 100%;
     min-width: -moz-fit-content;
     min-width: fit-content; }
+  .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-info-tooltip {
+    color: var(--react-autoql-accent-color);
+    opacity: 1; }
   .data-alert-schedule-builder-step .frequency-settings-container .react-autoql-data-alert-frequency-option.check-frequency {
     display: flex;
     width: 300px;
@@ -2641,7 +2646,7 @@ g.legendOrdinal .legendTitle tspan {
           display: block;
           margin-top: 16px;
           text-align: center;
-          font-weight: 500;
+          color: var(--react-autoql-accent-color);
           cursor: pointer; }
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz-dot {
       width: 2em;
@@ -2656,14 +2661,16 @@ g.legendOrdinal .legendTitle tspan {
       border-radius: 50%;
       justify-content: center;
       background: var(--react-autoql-background-color-secondary);
-      border: 1px solid var(--react-autoql-text-color-primary);
-      color: var(--react-autoql-text-color-primary);
+      border: 1px solid var(--react-autoql-accent-color);
+      color: var(--react-autoql-accent-color);
       transition: opacity 0.2s ease; }
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container .react-autoql-step-hoz-dot span {
         font-size: 1rem;
         font-variant-numeric: tabular-nums; }
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active {
       color: var(--react-autoql-accent-color); }
+      .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-hoz-title, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-hoz-title {
+        font-weight: 500; }
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-hoz-dot,
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.complete .react-autoql-step-connector, .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-hoz-dot,
       .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.active .react-autoql-step-connector {
@@ -2675,7 +2682,7 @@ g.legendOrdinal .legendTitle tspan {
       background: var(--react-autoql-warning-color);
       color: var(--react-autoql-text-color-accent); }
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-dot,
-    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-title,
+    .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-hoz-title-container .react-autoql-step-hoz-title,
     .react-autoql-steps-hoz-container .react-autoql-step-hoz-container.disabled .react-autoql-step-connector {
       cursor: default !important;
       color: var(--react-autoql-text-color-placeholder);
@@ -2687,10 +2694,13 @@ g.legendOrdinal .legendTitle tspan {
     position: absolute; }
     .react-autoql-steps-hoz-container .react-autoql-step-connector-container .react-autoql-step-connector {
       display: block;
-      border-color: var(--react-autoql-text-color-primary);
+      border-color: var(--react-autoql-accent-color);
       border-top-style: solid;
       border-top-width: 1px; }
 
+.data-alert-settings-modal-content {
+  padding: 20px 100px; }
+
 .react-autoql-data-alert-setting-group {
   display: flex;
   flex-direction: row; }
@@ -2743,20 +2753,49 @@ g.legendOrdinal .legendTitle tspan {
         white-space: nowrap; }
 
 .react-autoql-data-alert-modal-body {
-  padding: 20px; }
+  padding: 0; }
+
+.react-autoql-data-alert-creation-modal {
+  height: calc(100vh - 90px); }
+  .react-autoql-data-alert-creation-modal .react-autoql-modal-footer {
+    padding: 0; }
+    .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .data-alert-modal-query-summary-container {
+      position: relative; }
+      .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .data-alert-modal-query-summary-container .data-alert-modal-query-summary-background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        opacity: 0.2;
+        background: var(--react-autoql-accent-color); }
+      .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .data-alert-modal-query-summary-container .data-alert-modal-query-summary {
+        position: relative;
+        padding: 10px 20px;
+        text-align: center;
+        color: var(--react-autoql-text-color-primary); }
+    .react-autoql-data-alert-creation-modal .react-autoql-modal-footer .react-autoql-data-alert-modal-footer {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 8px 10px; }
 
 .react-autoql-data-alert-modal-content {
   height: 400px;
   max-height: 90vh;
-  padding: 0px 80px;
   display: flex;
   flex-direction: column; }
+  .react-autoql-data-alert-modal-content .react-autoql-steps-hoz-container {
+    padding: 40px 100px;
+    padding-bottom: 20px; }
   .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step {
     font-weight: 400;
     font-size: 15px;
-    padding-top: 15px; }
+    padding: 100px;
+    padding-top: 15px;
+    padding-bottom: 20px; }
     .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step .react-autoql-data-alert-frequency-option {
-      margin-right: 10px; }
+      margin-right: 5px; }
     .react-autoql-data-alert-modal-content .react-autoql-data-alert-modal-step .data-alert-modal-condition-title {
       margin-top: 20px;
       margin-bottom: 5px; }
@@ -2809,6 +2848,13 @@ g.legendOrdinal .legendTitle tspan {
           animation: none; }
         .react-autoql-data-alert-modal-content .compose-message-section .preview-section .data-alert-preview .react-autoql-notification-extra-content {
           display: none !important; }
+  .react-autoql-data-alert-modal-content .data-alert-modal-step-content-container {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%; }
   .react-autoql-data-alert-modal-content .react-autoql-step-content p {
     margin-bottom: 0.5em;
     margin-top: 0.5em;
@@ -2820,11 +2866,6 @@ g.legendOrdinal .legendTitle tspan {
   .react-autoql-data-alert-modal-content .data-alert-chunked-rt {
     color: var(--react-autoql-text-color-primary); }
 
-.react-autoql-data-alert-modal-footer {
-  width: 100%;
-  display: flex;
-  justify-content: space-between; }
-
 .modal-footer-button-container {
   display: flex;
   flex-direction: row; }
@@ -3466,7 +3507,6 @@ g.legendOrdinal .legendTitle tspan {
     .chat-single-message-container .query-more-btn:hover {
       opacity: 1; }
   .chat-single-message-container .react-autoql-response-content-container .query-output-error-message,
-  .chat-single-message-container .react-autoql-response-content-container .no-columns-error-message,
   .chat-single-message-container .react-autoql-response-content-container .feedback-message {
     margin: 0;
     text-align: left; }
@@ -3776,9 +3816,6 @@ g.legendOrdinal .legendTitle tspan {
     list-style-type: none; }
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__input--focused {
     outline: none; }
-  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__input::-ms-clear,
-  .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestions-container {
-    display: none; }
   .react-autoql-chatbar-input-container.data-explorer .react-autosuggest__suggestion {
     cursor: pointer;
     padding: 2px;