react-autoql 8.0.1 → 8.0.2-alpha.3

package/dist/autoql.esm.css

@@ -55,7 +55,6 @@ a {
 
 .react-tiny-popover-container {
   z-index: 99999;
-  opacity: 1 !important;
   overflow: hidden !important;
   max-width: 95vw;
   min-height: 0px;
@@ -111,22 +110,28 @@ a {
     display: flex; }
   .react-tiny-popover-container.react-autoql-popover-mobile {
     display: flex;
-    top: 0px !important;
     left: 0px !important;
-    transform: translatex(-100%) !important;
-    transition: box-shadow 0.3s ease;
-    padding: 0 !important;
-    margin: 0 !important;
-    min-height: 45px;
-    max-height: calc(100vh - 120px);
+    right: 0px !important;
+    top: 45% !important;
+    transform: translate(0, -50%) !important;
     width: 100vw !important;
     max-width: 100vw !important;
+    padding: 0 !important;
+    min-height: 45px;
+    max-height: calc(100vh - 150px);
     border-radius: 0 !important;
     background: var(--react-autoql-background-color-secondary);
-    box-shadow: 0px 0px 500px 500px var(--react-autoql-mobile-mask-color, rgba(0, 0, 0, 0.15)), 0px 0 8px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
+    box-shadow: 0px 0px 100vh 100vh var(--react-autoql-mobile-mask-color, rgba(0, 0, 0, 0.15)), 0px 0 8px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
+    animation: fade 0.2s ease; }
     .react-tiny-popover-container.react-autoql-popover-mobile .popover-container-content {
       border-radius: 0 !important; }
 
+@keyframes fade {
+  from {
+    opacity: 0; }
+  to {
+    opacity: 1; } }
+
 .react-autoql-menu {
   list-style-type: none;
   width: 100%;
@@ -321,6 +326,7 @@ a {
 
 .react-autoql-custom-scrollbars.scrollbar-container .ps__rail-y,
 .react-autoql-custom-scrollbars.scrollbar-container .ps__rail-x {
+  z-index: 1;
   background-color: transparent; }
   .react-autoql-custom-scrollbars.scrollbar-container .ps__rail-y:hover, .react-autoql-custom-scrollbars.scrollbar-container .ps__rail-y.ps--clicking,
   .react-autoql-custom-scrollbars.scrollbar-container .ps__rail-x:hover,
@@ -1503,8 +1509,6 @@ a {
       min-height: calc(100% - 60px) !important;
       height: calc(100% - 60px) !important;
       max-height: calc(100% - 60px) !important; }
-    .react-autoql-table-container.filtering .filter-tag {
-      display: none; }
     .react-autoql-table-container.filtering.empty .react-autoql-table.tabulator .tabulator-header {
       border: none; }
       .react-autoql-table-container.filtering.empty .react-autoql-table.tabulator .tabulator-header .tabulator-headers {
@@ -1528,7 +1532,8 @@ a {
     outline: none !important;
     text-overflow: ellipsis;
     visibility: visible;
-    opacity: 1; }
+    opacity: 1;
+    height: 25px; }
     .react-autoql-table-container .tabulator-header-filter input:focus {
       border: 1px solid var(--react-autoql-accent-color); }
   .react-autoql-table-container.supports-drilldown .tabulator-row .tabulator-cell:not(.pivot-category) {
@@ -1554,17 +1559,21 @@ a {
       color: #e80000; }
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header {
       border-bottom: 2px solid var(--react-autoql-border-color); }
-      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .filter-tag {
-        color: #2ecc40;
-        border: 1px solid;
-        padding: 2px 4px;
-        border-radius: 4px;
-        font-weight: 400;
-        font-size: 10px;
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col.is-filtered .tabulator-col-title:before {
+        opacity: 1; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col-title:before {
+        content: '';
+        display: inline-block;
+        vertical-align: middle;
+        opacity: 0;
+        height: 8px;
+        width: 8px;
         margin-right: 5px;
-        vertical-align: top;
-        line-height: 21px;
-        margin-left: -11px; }
+        margin-left: -12px;
+        margin-bottom: 2px;
+        border-radius: 10px;
+        background: var(--react-autoql-warning-color);
+        transition: opacity 0.3s ease; }
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row,
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header,
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-headers,
@@ -1579,11 +1588,13 @@ a {
       .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row:last-child {
         border-bottom: none;
         margin-bottom: 15px; }
-      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell:not(:first-child) {
-        border-left: 1px solid !important;
-        border-color: var(--react-autoql-table-border-color) !important; }
-      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell.pivot-category {
-        font-weight: 600; }
+      .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell {
+        line-height: 1.5em; }
+        .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell:not(:first-child) {
+          border-left: 1px solid !important;
+          border-color: var(--react-autoql-table-border-color) !important; }
+        .react-autoql-table-container .react-autoql-table.tabulator .tabulator-row .tabulator-cell.pivot-category {
+          font-weight: 600; }
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col {
       text-align: center !important;
       border-color: transparent;
@@ -1996,7 +2007,8 @@ g.legendOrdinal tspan {
       padding: 0 8px;
       margin-right: 10px; }
   .number-axis-selector-popover .axis-selector-apply-btn-container {
-    flex: 0 0 auto; }
+    flex: 0 0 auto;
+    padding-top: 10px; }
     .number-axis-selector-popover .axis-selector-apply-btn-container .axis-selector-apply-btn {
       margin: 0;
       width: 100%; }
@@ -2053,9 +2065,12 @@ g.legendOrdinal tspan {
       background: var(--react-autoql-accent-color);
       color: var(--react-autoql-text-color-accent); }
 
+g.legendOrdinal text,
+g.legendOrdinal tspan {
+  font-size: inherit; }
+
 g.legendOrdinal .legendTitle tspan {
   letter-spacing: 0.04em !important;
-  font-size: 12px;
   cursor: default; }
 
 .react-autoql-popover-mobile .number-selector-field-group-container {
@@ -2505,8 +2520,10 @@ g.legendOrdinal .legendTitle tspan {
   color: var(--react-autoql-text-color-primary);
   background-color: var(--react-autoql-background-color-primary);
   border-radius: 5px;
-  padding: 5px 13px 5px 13px;
   height: 100%; }
+  .react-autoql-reverse-translation-container .react-autoql-reverse-translation .react-autoql-icon-info {
+    vertical-align: text-bottom;
+    padding-bottom: 1.5px; }
 
 .report-like-text-button {
   background: none !important;
@@ -2546,7 +2563,7 @@ g.legendOrdinal .legendTitle tspan {
   cursor: pointer; }
   .react-autoql-btn.react-autoql-toolbar-btn.filter-btn {
     line-height: 24px; }
-  .react-autoql-btn.react-autoql-toolbar-btn.selected {
+  .react-autoql-btn.react-autoql-toolbar-btn.react-autoql-toolbar-btn-selected {
     color: var(--react-autoql-accent-color); }
 
 .react-autoql-toolbar-btn.green {
@@ -2619,8 +2636,9 @@ g.legendOrdinal .legendTitle tspan {
   display: flex;
   flex-direction: column;
   overflow: hidden !important;
-  transform: scale(0);
-  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  transform: scale(50%);
+  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
   color: var(--react-autoql-text-color-primary);
   background: var(--react-autoql-background-color-secondary) !important;
   box-shadow: 0 0 14px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
@@ -2651,8 +2669,9 @@ g.legendOrdinal .legendTitle tspan {
     display: flex;
     flex-direction: column;
     overflow: hidden !important;
-    transform: scale(0);
-    transition: all 0.2s ease-in-out;
+    opacity: 0;
+    transform: scale(50%);
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
     color: var(--react-autoql-text-color-primary);
     background: var(--react-autoql-background-color-secondary) !important;
     box-shadow: 0 0 14px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
@@ -2678,10 +2697,12 @@ g.legendOrdinal .legendTitle tspan {
         color: var(--react-autoql-text-color-placeholder); } }
 
 .ReactModal__Overlay--after-open .ReactModal__Content {
-  transform: scale(1); }
+  transform: scale(1);
+  opacity: 1; }
 
 .ReactModal__Overlay--before-close .ReactModal__Content {
-  transform: scale(0); }
+  transform: scale(50%);
+  opacity: 0; }
 
 .react-autoql-modal-content {
   display: flex;
@@ -2690,6 +2711,18 @@ g.legendOrdinal .legendTitle tspan {
   width: 100%;
   overflow: hidden; }
 
+.react-autoql-modal-mobile {
+  width: 100vw;
+  max-width: 100vw;
+  margin: 0;
+  top: 0;
+  position: fixed !important;
+  left: 0;
+  border: none !important;
+  border-radius: 0 !important; }
+  .react-autoql-modal-mobile .react-autoql-modal-body {
+    padding: 20px 10px; }
+
 .react-autoql-modal-header {
   display: flex;
   align-items: flex-start;
@@ -3988,6 +4021,9 @@ g.legendOrdinal .legendTitle tspan {
     padding-bottom: 10px;
     overflow: hidden; }
 
+.react-autoql-notification-list-container-mobile .notification-feed-list {
+  padding: 0 10px; }
+
 .notification-feed-top-options-container {
   display: flex;
   flex-direction: row;
@@ -4019,7 +4055,13 @@ g.legendOrdinal .legendTitle tspan {
   height: 350px; }
 
 .filter-lock-popover.filter-lock-popover-mobile {
-  height: calc(100vh - 200px); }
+  border: none;
+  transform: unset !important;
+  height: calc(100vh - 80px);
+  max-height: calc(100vh - 80px);
+  top: 0px !important; }
+  .filter-lock-popover.filter-lock-popover-mobile .popover-container-content {
+    animation: scale-down-tl 0.2s ease; }
 
 .filter-lock-popover .filter-lock-toast-container {
   top: 0;
@@ -4048,7 +4090,10 @@ g.legendOrdinal .legendTitle tspan {
     border-color: var(--react-autoql-danger-color); }
 
 .filter-lock-menu-content {
-  padding: 5px 10px; }
+  padding: 5px 10px;
+  display: flex;
+  flex-direction: column;
+  height: 100%; }
   .filter-lock-menu-content.closed {
     opacity: 0; }
   .filter-lock-menu-content h3,
@@ -4057,6 +4102,8 @@ g.legendOrdinal .legendTitle tspan {
     color: var(--react-autoql-text-color-primary); }
   .filter-lock-menu-content h4 {
     font-weight: 500; }
+  .filter-lock-menu-content .react-autoql-empty-filter-list {
+    opacity: 0.7; }
   .filter-lock-menu-content .react-autoql-filter-lock-list-loading-container,
   .filter-lock-menu-content .react-autoql-empty-filter-list {
     display: flex;
@@ -4064,7 +4111,8 @@ g.legendOrdinal .legendTitle tspan {
     justify-content: center;
     opacity: 0.8;
     padding-right: 20px;
-    padding-bottom: 45px; }
+    padding-bottom: 45px;
+    color: var(--react-autoql-text-color-primary); }
   .filter-lock-menu-content .react-autoql-filter-lock-list-loading-container,
   .filter-lock-menu-content .react-autoql-empty-filter-list,
   .filter-lock-menu-content .react-autoql-filter-list-container {
@@ -4264,6 +4312,14 @@ g.legendOrdinal .legendTitle tspan {
     color: var(--react-autoql-text-color-primary);
     opacity: 1; } }
 
+@keyframes scale-down-tl {
+  0% {
+    transform: scale(0.5);
+    transform-origin: 0% 0%; }
+  100% {
+    transform: scale(1);
+    transform-origin: 0% 0%; } }
+
 .chat-voice-record-button {
   display: flex;
   justify-content: center;
@@ -4454,113 +4510,120 @@ g.legendOrdinal .legendTitle tspan {
   font-size: 20px;
   color: #28a8e0; }
 
-.chat-single-message-container {
+.chat-message-and-rt-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  width: 100%;
+  padding: 10px 20px 5px 20px;
   transition: background-color 0.2s ease;
-  padding-top: 6px; }
-  .chat-single-message-container a {
-    text-decoration: none;
-    font-weight: 600;
-    color: var(--react-autoql-accent-color); }
-  .chat-single-message-container:not(.no-max-height) {
-    max-height: 81%; }
-  .chat-single-message-container:first-of-type {
-    margin-top: 10px; }
-  .chat-single-message-container .query-more-btn {
-    transition-property: color, border-color, background-color, opacity;
-    transition-duration: 0.3s;
-    transition-timing-function: ease;
-    font-size: 22px;
-    padding: 13px;
-    margin-bottom: 6px;
-    height: 42px;
-    opacity: 0;
-    visibility: hidden;
-    cursor: pointer; }
-    .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 .feedback-message {
-    margin: 0;
-    text-align: left; }
-  .chat-single-message-container .spinner-loader:after {
-    border: 1px solid var(--react-autoql-accent-color);
-    border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
-  .chat-single-message-container .chat-message-bubble {
-    box-shadow: var(--react-autoql-box-shadow-1); }
-  .chat-single-message-container.response {
+  position: relative; }
+  .chat-message-and-rt-container:first-child {
+    padding-top: 20px; }
+  .chat-message-and-rt-container.text .chat-single-message-container .chat-message-bubble {
+    max-width: 85%; }
+  .chat-message-and-rt-container .chat-single-message-container {
     display: flex;
+    width: 100%;
     min-height: 0;
-    justify-content: flex-start;
-    padding-left: 20px;
+    flex: 1; }
+  .chat-message-and-rt-container.request {
+    animation: scale-up-br 0.5s ease; }
+    .chat-message-and-rt-container.request.pwa {
+      margin-bottom: 30px; }
+    .chat-message-and-rt-container.request .chat-single-message-container {
+      justify-content: flex-end; }
+      .chat-message-and-rt-container.request .chat-single-message-container .chat-message-bubble {
+        background: var(--react-autoql-accent-color);
+        color: var(--react-autoql-text-color-accent); }
+  .chat-message-and-rt-container.response {
     animation: scale-up-bl 0.5s ease; }
-    .chat-single-message-container.response .chat-message-bubble {
-      background: var(--react-autoql-background-color-secondary);
-      color: var(--react-autoql-text-color-primary); }
-    .chat-single-message-container.response .chat-message-bubble:not(.text) {
-      min-width: 125px; }
-  .chat-single-message-container.request {
+    .chat-message-and-rt-container.response.pwa {
+      margin-bottom: 15px; }
+      .chat-message-and-rt-container.response.pwa.text {
+        margin-bottom: 0px; }
+    .chat-message-and-rt-container.response .chat-single-message-container {
+      justify-content: flex-start; }
+      .chat-message-and-rt-container.response .chat-single-message-container .chat-message-bubble {
+        background: var(--react-autoql-background-color-secondary);
+        color: var(--react-autoql-text-color-primary); }
+      .chat-message-and-rt-container.response .chat-single-message-container .chat-message-bubble:not(.text) {
+        min-width: 125px; }
+  .chat-message-and-rt-container .chat-message-toolbars-container {
     display: flex;
-    justify-content: flex-end;
-    padding-right: 20px;
-    animation: scale-up-br 0.5s ease; }
-    .chat-single-message-container.request .chat-message-bubble {
-      background: var(--react-autoql-accent-color);
-      color: var(--react-autoql-text-color-accent); }
-  .chat-single-message-container .chat-message-bubble {
-    position: relative;
-    padding: 13px;
-    border-radius: 6px;
-    max-width: calc(100% - 20px);
-    word-wrap: break-word;
-    font-family: inherit;
-    font-size: 14px;
-    letter-spacing: 0.04em;
-    box-sizing: border-box;
-    /* make small margin on bottom because sometimes react
-    custom scrollbar cuts off a pixel or 2 at the bottom */
-    margin-bottom: 6px; }
-    .chat-single-message-container .chat-message-bubble.text {
-      max-width: 85%; }
-    .chat-single-message-container .chat-message-bubble.active {
-      border: 1px solid #c3c3c3; }
-    .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container {
-      display: flex;
-      position: absolute;
-      align-items: flex-start;
-      justify-content: space-between;
-      transition: opacity 0.3s ease, color 0.3s ease;
-      width: 100%;
-      top: -31px;
-      right: 0;
-      z-index: 3; }
-      .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.left {
-        margin-left: -5px; }
-      .chat-single-message-container .chat-message-bubble .chat-message-toolbars-container .chat-message-toolbar.right {
-        margin-right: -5px; }
-    .chat-single-message-container .chat-message-bubble .react-autoql-toolbar {
-      display: flex;
-      flex-wrap: nowrap;
-      flex-direction: row; }
-      .chat-single-message-container .chat-message-bubble .react-autoql-toolbar:not(.active) {
-        pointer-events: none;
-        visibility: hidden;
-        opacity: 0; }
-    .chat-single-message-container .chat-message-bubble:hover .react-autoql-toolbar,
-    .chat-single-message-container .chat-message-bubble .react-autoql-toolbar.active {
-      pointer-events: auto;
-      visibility: visible;
-      opacity: 1; }
-    .chat-single-message-container .chat-message-bubble .react-autoql-toolbar-mobile {
-      pointer-events: auto;
-      visibility: visible;
-      opacity: 1; }
-
-.chat-message-rt-container {
-  padding: 0 20px 15px 20px;
-  animation: scale-up-bl 0.5s ease; }
-  .chat-message-rt-container .react-autoql-reverse-translation {
-    padding-top: 0;
-    background: transparent; }
+    position: absolute;
+    align-items: flex-start;
+    justify-content: space-between;
+    transition: opacity 0.3s ease, color 0.3s ease;
+    width: 100%;
+    top: -20px;
+    right: 0;
+    z-index: 3;
+    padding: 0 10px; }
+  .chat-message-and-rt-container .react-autoql-toolbar {
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row; }
+    .chat-message-and-rt-container .react-autoql-toolbar:not(.active) {
+      pointer-events: none;
+      visibility: hidden;
+      opacity: 0; }
+  .chat-message-and-rt-container:hover .react-autoql-toolbar,
+  .chat-message-and-rt-container .react-autoql-toolbar.active {
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 1; }
+  .chat-message-and-rt-container .react-autoql-toolbar-mobile {
+    pointer-events: auto;
+    visibility: visible;
+    opacity: 1; }
+  .chat-message-and-rt-container .chat-single-message-container {
+    max-width: 100%; }
+    .chat-message-and-rt-container .chat-single-message-container a {
+      text-decoration: none;
+      font-weight: 600;
+      color: var(--react-autoql-accent-color); }
+    .chat-message-and-rt-container .chat-single-message-container .query-more-btn {
+      transition-property: color, border-color, background-color, opacity;
+      transition-duration: 0.3s;
+      transition-timing-function: ease;
+      font-size: 22px;
+      padding: 13px;
+      margin-bottom: 6px;
+      height: 42px;
+      opacity: 0;
+      visibility: hidden;
+      cursor: pointer; }
+      .chat-message-and-rt-container .chat-single-message-container .query-more-btn:hover {
+        opacity: 1; }
+    .chat-message-and-rt-container .chat-single-message-container .react-autoql-response-content-container .query-output-error-message,
+    .chat-message-and-rt-container .chat-single-message-container .react-autoql-response-content-container .feedback-message {
+      margin: 0;
+      text-align: left; }
+    .chat-message-and-rt-container .chat-single-message-container .spinner-loader:after {
+      border: 1px solid var(--react-autoql-accent-color);
+      border-color: var(--react-autoql-accent-color) transparent var(--react-autoql-accent-color) transparent; }
+    .chat-message-and-rt-container .chat-single-message-container .chat-message-bubble {
+      position: relative;
+      padding: 13px;
+      border-radius: 6px;
+      max-width: 100%;
+      word-wrap: break-word;
+      font-family: inherit;
+      font-size: 14px;
+      letter-spacing: 0.04em;
+      box-sizing: border-box;
+      box-shadow: var(--react-autoql-box-shadow-1);
+      max-height: 400px; }
+      .chat-message-and-rt-container .chat-single-message-container .chat-message-bubble.active {
+        border: 1px solid #c3c3c3; }
+  .chat-message-and-rt-container .chat-message-rt-container {
+    flex: 0 0 auto;
+    padding-top: 5px;
+    padding-left: 5px; }
+    .chat-message-and-rt-container .chat-message-rt-container .react-autoql-reverse-translation {
+      background: transparent; }
 
 /* animations */
 @keyframes scale-up-br {
@@ -4585,8 +4648,6 @@ g.legendOrdinal .legendTitle tspan {
   width: 100%;
   padding-bottom: 158px;
   background-color: var(--react-autoql-background-color-primary); }
-  .chat-content-scroll-container .chat-content-scrollbars-container {
-    padding-top: 10px; }
 
 .react-autoql-drawer .response-loading-container {
   position: absolute;
@@ -5661,8 +5722,7 @@ g.legendOrdinal .legendTitle tspan {
   background: transparent;
   width: 100%;
   overflow: hidden;
-  padding-top: 3px;
-  min-width: 500px; }
+  padding-top: 3px; }
 
 .react-autoql-dashboard-container.edit-mode {
   padding-bottom: 200px; }