@adaptabletools/adaptable 22.0.0-canary.6 → 22.0.0-canary.8

package/index.css

@@ -756,9 +756,6 @@
   .twa\:place-items-center {
     place-items: center;
   }
-  .twa\:place-items-stretch {
-    place-items: stretch;
-  }
   .twa\:items-baseline {
     align-items: baseline;
   }
@@ -3737,14 +3734,6 @@
   :root {
     --ab-base-space: 4px;
     --ab-base-font-size: 1rem;
-    --ab-space-0: 0px;
-    --ab-space-1: var(--ab-base-space);
-    --ab-space-2: calc(var(--ab-base-space) * 2);
-    --ab-space-3: calc(var(--ab-base-space) * 4);
-    --ab-space-4: calc(var(--ab-base-space) * 8);
-    --ab-space-5: calc(var(--ab-base-space) * 16);
-    --ab-space-6: calc(var(--ab-base-space) * 32);
-    --ab-space-7: calc(var(--ab-base-space) * 64);
     --ab-font-size-0: calc(var(--ab-base-font-size) * 0.5);
     --ab-font-size-1: calc(var(--ab-base-font-size) * 0.625);
     --ab-font-size-2: calc(var(--ab-base-font-size) * 0.75);
@@ -3755,7 +3744,7 @@
     --ab-font-size-7: calc(var(--ab-base-font-size) * 2.25);
     --ab-input-height: 36px;
     --ab__font-family: inherit;
-    --ab__border-radius: var(--ab-space-1);
+    --ab__border-radius: var(--ab-base-space);
     --ab-color-inputborder: var(--ab-color-primarydark);
     --ab-color-inputcolor: var(--ab-color-text-on-primary);
     --ab-color-error: #dc3545;
@@ -3944,7 +3933,7 @@
     --ab-cmp-dropdown__fill: var(--ab-color-text-on-defaultbackground);
     --ab-cmp-dropdown__font-size: var(--ab-font-size-2);
     --ab-cmp-dropdown__font-family: var(--ab__font-family);
-    --ab-cmp-dropdown__padding: var(--ab-space-2);
+    --ab-cmp-dropdown__padding: calc(var(--ab-base-space) * 2);
   }
   :root {
     --ab-cmp-select__font-size: var(--ab-font-size-3);
@@ -3974,7 +3963,7 @@
   :root {
     --ab-cmp-dropdownbutton-list__border: none;
     --ab-cmp-dropdownbutton-list__background: var(--ab-color-primarylight);
-    --ab-cmp-dropdownbutton-list-item__padding: var(--ab-space-2);
+    --ab-cmp-dropdownbutton-list-item__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-dropdownbutton-list-item-hover__background: var(--ab-color-primary);
     --ab-cmp-dropdownbutton-list-item-hover__color: var(--ab-color-text-on-primary);
     --ab-cmp-dropdownbutton-list-item-active__background: var(--ab-color-primarydark);
@@ -3992,7 +3981,7 @@
     --ab-cmp-field-wrap__border-radius: var(--ab-cmp-input__border-radius);
   }
   :root {
-    --ab-cmp-input__padding: var(--ab-space-2);
+    --ab-cmp-input__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-input__color: var(--ab-color-inputcolor);
     --ab-cmp-input__background: var(--ab-color-defaultbackground);
     --ab-cmp-input__border-radius: var(--ab__border-radius);
@@ -4007,7 +3996,7 @@
     --ab-cmp-modal-backdrop__background: var(--ab-color-shadow);
   }
   :root {
-    --ab-cmp-tabs__padding: var(--ab-space-2);
+    --ab-cmp-tabs__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-tabs-strip__background: var(--ab-color-defaultbackground);
     --ab-cmp-tabs-active__background: var(--ab-color-primarylight);
   }
@@ -4019,7 +4008,7 @@
     --ab-cmp-panel__max-height: 80vh;
     --ab-cmp-panel__border: 1px solid var(--ab-color-inputborder);
     --ab-cmp-panel-icon__fill: var(--ab-icon-fill);
-    --ab-cmp-panel_header__padding: var(--ab-space-2);
+    --ab-cmp-panel_header__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-panel_header__color: var(--ab-color-text-on-primary);
     --ab-cmp-panel_header--variant-primary__background: var(--ab-color-accent);
     --ab-cmp-panel_header--variant-primary__color: var(--ab-color-accent-foreground);
@@ -4035,7 +4024,7 @@
     0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
   }
   :root {
-    --ab-cmp-textarea__padding: var(--ab-space-1) var(--ab-space-2);
+    --ab-cmp-textarea__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
     --ab-cmp-textarea__border-radius: var(--ab__border-radius);
     --ab-cmp-textarea__border: 1px solid var(--ab-color-inputborder);
     --ab-cmp-textarea__color: var(--ab-cmp-input__color);
@@ -4052,8 +4041,8 @@
     --ab-cmp-tooltip__font-size: var(--ab-font-size-2);
   }
   :root {
-    --ab-cmp-file-droppable__padding: var(--ab-space-5);
-    --ab-cmp-file-droppable__margin: var(--ab-space-1);
+    --ab-cmp-file-droppable__padding: calc(var(--ab-base-space) * 16);
+    --ab-cmp-file-droppable__margin: var(--ab-base-space);
     --ab-cmp-file-droppable__background: var(--ab-color-primary);
     --ab-cmp-file-droppable__color: var(--ab-color-text-on-primary);
     --ab-cmp-file-droppable__outline: 2px dashed var(--ab-cmp-file-droppable__color);
@@ -4120,7 +4109,7 @@
     --ab-cmp-progress-indicator__font-size: var(--ab-font-size-4);
     --ab-cmp-progress-indicator__font-style: italic;
     --ab-cmp-progress-indicator__font-family: var(--ab__font-family);
-    --ab-cmp-progress-indicator__padding: var(--ab-space-3);
+    --ab-cmp-progress-indicator__padding: calc(var(--ab-base-space) * 4);
     --ab-cmp-progress-indicator__background: var(--ab-color-primary);
     --ab-cmp-progress-indicator__color: var(--ab-color-text-on-primary);
   }
@@ -4132,17 +4121,17 @@
     --ab-cmp-icon-selector__popup__color: var(--ab-color-inputcolor);
     --ab-cmp-icon-selector__popup__background: var(--ab-color-defaultbackground);
     --ab-cmp-icon-selector__popup__border: 1px solid var(--ab-color-inputborder);
-    --ab-cmp-icon-selector__popup__padding: var(--ab-space-2);
+    --ab-cmp-icon-selector__popup__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-icon-selector__popup__border-radius: var(--ab__border-radius);
   }
   :root {
-    --adaptable-quick-search-floating-padding: var(--ab-space-1) var(--ab-space-2);
+    --adaptable-quick-search-floating-padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
     --adaptable-quick-search-floating-width: 200px;
   }
   :root {
     --ab-cmp-note-popup-background-color: var(--ab-color-defaultbackground);
-    --ab-cmp-note-popup-padding: var(--ab-space-4);
-    --ab-cmp-note-popup-border-radius: var(--ab-space-2);
+    --ab-cmp-note-popup-padding: calc(var(--ab-base-space) * 8);
+    --ab-cmp-note-popup-border-radius: calc(var(--ab-base-space) * 2);
     --ab-cmp-note-popup-border: 1px solid var(--ab-color-primarydark);
     --ab-cmp-note-popup-min-width: 160px;
     --ab-CellNote-triangle-color: var(--ab-color-accent);
@@ -4156,8 +4145,8 @@
     --ab-cmp-listgroupitem-cell__font-size: var(--ab-font-size-3);
   }
   :root {
-    --ab-cmp-wizard__padding: var(--ab-space-5);
-    --ab-cmp-wizard__margin: var(--ab-space-1);
+    --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-text-on-primary);
   }
@@ -4174,8 +4163,8 @@
     --ab-cmp-dashboardpanel_header__color: var(--ab-color-text-on-primarydark);
     --ab-cmp-dashboardpanel__fill: var(--ab-color-text-on-primary);
     --ab-cmp-dashboardpanel__color: currentColor;
-    --ab-cmp-dashboardpanel_header__padding: var(--ab-space-0);
-    --ab-cmp-dashboardpanel_body__padding: var(--ab-space-1);
+    --ab-cmp-dashboardpanel_header__padding: 0px;
+    --ab-cmp-dashboardpanel_body__padding: var(--ab-base-space);
     --ab-cmp-dashboardpanel__border: none;
   }
   :root {
@@ -4221,38 +4210,38 @@
     --ab-cmp-adaptable-popup__height: 90vh;
     --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__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
     --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__padding: 0px var(--ab-base-space);
+    --ab-cmp-adaptable-popup-navigation-list-item__margin-bottom: calc(var(--ab-base-space) * 2) calc(var(--ab-base-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-icon__margin-right: var(--ab-space-2);
+    --ab-cmp-adaptable-popup-navigation-list-item-separator__margin: calc(var(--ab-base-space) * 2)
+    calc(var(--ab-base-space) * 2);
+    --ab-cmp-adaptable-popup-navigation-list-item-icon__margin-right: calc(var(--ab-base-space) * 2);
     --ab-cmp-adaptable-popup-panel-title__font-size: var(--ab-font-size-5);
   }
   :root {
     --ab-cmp-adaptable-window-popup__box-shadow: var(--ab-cmp-adaptable-popup__box-shadow);
   }
   :root {
-    --ab-cmp-adaptable-object-list-tag__margin-right: var(--ab-space-2);
-    --ab-cmp-adaptable-object-list-tag__margin-top: var(--ab-space-2);
+    --ab-cmp-adaptable-object-list-tag__margin-right: calc(var(--ab-base-space) * 2);
+    --ab-cmp-adaptable-object-list-tag__margin-top: calc(var(--ab-base-space) * 2);
     --ab-cmp-adaptable-object-list-item__background-color: var(--ab-color-defaultbackground);
-    --ab-cmp-adaptable-object-list-item__padding: var(--ab-space-3) var(--ab-space-3);
+    --ab-cmp-adaptable-object-list-item__padding: calc(var(--ab-base-space) * 4) calc(var(--ab-base-space) * 4);
     --ab-cmp-adaptable-object-list-item-label__width: 130px;
     --ab-cmp-adaptable-object-list-item-tag__padding: 6px 12px;
     --ab-cmp-adaptable-object-compact-list__background: var(--ab-color-primarylight);
-    --ab-cmp-adaptable-object-compact-list__padding: var(--ab-space-2);
+    --ab-cmp-adaptable-object-compact-list__padding: calc(var(--ab-base-space) * 2);
     --ab-cmp-adaptable-object-compact-list-item__background: var(--ab-color-defaultbackground);
-    --ab-cmp-adaptable-object-compact-list-item__padding: var(--ab-space-1);
-    --ab-cmp-adaptable-object-compact-list-item__margin-bottom: var(--ab-space-2);
-    --ab-cmp-adaptable-object-compact-list__header__padding: var(--ab-space-2);
-    --ab-cmp-adaptable-object-compact-list__header__margin-bottom: var(--ab-space-1);
+    --ab-cmp-adaptable-object-compact-list-item__padding: var(--ab-base-space);
+    --ab-cmp-adaptable-object-compact-list-item__margin-bottom: calc(var(--ab-base-space) * 2);
+    --ab-cmp-adaptable-object-compact-list__header__padding: calc(var(--ab-base-space) * 2);
+    --ab-cmp-adaptable-object-compact-list__header__margin-bottom: var(--ab-base-space);
     --ab-cmp-adaptable-object-compact-list__header__font-size: var(--ab-font-size-4);
     --ab-cmp-adaptable-object-compact-list-item-name__width: 95px;
-    --ab-cmp-adaptable-object-compact-list-item-name__padding: var(--ab-space-1);
-    --ab-cmp-adaptable-object-compact-list-item-name__margin-right: var(--ab-space-1);
+    --ab-cmp-adaptable-object-compact-list-item-name__padding: var(--ab-base-space);
+    --ab-cmp-adaptable-object-compact-list-item-name__margin-right: var(--ab-base-space);
     --ab-cmp-adaptable-object-compact-list-item-name__font-size: var(--ab-font-size-4);
   }
   :root {
@@ -4266,7 +4255,7 @@
     --ab-cmp-system-status-list-text__font-weight: bold;
     --ab-cmp-system-status-list-text__font-size: var(--ab-font-size-2);
     --ab-cmp-system-status-list-text__color: var(--ab-color-accent-foreground);
-    --ab-cmp-system-status-list-text__padding: var(--ab-space-2);
+    --ab-cmp-system-status-list-text__padding: calc(var(--ab-base-space) * 2);
   }
   :root {
     --ab-cmp-dashboard-module-selector-background: var(--ab-color-defaultbackground);
@@ -4276,7 +4265,7 @@
     --ab-cmp-dashboard-pinned-toolbar-border: 1px solid #656565;
   }
   :root {
-    --ab-cmp-adaptable-statusbar-sub-panel__padding: var(--ab-space-1) var(--ab-space-2);
+    --ab-cmp-adaptable-statusbar-sub-panel__padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
     --ab-cmp-adaptable-statusbar-sub-panel-icon__background-color-hover: var(--ab-color-primary);
     --ab-cmp-adaptable-statusbar__color: var(--ab-color-text-on-primary);
     --ab-cmp-adaptable-statusbar__font-weight: 400;
@@ -4413,7 +4402,7 @@
   [data-name='menu-container'] .ab-Select-CheckboxColumn {
     .InfiniteCheckBox {
       margin-block: 0px;
-      margin-inline: var(--ab-space-1);
+      margin-inline: var(--ab-base-space);
     }
     .InfiniteCell_content {
       display: flex;
@@ -4456,7 +4445,7 @@
   }
   .ab-Table {
     td, th {
-      padding: var(--ab-space-2);
+      padding: calc(var(--ab-base-space) * 2);
     }
     th {
       border-bottom: 2px solid var(--ab-color-primarydark);
@@ -4609,7 +4598,7 @@
   }
   .ab-DropdownButton__list {
     text-align: start;
-    padding: var(--ab-space-1) 0;
+    padding: var(--ab-base-space) 0;
     box-shadow: var(--ab-cmp-dropdownbutton-list__box-shadow);
     overflow: auto;
     border: var(--ab-cmp-dropdownbutton-list__border);
@@ -4808,7 +4797,7 @@
     font-size: var(--ab-cmp-panel__font-size);
   }
   .ab-Panel--variant-modern {
-    --ab-cmp-panel__border-radius: var(--ab-space-1);
+    --ab-cmp-panel__border-radius: var(--ab-base-space);
   }
   .ab-Panel__header {
     flex: none;
@@ -4866,7 +4855,7 @@
   }
   .ab-Tooltip {
     pointer-events: none;
-    padding: var(--ab-space-1) var(--ab-space-2);
+    padding: var(--ab-base-space) calc(var(--ab-base-space) * 2);
     box-shadow: 2px 2px 10px hsla(0, 0%, 0%, 0.1);
     white-space: nowrap;
     font-size: var(--ab-cmp-tooltip__font-size);
@@ -4933,10 +4922,10 @@
       border: none;
     }
     .ab-DashboardToolbar__QuickSearch__text .ab-Input {
-      padding: var(--ab-space-1);
+      padding: var(--ab-base-space);
     }
     .ab-StateManagement__Clear-Button, .ab-StateManagement__Load-Button, .ab-StateManagement__Export-Dropdown {
-      margin-left: var(--ab-space-1);
+      margin-left: var(--ab-base-space);
     }
   }
   .ab-Dashboard--inline:not(.ab-Dashboard--collapsed) {
@@ -4948,7 +4937,7 @@
     background: var(--ab-dashboard-header__background);
     color: var(--ab-dashboard-header__color);
     height: 40px;
-    padding: 0 var(--ab-space-2);
+    padding: 0 calc(var(--ab-base-space) * 2);
   }
   .ab-Dashboard__header-left, .ab-Dashboard__header-right {
     display: flex;
@@ -4964,13 +4953,13 @@
   .ab-Dashboard__title {
     display: flex;
     align-items: center;
-    padding: 0 var(--ab-space-3);
+    padding: 0 calc(var(--ab-base-space) * 3);
     font-weight: bold;
     font-size: var(--ab-font-size-4);
   }
   .ab-Dashboard__tabs {
     align-self: flex-end;
-    margin-left: var(--ab-space-2);
+    margin-left: calc(var(--ab-base-space) * 2);
   }
   .ab-Dashboard__tab {
     border: none;
@@ -5004,7 +4993,7 @@
     display: flex;
     flex-direction: column;
     align-self: stretch;
-    padding: var(--ab-space-2);
+    padding: calc(var(--ab-base-space) * 2);
     border-left: 1px solid var(--ab-dashboard__border);
   }
   .ab-Dashboard__toolbar {
@@ -5018,7 +5007,7 @@
     font-size: var(--ab-font-size-3);
   }
   .ab-Dashboard__toolbar-content {
-    padding: var(--ab-space-2) var(--ab-space-2) var(--ab-space-1) var(--ab-space-2);
+    padding: calc(var(--ab-base-space) * 2) calc(var(--ab-base-space) * 2) var(--ab-base-space) calc(var(--ab-base-space) * 2);
     display: flex;
   }
   .ab-Dashboard__toolbar.ab-Dashboard__home-toolbar {
@@ -5381,11 +5370,11 @@
   .ab-ToggleButton__slider:before {
     will-change: transform right;
     right: 100%;
-    transform: translateX(calc(100% + var(--ab-space-1)));
+    transform: translateX(calc(100% + var(--ab-base-space)));
     transition: 0.2s;
   }
   .ab-ToggleButton__input:checked + .ab-ToggleButton__slider:before {
-    right: var(--ab-space-1);
+    right: var(--ab-base-space);
     transform: translateX(0px);
   }
   .ab-Loader {
@@ -5444,7 +5433,7 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    margin-right: var(--ab-space-2);
+    margin-right: calc(var(--ab-base-space) * 2);
     width: var(--ab-cmp-module-module-selector__tab-item__width);
     border: var(--ab-cmp-module-module-selector__tab-item__border);
     border-radius: var(--ab-cmp-module-module-selector__tab-item__border-radius);
@@ -5452,14 +5441,14 @@
   .ab-ModuleSelector__TabItem__header {
     display: flex;
     align-items: center;
-    padding: var(--ab-space-1);
+    padding: var(--ab-base-space);
     border-bottom: var(--ab-cmp-module-module-selector__tab-item__border);
   }
   .ab-ModuleSelector__TabItem__header-input {
     flex: 1;
     width: 100%;
-    margin-left: var(--ab-space-1);
-    margin-right: var(--ab-space-1);
+    margin-left: var(--ab-base-space);
+    margin-right: var(--ab-base-space);
     align-self: stretch;
     background: transparent;
     border: none;
@@ -5581,7 +5570,7 @@
     font-size: var(--ab-cmp-system-status-list-text__font-size);
     color: var(--ab-cmp-system-status-list-text__color);
     padding: var(--ab-cmp-system-status-list-text__padding);
-    margin-right: var(--ab-space-2);
+    margin-right: calc(var(--ab-base-space) * 2);
   }
   .ab-DashboardToolbar__SystemStatus__text--expandable {
     cursor: pointer;
@@ -5672,7 +5661,7 @@
   }
   .ab-Button.ab-Button {
     border-radius: var(--ab-cmp-button-border-radius);
-    padding: var(--ab-space-2);
+    padding: calc(var(--ab-base-space) * 2);
   }
   .ab-Button.ab-Button--enabled {
     cursor: pointer;
@@ -5698,7 +5687,7 @@
     border: var(--ab-cmp-toolpanelpanel__border);
   }
   .ab-Dashboard__application-icon {
-    margin-right: var(--ab-space-2);
+    margin-right: calc(var(--ab-base-space) * 2);
   }
   .ab-Dashboard-Popup__Module-Selector {
     background: var(--ab-cmp-dashboard-module-selector-background);
@@ -5732,7 +5721,7 @@
       flex: 1;
     }
     .ab-StateManagement__Clear-Button, .ab-StateManagement__Load-Button, .ab-StateManagement__Export-Dropdown {
-      margin-bottom: var(--ab-space-1);
+      margin-bottom: var(--ab-base-space);
     }
   }
   .ab-CustomSortWizard__SortOrder .ab-Loader__text {
@@ -5870,9 +5859,9 @@
     right: 4px;
     overflow: hidden;
     border-radius: var(--ab__border-radius);
-    margin-right: var(--ab-space-1);
-    margin-top: var(--ab-space-1);
-    padding: 0 var(--ab-space-2);
+    margin-right: var(--ab-base-space);
+    margin-top: var(--ab-base-space);
+    padding: 0 calc(var(--ab-base-space) * 2);
     font-size: var(--ab-font-size-2);
   }
   .ab-ReorderDraggable {
@@ -6626,7 +6615,7 @@
   .ab-ActionColumn {
     height: 100%;
     display: flex;
-    column-gap: var(--ab-space-1);
+    column-gap: var(--ab-base-space);
     & > button.ab-SimpleButton {
       height: 100%;
     }
@@ -6717,7 +6706,7 @@
     flex-flow: var(--ab_flex-direction);
   }
   .ag-header-cell:has(.ab-FloatingFilter) {
-    padding: var(--ab-space-1) !important;
+    padding: var(--ab-base-space) !important;
   }
   .ag-group-floating-filter:has(.ab-FloatingFilter) {
     height: 100% !important;