@adaptabletools/adaptable-angular-aggrid 24.0.0-canary.0 → 24.0.0-canary.10

package/index.css

@@ -611,6 +611,9 @@
   .twa\:field-sizing-content {
     field-sizing: content;
   }
+  .twa\:aspect-auto {
+    aspect-ratio: auto;
+  }
   .twa\:aspect-square {
     aspect-ratio: 1 / 1;
   }
@@ -662,10 +665,6 @@
     width: calc(var(--ab-base-space) * 16);
     height: calc(var(--ab-base-space) * 16);
   }
-  .twa\:size-\[calc\(100\%-2\*var\(--ab-base-space\)\)\] {
-    width: calc(100% - 2 * var(--ab-base-space));
-    height: calc(100% - 2 * var(--ab-base-space));
-  }
   .twa\:size-auto {
     width: auto;
     height: auto;
@@ -703,6 +702,9 @@
   .twa\:h-16 {
     height: calc(var(--ab-base-space) * 16);
   }
+  .twa\:h-52 {
+    height: calc(var(--ab-base-space) * 52);
+  }
   .twa\:h-\[0\.5px\] {
     height: 0.5px;
   }
@@ -718,9 +720,6 @@
   .twa\:h-\[22px\] {
     height: 22px;
   }
-  .twa\:h-\[24px\] {
-    height: 24px;
-  }
   .twa\:h-\[33px\] {
     height: 33px;
   }
@@ -733,6 +732,9 @@
   .twa\:h-\[calc\(100\%-1px\)\] {
     height: calc(100% - 1px);
   }
+  .twa\:h-\[calc\(100\%-2\*var\(--ab-base-space\)\)\] {
+    height: calc(100% - 2 * var(--ab-base-space));
+  }
   .twa\:h-\[min\(22rem\,var\(--total-size\)\)\] {
     height: min(22rem, var(--total-size));
   }
@@ -742,6 +744,9 @@
   .twa\:h-full {
     height: 100%;
   }
+  .twa\:h-full\! {
+    height: 100% !important;
+  }
   .twa\:h-input {
     height: var(--ab-input-height);
   }
@@ -901,6 +906,9 @@
   .twa\:w-8 {
     width: calc(var(--ab-base-space) * 8);
   }
+  .twa\:w-12 {
+    width: calc(var(--ab-base-space) * 12);
+  }
   .twa\:w-20 {
     width: calc(var(--ab-base-space) * 20);
   }
@@ -934,6 +942,9 @@
   .twa\:w-\[7rem\] {
     width: 7rem;
   }
+  .twa\:w-\[8\.5rem\] {
+    width: 8.5rem;
+  }
   .twa\:w-\[10px\] {
     width: 10px;
   }
@@ -946,9 +957,6 @@
   .twa\:w-\[15rem\] {
     width: 15rem;
   }
-  .twa\:w-\[36px\] {
-    width: 36px;
-  }
   .twa\:w-\[44px\] {
     width: 44px;
   }
@@ -997,9 +1005,6 @@
   .twa\:w-\[480px\] {
     width: 480px;
   }
-  .twa\:w-\[calc\(6\.75rem\+2px\)\] {
-    width: calc(6.75rem + 2px);
-  }
   .twa\:w-auto {
     width: auto;
   }
@@ -1009,6 +1014,9 @@
   .twa\:w-full {
     width: 100%;
   }
+  .twa\:w-full\! {
+    width: 100% !important;
+  }
   .twa\:w-px {
     width: 1px;
   }
@@ -1018,6 +1026,9 @@
   .twa\:max-w-3xl {
     max-width: var(--twa-container-3xl);
   }
+  .twa\:max-w-28 {
+    max-width: calc(var(--ab-base-space) * 28);
+  }
   .twa\:max-w-50 {
     max-width: calc(var(--ab-base-space) * 50);
   }
@@ -1376,6 +1387,9 @@
   .twa\:grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .twa\:grid-cols-8 {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
   .twa\:grid-cols-\[1fr_1fr\] {
     grid-template-columns: 1fr 1fr;
   }
@@ -1475,6 +1489,9 @@
   .twa\:gap-2 {
     gap: calc(var(--ab-base-space) * 2);
   }
+  .twa\:gap-2\.5 {
+    gap: calc(var(--ab-base-space) * 2.5);
+  }
   .twa\:gap-3 {
     gap: calc(var(--ab-base-space) * 3);
   }
@@ -2410,6 +2427,9 @@
   .twa\:text-warn-foreground {
     color: var(--ab-color-warn-foreground);
   }
+  .twa\:text-white {
+    color: var(--twa-color-white);
+  }
   .twa\:uppercase {
     text-transform: uppercase;
   }
@@ -2426,9 +2446,6 @@
   .twa\:opacity-0 {
     opacity: 0%;
   }
-  .twa\:opacity-30 {
-    opacity: 30%;
-  }
   .twa\:opacity-50 {
     opacity: 50%;
   }
@@ -2479,10 +2496,17 @@
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .twa\:ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .twa\:ring-3 {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .twa\:ring-accent {
+    --tw-ring-color: var(--ab-color-accent);
+  }
   .twa\:ring-accent-foreground {
     --tw-ring-color: var(--ab-color-accent-foreground);
   }
@@ -2505,9 +2529,16 @@
       --tw-ring-color: color-mix(in oklab, var(--ab-color-ring) 50%, transparent);
     }
   }
+  .twa\:ring-offset-1 {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  }
   .twa\:ring-offset-background {
     --tw-ring-offset-color: var(--ab-color-background);
   }
+  .twa\:ring-offset-popover {
+    --tw-ring-offset-color: var(--ab-color-popover);
+  }
   .twa\:outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -2522,6 +2553,11 @@
     outline-style: var(--tw-outline-style);
     outline-width: 0px;
   }
+  .twa\:drop-shadow-\[0_0_1px_rgba\(0\,0\,0\,0\.9\)\] {
+    --tw-drop-shadow-size: drop-shadow(0 0 1px var(--tw-drop-shadow-color, rgba(0,0,0,0.9)));
+    --tw-drop-shadow: var(--tw-drop-shadow-size);
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .twa\:transition-\(--ab-cmp-simple-button__transition\) {
     transition-property: var(--ab-cmp-simple-button__transition);
     transition-timing-function: var(--tw-ease, var(--twa-default-transition-timing-function));
@@ -2532,6 +2568,11 @@
     transition-timing-function: var(--tw-ease, var(--twa-default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--twa-default-transition-duration));
   }
+  .twa\:transition-\[box-shadow\,transform\] {
+    transition-property: box-shadow,transform;
+    transition-timing-function: var(--tw-ease, var(--twa-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--twa-default-transition-duration));
+  }
   .twa\:transition-\[color\,background-color\] {
     transition-property: color,background-color;
     transition-timing-function: var(--tw-ease, var(--twa-default-transition-timing-function));
@@ -2643,6 +2684,15 @@
     --tw-outline-style: none;
     outline-style: none;
   }
+  :is(.twa\:\*\:not-first\:mt-2\.5\! > *):not(:first-child) {
+    margin-top: calc(var(--ab-base-space) * 2.5) !important;
+  }
+  :is(.twa\:\*\:not-first\:h-3\! > *):not(:first-child) {
+    height: calc(var(--ab-base-space) * 3) !important;
+  }
+  :is(.twa\:\*\:not-first\:rounded-full\! > *):not(:first-child) {
+    border-radius: calc(infinity * 1px) !important;
+  }
   .twa\:not-focus-within\:\[--ab-focus-light__box-shadow\:none\]:not(:focus-within) {
     --ab-focus-light__box-shadow: none;
   }
@@ -3017,6 +3067,13 @@
     content: var(--tw-content);
     width: calc(var(--ab-base-space) * 0.5);
   }
+  :is(.twa\:\*\:first\:rounded-md\! > *):first-child {
+    border-radius: var(--twa-radius-md) !important;
+  }
+  :is(.twa\:\*\:first\:border-0\! > *):first-child {
+    border-style: var(--tw-border-style) !important;
+    border-width: 0px !important;
+  }
   .twa\:focus-within\:border-ring:focus-within {
     border-color: var(--ab-color-ring);
   }
@@ -3080,6 +3137,12 @@
     outline-color: var(--ab-color-accent);
   }
   @media (hover: hover) {
+    .twa\:hover\:scale-105:hover {
+      --tw-scale-x: 105%;
+      --tw-scale-y: 105%;
+      --tw-scale-z: 105%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
     .twa\:hover\:cursor-pointer:hover {
       cursor: pointer;
     }
@@ -3180,6 +3243,18 @@
     .twa\:hover\:opacity-100:hover {
       opacity: 100%;
     }
+    .twa\:hover\:ring-2:hover {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .twa\:hover\:ring-ring\/40:hover {
+      --tw-ring-color: var(--ab-color-ring);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .twa\:hover\:ring-ring\/40:hover {
+        --tw-ring-color: color-mix(in oklab, var(--ab-color-ring) 40%, transparent);
+      }
+    }
     .twa\:hover\:not-disabled\:shadow-\(--ab-cmp-simple-button__hover-box-shadow\):hover:not(:disabled) {
       --tw-shadow: var(--ab-cmp-simple-button__hover-box-shadow);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4036,19 +4111,6 @@
       background-color: color-mix(in oklab, var(--ab-color-destructive) 20%, transparent);
     }
   }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:absolute .ab-ColorPicker-swatch {
-    position: absolute;
-  }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:inset-0 .ab-ColorPicker-swatch {
-    inset: 0px;
-  }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:size-full .ab-ColorPicker-swatch {
-    width: 100%;
-    height: 100%;
-  }
-  .twa\:\[\&_\.ab-ColorPicker-swatch\]\:opacity-0 .ab-ColorPicker-swatch {
-    opacity: 0%;
-  }
   .twa\:\[\&_\.ab-Input\]\:w-full .ab-Input {
     width: 100%;
   }
@@ -4122,6 +4184,14 @@
   :is(.twa\:rtl\:\*\*\:\[\.rdp-button\\_previous\>svg\]\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) *):is(.rdp-button_previous > svg) {
     rotate: 180deg;
   }
+  :is(.twa\:\*\*\:\[\[class\$\=pointer\]\]\:size-4\! *):is([class$=pointer]) {
+    width: calc(var(--ab-base-space) * 4) !important;
+    height: calc(var(--ab-base-space) * 4) !important;
+  }
+  :is(.twa\:\*\*\:\[\[class\$\=pointer\]\]\:border-2\! *):is([class$=pointer]) {
+    border-style: var(--tw-border-style) !important;
+    border-width: 2px !important;
+  }
   :is(.twa\:\*\:\[\[role\=button\]\]\:absolute > *):is([role=button]) {
     position: absolute;
   }
@@ -6226,6 +6296,16 @@
     --ab-color-action-share-foreground: white;
     --ab-color-action-delete-foreground: white;
     --ab-color-action-clone-foreground: white;
+    --ab-color-flash-up: var(--ab-color-success);
+    --ab-color-flash-down: var(--ab-color-destructive);
+    --ab-color-flash-neutral: #808080;
+    --ab-color-quick-search-match: #ffff00;
+    --ab-color-quick-search-match-foreground: #000000;
+    --ab-color-quick-search-current-match: var(--ab-color-warn);
+    --ab-color-quick-search-current-match-foreground: #000000;
+    --ab-color-badge: var(--ab-color-primary);
+    --ab-color-badge-foreground: var(--ab-color-primary-foreground);
+    --ab-color-range-default: #808080;
     --ab-color-primary: #e9e9e9;
     --ab-color-primary-foreground: #656565;
     --ab-color-primarydark: #b7b7b7;
@@ -6266,26 +6346,26 @@
     --ab-color-palette-10: #4a5568;
     --ab-color-palette-11: #f3e8ff;
     --ab-color-palette-12: #553c9a;
-    --ab-color-swatch-1: #000000;
-    --ab-color-swatch-2: #ffffff;
-    --ab-color-swatch-3: #d3d3d3;
-    --ab-color-swatch-4: #808080;
-    --ab-color-swatch-5: #a52a2a;
-    --ab-color-swatch-6: #006400;
-    --ab-color-swatch-7: #008000;
-    --ab-color-swatch-8: #32cd32;
-    --ab-color-swatch-9: #ffff00;
-    --ab-color-swatch-10: #ffffe0;
-    --ab-color-swatch-11: #00008b;
-    --ab-color-swatch-12: #0000ff;
-    --ab-color-swatch-13: #87cefa;
-    --ab-color-swatch-14: #00ffff;
-    --ab-color-swatch-15: #ff00ff;
-    --ab-color-swatch-16: #800080;
-    --ab-color-swatch-17: #8b0000;
-    --ab-color-swatch-18: #ff0000;
-    --ab-color-swatch-19: #dc143c;
-    --ab-color-swatch-20: #ffa500;
+    --ab-color-palette-13: #000000;
+    --ab-color-palette-14: #ffffff;
+    --ab-color-palette-15: #d3d3d3;
+    --ab-color-palette-16: #808080;
+    --ab-color-palette-17: #a52a2a;
+    --ab-color-palette-18: #006400;
+    --ab-color-palette-19: #008000;
+    --ab-color-palette-20: #32cd32;
+    --ab-color-palette-21: #ffff00;
+    --ab-color-palette-22: #ffffe0;
+    --ab-color-palette-23: #00008b;
+    --ab-color-palette-24: #0000ff;
+    --ab-color-palette-25: #87cefa;
+    --ab-color-palette-26: #00ffff;
+    --ab-color-palette-27: #ff00ff;
+    --ab-color-palette-28: #800080;
+    --ab-color-palette-29: #8b0000;
+    --ab-color-palette-30: #ff0000;
+    --ab-color-palette-31: #dc143c;
+    --ab-color-palette-32: #ffa500;
     --ab-icon-fill: currentColor;
     --ab-custom-scrollbar-size: 8px;
     --ab-color-custom-scrollbar-track: var(--ab-color-background);
@@ -6350,6 +6430,30 @@
     --ab-cmp-tooltip__color: var(--ab-color-primary-foreground);
     --ab-cmp-tooltip__border: solid 1px var(--ab-color-input-border);
     --ab-cmp-tooltip__font-size: var(--ab-font-size-2);
+    --ab-color-aql-token-column: #1d4ed8;
+    --ab-color-aql-token-function: #7c3aed;
+    --ab-color-aql-token-lookup: #0d9488;
+    --ab-color-aql-token-operator: #b45309;
+    --ab-color-aql-token-number: #0f766e;
+    --ab-color-aql-token-string: #9a3412;
+    --ab-color-aql-token-keyword: #a21caf;
+    --ab-color-aql-token-punctuation: var(--ab-color-foreground);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :root {
+      --ab-color-aql-token-punctuation: color-mix(in srgb, var(--ab-color-foreground) 55%, transparent);
+    }
+  }
+  :root {
+    --ab-color-aql-ref-0: #ed7d31;
+    --ab-color-aql-ref-1: #a02b93;
+    --ab-color-aql-ref-2: #70ad47;
+    --ab-color-aql-ref-3: #c00000;
+    --ab-color-aql-ref-4: #ffc000;
+    --ab-color-aql-ref-5: #833c0c;
+    --ab-color-aql-ref-6: #548235;
+    --ab-color-aql-ref-7: #7030a0;
+    --ab-color-formula-trace-source: var(--ab-color-accent);
     --ab-gridheader--filtered__background: var(--ab-color-primary);
   }
   .infinite-theme-name--default.infinite-theme-name--default.infinite-theme-name--default.infinite-theme-name--default {
@@ -6964,10 +7068,6 @@
     --ab-cmp-icon__fill: var(--ab-icon-fill);
     --ab-cmp-icon__height: 17px;
     --ab-cmp-icon__width: 17px;
-    --ab-cmp-wizard__padding: calc(var(--ab-base-space) * 16);
-    --ab-cmp-wizard__margin: var(--ab-base-space);
-    --ab-cmp-wizard__background: var(--ab-color-primary);
-    --ab-cmp-wizard__color: var(--ab-color-primary-foreground);
     --ab-cmp-button-border-radius: 0px;
     --ab-cmp-button-disabled-opacity: 0.5;
     --ab-cmp-button-background: var(--ab-color-primary);
@@ -7157,63 +7257,34 @@
     --ab-cmp-expression-editor-input-dropdown-functions-list__border: 1px solid
     var(--ab-color-primarydark);
     --ab-cmp-expression-editor-input-dropdown-functions-list__border-radius: var(--ab-border-radius);
-    --ab-aql-ref-color-0: #ed7d31;
-    --ab-aql-ref-color-1: #a02b93;
-    --ab-aql-ref-color-2: #70ad47;
-    --ab-aql-ref-color-3: #c00000;
-    --ab-aql-ref-color-4: #ffc000;
-    --ab-aql-ref-color-5: #833c0c;
-    --ab-aql-ref-color-6: #548235;
-    --ab-aql-ref-color-7: #7030a0;
-    --ab-aql-token-column: #1d4ed8;
-    --ab-aql-token-function: #7c3aed;
-    --ab-aql-token-lookup: #0d9488;
-    --ab-aql-token-operator: #b45309;
-    --ab-aql-token-number: #0f766e;
-    --ab-aql-token-string: #9a3412;
-    --ab-aql-token-keyword: #a21caf;
-    --ab-aql-token-punctuation: var(--ab-color-foreground);
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    :root {
-      --ab-aql-token-punctuation: color-mix(in srgb, var(--ab-color-foreground) 55%, transparent);
-    }
-  }
-  :root {
-    --ab-aql-editor__background: var(--ab-color-background);
-    --ab-aql-editor__foreground: var(--ab-color-foreground);
-    --ab-aql-editor__border: var(--ab-color-primarydark);
-    --ab-aql-editor__selection: var(--ab-color-accent);
+    --ab-cmp-aql-editor__background: var(--ab-color-background);
+    --ab-cmp-aql-editor__foreground: var(--ab-color-foreground);
+    --ab-cmp-aql-editor__border: var(--ab-color-primarydark);
+    --ab-cmp-aql-editor__selection: var(--ab-color-accent);
   }
   @supports (color: color-mix(in lab, red, red)) {
     :root {
-      --ab-aql-editor__selection: color-mix(in srgb, var(--ab-color-accent) 28%, transparent);
+      --ab-cmp-aql-editor__selection: color-mix(in srgb, var(--ab-color-accent) 28%, transparent);
     }
   }
   :root {
-    --ab-aql-editor__placeholder: var(--ab-color-foreground);
+    --ab-cmp-aql-editor__placeholder: var(--ab-color-foreground);
   }
   @supports (color: color-mix(in lab, red, red)) {
     :root {
-      --ab-aql-editor__placeholder: color-mix(in srgb, var(--ab-color-foreground) 45%, transparent);
+      --ab-cmp-aql-editor__placeholder: color-mix(in srgb, var(--ab-color-foreground) 45%, transparent);
     }
   }
-  :root.ab--theme-dark {
-    --ab-aql-token-column: #93c5fd;
-    --ab-aql-token-function: #d8b4fe;
-    --ab-aql-token-lookup: #2dd4bf;
-    --ab-aql-token-operator: #fdba74;
-    --ab-aql-token-number: #5eead4;
-    --ab-aql-token-string: #fdba74;
-    --ab-aql-token-keyword: #f0abfc;
-  }
   .ab-AqlCodeMirror {
+    display: flex;
+    flex-direction: column;
     width: 100%;
     min-height: 0;
+    overflow: hidden;
     border-radius: var(--ab-border-radius);
-    border: 1px solid var(--ab-aql-editor__border);
-    background: var(--ab-aql-editor__background);
-    color: var(--ab-aql-editor__foreground);
+    border: 1px solid var(--ab-cmp-aql-editor__border);
+    background: var(--ab-cmp-aql-editor__background);
+    color: var(--ab-cmp-aql-editor__foreground);
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     box-shadow: inset 0 1px 3px var(--ab-color-primary-foreground);
   }
@@ -7222,6 +7293,14 @@
       box-shadow: inset 0 1px 3px color-mix(in srgb, var(--ab-color-primary-foreground) 12%, transparent);
     }
   }
+  .ab-AqlCodeMirror:focus-within {
+    box-shadow: 0 0 0 3px var(--ab-color-ring, var(--ab-color-accent));
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ab-AqlCodeMirror:focus-within {
+      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-color-ring, var(--ab-color-accent)) 50%, transparent);
+    }
+  }
   .ab-AqlCodeMirror--full {
     min-height: 150px;
     font-size: var(--ab-font-size-4, 1rem);
@@ -7236,20 +7315,13 @@
     pointer-events: none;
   }
   .ab-AqlCodeMirror .cm-editor {
+    flex: 1;
+    min-height: 0;
     height: 100%;
     background: transparent;
   }
   .ab-AqlCodeMirror .cm-editor.cm-focused {
     outline: none;
-    box-shadow: 0 0 0 3px var(--ab-color-ring, var(--ab-color-accent));
-  }
-  @supports (color: color-mix(in lab, red, red)) {
-    .ab-AqlCodeMirror .cm-editor.cm-focused {
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-color-ring, var(--ab-color-accent)) 50%, transparent);
-    }
-  }
-  .ab-AqlCodeMirror .cm-editor.cm-focused {
-    border-radius: inherit;
   }
   .ab-AqlCodeMirror .cm-scroller {
     padding: calc(var(--ab-base-space, 4px) * 2);
@@ -7261,13 +7333,13 @@
     padding-right: calc(var(--ab-base-space, 4px) * 6);
   }
   .ab-AqlCodeMirror .cm-content {
-    caret-color: var(--ab-aql-editor__foreground);
+    caret-color: var(--ab-cmp-aql-editor__foreground);
   }
   .ab-AqlCodeMirror .cm-selectionBackground, .ab-AqlCodeMirror .cm-editor ::selection {
-    background: var(--ab-aql-editor__selection) !important;
+    background: var(--ab-cmp-aql-editor__selection) !important;
   }
   .ab-AqlCodeMirror .cm-placeholder {
-    color: var(--ab-aql-editor__placeholder);
+    color: var(--ab-cmp-aql-editor__placeholder);
     font-style: normal;
   }
   .ab-AqlCodeMirror .cm-tooltip.cm-tooltip-autocomplete {
@@ -7434,55 +7506,55 @@
     font-style: normal;
   }
   .ab-AqlCodeMirror__token--column {
-    color: var(--ab-aql-token-column);
+    color: var(--ab-color-aql-token-column);
   }
   .ab-AqlCodeMirror__token--function {
-    color: var(--ab-aql-token-function);
+    color: var(--ab-color-aql-token-function);
   }
   .ab-AqlCodeMirror__token--lookup {
-    color: var(--ab-aql-token-lookup);
+    color: var(--ab-color-aql-token-lookup);
   }
   .ab-AqlCodeMirror__token--operator {
-    color: var(--ab-aql-token-operator);
+    color: var(--ab-color-aql-token-operator);
   }
   .ab-AqlCodeMirror__token--number {
-    color: var(--ab-aql-token-number);
+    color: var(--ab-color-aql-token-number);
   }
   .ab-AqlCodeMirror__token--duration {
-    color: var(--ab-aql-token-number);
+    color: var(--ab-color-aql-token-number);
   }
   .ab-AqlCodeMirror__token--string {
-    color: var(--ab-aql-token-string);
+    color: var(--ab-color-aql-token-string);
   }
   .ab-AqlCodeMirror__token--keyword {
-    color: var(--ab-aql-token-keyword);
+    color: var(--ab-color-aql-token-keyword);
   }
   .ab-AqlCodeMirror__token--punctuation {
-    color: var(--ab-aql-token-punctuation);
+    color: var(--ab-color-aql-token-punctuation);
   }
   .ab-AqlCodeMirror__ref--0 {
-    color: var(--ab-aql-ref-color-0);
+    color: var(--ab-color-aql-ref-0);
   }
   .ab-AqlCodeMirror__ref--1 {
-    color: var(--ab-aql-ref-color-1);
+    color: var(--ab-color-aql-ref-1);
   }
   .ab-AqlCodeMirror__ref--2 {
-    color: var(--ab-aql-ref-color-2);
+    color: var(--ab-color-aql-ref-2);
   }
   .ab-AqlCodeMirror__ref--3 {
-    color: var(--ab-aql-ref-color-3);
+    color: var(--ab-color-aql-ref-3);
   }
   .ab-AqlCodeMirror__ref--4 {
-    color: var(--ab-aql-ref-color-4);
+    color: var(--ab-color-aql-ref-4);
   }
   .ab-AqlCodeMirror__ref--5 {
-    color: var(--ab-aql-ref-color-5);
+    color: var(--ab-color-aql-ref-5);
   }
   .ab-AqlCodeMirror__ref--6 {
-    color: var(--ab-aql-ref-color-6);
+    color: var(--ab-color-aql-ref-6);
   }
   .ab-AqlCodeMirror__ref--7 {
-    color: var(--ab-aql-ref-color-7);
+    color: var(--ab-color-aql-ref-7);
   }
   .ab-AqlCodeMirror .cm-matchingBracket {
     background-color: var(--ab-color-accent);
@@ -7528,7 +7600,7 @@
   }
   .ab-AqlCodeMirror .cm-lintRange-warning, .ab-AqlCodeMirror .cm-diagnostic-warning {
     background-image: none;
-    border-bottom: 2px wavy var(--ab-color-warning, #ca8a04);
+    border-bottom: 2px wavy var(--ab-color-warn, #ca8a04);
   }
   .ab-AqlCodeMirror .cm-lintRange-info, .ab-AqlCodeMirror .cm-diagnostic-info {
     background-image: none;
@@ -7617,10 +7689,10 @@
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
     font-weight: 600;
     font-size: var(--ab-font-size-3, 0.875rem);
-    color: var(--ab-aql-token-function);
+    color: var(--ab-color-aql-token-function);
   }
   .ab-AqlCodeMirror__hover-name--column {
-    color: var(--ab-aql-token-column);
+    color: var(--ab-color-aql-token-column);
   }
   .ab-AqlCodeMirror__hover-notation {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
@@ -7755,63 +7827,55 @@
     border-color: transparent var(--ab-CellComment-triangle-color) transparent transparent;
   }
   :root {
-    --ab-formula-trace-color-0: var(--ab-aql-ref-color-0, #ed7d31);
-    --ab-formula-trace-color-1: var(--ab-aql-ref-color-1, #a02b93);
-    --ab-formula-trace-color-2: var(--ab-aql-ref-color-2, #70ad47);
-    --ab-formula-trace-color-3: var(--ab-aql-ref-color-3, #c00000);
-    --ab-formula-trace-color-4: var(--ab-aql-ref-color-4, #ffc000);
-    --ab-formula-trace-color-5: var(--ab-aql-ref-color-5, #833c0c);
-    --ab-formula-trace-color-6: var(--ab-aql-ref-color-6, #548235);
-    --ab-formula-trace-color-7: var(--ab-aql-ref-color-7, #7030a0);
-    --ab-formula-trace-outline-width: 2px;
-    --ab-formula-trace-outline-style: dashed;
-    --ab-formula-trace-outline-offset: -2px;
-    --ab-formula-trace-cell-tint: 10%;
+    --ab-cmp-formula-trace__outline-width: 2px;
+    --ab-cmp-formula-trace__outline-style: dashed;
+    --ab-cmp-formula-trace__outline-offset: -2px;
+    --ab-cmp-formula-trace__cell-tint: 10%;
   }
   .ab-FormulaTrace--0, .ab-FormulaTracePopup__token--0 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-0);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-0);
   }
   .ab-FormulaTrace--1, .ab-FormulaTracePopup__token--1 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-1);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-1);
   }
   .ab-FormulaTrace--2, .ab-FormulaTracePopup__token--2 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-2);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-2);
   }
   .ab-FormulaTrace--3, .ab-FormulaTracePopup__token--3 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-3);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-3);
   }
   .ab-FormulaTrace--4, .ab-FormulaTracePopup__token--4 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-4);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-4);
   }
   .ab-FormulaTrace--5, .ab-FormulaTracePopup__token--5 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-5);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-5);
   }
   .ab-FormulaTrace--6, .ab-FormulaTracePopup__token--6 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-6);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-6);
   }
   .ab-FormulaTrace--7, .ab-FormulaTracePopup__token--7 {
-    --ab-formula-trace-color: var(--ab-formula-trace-color-7);
+    --ab-cmp-formula-trace__color: var(--ab-color-aql-ref-7);
   }
   .ab-FormulaTrace__source {
-    outline: var(--ab-formula-trace-outline-width) solid var(--ab-formula-trace-source-color, var(--ab-color-accent, #4472c4)) !important;
-    outline-offset: var(--ab-formula-trace-outline-offset);
+    outline: var(--ab-cmp-formula-trace__outline-width) solid var(--ab-color-formula-trace-source) !important;
+    outline-offset: var(--ab-cmp-formula-trace__outline-offset);
   }
   .ab-FormulaTrace {
-    outline: var(--ab-formula-trace-outline-width) var(--ab-formula-trace-outline-style) var(--ab-formula-trace-color) !important;
-    outline-offset: var(--ab-formula-trace-outline-offset);
-    background-color: var(--ab-formula-trace-color) !important;
+    outline: var(--ab-cmp-formula-trace__outline-width) var(--ab-cmp-formula-trace__outline-style) var(--ab-cmp-formula-trace__color) !important;
+    outline-offset: var(--ab-cmp-formula-trace__outline-offset);
+    background-color: var(--ab-cmp-formula-trace__color) !important;
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ab-FormulaTrace {
-      background-color: color-mix( in srgb, var(--ab-formula-trace-color) var(--ab-formula-trace-cell-tint), transparent ) !important;
+      background-color: color-mix( in srgb, var(--ab-cmp-formula-trace__color) var(--ab-cmp-formula-trace__cell-tint), transparent ) !important;
     }
   }
   .ab-FormulaTracePopup {
-    --ab-formula-trace-popup-bg: var(--ab-color-background);
+    --ab-cmp-formula-trace-popup__background: var(--ab-color-background);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ab-FormulaTracePopup {
-      --ab-formula-trace-popup-bg: color-mix(
+      --ab-cmp-formula-trace-popup__background: color-mix(
     in srgb,
     var(--ab-color-background) 90%,
     var(--ab-color-primary-foreground) 10%
@@ -7819,11 +7883,11 @@
     }
   }
   .ab-FormulaTracePopup {
-    --ab-formula-trace-popup-border: var(--ab-color-primary-foreground);
+    --ab-cmp-formula-trace-popup__border: var(--ab-color-primary-foreground);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ab-FormulaTracePopup {
-      --ab-formula-trace-popup-border: color-mix(
+      --ab-cmp-formula-trace-popup__border: color-mix(
     in srgb,
     var(--ab-color-primary-foreground) 18%,
     transparent
@@ -7831,11 +7895,11 @@
     }
   }
   .ab-FormulaTracePopup {
-    --ab-formula-trace-popup-shadow: var(--ab-color-primary-foreground);
+    --ab-cmp-formula-trace-popup__shadow: var(--ab-color-primary-foreground);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ab-FormulaTracePopup {
-      --ab-formula-trace-popup-shadow: color-mix(
+      --ab-cmp-formula-trace-popup__shadow: color-mix(
     in srgb,
     var(--ab-color-primary-foreground) 14%,
     transparent
@@ -7846,16 +7910,16 @@
     min-width: 220px;
     max-width: 420px;
     border-radius: calc(var(--ab-base-space, 2px) * 2);
-    box-shadow: 0 1px 2px var(--ab-color-primary-foreground), 0 8px 20px var(--ab-formula-trace-popup-shadow);
+    box-shadow: 0 1px 2px var(--ab-color-primary-foreground), 0 8px 20px var(--ab-cmp-formula-trace-popup__shadow);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .ab-FormulaTracePopup {
-      box-shadow: 0 1px 2px color-mix(in srgb, var(--ab-color-primary-foreground) 8%, transparent), 0 8px 20px var(--ab-formula-trace-popup-shadow);
+      box-shadow: 0 1px 2px color-mix(in srgb, var(--ab-color-primary-foreground) 8%, transparent), 0 8px 20px var(--ab-cmp-formula-trace-popup__shadow);
     }
   }
   .ab-FormulaTracePopup.ab-Panel, .ab-FormulaTracePopup .ab-Panel__body {
-    background-color: var(--ab-formula-trace-popup-bg) !important;
-    border-color: var(--ab-formula-trace-popup-border) !important;
+    background-color: var(--ab-cmp-formula-trace-popup__background) !important;
+    border-color: var(--ab-cmp-formula-trace-popup__border) !important;
     color: var(--ab-color-primary-foreground);
   }
   .ab-FormulaTracePopup__formula {
@@ -7903,7 +7967,7 @@
   }
   .ab-FormulaTracePopup__token {
     font-weight: 600;
-    color: var(--ab-formula-trace-color);
+    color: var(--ab-cmp-formula-trace__color);
   }
   .ab-FormulaTracePopup__token--hidden {
     text-decoration: line-through;
@@ -8918,133 +8982,6 @@
   .ab-ModuleSelector__UnusedGroups--row .ab-ModuleSelector__UnusedPanel {
     margin-bottom: 0;
   }
-  .ab-ColorPicker-swatch {
-    width: 36px;
-    height: 24px;
-    min-height: 24px !important;
-    padding: 0;
-    box-sizing: border-box;
-    flex-shrink: 0;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-swatch::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
-  .ab-ColorPicker-swatch::-webkit-color-swatch {
-    border: none;
-    border-radius: calc(var(--ab-border-radius-input, 4px) - 1px);
-  }
-  .ab-ColorPicker-swatch::-moz-color-swatch {
-    border: none;
-  }
-  .ab-OptionalColorPicker-empty {
-    width: 36px;
-    height: 24px;
-    min-height: 24px;
-    padding: 0;
-    border: 1px dashed var(--ab-color-border, #ccc);
-    border-radius: var(--ab-border-radius-input, 4px);
-    cursor: pointer;
-    background-color: #fff;
-    background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
-    background-size: 6px 6px;
-    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
-  }
-  .ab-OptionalColorPicker-empty:hover:not(:disabled) {
-    border-color: var(--ab-color-accent, #43429e);
-  }
-  .ab-OptionalColorPicker-empty:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-  }
-  .ab-ColorPicker-range[type='range'] {
-    width: 120px;
-    margin: 0;
-    height: 12px !important;
-    min-height: 12px !important;
-    padding: 0;
-    border-radius: 6px;
-    -webkit-appearance: none;
-    appearance: none;
-  }
-  .ab-ColorPicker-range[type='range']:focus {
-    outline: none;
-  }
-  .ab-ColorPicker-range[type='range']::-webkit-slider-runnable-track {
-    background: transparent;
-    border: 0;
-    width: 100%;
-    height: 12px;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-range[type='range']::-webkit-slider-thumb {
-    margin-top: -4px;
-    width: 20px;
-    height: 20px;
-    background: #ffffff;
-    border: 1px solid #000000;
-    border-radius: 50%;
-    cursor: pointer;
-    -webkit-appearance: none;
-    box-sizing: border-box;
-  }
-  .ab-ColorPicker-range[type='range']:focus::-webkit-slider-runnable-track {
-    background: none;
-  }
-  .ab-ColorPicker-range[type='range']::-moz-range-track {
-    background: transparent;
-    border: 0;
-    width: 100%;
-    height: 12px;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-range[type='range']::-moz-range-thumb {
-    width: 20px;
-    height: 20px;
-    background: #ffffff;
-    border: 1px solid #000000;
-    border-radius: 50%;
-    cursor: pointer;
-    box-sizing: border-box;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-track {
-    background: transparent;
-    border-color: transparent;
-    border-width: 1px 0;
-    color: transparent;
-    width: 100%;
-    height: 12px;
-    cursor: pointer;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-fill-lower {
-    background: #43429e;
-    border: 0;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-fill-upper {
-    background: none;
-    border: 0;
-  }
-  .ab-ColorPicker-range[type='range']::-ms-thumb {
-    width: 20px;
-    height: 20px;
-    background: #ffffff;
-    border: 1px solid #000000;
-    border-radius: 50%;
-    cursor: pointer;
-    margin-top: 0px;
-    box-sizing: border-box;
-  }
-  .ab-ColorPicker-range[type='range']:focus::-ms-fill-lower {
-    background: none;
-  }
-  .ab-ColorPicker-range[type='range']:focus::-ms-fill-upper {
-    background: none;
-  }
-  @supports (-ms-ime-align: auto) {
-    .ab-ColorPicker-range[type='range'] {
-      margin: 0;
-    }
-  }
   .ab-AdaptableOptions {
     background: var(--ab-cmp-adaptable-options__background-color);
   }
@@ -9099,21 +9036,6 @@
     bottom: calc(var(--ab-popover-triangle-size) * -1);
     transform: translate3d(calc(var(--ab-popover-triangle-size) * -0.5), 0px, 0px);
   }
-  .ab-NocodeWizard,.ab-NocodeWizard *,.ab-NocodeWizard *:before,.ab-NocodeWizard *:after {
-    box-sizing: border-box;
-  }
-  .ab-NocodeWizard {
-    padding: var(--ab-cmp-wizard__padding);
-    margin: var(--ab-cmp-wizard__margin);
-    background: var(--ab-cmp-wizard__background);
-    color: var(--ab-cmp-wizard__color);
-    height: 100%;
-  }
-  .ab-NocodeWizardFormBox {
-    border: 1px solid var(--ab-color-primarydark);
-    border-radius: var(--ab-border-radius);
-    background-color: var(--ab-color-background);
-  }
   .ab-Button.ab-Button {
     border-radius: var(--ab-cmp-button-border-radius);
     padding: calc(var(--ab-base-space) * 2);
@@ -9583,6 +9505,10 @@
     min-width: 0;
     max-width: none;
     width: 100%;
+    --ab-color-input-background: var(--ab-color-primarylight);
+  }
+  .ab--theme-dark .ab-AgGridColumnFilter-host--tool-panel, .ab--theme-dark .ab-ColumnFilter--tool-panel {
+    --ab-color-input-background: unset;
   }
   .ab-IconSelector__Popup {
     color: var(--ab-cmp-icon-selector__popup__color);
@@ -10422,6 +10348,13 @@
     --ab-cmp-checkbox--checked__border-color: var(--ab-color-accent);
     --ab-cmp-tabs-inactive__opacity: 0.78;
     --ab-cmp-adaptable-popup-navigation-header-divider__color: #343a46;
+    --ab-color-aql-token-column: #93c5fd;
+    --ab-color-aql-token-function: #d8b4fe;
+    --ab-color-aql-token-lookup: #2dd4bf;
+    --ab-color-aql-token-operator: #fdba74;
+    --ab-color-aql-token-number: #5eead4;
+    --ab-color-aql-token-string: #fdba74;
+    --ab-color-aql-token-keyword: #f0abfc;
   }
   .ab--theme-dark input.ab-Input[type='number']::-webkit-outer-spin-button,.ab--theme-dark input.ab-Input[type='number']::-webkit-inner-spin-button {
     background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" viewBox="4 0 18 18" version="1.1"><path fill="%23f7f7f7" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23f7f7f7" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center;
@@ -10553,6 +10486,59 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-duration {
   syntax: "*";
   inherits: false;
@@ -10571,6 +10557,21 @@
   initial-value: "";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -10673,10 +10674,26 @@
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
       --tw-duration: initial;
       --tw-text-shadow-color: initial;
       --tw-text-shadow-alpha: 100%;
       --tw-content: "";
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-angular-aggrid",
-  "version": "24.0.0-canary.0",
+  "version": "24.0.0-canary.10",
   "description": "Angular version of AdapTable - the powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "license": "contact sales@adaptabletools.com for details",
   "peerDependencies": {
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "tslib": "^2.8.1",
-    "@adaptabletools/adaptable": "24.0.0-canary.0"
+    "@adaptabletools/adaptable": "24.0.0-canary.10"
   },
   "exports": {
     "./index.css": "./index.css",