@adaptabletools/adaptable 11.0.0-canary.4 → 11.0.0-canary.5

package/index.css

@@ -1816,7 +1816,7 @@ template {
   --ab-color-text-on-error: white;
   --ab-color-text-on-info: white;
   --ab-color-text-on-warn: white;
-  --ab-color-action-add: #2966A8;
+  --ab-color-action-add: #2966a8;
   --ab-color-action-edit: #17a2b8;
   --ab-color-action-share: #eb9316;
   --ab-color-action-delete: #dc3545;
@@ -1833,12 +1833,12 @@ template {
   --ab-color-primarylight: #f5f5f5;
   --ab-color-text-on-primary: #656565;
   --ab-color-text-on-primarydark: var(--ab-color-text-on-primary);
-  --ab-color-secondary: #2966A8;
+  --ab-color-secondary: #2966a8;
   --ab-color-secondarydark: #015a9a;
   --ab-color-secondarylight: #a9ddff;
-  --ab-color-text-on-secondary: #E2E2E2;
+  --ab-color-text-on-secondary: #e2e2e2;
   --ab-color-text-on-secondarylight: #000000;
-  --ab-color-blue:   #419641;
+  --ab-color-blue: #419641;
   --ab-color-focus: var(--ab-color-accent);
   --ab-gridheader--filtered__background: var(--ab-color-primary);
   --ab-focus__box-shadow: 0 0 5px 1px var(--ab-color-accent);
@@ -1850,18 +1850,18 @@ template {
   --ab-loaded: 777; }
 
 :root {
-  --ITableHeader__color:var(--ab-color-text-on-primary);
+  --ITableHeader__color: var(--ab-color-text-on-primary);
   --ITableHeaderCell__background: var(--ab-color-primary);
   --ITableHeader__background: var(--ITableHeaderCell__background);
-  --ITableRow__color:var(--ab-color-text-on-primary);
+  --ITableRow__color: var(--ab-color-text-on-primary);
   --ITable__background: var(--ab-color-primarylight);
   --ITableRow__background: var(--ab-color-defaultbackground);
   --ITableRow--odd__background: var(--ab-color-primarylight); }
 
-.ab-style__list-group-item:nth-child(2n+1) {
+.ab-style__list-group-item:nth-child(2n + 1) {
   background: var(--ab-color-primarylight); }
 
-.ab-Grid .ag-header-cell input[type="date" i]::-webkit-calendar-picker-indicator {
+.ab-Grid .ag-header-cell input[type='date' i]::-webkit-calendar-picker-indicator {
   margin-inline-start: 0px; }
 
 .ab-Grid.ab-Grid--indicate-filtered-columns .ag-header-cell-filtered {
@@ -1878,13 +1878,19 @@ template {
   --ab-cmp-checkbox--check-indeterminate-radius: 2px; }
 
 .ab-CheckBox--variant-agGrid {
-  --ab-cmp-checkbox--check__color: var(--ag-checkbox-checked-color, var(--ag-balham-active-color, #0091ea));
+  --ab-cmp-checkbox--check__color: var(
+    --ag-checkbox-checked-color,
+    var(--ag-balham-active-color, #0091ea)
+  );
   --ab-cmp-checkbox--checked__background: var(--ag-background-color);
   --ab-cmp-checkbox__border-color: var(--ab-cmp-checkbox--check__color);
   --ab-cmp-checkbox--check-indeterminate__color: var(--ab-cmp-checkbox__border-color); }
 
 .ab-CheckBox--variant-agGrid.ab-CheckBox--indeterminate {
-    --ab-cmp-checkbox--check__color: var(--ag-checkbox-checked-color, var(--ag-balham-active-color, #0091ea)); }
+    --ab-cmp-checkbox--check__color: var(
+      --ag-checkbox-checked-color,
+      var(--ag-balham-active-color, #0091ea)
+    ); }
 
 .ab-CheckBox--variant-agGrid.ab-CheckBox--unchecked {
     --ab-cmp-checkbox__border-color: var(--ag-checkbox-unchecked-color); }
@@ -1915,7 +1921,8 @@ template {
   --ab-cmp-dropdownbutton-list-item__color: var(--ab-color-text-on-primary);
   --ab-cmp-dropdownbutton-list__z-index: 1000;
   --ab-cmp-dropdownbutton-list__border-radius: var(--ab__border-radius);
-  --ab-cmp-dropdownbutton-list__box-shadow: 4px 5px 11px -5px rgba(0, 0, 0, .2), -4px 6px 5px 0 rgba(0, 0, 0, .14), 5px 3px 5px 0 rgba(0, 0, 0, .12);
+  --ab-cmp-dropdownbutton-list__box-shadow: 4px 5px 11px -5px rgba(0, 0, 0, 0.2),
+    -4px 6px 5px 0 rgba(0, 0, 0, 0.14), 5px 3px 5px 0 rgba(0, 0, 0, 0.12);
   --ab-cmp-dropdownbutton-list-separator__border: 1px solid var(--ab-color-primarydark); }
 
 :root {
@@ -1969,7 +1976,7 @@ template {
   color: var(--ab-cmp-listgroupitem__color);
   border-radius: var(--ab-cmp-listgroupitem__border-radius); }
 
-.ab-ListGroupItem:nth-child(2n+1) {
+.ab-ListGroupItem:nth-child(2n + 1) {
     background: var(--ab-cmp-listgroupitem--odd__background);
     color: var(--ab-cmp-listgroupitem--odd__color); }
 
@@ -2048,7 +2055,8 @@ template {
   --ab-cmp-file-droppable--drag-over__background: var(--ab-color-secondary);
   --ab-cmp-file-droppable--drag-over__color: var(--ab-color-text-on-secondary);
   --ab-cmp-file-droppable--drag-over__outline-offset: -20px;
-  --ab-cmp-file-droppable--drag-over__outline: 2px dashed var(--ab-cmp-file-droppable--drag-over__color); }
+  --ab-cmp-file-droppable--drag-over__outline: 2px dashed
+    var(--ab-cmp-file-droppable--drag-over__color); }
 
 :root {
   --ab-dashboard__background: var(--ab-color-primary);
@@ -2103,7 +2111,7 @@ template {
   --ab-cmp-button-border-radius: 0px;
   --ab-cmp-button-disabled-opacity: 0.5;
   --ab-cmp-button-background: var(--ab-color-primary);
-  --ab-cmp-button-disabled-background:var(--ab-color-primarydark); }
+  --ab-cmp-button-disabled-background: var(--ab-color-primarydark); }
 
 :root {
   --ab-cmp-dashboardpanel_body__background: var(--ab-color-primarylight);
@@ -2131,13 +2139,14 @@ template {
   overflow: auto;
   display: grid;
   padding: var(--ab-space-2);
-  grid-template-rows: 1fr  1fr;
+  grid-template-rows: 1fr 1fr;
   grid-template-columns: 28rem 1fr 1fr;
   row-gap: var(--ab-space-2);
   column-gap: var(--ab-space-2);
   grid-gap: var(--ab-space-2); }
 
-.ab-LayoutEditor, .ab-LayoutEditor * {
+.ab-LayoutEditor,
+  .ab-LayoutEditor * {
     box-sizing: border-box; }
 
 .ab-LayoutEditor__ColumnList {
@@ -2235,17 +2244,22 @@ template {
   --ab-cmp-adaptable-popup__max-height: 1200px;
   --ab-cmp-adaptable-popup__box-shadow: 2px 2px 14px 0px rgb(0 0 0 / 26%);
   --ab-cmp-adaptable-popup-navigation-list__padding: var(--ab-space-1) var(--ab-space-2);
-  --ab-cmp-adaptable-popup-navigation-list__border-right: 2px solid var(--ab-color-defaultbackground);
+  --ab-cmp-adaptable-popup-navigation-list__border-right: 2px solid
+    var(--ab-color-defaultbackground);
   --ab-cmp-adaptable-popup-navigation-list__font-size: var(--ab-font-size-3);
   --ab-cmp-adaptable-popup-navigation-list-item__padding: var(--ab-space-0) var(--ab-space-1);
   --ab-cmp-adaptable-popup-navigation-list-item__margin-bottom: var(--ab-space-2) var(--ab-space-2);
-  --ab-cmp-adaptable-popup-navigation-list-item-separator__border: 1px solid var(--ab-color-primarydark);
-  --ab-cmp-adaptable-popup-navigation-list-item-separator__margin: var(--ab-space-2) var(--ab-space-2);
+  --ab-cmp-adaptable-popup-navigation-list-item-separator__border: 1px solid
+    var(--ab-color-primarydark);
+  --ab-cmp-adaptable-popup-navigation-list-item-separator__margin: var(--ab-space-2)
+    var(--ab-space-2);
   --ab-cmp-adaptable-popup-navigation-list-item-button__padding: var(--ab-space-2) var(--ab-space-2);
   --ab-cmp-adaptable-popup-navigation-list-item-button__border-radius: var(--ab__border-radius);
   --ab-cmp-adaptable-popup-navigation-list-item-button__color: var(--ab-color-text-on-primary);
   --ab-cmp-adaptable-popup-navigation-list-item-button__background--active: var(--ab-color-focus);
-  --ab-cmp-adaptable-popup-navigation-list-item-button__background--color: var(--ab-color-accentlight);
+  --ab-cmp-adaptable-popup-navigation-list-item-button__background--color: var(
+    --ab-color-accentlight
+  );
   --ab-cmp-adaptable-popup-navigation-list-item-icon__margin-right: var(--ab-space-2);
   --ab-cmp-adaptable-popup-topbar__background: var(--ab-color-secondary);
   --ab-cmp-adaptable-popup-topbar__height: 45px;
@@ -2315,7 +2329,10 @@ template {
 .ab-Table tr:not(last-child) td {
   border-bottom: 1px solid var(--ab-color-primarylight); }
 
-.ab-CheckBox, .ab-CheckBox *, .ab-CheckBox *:before, .ab-CheckBox *:after {
+.ab-CheckBox,
+.ab-CheckBox *,
+.ab-CheckBox *:before,
+.ab-CheckBox *:after {
   box-sizing: border-box; }
 
 .ab-CheckBox--checked {
@@ -2526,11 +2543,15 @@ template {
 .ab-FieldWrap:focus-within {
     box-shadow: var(--ab-focus__box-shadow); }
 
-.ab-FieldWrap input, .ab-FieldWrap select, .ab-FieldWrap > * {
+.ab-FieldWrap input,
+  .ab-FieldWrap select,
+  .ab-FieldWrap > * {
     border: none;
     flex: 1; }
 
-.ab-FieldWrap input, .ab-FieldWrap select, .ab-FieldWrap .ab-Dropdown {
+.ab-FieldWrap input,
+  .ab-FieldWrap select,
+  .ab-FieldWrap .ab-Dropdown {
     outline: none !important;
     box-shadow: none !important; }
 
@@ -2604,8 +2625,8 @@ input.ab-Input[disabled] {
 
 /* Spin Buttons modified */
 
-input[type="number"].ab-Input::-webkit-outer-spin-button,
-input[type="number"].ab-Input::-webkit-inner-spin-button {
+input[type='number'].ab-Input::-webkit-outer-spin-button,
+input[type='number'].ab-Input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   width: 1em;
   opacity: 0;
@@ -2615,9 +2636,9 @@ input[type="number"].ab-Input::-webkit-inner-spin-button {
   bottom: 0;
   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="%23656565" d="M7 10l5 5 5-5z" transform="translate(0, 2)"/><path fill="%23656565" d="M7 14l5-5 5 5z" transform="translate(0, -6)"/></svg>') no-repeat center center; }
 
-input[type="number"].ab-Input:focus::-webkit-inner-spin-button, input[type="number"].ab-Input:focus::-webkit-inner-spin-button:active,
-input[type="number"].ab-Input:hover::-webkit-inner-spin-button,
-input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
+input[type='number'].ab-Input:focus::-webkit-inner-spin-button, input[type='number'].ab-Input:focus::-webkit-inner-spin-button:active,
+input[type='number'].ab-Input:hover::-webkit-inner-spin-button,
+input[type='number'].ab-Input:hover::-webkit-inner-spin-button:active {
   opacity: 1; }
 
 .ab-ListGroup {
@@ -2660,7 +2681,7 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
   display: flex;
   flex-direction: column; }
 
-.ab-Tabs[data-selected-index="0"] .ab-Tabs__Filler:first-child,
+.ab-Tabs[data-selected-index='0'] .ab-Tabs__Filler:first-child,
 .ab-Tabs__Tab--before-active {
   border-bottom-right-radius: var(--ab__border-radius); }
 
@@ -2725,7 +2746,7 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
   display: flex;
   flex-flow: column; }
 
-.ab-Tabs[data-selected-index="0"] .ab-Tabs__Body {
+.ab-Tabs[data-selected-index='0'] .ab-Tabs__Body {
   border-top-left-radius: 0; }
 
 .ab-Panel {
@@ -2740,8 +2761,7 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
     fill: var(--ab-cmp-panel-icon__fill); }
 
 .ab-Panel--variant-modern {
-    --ab-cmp-panel__border-radius: var(--ab-space-1)
-  ; }
+    --ab-cmp-panel__border-radius: var(--ab-space-1); }
 
 .ab-Panel__header {
     flex: none;
@@ -2991,11 +3011,16 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
   outline-offset: var(--ab-cmp-file-droppable__outline-offset);
   background: var(--ab-cmp-file-droppable__background); }
 
-.ab-FileDroppable, .ab-FileDroppable input, .ab-FileDroppable button, .ab-FileDroppable .ab-SimpleButton {
+.ab-FileDroppable,
+  .ab-FileDroppable input,
+  .ab-FileDroppable button,
+  .ab-FileDroppable .ab-SimpleButton {
     transition: fill 0.15s ease-in-out, color 0.15s ease-in-out, outline-offset 0.15s ease-in-out, background-color 0.15s linear;
     fill: currentColor; }
 
-.ab-FileDroppable, .ab-FileDroppable input, .ab-FileDroppable button {
+.ab-FileDroppable,
+  .ab-FileDroppable input,
+  .ab-FileDroppable button {
     color: var(--ab-cmp-file-droppable__color); }
 
 .ab-FileDroppable.ab-FileDroppable--drag-over {
@@ -3007,7 +3032,10 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
 .ab-FileDroppable.ab-FileDroppable--drag-over * {
       pointer-events: none; }
 
-.ab-FileDroppable, .ab-FileDroppable *, .ab-FileDroppable *:before, .ab-FileDroppable *:after {
+.ab-FileDroppable,
+  .ab-FileDroppable *,
+  .ab-FileDroppable *:before,
+  .ab-FileDroppable *:after {
     box-sizing: border-box; }
 
 .ab-WizardPanel > .ab-Panel__body {
@@ -3126,13 +3154,17 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
 .ab-Dashboard .ab-DashboardToolbar__QuickSearch__text .ab-Input {
     padding: var(--ab-space-1); }
 
-.ab-Dashboard .ab-StateManagement__Clear-Button, .ab-Dashboard .ab-StateManagement__Load-Button, .ab-Dashboard .ab-StateManagement__Export-Dropdown {
+.ab-Dashboard .ab-StateManagement__Clear-Button,
+  .ab-Dashboard .ab-StateManagement__Load-Button,
+  .ab-Dashboard .ab-StateManagement__Export-Dropdown {
     margin-left: var(--ab-space-1); }
 
 .ab-GridList {
   --at-grid__background: transparent; }
 
-.ab-GridList .AT-GridCell_content, .ab-GridList .ab-ListGroupItem, .ab-GridList .AT-GridColumnCell {
+.ab-GridList .AT-GridCell_content,
+  .ab-GridList .ab-ListGroupItem,
+  .ab-GridList .AT-GridColumnCell {
     width: 100%; }
 
 .ab-GridList .AT-GridHeader {
@@ -3246,7 +3278,7 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
 
 .ab-ToggleButton__slider:before {
     position: absolute;
-    content: "";
+    content: '';
     width: 24px;
     height: 24px;
     left: 4px;
@@ -3283,7 +3315,8 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
   margin-top: 8px;
   font-style: italic; }
 
-.ab-Loader__text, .ab-Loader__Spinner {
+.ab-Loader__text,
+.ab-Loader__Spinner {
   vertical-align: middle; }
 
 .ab-Loader .ab-Loader__Spinner {
@@ -3379,7 +3412,7 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
   overflow-y: auto;
   overflow-x: hidden;
   --ab-grid-row-height: 26px;
-  margin-Bottom: 0; }
+  margin-bottom: 0; }
 
 .ab-ListBoxFilterForm .ab-GridList .AT-VirtualScrollContainer {
     overflow-x: hidden; }
@@ -3437,7 +3470,10 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
   color: var(--ab-cmp-wizard__color);
   height: 100%; }
 
-.ab-nocode-wizard, .ab-nocode-wizard *, .ab-nocode-wizard *:before, .ab-nocode-wizard *:after {
+.ab-nocode-wizard,
+  .ab-nocode-wizard *,
+  .ab-nocode-wizard *:before,
+  .ab-nocode-wizard *:after {
     box-sizing: border-box; }
 
 .ab-AvailableDropZone .placeholder,
@@ -3497,11 +3533,14 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
     flex-wrap: wrap;
     grid-gap: var(--ab-cmp-toolpanel-header__grid-gap); }
 
-.ab-ToolPanel .ab-StateManagement__Clear-Button, .ab-ToolPanel .ab-StateManagement__Load-Button {
+.ab-ToolPanel .ab-StateManagement__Clear-Button,
+  .ab-ToolPanel .ab-StateManagement__Load-Button {
     justify-content: center;
     flex: 1; }
 
-.ab-ToolPanel .ab-StateManagement__Clear-Button, .ab-ToolPanel .ab-StateManagement__Load-Button, .ab-ToolPanel .ab-StateManagement__Export-Dropdown {
+.ab-ToolPanel .ab-StateManagement__Clear-Button,
+  .ab-ToolPanel .ab-StateManagement__Load-Button,
+  .ab-ToolPanel .ab-StateManagement__Export-Dropdown {
     margin-bottom: var(--ab-space-1); }
 
 .ab-CustomSortWizard__SortOrder .ab-Loader__text {
@@ -3725,38 +3764,53 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar {
   background-color: rgba(0, 0, 0, 0);
   border-radius: 100px; }
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar:vertical,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar:vertical,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar:vertical, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar:vertical,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar:vertical, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar:vertical,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar:vertical, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar:vertical {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar:vertical,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar:vertical,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar:vertical,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar:vertical,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar:vertical,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar:vertical {
   width: var(--ab-custom-scrollbar-size); }
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar:horizontal,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar:horizontal,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar:horizontal, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar:horizontal,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar:horizontal, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar:horizontal,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar:horizontal, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar:horizontal {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar:horizontal {
   height: var(--ab-custom-scrollbar-size); }
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar:hover,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar:hover,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar:hover, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar:hover,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar:hover, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar:hover,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar:hover, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar:hover {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar:hover,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar:hover,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar:hover,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar:hover,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar:hover,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar:hover {
   background-color: rgba(0, 0, 0, 0.09); }
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar-thumb,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar-thumb,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.5);
   border-radius: 100px;
   background-clip: padding-box;
@@ -3764,23 +3818,32 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar-thumb:vertical,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar-thumb:vertical,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb:vertical, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb:vertical,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb:vertical, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb:vertical,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb:vertical, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb:vertical {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb:vertical,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb:vertical,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb:vertical,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb:vertical,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb:vertical,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb:vertical {
   min-height: var(--ab-custom-scrollbar-size); }
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar-thumb:horizontal,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar-thumb:horizontal,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb:horizontal, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb:horizontal,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb:horizontal, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb:horizontal,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb:horizontal, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb:horizontal {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb:horizontal,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb:horizontal {
   min-width: var(--ab-custom-scrollbar-size); }
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar-thumb:active,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar-thumb:active,
-.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb:active, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb:active,
-.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb:active, .ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb:active,
-.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb:active, .ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb:active {
+.ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar-thumb:active,
+.ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar-thumb:active,
+.ab--custom-mac-like-scrollbars .ab-Panel ::-webkit-scrollbar-thumb:active,
+.ab--custom-mac-like-scrollbars .ab-Panel * ::-webkit-scrollbar-thumb:active,
+.ab--custom-mac-like-scrollbars .ab-Modal ::-webkit-scrollbar-thumb:active,
+.ab--custom-mac-like-scrollbars .ab-Modal * ::-webkit-scrollbar-thumb:active {
   background: rgba(0, 0, 0, 0.61);
   border-radius: 100px; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "11.0.0-canary.4",
+  "version": "11.0.0-canary.5",
   "description": "Powerful data-agnostic HTML5 datagrid add-on that sits on top of an underlying grid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [
     "web-components",
@@ -56,6 +56,6 @@
     "uuid": "^3.3.2"
   },
   "peerDependencies": {
-    "@ag-grid-community/all-modules": ">=26.2.0"
+    "@ag-grid-community/all-modules": ">=27.0.0"
   }
 }

package/publishTimestamp.d.ts

@@ -1,2 +1,2 @@
-declare const _default: 1644245839064;
+declare const _default: 1645013151802;
 export default _default;

package/publishTimestamp.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 1644245839064;
+exports.default = 1645013151802;

package/src/AdaptableInterfaces/AdaptableNoCodeWizard.d.ts

@@ -25,6 +25,8 @@ export interface AdaptableNoCodeWizardOptions {
 /**
  * When you want to configure an Adaptable via json file D&D, use this instead of the normal Adaptable constructor
  *
+ * @example
+ * ```
  * // So instead of doing
  *
  * const adaptable = new Adaptable(adaptableOptions);
@@ -43,12 +45,12 @@ export interface AdaptableNoCodeWizardOptions {
  * const AdaptableNoCodeWizard = new AdaptableNoCodeWizard(adaptableOptions);
  *
  * // in the most simple case.
- *
+ *```
  * After the user drops the file and configures all the columns and other options,
  * when the "FINISH" button is clicked, we call onInit (which is an optional config), to allow
  * the developer to override some configuration in case this is needed. This is how it looks like:
  *
- *
+ *```
  * const AdaptableNoCodeWizard = new AdaptableNoCodeWizard(adaptableOptions, {
  *    onInit: ({ adaptableOptions, gridOptions }) => {
  *      // here you can either change some of the ab options or the gridOptions
@@ -63,9 +65,9 @@ export interface AdaptableNoCodeWizardOptions {
  *      return adaptable
  *    }
  * });
- *
+ *```
  * you can also have a `prepareData` config
- *
+ *```
  * const AdaptableNoCodeWizard = new AdaptableNoCodeWizard(adaptableOptions, {
  *   prepareData: (dataFromFile) => {
  *     return {
@@ -78,7 +80,7 @@ export interface AdaptableNoCodeWizardOptions {
  *     }
  *   }
  * })
- *
+ *```
  * You can use the prepareData function when you know the json doesn't contain an array of objects, but rather another
  * structure - eg: a single object, a data array nested deeper down in the json file, etc
  *

package/src/AdaptableOptions/AdaptableFrameworkComponent.d.ts

@@ -8,8 +8,6 @@ export declare type AngularFrameworkComponent<T = unknown> = {
     /**
      * The angular component class (instance of https://angular.io/api/core/Type).
      * It will be automatically instantiated at runtime and the `adaptableApi` is provided through an Injection token
-     *
-     * @see https://docs.adaptabletools.com/docs/angular-wrapper/angular-wrapper-custom-toolbars
      */
     type: T;
     /**
@@ -26,7 +24,7 @@ export declare type AngularFrameworkComponent<T = unknown> = {
  * @example
  * ```
  *  () => <MyCustomToolbar />
- *  ```
+ * ```
  */
 export declare type ReactFrameworkComponent = ({ adaptableApi, }: {
     adaptableApi: AdaptableApi;

package/src/AdaptableOptions/AdaptableOptions.d.ts

@@ -21,6 +21,7 @@ import { DataChangeHistoryOptions } from './DataChangeHistoryOptions';
 import { SettingsPanelOptions } from './SettingsPanelOptions';
 import { GridOptions, Module } from '@ag-grid-community/all-modules';
 import { FlashingCellOptions } from './FlashingCellOptions';
+import { AlertOptions } from './AlertOptions';
 /**
  * Group of property options enabling developers to set up AdapTable at design time to fit precise requirements - provides AG Grid, Predefined Config and other information required to ensure a full, rich user experience
  */
@@ -59,7 +60,6 @@ export interface AdaptableOptions {
     /**
      * Will autogenerate a Primary Key; only use as a last resort if no unique column is available, as limits some Adaptable functionalities
      *
-     * @see https://docs.adaptabletools.com/docs/key-topics/primary-key
      * @defaultValue false
      * @gridInfoItem
      */
@@ -77,6 +77,9 @@ export interface AdaptableOptions {
      * @defaultValue n/a (Mandatory)
      */
     gridOptions?: GridOptions;
+    /**
+     * AG Grid Modules that should be provided - needs to be provided separately
+     */
     modules?: Module[];
     /**
      * Options for managing Notifications in AdapTable
@@ -84,6 +87,12 @@ export interface AdaptableOptions {
      * @gridInfoContainer
      */
     notificationsOptions?: NotificationsOptions;
+    /**
+     * Options for managing Alerts in AdapTable
+     *
+     * @gridInfoContainer
+     */
+    alertOptions?: AlertOptions;
     /**
      * Options for setting the 'Div' elements in which AdapTable, AG Grid, popups are placed
      */

package/src/AdaptableOptions/AlertOptions.d.ts

@@ -0,0 +1,82 @@
+import { AlertButton, AlertDefinition } from '../PredefinedConfig/AlertState';
+import { AdaptableAlert } from '../PredefinedConfig/Common/AdaptableAlert';
+import { ButtonContext } from '../PredefinedConfig/Common/AdaptableButton';
+import { AdaptableForm, AdaptableFormData } from '../PredefinedConfig/Common/AdaptableForm';
+import { DataChangedInfo } from '../types';
+/**
+ * Options related to Alerts in Adaptable.
+ */
+export interface AlertOptions {
+    /**
+     * How many alerts held in State at any one time; when limit is breached, oldest alert will be removed
+     *
+     * @defaultValue  20
+     * @gridInfoItem
+     */
+    maxAlertsInStore?: number;
+    /**
+     * How long (in ms) a cell will be highlighted
+     *
+     * @defaultValue 3000
+     * @gridInfoItem
+     */
+    cellHighlightDuration?: number;
+    /**
+     * onClick Handlers for Alert Buttons (defined in Alert State)
+     */
+    actionHandlers?: ActionHandler[];
+    /**
+     * Full definitions of Alert Forms - the names of which are provided in Alert State
+     */
+    alertForms?: AlertForm[];
+    /**
+     * Whether Alert rule is evaluated against the `rawValue` or `formattedValue` of the changed cell data
+     *
+     * @defaultValue 'rawValue'
+     * @gridInfoItem
+     */
+    dataChangeDetectionPolicy?: 'rawValue' | 'formattedValue';
+    /**
+     * Function providing Message to display in Alert; if empty, AdapTable provides dynamically
+     */
+    alertMessageText?: (alertDefinition: AlertDefinition, dataChangedInfo?: DataChangedInfo) => string | undefined;
+}
+/**
+ * Handles a Form Button Action
+ */
+export declare type ActionHandler = {
+    /**
+     * Name of the Handler
+     */
+    name: string;
+    /**
+     * Handler function to call when the Button is clicked
+     */
+    handler: (button: AlertButton<AlertButtonContext>, context: AlertButtonContext) => void;
+};
+/**
+ * Form to show in an Alert
+ */
+export declare type AlertForm = {
+    /**
+     * Name of the Form
+     */
+    name: string;
+    /**
+     * The Form to display in the Alert
+     */
+    form: AdaptableForm<AlertButtonContext>;
+};
+/**
+ * Context required by functions when using an Alert Button
+ */
+export interface AlertButtonContext extends ButtonContext {
+    /**
+     * Alert that has been triggered
+     */
+    alert: AdaptableAlert;
+    /**
+     * Data in the Alert Form
+     */
+    formData?: AdaptableFormData;
+}

package/src/AdaptableOptions/AlertOptions.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });