@adaptabletools/adaptable-react-aggrid 10.0.4-canary.4 → 10.0.4-canary.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/base.css +202 -33
  2. package/index.css +243 -33
  3. package/package.json +4 -4
  4. package/src/components/AdaptableReact.d.ts +3 -3
  5. package/src/components/AdaptableReact.js +2 -2
package/base.css CHANGED
@@ -1322,7 +1322,7 @@
1322
1322
  :root {
1323
1323
  --ab-cmp-dialog__background: var(--ab-color-defaultbackground, white);
1324
1324
  --ab-cmp-dialog__color: var(--ab-color-text-on-defaultbackground, white);
1325
- --ab-cmp-dialog-close-button__color: var(--ab-color-text-on-primary);
1325
+ --ab-cmp-dialog-close-button__color: var(--ab-color-accentlight);
1326
1326
  --ab-cmp-dialog__border-radius: var(--ab__border-radius);
1327
1327
  --ab-cmp-dialog__min-height: 60vh; }
1328
1328
  :root {
@@ -1407,7 +1407,7 @@
1407
1407
  --ab-cmp-tabs-active__background: var(--ab-color-primarylight); }
1408
1408
  :root {
1409
1409
  --ab-cmp-panel_header__background: var(--ab-color-primary);
1410
- --ab-cmp-panel_header__font-size: var(--ab-font-size-2);
1410
+ --ab-cmp-panel_header__font-size: var(--ab-font-size-3);
1411
1411
  --ab-cmp-panel__font-size: var(--ab-font-size-3);
1412
1412
  --ab-cmp-panel__border-radius: var(--ab__border-radius);
1413
1413
  --ab-cmp-panel__padding: var(--ab-space-2);
@@ -1421,6 +1421,7 @@
1421
1421
  --ab-cmp-panel_header--variant-primary__background: var(--ab-color-secondary);
1422
1422
  --ab-cmp-panel_header--variant-primary__color: var(--ab-color-text-on-secondary);
1423
1423
  --ab-cmp-panel_header--variant-modern__background: var(--ab-color-primary);
1424
+ --ab-cmp-panel_header--variant-minimal__background: var(--ab-color-defaultbackground);
1424
1425
  --ab-cmp-panel_header--variant-modern__color: var(--ab-color-text-on-primary);
1425
1426
  --ab-cmp-panel_body--variant-modern__background: var(--ab-color-primarylight); }
1426
1427
  :root {
@@ -1607,6 +1608,54 @@
1607
1608
  --ab-cmp-toolpanel__font-family: var(--ab__font-family); }
1608
1609
  :root {
1609
1610
  --ab-cmp-custom-sort-wizard-loader__font-size: var(--ab-font-size-4); }
1611
+ :root {
1612
+ --ab-cmp-adaptable-popup__background: var(--ab-color-primarylight);
1613
+ --ab-cmp-adaptable-popup--settings__padding: 20px;
1614
+ --ab-cmp-adaptable-popup--settings__height: 90vh;
1615
+ --ab-cmp-adaptable-popup__height: 90vh;
1616
+ --ab-cmp-adaptable-popup__max-height: 1200px;
1617
+ --ab-cmp-adaptable-popup-navigation-list__padding: var(--ab-space-1) var(--ab-space-2);
1618
+ --ab-cmp-adaptable-popup-navigation-list__border-right: 2px solid var(--ab-color-defaultbackground);
1619
+ --ab-cmp-adaptable-popup-navigation-list__font-size: var(--ab-font-size-3);
1620
+ --ab-cmp-adaptable-popup-navigation-list-item__padding: var(--ab-space-0) var(--ab-space-1);
1621
+ --ab-cmp-adaptable-popup-navigation-list-item__margin-bottom: var(--ab-space-2) var(--ab-space-2);
1622
+ --ab-cmp-adaptable-popup-navigation-list-item-separator__border: 1px solid var(--ab-color-primarydark);
1623
+ --ab-cmp-adaptable-popup-navigation-list-item-separator__margin: var(--ab-space-2) var(--ab-space-2);
1624
+ --ab-cmp-adaptable-popup-navigation-list-item-button__padding: var(--ab-space-2) var(--ab-space-2);
1625
+ --ab-cmp-adaptable-popup-navigation-list-item-button__border-radius: var(--ab__border-radius);
1626
+ --ab-cmp-adaptable-popup-navigation-list-item-button__color: var(--ab-color-text-on-primary);
1627
+ --ab-cmp-adaptable-popup-navigation-list-item-button__background--active: var(--ab-color-focus);
1628
+ --ab-cmp-adaptable-popup-navigation-list-item-button__background--color: var(--ab-color-accentlight);
1629
+ --ab-cmp-adaptable-popup-navigation-list-item-icon__margin-right: var(--ab-space-2);
1630
+ --ab-cmp-adaptable-popup-topbar__background: var(--ab-color-secondary);
1631
+ --ab-cmp-adaptable-popup-topbar__height: 45px;
1632
+ --ab-cmp-adaptable-popup-topbar__color: var(--ab-color-text-on-secondary);
1633
+ --ab-cmp-adaptable-popup-topbar__font-weight: 500;
1634
+ --ab-cmp-adaptable-popup-topbar__padding: var(--ab-space-3);
1635
+ --ab-cmp-adaptable-popup-topbar-icon__margin-right: var(--ab-space-2);
1636
+ --ab-cmp-adaptable-popup-topbar-icon__color: var(--ab-color-accentlight);
1637
+ --ab-cmp-adaptable-popup-panel__padding: 0 var(--ab-space-2);
1638
+ --ab-cmp-adaptable-popup-panel__margin-bottom: var(--ab-space-3);
1639
+ --ab-cmp-adaptable-popup-panel__margin-top: var(--ab-space-2);
1640
+ --ab-cmp-adaptable-popup-panel-title__font-size: var(--ab-font-size-5);
1641
+ --ab-cmp-adaptable-popup-panel-body__padding: var(--ab-space-2); }
1642
+ :root {
1643
+ --ab-cmp-adaptable-object-list-tag__margin-right: var(--ab-space-2);
1644
+ --ab-cmp-adaptable-object-list-tag__margin-top: var(--ab-space-2);
1645
+ --ab-cmp-adaptable-object-list-item__background-color: var(--ab-color-defaultbackground);
1646
+ --ab-cmp-adaptable-object-list-item__padding: var(--ab-space-3) var(--ab-space-3);
1647
+ --ab-cmp-adaptable-object-list-item__margin-bottom: var(--ab-space-3);
1648
+ --ab-cmp-adaptable-object-list-item-label__padding-top: var(--ab-space-3);
1649
+ --ab-cmp-adaptable-object-list-item-label__width: 130px;
1650
+ --ab-cmp-adaptable-object-list-item-tag__padding: 6px 12px; }
1651
+ :root {
1652
+ --ab-cmp-adaptable-options__background-color: var(--ab-color-defaultbackground);
1653
+ --ab-cmp-grid-options__background-color: var(--ab-color-defaultbackground);
1654
+ --ab-cmp-grid-summary__background-color: var(--ab-color-defaultbackground); }
1655
+ :root {
1656
+ --ab-cmp-system-status-list__background-color: var(--ab-color-defaultbackground); }
1657
+ :root {
1658
+ --ab-cmp-dashboard-module-selector-background: var(--ab-color-defaultbackground); }
1610
1659
  .ab-Radio-input:focus + svg rect {
1611
1660
  stroke: var(--ab-color-accent);
1612
1661
  stroke-width: 2; }
@@ -1702,7 +1751,6 @@
1702
1751
  fill: var(--ab-color-text-on-primary);
1703
1752
  color: var(--ab-cmp-dialog__color);
1704
1753
  border-radius: var(--ab-cmp-dialog__border-radius);
1705
- min-height: var(--ab-cmp-dialog__min-height);
1706
1754
  display: flex;
1707
1755
  flex-flow: column; }
1708
1756
  .ab-Dialog:focus-within, .ab-Dialog:focus {
@@ -1712,8 +1760,8 @@
1712
1760
  flex: 1; }
1713
1761
  .ab-Dialog__close-button {
1714
1762
  position: absolute;
1715
- right: 0.7rem;
1716
- top: 0;
1763
+ right: 6px;
1764
+ top: 6px;
1717
1765
  font-size: var(--ab-font-size-3);
1718
1766
  font-weight: 700;
1719
1767
  line-height: 1;
@@ -1906,6 +1954,8 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
1906
1954
  bottom: 0;
1907
1955
  z-index: 1000;
1908
1956
  font-family: var(--ab__font-family); }
1957
+ .ab-Modal.ab-Modal--resizable-and-movable {
1958
+ position: relative; }
1909
1959
  .ab-Modal-backdrop {
1910
1960
  background: var(--ab-cmp-modal-backdrop__background);
1911
1961
  z-index: 900;
@@ -1976,6 +2026,7 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
1976
2026
  display: flex;
1977
2027
  flex-flow: column;
1978
2028
  max-height: var(--ab-cmp-panel__max-height);
2029
+ overflow: auto;
1979
2030
  font-size: var(--ab-cmp-panel__font-size); }
1980
2031
  .ab-Panel .glyphicon {
1981
2032
  -webkit-text-fill-color: var(--ab-cmp-panel-icon__fill);
@@ -2353,48 +2404,59 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
2353
2404
  display: table-cell; }
2354
2405
  :root {
2355
2406
  --ab-cmp-toggle-button__background: #ccc;
2356
- --ab-cmp-toggle-button--active__background: var(--ab-color-success); }
2407
+ --ab-cmp-toggle-button--active__background: var(--ab-color-success);
2408
+ --ab-cmp-toggle-button__font-size: var(--ab-font-size-1);
2409
+ --ab-cmp-toggle-button__color: var(--ab-color-text-on-primary);
2410
+ --ab-cmp-toggle-button--checked__color: var(--ab-color-accentlight); }
2357
2411
  .ab-ToggleButton {
2358
2412
  position: relative;
2359
2413
  display: inline-block;
2360
2414
  min-width: 40px;
2361
- width: 40px;
2362
- height: 25px; }
2415
+ width: 87px;
2416
+ height: 32px; }
2363
2417
  .ab-ToggleButton:hover:not(.ab-ToggleButton--disabled) {
2364
2418
  cursor: pointer;
2365
2419
  opacity: 0.85; }
2366
2420
  .ab-ToggleButton__input {
2367
- opacity: 0;
2368
- width: 0;
2369
- height: 0; }
2421
+ opacity: 0;
2422
+ width: 0;
2423
+ height: 0; }
2370
2424
  .ab-ToggleButton__slider {
2371
- position: absolute;
2372
- top: 0;
2373
- left: 0;
2374
- right: 0;
2375
- bottom: 0;
2376
- background-color: var(--ab-cmp-toggle-button__background);
2377
- transition: 0.1s;
2378
- border-radius: var(--ab__border-radius); }
2425
+ position: absolute;
2426
+ top: 0;
2427
+ left: 0;
2428
+ right: 0;
2429
+ bottom: 0;
2430
+ background-color: var(--ab-cmp-toggle-button__background);
2431
+ transition: 0.1s;
2432
+ border-radius: var(--ab__border-radius); }
2379
2433
  .ab-ToggleButton__slider:before {
2380
- position: absolute;
2381
- content: "";
2382
- width: 19px;
2383
- height: 19px;
2384
- left: 3px;
2385
- top: 3px;
2386
- border-radius: var(--ab__border-radius);
2387
- background-color: #fff;
2388
- -webkit-transition: 0.4s;
2389
- transition: 0.2s; }
2434
+ position: absolute;
2435
+ content: "";
2436
+ width: 24px;
2437
+ height: 24px;
2438
+ left: 4px;
2439
+ top: 4px;
2440
+ border-radius: var(--ab__border-radius);
2441
+ background-color: #fff;
2442
+ -webkit-transition: 0.4s;
2443
+ transition: 0.2s; }
2390
2444
  .ab-ToggleButton__input:checked + .ab-ToggleButton__slider {
2391
- background-color: var(--ab-cmp-toggle-button--active__background); }
2445
+ background-color: var(--ab-cmp-toggle-button--active__background); }
2392
2446
  .ab-ToggleButton__input:checked + .ab-ToggleButton__slider:before {
2393
- transform: translateX(15px); }
2447
+ transform: translateX(54px); }
2394
2448
  .ab-ToggleButton__input:focus + .ab-ToggleButton__slider {
2395
- box-shadow: var(--ab-focus__box-shadow); }
2449
+ box-shadow: var(--ab-focus__box-shadow); }
2396
2450
  .ab-ToggleButton__input:disabled + .ab-ToggleButton__slider {
2397
- opacity: 0.5; }
2451
+ opacity: 0.5; }
2452
+ .ab-ToggleButton .ab-ToggleButton__text {
2453
+ font-size: var(--ab-cmp-toggle-button__font-size);
2454
+ padding-right: var(--ab-space-2);
2455
+ color: var(--ab-cmp-toggle-button__color);
2456
+ font-weight: 600; }
2457
+ .ab-ToggleButton--checked .ab-ToggleButton__text {
2458
+ padding-left: var(--ab-space-2);
2459
+ color: var(--ab-cmp-toggle-button--checked__color); }
2398
2460
  .ab-Loader {
2399
2461
  font-size: var(--ab-cmp-loader__font-size);
2400
2462
  margin-top: 8px;
@@ -2444,6 +2506,19 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
2444
2506
  font-size: var(--ab-cmp-progress-indicator__font-size);
2445
2507
  font-style: var(--ab-cmp-progress-indicator__font-style);
2446
2508
  font-family: var(--ab-cmp-progress-indicator__font-family); }
2509
+ :root {
2510
+ --ab-cmp-Tag__font-size: var(--ab-font-size-3); }
2511
+ .ab-Tag {
2512
+ display: inline-flex;
2513
+ font-size: var(--ab-cmp-Tag__font-size); }
2514
+ .ab-AdaptableOptions {
2515
+ background: var(--ab-cmp-adaptable-options__background-color); }
2516
+ .ab-GridOptions {
2517
+ background: var(--ab-cmp-grid-options__background-color); }
2518
+ .ab-GridSummary {
2519
+ background: var(--ab-cmp-grid-summary__background-color); }
2520
+ .ab-SystemStatus-Popup-List {
2521
+ background: var(--ab-cmp-system-status-list__background-color); }
2447
2522
  .ab-ObjectCollection__list > * {
2448
2523
  background: var(--ab-cmp-listgroupitem__background);
2449
2524
  color: var(--ab-cmp-listgroupitem__color); }
@@ -2539,6 +2614,8 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
2539
2614
  --ab-cmp-panel_body__background: var(--ag-control-panel-background-color); }
2540
2615
  .ab-Dashboard__application-icon {
2541
2616
  margin-right: var(--ab-space-2); }
2617
+ .ab-Dashboard-Popup__Module-Selector {
2618
+ background: var(--ab-cmp-dashboard-module-selector-background); }
2542
2619
  .ab-ToolPanel {
2543
2620
  flex: 1 1 0;
2544
2621
  min-width: 0;
@@ -2561,6 +2638,98 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
2561
2638
  margin-bottom: var(--ab-space-1); }
2562
2639
  .ab-CustomSortWizard__SortOrder .ab-Loader__text {
2563
2640
  font-size: var(--ab-cmp-custom-sort-wizard-loader__font-size); }
2641
+ .ab-Adaptable-Popup {
2642
+ background: var(--ab-cmp-adaptable-popup__background);
2643
+ max-height: var(--ab-cmp-adaptable-popup__max-height); }
2644
+ .ab-Adaptable-Popup__Navigation {
2645
+ padding-top: 10px;
2646
+ overflow: auto;
2647
+ border-right: var(--ab-cmp-adaptable-popup-navigation-list__border-right);
2648
+ font-family: var(--ab__font-family); }
2649
+ .ab-Adaptable-Popup__Navigation__List {
2650
+ list-style: none;
2651
+ padding: var(--ab-cmp-adaptable-popup-navigation-list__padding);
2652
+ margin: 0;
2653
+ font-size: var(--ab-cmp-adaptable-popup-navigation-list__font-size); }
2654
+ .ab-Adaptable-Popup__Navigation__List__Item {
2655
+ padding: var(--ab-cmp-adaptable-popup-navigation-list-item__padding);
2656
+ margin-bottom: var(--ab-cmp-adaptable-popup-navigation-list-item__margin-bottom); }
2657
+ .ab-Adaptable-Popup__Navigation__List__Item__Separator {
2658
+ border-bottom: var(--ab-cmp-adaptable-popup-navigation-list-item-separator__border);
2659
+ margin: var(--ab-cmp-adaptable-popup-navigation-list-item-separator__margin); }
2660
+ .ab-Adaptable-Popup__Navigation__List__Item__Button {
2661
+ background: none;
2662
+ border: none;
2663
+ width: 100%;
2664
+ text-align: left;
2665
+ cursor: pointer;
2666
+ padding: var(--ab-cmp-adaptable-popup-navigation-list-item-button__padding);
2667
+ border-radius: var(--ab-cmp-adaptable-popup-navigation-list-item-button__border-radius);
2668
+ color: var(--ab-cmp-adaptable-popup-navigation-list-item-button__color); }
2669
+ .ab-Adaptable-Popup__Navigation__List__Item__Icon {
2670
+ margin-right: var(--ab-cmp-adaptable-popup-topbar-icon__margin-right); }
2671
+ .ab-Adaptable-Popup__Navigation__List__Item--active .ab-Adaptable-Popup__Navigation__List__Item__Button {
2672
+ background: var(--ab-cmp-adaptable-popup-navigation-list-item-button__background--active);
2673
+ color: var(--ab-cmp-adaptable-popup-navigation-list-item-button__background--color); }
2674
+ .ab-Adaptable-Popup__TopBar {
2675
+ display: flex;
2676
+ align-items: center;
2677
+ background: var(--ab-cmp-adaptable-popup-topbar__background);
2678
+ height: var(--ab-cmp-adaptable-popup-topbar__height);
2679
+ color: var(--ab-cmp-adaptable-popup-topbar__color);
2680
+ font-weight: var(--ab-cmp-adaptable-popup-topbar__font-weight);
2681
+ padding: var(--ab-cmp-adaptable-popup-topbar__padding);
2682
+ box-sizing: border-box; }
2683
+ .ab-Adaptable-Popup__TopBar__Icon {
2684
+ margin-right: var(--ab-cmp-adaptable-popup-topbar-icon__margin-right); }
2685
+ .ab-Adaptable-Popup__TopBar__Close .ab-Icon {
2686
+ color: var(--ab-cmp-adaptable-popup-topbar-icon__color); }
2687
+ .ab-Adaptable-Popup--settings-popup {
2688
+ height: var(--ab-cmp-adaptable-popup--settings__height); }
2689
+ .ab-Adaptable-Popup--settings-popup .ab-Dialog__close-button {
2690
+ top: 9px; }
2691
+ .ab-Adaptable-Popup--settings-popup .ab-Adaptable-Popup__Body {
2692
+ padding: var(--ab-cmp-adaptable-popup--settings__padding);
2693
+ min-width: 0; }
2694
+ .ab-Adaptable-Popup__Panel__Header {
2695
+ display: flex;
2696
+ padding: 0 var(--ab-cmp-adaptable-popup-panel__padding);
2697
+ margin-bottom: var(--ab-cmp-adaptable-popup-panel__margin-bottom);
2698
+ margin-top: var(--ab-cmp-adaptable-popup-panel__margin-top); }
2699
+ .ab-Adaptable-Popup__Panel__Header__Title {
2700
+ font-size: var(--ab-cmp-adaptable-popup-panel-title__font-size); }
2701
+ .ab-Adaptable-Popup__Panel__Body {
2702
+ padding: var(--ab-cmp-adaptable-popup-panel-body__padding);
2703
+ flex: 1 1 0;
2704
+ min-height: 0;
2705
+ overflow: auto; }
2706
+ .ab-Adaptable-Popup--window .ab-Adaptable-Popup__TopBar {
2707
+ cursor: move; }
2708
+ .ab-Adaptable-Popup--window.ab-Adaptable-Popup--action-popup .ab-Panel__header {
2709
+ cursor: move; }
2710
+ .ab-Adaptable-Object-List {
2711
+ list-style: none;
2712
+ padding: 0; }
2713
+ .ab-Adaptable-Object-List .ab-Tag {
2714
+ margin-right: var(--ab-cmp-adaptable-object-list-tag__margin-right);
2715
+ margin-top: var(--ab-cmp-adaptable-object-list-tag__margin-top);
2716
+ padding: var(--ab-cmp-adaptable-object-list-item-tag__padding); }
2717
+ .ab-Adaptable-Object-List__Item {
2718
+ background-color: var(--ab-cmp-adaptable-object-list-item__background-color);
2719
+ padding: var(--ab-cmp-adaptable-object-list-item__padding);
2720
+ margin-bottom: var(--ab-cmp-adaptable-object-list-item__margin-bottom); }
2721
+ .ab-Adaptable-Object-List__Item__edit-property {
2722
+ visibility: hidden; }
2723
+ .ab-Adaptable-Object-List__Item__buttons {
2724
+ padding-left: var(--ab-space-2);
2725
+ min-width: 80px;
2726
+ text-align: right;
2727
+ margin-left: var(--ab-space-3); }
2728
+ .ab-Adaptable-Object-List__Item__label {
2729
+ padding-top: var(--ab-cmp-adaptable-object-list-item-label__padding-top);
2730
+ width: var(--ab-cmp-adaptable-object-list-item-label__width); }
2731
+ .ab-Adaptable-Object-List__Item__label:hover .ab-Adaptable-Object-List__Item__edit-property {
2732
+ visibility: visible; }
2564
2733
  .ab-alert--error {
2565
2734
  background: var(--ab-color-error); }
2566
2735
  .ab-alert--success {
package/index.css CHANGED
@@ -1892,7 +1892,7 @@ template {
1892
1892
  :root {
1893
1893
  --ab-cmp-dialog__background: var(--ab-color-defaultbackground, white);
1894
1894
  --ab-cmp-dialog__color: var(--ab-color-text-on-defaultbackground, white);
1895
- --ab-cmp-dialog-close-button__color: var(--ab-color-text-on-primary);
1895
+ --ab-cmp-dialog-close-button__color: var(--ab-color-accentlight);
1896
1896
  --ab-cmp-dialog__border-radius: var(--ab__border-radius);
1897
1897
  --ab-cmp-dialog__min-height: 60vh; }
1898
1898
 
@@ -1993,7 +1993,7 @@ template {
1993
1993
 
1994
1994
  :root {
1995
1995
  --ab-cmp-panel_header__background: var(--ab-color-primary);
1996
- --ab-cmp-panel_header__font-size: var(--ab-font-size-2);
1996
+ --ab-cmp-panel_header__font-size: var(--ab-font-size-3);
1997
1997
  --ab-cmp-panel__font-size: var(--ab-font-size-3);
1998
1998
  --ab-cmp-panel__border-radius: var(--ab__border-radius);
1999
1999
  --ab-cmp-panel__padding: var(--ab-space-2);
@@ -2007,6 +2007,7 @@ template {
2007
2007
  --ab-cmp-panel_header--variant-primary__background: var(--ab-color-secondary);
2008
2008
  --ab-cmp-panel_header--variant-primary__color: var(--ab-color-text-on-secondary);
2009
2009
  --ab-cmp-panel_header--variant-modern__background: var(--ab-color-primary);
2010
+ --ab-cmp-panel_header--variant-minimal__background: var(--ab-color-defaultbackground);
2010
2011
  --ab-cmp-panel_header--variant-modern__color: var(--ab-color-text-on-primary);
2011
2012
  --ab-cmp-panel_body--variant-modern__background: var(--ab-color-primarylight); }
2012
2013
 
@@ -2226,6 +2227,59 @@ template {
2226
2227
  :root {
2227
2228
  --ab-cmp-custom-sort-wizard-loader__font-size: var(--ab-font-size-4); }
2228
2229
 
2230
+ :root {
2231
+ --ab-cmp-adaptable-popup__background: var(--ab-color-primarylight);
2232
+ --ab-cmp-adaptable-popup--settings__padding: 20px;
2233
+ --ab-cmp-adaptable-popup--settings__height: 90vh;
2234
+ --ab-cmp-adaptable-popup__height: 90vh;
2235
+ --ab-cmp-adaptable-popup__max-height: 1200px;
2236
+ --ab-cmp-adaptable-popup-navigation-list__padding: var(--ab-space-1) var(--ab-space-2);
2237
+ --ab-cmp-adaptable-popup-navigation-list__border-right: 2px solid var(--ab-color-defaultbackground);
2238
+ --ab-cmp-adaptable-popup-navigation-list__font-size: var(--ab-font-size-3);
2239
+ --ab-cmp-adaptable-popup-navigation-list-item__padding: var(--ab-space-0) var(--ab-space-1);
2240
+ --ab-cmp-adaptable-popup-navigation-list-item__margin-bottom: var(--ab-space-2) var(--ab-space-2);
2241
+ --ab-cmp-adaptable-popup-navigation-list-item-separator__border: 1px solid var(--ab-color-primarydark);
2242
+ --ab-cmp-adaptable-popup-navigation-list-item-separator__margin: var(--ab-space-2) var(--ab-space-2);
2243
+ --ab-cmp-adaptable-popup-navigation-list-item-button__padding: var(--ab-space-2) var(--ab-space-2);
2244
+ --ab-cmp-adaptable-popup-navigation-list-item-button__border-radius: var(--ab__border-radius);
2245
+ --ab-cmp-adaptable-popup-navigation-list-item-button__color: var(--ab-color-text-on-primary);
2246
+ --ab-cmp-adaptable-popup-navigation-list-item-button__background--active: var(--ab-color-focus);
2247
+ --ab-cmp-adaptable-popup-navigation-list-item-button__background--color: var(--ab-color-accentlight);
2248
+ --ab-cmp-adaptable-popup-navigation-list-item-icon__margin-right: var(--ab-space-2);
2249
+ --ab-cmp-adaptable-popup-topbar__background: var(--ab-color-secondary);
2250
+ --ab-cmp-adaptable-popup-topbar__height: 45px;
2251
+ --ab-cmp-adaptable-popup-topbar__color: var(--ab-color-text-on-secondary);
2252
+ --ab-cmp-adaptable-popup-topbar__font-weight: 500;
2253
+ --ab-cmp-adaptable-popup-topbar__padding: var(--ab-space-3);
2254
+ --ab-cmp-adaptable-popup-topbar-icon__margin-right: var(--ab-space-2);
2255
+ --ab-cmp-adaptable-popup-topbar-icon__color: var(--ab-color-accentlight);
2256
+ --ab-cmp-adaptable-popup-panel__padding: 0 var(--ab-space-2);
2257
+ --ab-cmp-adaptable-popup-panel__margin-bottom: var(--ab-space-3);
2258
+ --ab-cmp-adaptable-popup-panel__margin-top: var(--ab-space-2);
2259
+ --ab-cmp-adaptable-popup-panel-title__font-size: var(--ab-font-size-5);
2260
+ --ab-cmp-adaptable-popup-panel-body__padding: var(--ab-space-2); }
2261
+
2262
+ :root {
2263
+ --ab-cmp-adaptable-object-list-tag__margin-right: var(--ab-space-2);
2264
+ --ab-cmp-adaptable-object-list-tag__margin-top: var(--ab-space-2);
2265
+ --ab-cmp-adaptable-object-list-item__background-color: var(--ab-color-defaultbackground);
2266
+ --ab-cmp-adaptable-object-list-item__padding: var(--ab-space-3) var(--ab-space-3);
2267
+ --ab-cmp-adaptable-object-list-item__margin-bottom: var(--ab-space-3);
2268
+ --ab-cmp-adaptable-object-list-item-label__padding-top: var(--ab-space-3);
2269
+ --ab-cmp-adaptable-object-list-item-label__width: 130px;
2270
+ --ab-cmp-adaptable-object-list-item-tag__padding: 6px 12px; }
2271
+
2272
+ :root {
2273
+ --ab-cmp-adaptable-options__background-color: var(--ab-color-defaultbackground);
2274
+ --ab-cmp-grid-options__background-color: var(--ab-color-defaultbackground);
2275
+ --ab-cmp-grid-summary__background-color: var(--ab-color-defaultbackground); }
2276
+
2277
+ :root {
2278
+ --ab-cmp-system-status-list__background-color: var(--ab-color-defaultbackground); }
2279
+
2280
+ :root {
2281
+ --ab-cmp-dashboard-module-selector-background: var(--ab-color-defaultbackground); }
2282
+
2229
2283
  .ab-Radio-input:focus + svg rect {
2230
2284
  stroke: var(--ab-color-accent);
2231
2285
  stroke-width: 2; }
@@ -2341,7 +2395,6 @@ template {
2341
2395
  fill: var(--ab-color-text-on-primary);
2342
2396
  color: var(--ab-cmp-dialog__color);
2343
2397
  border-radius: var(--ab-cmp-dialog__border-radius);
2344
- min-height: var(--ab-cmp-dialog__min-height);
2345
2398
  display: flex;
2346
2399
  flex-flow: column; }
2347
2400
 
@@ -2354,8 +2407,8 @@ template {
2354
2407
 
2355
2408
  .ab-Dialog__close-button {
2356
2409
  position: absolute;
2357
- right: 0.7rem;
2358
- top: 0;
2410
+ right: 6px;
2411
+ top: 6px;
2359
2412
  font-size: var(--ab-font-size-3);
2360
2413
  font-weight: 700;
2361
2414
  line-height: 1;
@@ -2593,6 +2646,9 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
2593
2646
  z-index: 1000;
2594
2647
  font-family: var(--ab__font-family); }
2595
2648
 
2649
+ .ab-Modal.ab-Modal--resizable-and-movable {
2650
+ position: relative; }
2651
+
2596
2652
  .ab-Modal-backdrop {
2597
2653
  background: var(--ab-cmp-modal-backdrop__background);
2598
2654
  z-index: 900;
@@ -2678,6 +2734,7 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
2678
2734
  display: flex;
2679
2735
  flex-flow: column;
2680
2736
  max-height: var(--ab-cmp-panel__max-height);
2737
+ overflow: auto;
2681
2738
  font-size: var(--ab-cmp-panel__font-size); }
2682
2739
 
2683
2740
  .ab-Panel .glyphicon {
@@ -3161,57 +3218,70 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
3161
3218
 
3162
3219
  :root {
3163
3220
  --ab-cmp-toggle-button__background: #ccc;
3164
- --ab-cmp-toggle-button--active__background: var(--ab-color-success); }
3221
+ --ab-cmp-toggle-button--active__background: var(--ab-color-success);
3222
+ --ab-cmp-toggle-button__font-size: var(--ab-font-size-1);
3223
+ --ab-cmp-toggle-button__color: var(--ab-color-text-on-primary);
3224
+ --ab-cmp-toggle-button--checked__color: var(--ab-color-accentlight); }
3165
3225
 
3166
3226
  .ab-ToggleButton {
3167
3227
  position: relative;
3168
3228
  display: inline-block;
3169
3229
  min-width: 40px;
3170
- width: 40px;
3171
- height: 25px; }
3230
+ width: 87px;
3231
+ height: 32px; }
3172
3232
 
3173
3233
  .ab-ToggleButton:hover:not(.ab-ToggleButton--disabled) {
3174
3234
  cursor: pointer;
3175
3235
  opacity: 0.85; }
3176
3236
 
3177
3237
  .ab-ToggleButton__input {
3178
- opacity: 0;
3179
- width: 0;
3180
- height: 0; }
3238
+ opacity: 0;
3239
+ width: 0;
3240
+ height: 0; }
3181
3241
 
3182
3242
  .ab-ToggleButton__slider {
3183
- position: absolute;
3184
- top: 0;
3185
- left: 0;
3186
- right: 0;
3187
- bottom: 0;
3188
- background-color: var(--ab-cmp-toggle-button__background);
3189
- transition: 0.1s;
3190
- border-radius: var(--ab__border-radius); }
3243
+ position: absolute;
3244
+ top: 0;
3245
+ left: 0;
3246
+ right: 0;
3247
+ bottom: 0;
3248
+ background-color: var(--ab-cmp-toggle-button__background);
3249
+ transition: 0.1s;
3250
+ border-radius: var(--ab__border-radius); }
3191
3251
 
3192
3252
  .ab-ToggleButton__slider:before {
3193
- position: absolute;
3194
- content: "";
3195
- width: 19px;
3196
- height: 19px;
3197
- left: 3px;
3198
- top: 3px;
3199
- border-radius: var(--ab__border-radius);
3200
- background-color: #fff;
3201
- -webkit-transition: 0.4s;
3202
- transition: 0.2s; }
3253
+ position: absolute;
3254
+ content: "";
3255
+ width: 24px;
3256
+ height: 24px;
3257
+ left: 4px;
3258
+ top: 4px;
3259
+ border-radius: var(--ab__border-radius);
3260
+ background-color: #fff;
3261
+ -webkit-transition: 0.4s;
3262
+ transition: 0.2s; }
3203
3263
 
3204
3264
  .ab-ToggleButton__input:checked + .ab-ToggleButton__slider {
3205
- background-color: var(--ab-cmp-toggle-button--active__background); }
3265
+ background-color: var(--ab-cmp-toggle-button--active__background); }
3206
3266
 
3207
3267
  .ab-ToggleButton__input:checked + .ab-ToggleButton__slider:before {
3208
- transform: translateX(15px); }
3268
+ transform: translateX(54px); }
3209
3269
 
3210
3270
  .ab-ToggleButton__input:focus + .ab-ToggleButton__slider {
3211
- box-shadow: var(--ab-focus__box-shadow); }
3271
+ box-shadow: var(--ab-focus__box-shadow); }
3212
3272
 
3213
3273
  .ab-ToggleButton__input:disabled + .ab-ToggleButton__slider {
3214
- opacity: 0.5; }
3274
+ opacity: 0.5; }
3275
+
3276
+ .ab-ToggleButton .ab-ToggleButton__text {
3277
+ font-size: var(--ab-cmp-toggle-button__font-size);
3278
+ padding-right: var(--ab-space-2);
3279
+ color: var(--ab-cmp-toggle-button__color);
3280
+ font-weight: 600; }
3281
+
3282
+ .ab-ToggleButton--checked .ab-ToggleButton__text {
3283
+ padding-left: var(--ab-space-2);
3284
+ color: var(--ab-cmp-toggle-button--checked__color); }
3215
3285
 
3216
3286
  .ab-Loader {
3217
3287
  font-size: var(--ab-cmp-loader__font-size);
@@ -3270,6 +3340,25 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
3270
3340
  font-style: var(--ab-cmp-progress-indicator__font-style);
3271
3341
  font-family: var(--ab-cmp-progress-indicator__font-family); }
3272
3342
 
3343
+ :root {
3344
+ --ab-cmp-Tag__font-size: var(--ab-font-size-3); }
3345
+
3346
+ .ab-Tag {
3347
+ display: inline-flex;
3348
+ font-size: var(--ab-cmp-Tag__font-size); }
3349
+
3350
+ .ab-AdaptableOptions {
3351
+ background: var(--ab-cmp-adaptable-options__background-color); }
3352
+
3353
+ .ab-GridOptions {
3354
+ background: var(--ab-cmp-grid-options__background-color); }
3355
+
3356
+ .ab-GridSummary {
3357
+ background: var(--ab-cmp-grid-summary__background-color); }
3358
+
3359
+ .ab-SystemStatus-Popup-List {
3360
+ background: var(--ab-cmp-system-status-list__background-color); }
3361
+
3273
3362
  .ab-ObjectCollection__list > * {
3274
3363
  background: var(--ab-cmp-listgroupitem__background);
3275
3364
  color: var(--ab-cmp-listgroupitem__color); }
@@ -3390,6 +3479,9 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
3390
3479
  .ab-Dashboard__application-icon {
3391
3480
  margin-right: var(--ab-space-2); }
3392
3481
 
3482
+ .ab-Dashboard-Popup__Module-Selector {
3483
+ background: var(--ab-cmp-dashboard-module-selector-background); }
3484
+
3393
3485
  .ab-ToolPanel {
3394
3486
  flex: 1 1 0;
3395
3487
  min-width: 0;
@@ -3419,6 +3511,124 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
3419
3511
  .ab-CustomSortWizard__SortOrder .ab-Loader__text {
3420
3512
  font-size: var(--ab-cmp-custom-sort-wizard-loader__font-size); }
3421
3513
 
3514
+ .ab-Adaptable-Popup {
3515
+ background: var(--ab-cmp-adaptable-popup__background);
3516
+ max-height: var(--ab-cmp-adaptable-popup__max-height); }
3517
+
3518
+ .ab-Adaptable-Popup__Navigation {
3519
+ padding-top: 10px;
3520
+ overflow: auto;
3521
+ border-right: var(--ab-cmp-adaptable-popup-navigation-list__border-right);
3522
+ font-family: var(--ab__font-family); }
3523
+
3524
+ .ab-Adaptable-Popup__Navigation__List {
3525
+ list-style: none;
3526
+ padding: var(--ab-cmp-adaptable-popup-navigation-list__padding);
3527
+ margin: 0;
3528
+ font-size: var(--ab-cmp-adaptable-popup-navigation-list__font-size); }
3529
+
3530
+ .ab-Adaptable-Popup__Navigation__List__Item {
3531
+ padding: var(--ab-cmp-adaptable-popup-navigation-list-item__padding);
3532
+ margin-bottom: var(--ab-cmp-adaptable-popup-navigation-list-item__margin-bottom); }
3533
+
3534
+ .ab-Adaptable-Popup__Navigation__List__Item__Separator {
3535
+ border-bottom: var(--ab-cmp-adaptable-popup-navigation-list-item-separator__border);
3536
+ margin: var(--ab-cmp-adaptable-popup-navigation-list-item-separator__margin); }
3537
+
3538
+ .ab-Adaptable-Popup__Navigation__List__Item__Button {
3539
+ background: none;
3540
+ border: none;
3541
+ width: 100%;
3542
+ text-align: left;
3543
+ cursor: pointer;
3544
+ padding: var(--ab-cmp-adaptable-popup-navigation-list-item-button__padding);
3545
+ border-radius: var(--ab-cmp-adaptable-popup-navigation-list-item-button__border-radius);
3546
+ color: var(--ab-cmp-adaptable-popup-navigation-list-item-button__color); }
3547
+
3548
+ .ab-Adaptable-Popup__Navigation__List__Item__Icon {
3549
+ margin-right: var(--ab-cmp-adaptable-popup-topbar-icon__margin-right); }
3550
+
3551
+ .ab-Adaptable-Popup__Navigation__List__Item--active .ab-Adaptable-Popup__Navigation__List__Item__Button {
3552
+ background: var(--ab-cmp-adaptable-popup-navigation-list-item-button__background--active);
3553
+ color: var(--ab-cmp-adaptable-popup-navigation-list-item-button__background--color); }
3554
+
3555
+ .ab-Adaptable-Popup__TopBar {
3556
+ display: flex;
3557
+ align-items: center;
3558
+ background: var(--ab-cmp-adaptable-popup-topbar__background);
3559
+ height: var(--ab-cmp-adaptable-popup-topbar__height);
3560
+ color: var(--ab-cmp-adaptable-popup-topbar__color);
3561
+ font-weight: var(--ab-cmp-adaptable-popup-topbar__font-weight);
3562
+ padding: var(--ab-cmp-adaptable-popup-topbar__padding);
3563
+ box-sizing: border-box; }
3564
+
3565
+ .ab-Adaptable-Popup__TopBar__Icon {
3566
+ margin-right: var(--ab-cmp-adaptable-popup-topbar-icon__margin-right); }
3567
+
3568
+ .ab-Adaptable-Popup__TopBar__Close .ab-Icon {
3569
+ color: var(--ab-cmp-adaptable-popup-topbar-icon__color); }
3570
+
3571
+ .ab-Adaptable-Popup--settings-popup {
3572
+ height: var(--ab-cmp-adaptable-popup--settings__height); }
3573
+
3574
+ .ab-Adaptable-Popup--settings-popup .ab-Dialog__close-button {
3575
+ top: 9px; }
3576
+
3577
+ .ab-Adaptable-Popup--settings-popup .ab-Adaptable-Popup__Body {
3578
+ padding: var(--ab-cmp-adaptable-popup--settings__padding);
3579
+ min-width: 0; }
3580
+
3581
+ .ab-Adaptable-Popup__Panel__Header {
3582
+ display: flex;
3583
+ padding: 0 var(--ab-cmp-adaptable-popup-panel__padding);
3584
+ margin-bottom: var(--ab-cmp-adaptable-popup-panel__margin-bottom);
3585
+ margin-top: var(--ab-cmp-adaptable-popup-panel__margin-top); }
3586
+
3587
+ .ab-Adaptable-Popup__Panel__Header__Title {
3588
+ font-size: var(--ab-cmp-adaptable-popup-panel-title__font-size); }
3589
+
3590
+ .ab-Adaptable-Popup__Panel__Body {
3591
+ padding: var(--ab-cmp-adaptable-popup-panel-body__padding);
3592
+ flex: 1 1 0;
3593
+ min-height: 0;
3594
+ overflow: auto; }
3595
+
3596
+ .ab-Adaptable-Popup--window .ab-Adaptable-Popup__TopBar {
3597
+ cursor: move; }
3598
+
3599
+ .ab-Adaptable-Popup--window.ab-Adaptable-Popup--action-popup .ab-Panel__header {
3600
+ cursor: move; }
3601
+
3602
+ .ab-Adaptable-Object-List {
3603
+ list-style: none;
3604
+ padding: 0; }
3605
+
3606
+ .ab-Adaptable-Object-List .ab-Tag {
3607
+ margin-right: var(--ab-cmp-adaptable-object-list-tag__margin-right);
3608
+ margin-top: var(--ab-cmp-adaptable-object-list-tag__margin-top);
3609
+ padding: var(--ab-cmp-adaptable-object-list-item-tag__padding); }
3610
+
3611
+ .ab-Adaptable-Object-List__Item {
3612
+ background-color: var(--ab-cmp-adaptable-object-list-item__background-color);
3613
+ padding: var(--ab-cmp-adaptable-object-list-item__padding);
3614
+ margin-bottom: var(--ab-cmp-adaptable-object-list-item__margin-bottom); }
3615
+
3616
+ .ab-Adaptable-Object-List__Item__edit-property {
3617
+ visibility: hidden; }
3618
+
3619
+ .ab-Adaptable-Object-List__Item__buttons {
3620
+ padding-left: var(--ab-space-2);
3621
+ min-width: 80px;
3622
+ text-align: right;
3623
+ margin-left: var(--ab-space-3); }
3624
+
3625
+ .ab-Adaptable-Object-List__Item__label {
3626
+ padding-top: var(--ab-cmp-adaptable-object-list-item-label__padding-top);
3627
+ width: var(--ab-cmp-adaptable-object-list-item-label__width); }
3628
+
3629
+ .ab-Adaptable-Object-List__Item__label:hover .ab-Adaptable-Object-List__Item__edit-property {
3630
+ visibility: visible; }
3631
+
3422
3632
  .ab-alert--error {
3423
3633
  background: var(--ab-color-error); }
3424
3634
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adaptabletools/adaptable-react-aggrid",
3
- "version": "10.0.4-canary.4",
3
+ "version": "10.0.4-canary.5",
4
4
  "description": "React version of the powerful data-agnostic HTML5 datagrid add-on that sits on top of the agGrid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
5
5
  "keywords": [],
6
6
  "main": "src/index.js",
@@ -20,11 +20,11 @@
20
20
  }
21
21
  },
22
22
  "dependencies": {
23
- "@adaptabletools/adaptable": "10.0.4-canary.4"
23
+ "@adaptabletools/adaptable": "10.0.4-canary.5"
24
24
  },
25
25
  "peerDependencies": {
26
- "@ag-grid-community/all-modules": ">=26.0.0",
27
- "@ag-grid-community/react": ">=26.0.0",
26
+ "@ag-grid-community/all-modules": ">=26.2.0",
27
+ "@ag-grid-community/react": ">=26.2.0",
28
28
  "react": ">=16.8.0",
29
29
  "react-dom": ">=16.8.0"
30
30
  }
package/src/components/AdaptableReact.d.ts CHANGED
@@ -2,16 +2,16 @@ import * as React from 'react';
2
2
  import { AdaptableApi } from '@adaptabletools/adaptable/types';
3
3
  import { AdaptableOptions } from '@adaptabletools/adaptable/types';
4
4
  import { GridOptions, Module } from '@ag-grid-community/all-modules';
5
- declare const AdaptableReact: ({ adaptableOptions, gridOptions, onAdaptableReady, modules, ...props }: {
5
+ declare const AdaptableReact: ({ adaptableOptions, agGridOptions, onAdaptableReady, modules, ...props }: {
6
6
  adaptableOptions: AdaptableOptions;
7
- gridOptions?: GridOptions;
7
+ agGridOptions?: GridOptions;
8
8
  /**
9
9
  * An array of agGrid modules
10
10
  */
11
11
  modules: Module[];
12
12
  onAdaptableReady?: (adaptableReadyInfo: {
13
13
  adaptableApi: AdaptableApi;
14
- gridOptions: GridOptions;
14
+ agGridOptions: GridOptions;
15
15
  }) => void;
16
16
  } & React.HTMLProps<HTMLDivElement>) => JSX.Element;
17
17
  export default AdaptableReact;
package/src/components/AdaptableReact.js CHANGED
@@ -18,12 +18,12 @@ if (package_json_1.version !== version_1.default) {
18
18
  }
19
19
  const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
20
20
  const AdaptableReact = (_a) => {
21
- var { adaptableOptions, gridOptions, onAdaptableReady, modules } = _a, props = tslib_1.__rest(_a, ["adaptableOptions", "gridOptions", "onAdaptableReady", "modules"]);
21
+ var { adaptableOptions, agGridOptions, onAdaptableReady, modules } = _a, props = tslib_1.__rest(_a, ["adaptableOptions", "agGridOptions", "onAdaptableReady", "modules"]);
22
22
  const seedId = react_1.useMemo(() => `${getRandomInt(1000)}-${Date.now()}`, []);
23
23
  const adaptableContainerId = `adaptable-${seedId}`;
24
24
  react_1.useLayoutEffect(() => {
25
25
  let adaptableApi;
26
- agGrid_1.default.initInternal(Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: adaptableContainerId }), vendorGrid: gridOptions || adaptableOptions.vendorGrid }), { waitForAgGrid: true, modules }).then((api) => {
26
+ agGrid_1.default.initInternal(Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: adaptableContainerId }), agGridOptions: agGridOptions || adaptableOptions.agGridOptions }), { waitForAgGrid: true, modules }).then((api) => {
27
27
  adaptableApi = api;
28
28
  logger_1.LogAdaptableInfo('AdaptableReady');
29
29
  if (onAdaptableReady) {