inviton-powerduck 0.0.87 → 0.0.90

package/common/utils/dropdown-utils.ts

@@ -1,7 +1,7 @@
 import { PortalUtils } from "./utils";
 
 export default class DropdownUtils {
-    static bindDropdownOverflowHack(selector: string, cacheKey: string, hide: boolean): void {
+    static bindDropdownOverflowHack(selector: string, cacheKey: string, clonedRootCssClass: string, hide: boolean): void {
         if (DropdownUtils[cacheKey] == null) {
             DropdownUtils[cacheKey] = true;
 
@@ -30,11 +30,15 @@ export default class DropdownUtils {
                         });
                     }
 
+                    thisDropdownCopy.find('button').addClass('show');
+                    thisDropdownCopy.find('.dropdown-menu').addClass('show');
+                    thisDropdownCopy.addClass(clonedRootCssClass);
+
                     $("body").append(
                         thisDropdownCopy.addClass(randomId + " show").css({
                             position: "absolute",
                             left: thisDropdown.offset().left,
-                            top: thisDropdown.offset().top - 10,
+                            top: thisDropdown.offset().top,
                         }),
                     );
 
@@ -45,12 +49,15 @@ export default class DropdownUtils {
                 })
                 .on("hidden.bs.dropdown", ".dropdown", function (e) {
                     let id = $(this).attr("data-hcid") || "";
-                    if (id.endsWith("-clone")) {
-                        let originalId = id.replace("-clone", "");
-                        let originalDropdown = $("[data-hcid='" + originalId + "']");
-                        originalDropdown.css("visibility", "").show();
-                        $(this).remove();
+                    if (id.length == 0) {
+                        return;
+                    }
+
+                    const clonedId = id.includes('-clone') ? id : `${id}-clone`;
+                    const clonedDropdown = $("[data-hcid='" + clonedId + "']");
 
+                    if (clonedDropdown.length > 0) {
+                        clonedDropdown.remove();
                         e.preventDefault();
                         e.stopPropagation();
                         e.stopImmediatePropagation();

package/components/app/dynamic-component-container.tsx

@@ -85,5 +85,5 @@ class DynamicComponentContainerComponent extends Vue implements IDynamicComponen
     }
 }
 
-const DynamicComponentContainer = toNative(DynamicComponentContainerComponent)
+const DynamicComponentContainer = toNative(DynamicComponentContainerComponent)
 export default DynamicComponentContainer

package/components/app/root-dynamic-component-container.tsx

@@ -30,5 +30,5 @@ class RootDynamicComponentContainerComponent extends Vue implements IDynamicComp
     }
 }
 
-const RootDynamicComponentContainer = toNative(RootDynamicComponentContainerComponent)
+const RootDynamicComponentContainer = toNative(RootDynamicComponentContainerComponent)
 export default RootDynamicComponentContainer

package/components/button/button.tsx

@@ -122,5 +122,5 @@ class ButtonComponent extends TsxComponent<ButtonArgs> implements ButtonArgs {
     }
 }
 
-const Button = toNative(ButtonComponent)
+const Button = toNative(ButtonComponent)
 export default Button

package/components/button/excel-upload-button.tsx

@@ -55,5 +55,5 @@ class ExcelUploadButtonComponent extends TsxComponent<ExcelUploadButtonArgs> imp
     }
 }
 
-const ExcelUploadButton = toNative(ExcelUploadButtonComponent)
+const ExcelUploadButton = toNative(ExcelUploadButtonComponent)
 export default ExcelUploadButton

package/components/button/ladda-button.tsx

@@ -61,5 +61,5 @@ class LaddaButtonComponent extends TsxComponent<LaddaButtonArgs> implements Ladd
     }
 }
 
-const LaddaButton = toNative(LaddaButtonComponent)
+const LaddaButton = toNative(LaddaButtonComponent)
 export default LaddaButton

package/components/button/text-button.tsx

@@ -62,5 +62,5 @@ class TextButtonComponent extends TsxComponent<TextButtonArgs> implements TextBu
     }
 }
 
-const TextButton = toNative(TextButtonComponent)
+const TextButton = toNative(TextButtonComponent)
 export default TextButton

package/components/button/upload-button.tsx

@@ -176,5 +176,5 @@ class UploadButtonComponent extends TsxComponent<UploadButtonArgs> implements Up
     }
 }
 
-const UploadButton = toNative(UploadButtonComponent)
+const UploadButton = toNative(UploadButtonComponent)
 export default UploadButton

package/components/card/card-body.tsx

@@ -9,5 +9,5 @@ class CardBodyComponent extends TsxComponent<CardBodyArgs> implements CardBodyAr
     }
 }
 
-const CardBody = toNative(CardBodyComponent)
+const CardBody = toNative(CardBodyComponent)
 export default CardBody

package/components/card/card-header-with-options.tsx

@@ -54,5 +54,5 @@ class CardHeaderWithOptionsComponent extends TsxComponent<CardHeaderWithOptionsA
     }
 }
 
-const CardHeaderWithOptions = toNative(CardHeaderWithOptionsComponent)
+const CardHeaderWithOptions = toNative(CardHeaderWithOptionsComponent)
 export default CardHeaderWithOptions

package/components/card/card-header.tsx

@@ -30,5 +30,5 @@ class CardHeaderComponent extends TsxComponent<CardHeaderArgs> implements CardHe
     }
 }
 
-const CardHeader = toNative(CardHeaderComponent)
+const CardHeader = toNative(CardHeaderComponent)
 export default CardHeader

package/components/card/card.tsx

@@ -72,5 +72,5 @@ class CardComponent extends TsxComponent<CardArgs> implements CardArgs {
 	}
 }
 
-const Card = toNative(CardComponent)
+const Card = toNative(CardComponent)
 export default Card

package/components/collapse/index.tsx

@@ -39,5 +39,5 @@ class CollapseComponent extends TsxComponent<CollapseArgs> implements CollapseAr
     }
 }
 
-const Collapse = toNative(CollapseComponent)
+const Collapse = toNative(CollapseComponent)
 export default Collapse

package/components/contenteditable/index.tsx

@@ -50,5 +50,5 @@ class ContentEditableComponent extends TsxComponent<ContentEditableArgs> impleme
     }
 }
 
-const ContentEditable = toNative(ContentEditableComponent)
+const ContentEditable = toNative(ContentEditableComponent)
 export default ContentEditable

package/components/context-menu/context-menu.tsx

@@ -19,5 +19,5 @@ class ContextMenuComponent extends TsxComponent<ContextMenuArgs> implements Cont
     }
 }
 
-const ContextMenu = toNative(ContextMenuComponent)
+const ContextMenu = toNative(ContextMenuComponent)
 export default ContextMenu

package/components/counter/fetchdata.tsx

@@ -91,5 +91,5 @@ class FetchDataComponentComponent extends PowerduckViewModelBase {
     }
 }
 
-const FetchDataComponent = toNative(FetchDataComponentComponent)
+const FetchDataComponent = toNative(FetchDataComponentComponent)
 export default FetchDataComponent

package/components/counter/index.tsx

@@ -97,5 +97,5 @@ class CounterComponentComponent extends Vue {
     }
 }
 
-const CounterComponent = toNative(CounterComponentComponent)
+const CounterComponent = toNative(CounterComponentComponent)
 export default CounterComponent

package/components/datatable/col-vis-modal.tsx

@@ -59,5 +59,5 @@ class ColVisModalComponent extends TsxComponent<ColVisModalArgs> implements ColV
     }
 }
 
-const ColVisModal = toNative(ColVisModalComponent)
+const ColVisModal = toNative(ColVisModalComponent)
 export default ColVisModal

package/components/datatable/css/datatable.css

@@ -62,8 +62,8 @@
     display: block;
 }
 
-.dt-table.dt-table-mode table > thead > tr.dt-header th,
-.dt-table.dt-table-mode table > thead > tr.dt-header-filter th {
+.dt-table.dt-table-mode table>thead>tr.dt-header th,
+.dt-table.dt-table-mode table>thead>tr.dt-header-filter th {
     z-index: 39;
     cursor: pointer;
     font-weight: 400;
@@ -79,20 +79,26 @@
     border-bottom: 0;
     letter-spacing: -0.5px;
     background: white;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently
+    -webkit-touch-callout: none;
+    /* iOS Safari */
+    -webkit-user-select: none;
+    /* Safari */
+    -khtml-user-select: none;
+    /* Konqueror HTML */
+    -moz-user-select: none;
+    /* Firefox */
+    -ms-user-select: none;
+    /* Internet Explorer/Edge */
+    user-select: none;
+    /* Non-prefixed version, currently
                                   supported by Chrome and Opera */
 }
 
-.dt-table.dt-table-mode table > thead > tr.dt-header th.dt-header-notsortable {
+.dt-table.dt-table-mode table>thead>tr.dt-header th.dt-header-notsortable {
     cursor: default;
 }
 
-.dt-table.dt-table-mode table > tbody .dt-col-indexlabel {
+.dt-table.dt-table-mode table>tbody .dt-col-indexlabel {
     background: #0075bf;
     color: #fff;
     width: 25px;
@@ -107,16 +113,16 @@
     font-weight: 400;
 }
 
-.dt-table.dt-table-mode table > tbody > tr {
+.dt-table.dt-table-mode table>tbody>tr {
     transition: background 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
     will-change: background;
 }
 
-.dt-table.dt-table-mode table > tbody > tr:hover {
+.dt-table.dt-table-mode table>tbody>tr:hover {
     background: #eee;
 }
 
-.dt-table.dt-table-mode table > tbody > tr > td {
+.dt-table.dt-table-mode table>tbody>tr>td {
     border: 0;
     border-bottom: 1px solid #efefef;
     color: #2c2c2c;
@@ -127,20 +133,20 @@
     background: white;
 }
 
-.dt-table.dt-table-mode table > tbody > tr > td.dt-no-results {
+.dt-table.dt-table-mode table>tbody>tr>td.dt-no-results {
     border-bottom: 0;
 }
 
-.dt-table.dt-table-mode table > tbody > tr:nth-child(even) > td {
+.dt-table.dt-table-mode table>tbody>tr:nth-child(even)>td {
     background: #fbfbfb;
 }
 
 .dt-table.dt-table-mode .dt-filter-input .form-control {
-	background-color: #fff;
-	border: 0px;
-	font-size: 11px !important;
-	padding: 0;
-	min-height: 21.5px;
+    background-color: #fff;
+    border: 0px;
+    font-size: 11px !important;
+    padding: 0;
+    min-height: 21.5px;
 }
 
 .dt-table.dt-table-mode input.dt-filter-input,
@@ -228,7 +234,7 @@
     display: none;
 }
 
-.dt-table.dt-table-mode .select2-container.select2-container--default.select2-container--open > .select2-dropdown {
+.dt-table.dt-table-mode .select2-container.select2-container--default.select2-container--open>.select2-dropdown {
     border-color: #d8d8d8;
 }
 
@@ -353,7 +359,7 @@
     display: none;
 }
 
-.dt-top .dt-buttons .dt-button > span > i.now-ui-icons {
+.dt-top .dt-buttons .dt-button>span>i.now-ui-icons {
     transform: translateY(2px);
 }
 
@@ -390,11 +396,11 @@
     z-index: 59 !important;
 }
 
-.dt-massop-btn-wrap > .dropdown {
+.dt-massop-btn-wrap>.dropdown {
     display: inline-block;
 }
 
-td.dt-col-index .dt-selection-checkbox > .form-group,
+td.dt-col-index .dt-selection-checkbox>.form-group,
 th.dt-header-index .dt-header-indexcheckbox {
     position: absolute;
     top: 0;
@@ -406,7 +412,7 @@ th.dt-header-index .dt-header-indexcheckbox {
     left: 13px;
 }
 
-.dt-skin-compact .dt-table.dt-table-mode table > tbody > tr > td.dt-col-index .dt-selection-checkbox > .form-group {
+.dt-skin-compact .dt-table.dt-table-mode table>tbody>tr>td.dt-col-index .dt-selection-checkbox>.form-group {
     top: -12px;
 }
 
@@ -427,10 +433,6 @@ th.dt-header-index .dt-header-indexcheckbox {
     right: 0;
 }
 
-body > .dropdown > .btn.btn-sm {
-    font-size: 10.4px;
-}
-
 .dt-root.dt-breakpoint-desktop tbody .dropdown .dropdown-menu {
     display: none;
 }
@@ -439,11 +441,11 @@ body > .dropdown > .btn.btn-sm {
     display: none;
 }
 
-.dt-table.dt-table-mode table > tbody > tr > td {
+.dt-table.dt-table-mode table>tbody>tr>td {
     transition: background 150ms ease-in;
 }
 
-.dt-table.dt-table-mode table > tbody > tr:hover > td {
+.dt-table.dt-table-mode table>tbody>tr:hover>td {
     background: #eaeaea;
 }
 
@@ -490,8 +492,8 @@ body > .dropdown > .btn.btn-sm {
         justify-content: center;
     }
 
-    .dt-pagination-length > span,
-    .dt-pagination-length > span {
+    .dt-pagination-length>span,
+    .dt-pagination-length>span {
         font-size: 9px;
         position: absolute;
         left: 0px;
@@ -507,27 +509,28 @@ body > .dropdown > .btn.btn-sm {
         display: none;
     }
 }
+
 /*
     Compact mode - front is smaller and narrower
  */
-.dt-skin-compact .dt-table.dt-table-mode table > thead > tr.dt-header th,
-.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table > thead > tr.dt-header th {
+.dt-skin-compact .dt-table.dt-table-mode table>thead>tr.dt-header th,
+.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table>thead>tr.dt-header th {
     font-family: "BenchNine";
     font-weight: 100;
     text-transform: capitalize;
     font-size: 13px;
 }
 
-.dt-skin-compact .dt-table.dt-table-mode table > thead > tr.dt-header th,
-.dt-skin-compact .dt-table.dt-table-mode table > thead > tr.dt-header-filter th,
-.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table > thead > tr.dt-header th,
-.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table > thead > tr.dt-header-filter th {
+.dt-skin-compact .dt-table.dt-table-mode table>thead>tr.dt-header th,
+.dt-skin-compact .dt-table.dt-table-mode table>thead>tr.dt-header-filter th,
+.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table>thead>tr.dt-header th,
+.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table>thead>tr.dt-header-filter th {
     padding-left: 4px;
     padding-right: 4px;
 }
 
-.dt-skin-compact .dt-table.dt-table-mode table > tbody > tr > td,
-.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table > tbody > tr > td {
+.dt-skin-compact .dt-table.dt-table-mode table>tbody>tr>td,
+.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table>tbody>tr>td {
     font-weight: 400;
     text-transform: none;
     font-size: 11px;
@@ -536,8 +539,8 @@ body > .dropdown > .btn.btn-sm {
     color: #6d6d6d;
 }
 
-.dt-skin-compact .dt-table.dt-table-mode table > tbody .dt-col-indexlabel,
-.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table > tbody .dt-col-indexlabel {
+.dt-skin-compact .dt-table.dt-table-mode table>tbody .dt-col-indexlabel,
+.dt-breakpoint-mobile.dt-mobbehavior-compact .dt-table.dt-table-mode table>tbody .dt-col-indexlabel {
     width: 18px;
     height: 18px;
     font-size: 9px;
@@ -563,9 +566,9 @@ body > .dropdown > .btn.btn-sm {
 .dt-skin-compact .pagination .page-item .page-link,
 .dt-breakpoint-mobile.dt-mobbehavior-compact .pagination .page-item .page-link {
     min-width: 16px;
-	height: 20px;
-	line-height: 20px;
-	font-size: 11px;
+    height: 20px;
+    line-height: 20px;
+    font-size: 11px;
 }
 
 .dt-skin-compact .dt-col-indexcheckbox {
@@ -574,7 +577,7 @@ body > .dropdown > .btn.btn-sm {
     height: auto;
 }
 
-.dt-skin-compact .dt-selection-checkbox > div {
+.dt-skin-compact .dt-selection-checkbox>div {
     position: absolute;
     top: -10px;
     left: 0;
@@ -585,7 +588,7 @@ body > .dropdown > .btn.btn-sm {
     position: relative;
 }
 
-.dt-skin-compact .dt-header-indexcheckbox > div {
+.dt-skin-compact .dt-header-indexcheckbox>div {
     position: absolute;
     z-index: 2;
     left: 7px;
@@ -597,7 +600,7 @@ body > .dropdown > .btn.btn-sm {
     position: relative;
 }
 
-.header-filter-cell.dt-filtertype-dropdown > .dt-filter-dropdown {
+.header-filter-cell.dt-filtertype-dropdown>.dt-filter-dropdown {
     position: absolute;
     top: -2px;
     left: 9px;
@@ -605,33 +608,34 @@ body > .dropdown > .btn.btn-sm {
     z-index: 2;
 }
 
-.header-filter-cell.dt-filtertype-dropdown > .dt-filter-dropdown > .form-group {
+.header-filter-cell.dt-filtertype-dropdown>.dt-filter-dropdown>.form-group {
     margin-bottom: 0;
 }
 
 .header-filter-cell .input-group .input-group-text {
-	width: auto;
-	min-height: auto;
-	padding: 0px 3px;
-	margin: auto 0;
-	background-color: inherit;
-	border: inherit;
-	vertical-align: middle;
+    width: auto;
+    min-height: auto;
+    padding: 0px 3px;
+    margin: auto 0;
+    background-color: inherit;
+    border: inherit;
+    vertical-align: middle;
 }
 
-.dt-table.dt-table-mode table > thead > tr.dt-header th .dt-filter-dropdown,
-.dt-table.dt-table-mode table > thead > tr.dt-header-filter th .dt-filter-dropdown {
+.dt-table.dt-table-mode table>thead>tr.dt-header th .dt-filter-dropdown,
+.dt-table.dt-table-mode table>thead>tr.dt-header-filter th .dt-filter-dropdown {
     text-transform: none;
 }
 
-.dt-skin-compact .header-filter-cell.dt-filtertype-dropdown > .dt-filter-dropdown,
-.dt-mobbehavior-compact .header-filter-cell.dt-filtertype-dropdown > .dt-filter-dropdown {
+.dt-skin-compact .header-filter-cell.dt-filtertype-dropdown>.dt-filter-dropdown,
+.dt-mobbehavior-compact .header-filter-cell.dt-filtertype-dropdown>.dt-filter-dropdown {
     left: 4px;
 }
 
-.dt-device-desktop.dt-skin-default .header-filter-cell.dt-filtertype-dropdown > .dt-filter-dropdown {
+.dt-device-desktop.dt-skin-default .header-filter-cell.dt-filtertype-dropdown>.dt-filter-dropdown {
     left: 5px;
 }
+
 /*
     Vertical transform - items displayed as blocks
  */
@@ -680,6 +684,7 @@ body > .dropdown > .btn.btn-sm {
     width: 58%;
     display: inline-block;
 }
+
 /*
     Mobile mode - some experimental shit
  */
@@ -796,11 +801,11 @@ body > .dropdown > .btn.btn-sm {
     display: flex;
 }
 
-.dt-mobile-filter-rowone > div {
+.dt-mobile-filter-rowone>div {
     flex: 1;
 }
 
-.dt-mobile-filter-rowone > button {
+.dt-mobile-filter-rowone>button {
     margin: 0;
     margin-left: 1px;
 }
@@ -815,6 +820,7 @@ body > .dropdown > .btn.btn-sm {
     top: 50%;
     margin-top: -15px;
 }
+
 /*
    Table sizing
 */
@@ -888,48 +894,49 @@ body > .dropdown > .btn.btn-sm {
 }
 
 @media (max-width: 767px) {
+
     html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile),
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body,
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper,
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper > .main-panel,
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper > .main-panel > .content,
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper > .main-panel > .content > .frm-flex-container,
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper > .main-panel > .content > .frm-flex-container > .frm-flex-child,
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper > .main-panel .card.single-card,
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper > .main-panel .card.single-card > .card-body {
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body,
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper,
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper>.main-panel,
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper>.main-panel>.content,
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper>.main-panel>.content>.frm-flex-container,
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper>.main-panel>.content>.frm-flex-container>.frm-flex-child,
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper>.main-panel .card.single-card,
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper>.main-panel .card.single-card>.card-body {
         height: 100%;
     }
 
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile) > body > .wrapper > .main-panel .card.single-card {
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile)>body>.wrapper>.main-panel .card.single-card {
         height: calc(100% - 6px);
     }
 
-    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile.dt-fullsize-skin-default) > body > .wrapper > .main-panel .card.single-card > .card-body {
+    html.has-dt-fullsize.has-dt-fullsize-mobile:not(.dt-fullsize-beh-mobile.dt-fullsize-skin-default)>body>.wrapper>.main-panel .card.single-card>.card-body {
         padding-bottom: 0;
     }
 
-    html .has-dt-fullsize.has-dt-fullsize-mobile > body > .wrapper > .main-panel .card.single-card > .card-body .dt-root.dt-fullsize-table {
+    html .has-dt-fullsize.has-dt-fullsize-mobile>body>.wrapper>.main-panel .card.single-card>.card-body .dt-root.dt-fullsize-table {
         height: calc(100% - 10px);
     }
 
-    html.has-dt-fullsize.has-dt-fullsize-mobile.has-dt-fullsize-ios > body > .wrapper > .main-panel .card.single-card > .card-body .dt-root.dt-fullsize-table {
+    html.has-dt-fullsize.has-dt-fullsize-mobile.has-dt-fullsize-ios>body>.wrapper>.main-panel .card.single-card>.card-body .dt-root.dt-fullsize-table {
         height: 100%;
     }
 
-    html.has-dt-fullsize.has-dt-fullsize-mobile > body > .wrapper > .main-panel .card.single-card {
+    html.has-dt-fullsize.has-dt-fullsize-mobile>body>.wrapper>.main-panel .card.single-card {
         -webkit-overflow-scrolling: touch;
         overflow-y: auto;
     }
 
-    html.has-dt-fullsize.has-dt-fullsize-mobile > body > .wrapper > .main-panel .card.single-card > .card-body {
+    html.has-dt-fullsize.has-dt-fullsize-mobile>body>.wrapper>.main-panel .card.single-card>.card-body {
         padding-top: 15px;
     }
 
-    html.has-dt-fullsize.has-dt-fullsize-mobile > body > .wrapper > .main-panel .card.single-card > .card-header {
+    html.has-dt-fullsize.has-dt-fullsize-mobile>body>.wrapper>.main-panel .card.single-card>.card-header {
         display: none;
     }
 
-    html.has-dt-fullsize > body > .wrapper > .main-panel .card.single-card > .card-body {
+    html.has-dt-fullsize>body>.wrapper>.main-panel .card.single-card>.card-body {
         padding-left: 10px;
         padding-right: 10px;
         overflow-y: auto;
@@ -949,7 +956,7 @@ body > .dropdown > .btn.btn-sm {
 }
 
 @media (min-width: 768px) {
-    .table-upper-buttons-wrap + .dt-root .dt-massop-btn-wrap {
+    .table-upper-buttons-wrap+.dt-root .dt-massop-btn-wrap {
         padding-left: 0;
         padding-top: 5px;
     }
@@ -958,6 +965,7 @@ body > .dropdown > .btn.btn-sm {
 .has-dt-fullsize .dt-root.dt-mobbehavior-mobile.dt-breakpoint-mobile {
     height: auto !important;
 }
+
 /*
    iOS hacks
 */
@@ -970,10 +978,11 @@ body > .dropdown > .btn.btn-sm {
     margin-right: -20% !important;
     margin-bottom: -10px !important;
 }
+
 /*
     Other stylings
 */
-tr.dt-item > td button {
+tr.dt-item>td button {
     margin-top: 0;
     margin-bottom: 0;
 }
@@ -983,6 +992,6 @@ tr.dt-item > td button {
     margin-bottom: 1px;
 }
 
-.table-upper-buttons-wrap + .dt-static {
+.table-upper-buttons-wrap+.dt-static {
     margin-top: 20px;
-}
+}

package/components/datatable/datatable.tsx

@@ -2334,7 +2334,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 
 (function () {
     CheckboxUtils.bindTableShiftClick();
-    DropdownUtils.bindDropdownOverflowHack(".dt-root.dt-breakpoint-desktop tbody .dropdown", "dataTableDropdown", false);
+    DropdownUtils.bindDropdownOverflowHack(".dt-root.dt-breakpoint-desktop tbody .dropdown", "dataTableDropdown", "dt-dropdown-button-cloned", false);
 })();
 
 const DataTable = toNative(DataTableComponent);

package/components/datatable/filter-modal.tsx

@@ -168,5 +168,5 @@ class ColFilterModalComponent extends TsxComponent<ColFilterModalArgs> implement
     }
 }
 
-const ColFilterModal = toNative(ColFilterModalComponent)
+const ColFilterModal = toNative(ColFilterModalComponent)
 export default ColFilterModal

package/components/dropdown/image-dropdown.tsx

@@ -237,5 +237,5 @@ class ImageDropdownComponent extends TsxComponent<ImageDropdownArgs> implements
     }
 }
 
-const ImageDropdown = toNative(ImageDropdownComponent)
+const ImageDropdown = toNative(ImageDropdownComponent)
 export default ImageDropdown

package/components/dropdown/timezone-picker.tsx

@@ -289,5 +289,5 @@ class TimezonePickerComponent extends TsxComponent<TimezonePickerArgs> implement
     }
 }
 
-const TimezonePicker = toNative(TimezonePickerComponent)
+const TimezonePicker = toNative(TimezonePickerComponent)
 export default TimezonePicker

package/components/dropdown-button/dropdown-button-element.tsx

@@ -75,5 +75,5 @@ class DropdownButtonElementComponent extends TsxComponent<DropdownButtonElementA
     }
 }
 
-const DropdownButtonElement = toNative(DropdownButtonElementComponent)
+const DropdownButtonElement = toNative(DropdownButtonElementComponent)
 export default DropdownButtonElement

package/components/dropdown-button/dropdown-button-heading.tsx

@@ -13,5 +13,5 @@ class DropdownButtonHeadingComponent extends TsxComponent<DropdownButtonHeadingA
     }
 }
 
-const DropdownButtonHeading = toNative(DropdownButtonHeadingComponent)
+const DropdownButtonHeading = toNative(DropdownButtonHeadingComponent)
 export default DropdownButtonHeading

package/components/dropdown-button/dropdown-button-item.tsx

@@ -92,5 +92,5 @@ class DropdownButtonItemComponent extends TsxComponent<DropdownButtonItemArgs> i
     }
 }
 
-const DropdownButtonItem = toNative(DropdownButtonItemComponent)
+const DropdownButtonItem = toNative(DropdownButtonItemComponent)
 export default DropdownButtonItem

package/components/dropdown-button/dropdown-button-separator.tsx

@@ -9,5 +9,5 @@ class DropdownButtonSeparatorComponent extends TsxComponent<DropdownButtonItemAr
     }
 }
 
-const DropdownButtonSeparator = toNative(DropdownButtonSeparatorComponent)
+const DropdownButtonSeparator = toNative(DropdownButtonSeparatorComponent)
 export default DropdownButtonSeparator

package/components/dropdown-button/language-dropdown-button.tsx

@@ -50,5 +50,5 @@ class LanguageDropdownButtonComponent extends TsxComponent<LanguageDropdownButto
     }
 }
 
-const LanguageDropdownButton = toNative(LanguageDropdownButtonComponent)
+const LanguageDropdownButton = toNative(LanguageDropdownButtonComponent)
 export default LanguageDropdownButton

package/components/file-downloader/index.tsx

@@ -262,5 +262,5 @@ class FileDownloadDialogComponent extends TsxComponent<FileDownloadDialogBinding
     }
 }
 
-const FileDownloadDialog = toNative(FileDownloadDialogComponent)
+const FileDownloadDialog = toNative(FileDownloadDialogComponent)
 export default FileDownloadDialog

package/components/form/footer-buttons.tsx

@@ -13,5 +13,5 @@ class FooterButtonsComponent extends TsxComponent<FooterButtonsArgs> implements
     }
 }
 
-const FooterButtons = toNative(FooterButtonsComponent)
+const FooterButtons = toNative(FooterButtonsComponent)
 export default FooterButtons

package/components/form/form.tsx

@@ -9,5 +9,5 @@ class FormComponent extends TsxComponent<FormArgs> implements FormArgs {
     }
 }
 
-const Form = toNative(FormComponent)
+const Form = toNative(FormComponent)
 export default Form

package/components/form/separator.tsx

@@ -15,5 +15,5 @@ class SeparatorComponent extends TsxComponent<SeparatorArgs> implements Separato
     }
 }
 
-const Separator = toNative(SeparatorComponent)
+const Separator = toNative(SeparatorComponent)
 export default Separator

package/components/form/validation-result-displayer.tsx

@@ -32,5 +32,5 @@ class ValidationResultDisplayerComponent extends TsxComponent<ValidationResultDi
     }
 }
 
-const ValidationResultDisplayer = toNative(ValidationResultDisplayerComponent)
+const ValidationResultDisplayer = toNative(ValidationResultDisplayerComponent)
 export default ValidationResultDisplayer

package/components/fullcalendar/fullcalendar-draggable-event.tsx

@@ -82,5 +82,5 @@ class FullCalendarDraggableEventComponent extends TsxComponent<FullCalendarDragg
     }
 }
 
-const FullCalendarDraggableEvent = toNative(FullCalendarDraggableEventComponent)
+const FullCalendarDraggableEvent = toNative(FullCalendarDraggableEventComponent)
 export default FullCalendarDraggableEvent

package/components/fullcalendar/timegrid-calendar.tsx

@@ -496,5 +496,5 @@ class TimegridCalendarComponent extends TsxComponent<TimegridCalendarArgs> imple
     }
 }
 
-const TimegridCalendar = toNative(TimegridCalendarComponent)
+const TimegridCalendar = toNative(TimegridCalendarComponent)
 export default TimegridCalendar

package/components/google/maps.tsx

@@ -153,5 +153,5 @@ class GoogleMapComponent extends TsxComponent<GoogleMapArgs> implements GoogleMa
     }
 }
 
-const GoogleMap = toNative(GoogleMapComponent)
+const GoogleMap = toNative(GoogleMapComponent)
 export default GoogleMap

package/components/highlight-js/index.tsx

@@ -59,5 +59,5 @@ class HighlightJsComponent extends TsxComponent<HighlightJsArgs> implements High
     }
 }
 
-const HighlightJs = toNative(HighlightJsComponent)
+const HighlightJs = toNative(HighlightJsComponent)
 export default HighlightJs

package/components/home/index.tsx

@@ -45,5 +45,5 @@ class HomeComponentComponent extends Vue {
     }
 }
 
-const HomeComponent = toNative(HomeComponentComponent)
+const HomeComponent = toNative(HomeComponentComponent)
 export default HomeComponent

package/components/html-literal/html-literal.tsx

@@ -37,5 +37,5 @@ class HtmlLiteralComponent extends TsxComponent<HtmlLiteralArgs> implements Html
     }
 }
 
-const HtmlLiteral = toNative(HtmlLiteralComponent)
+const HtmlLiteral = toNative(HtmlLiteralComponent)
 export default HtmlLiteral

package/components/image-crop/image-cropping-modal.tsx

@@ -308,5 +308,5 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
     }
 }
 
-const ImageCropModal = toNative(ImageCropModalComponent)
+const ImageCropModal = toNative(ImageCropModalComponent)
 export default ImageCropModal

package/components/image-crop/upload-and-crop.tsx

@@ -175,5 +175,5 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
     }
 }
 
-const UploadImageAndCropButton = toNative(UploadImageAndCropButtonComponent)
+const UploadImageAndCropButton = toNative(UploadImageAndCropButtonComponent)
 export default UploadImageAndCropButton

package/components/input/checkbox-without-label.tsx

@@ -62,5 +62,5 @@ class CheckBoxWithoutLabelComponent extends TsxComponent<CheckBoxArgs> implement
     }
 }
 
-const CheckBoxWithoutLabel = toNative(CheckBoxWithoutLabelComponent)
+const CheckBoxWithoutLabel = toNative(CheckBoxWithoutLabelComponent)
 export default CheckBoxWithoutLabel

package/components/input/geo-json.tsx

@@ -53,5 +53,5 @@ class GeoJsonEditorComponent extends TsxComponent<GeoJsonEditorArgs> implements
     }
 }
 
-const GeoJsonEditor = toNative(GeoJsonEditorComponent)
+const GeoJsonEditor = toNative(GeoJsonEditorComponent)
 export default GeoJsonEditor

package/components/loading-indicator/index.tsx

@@ -36,5 +36,5 @@ class LoadingIndicatorComponent extends TsxComponent<LoadingIndicatorArgs> imple
     }
 }
 
-const LoadingIndicator = toNative(LoadingIndicatorComponent)
+const LoadingIndicator = toNative(LoadingIndicatorComponent)
 export default LoadingIndicator

package/components/modal/animation-error.tsx

@@ -25,5 +25,5 @@ class ModalAnimationErrorComponent extends TsxComponent<ModalAnimationErrorArgs>
     }
 }
 
-const ModalAnimationError = toNative(ModalAnimationErrorComponent)
+const ModalAnimationError = toNative(ModalAnimationErrorComponent)
 export default ModalAnimationError

package/components/modal/animation-success.tsx

@@ -27,5 +27,5 @@ class ModalAnimationSuccessComponent extends TsxComponent<ModalAnimationSuccessA
     }
 }
 
-const ModalAnimationSuccess = toNative(ModalAnimationSuccessComponent)
+const ModalAnimationSuccess = toNative(ModalAnimationSuccessComponent)
 export default ModalAnimationSuccess

package/components/modal/icon-question.tsx

@@ -22,5 +22,5 @@ class ModalIconQuestionComponent extends TsxComponent<ModalIconQuestionArgs> imp
     }
 }
 
-const ModalIconQuestion = toNative(ModalIconQuestionComponent)
+const ModalIconQuestion = toNative(ModalIconQuestionComponent)
 export default ModalIconQuestion

package/components/modal/icon-warning.tsx

@@ -22,5 +22,5 @@ class ModalIconWarningComponent extends TsxComponent<ModalIconWarningArgs> imple
     }
 }
 
-const ModalIconWarning = toNative(ModalIconWarningComponent)
+const ModalIconWarning = toNative(ModalIconWarningComponent)
 export default ModalIconWarning

package/components/modal/modal-body.tsx

@@ -13,5 +13,5 @@ class ModalBodyComponent extends TsxComponent<ModalBodyArgs> implements ModalBod
     }
 }
 
-const ModalBody = toNative(ModalBodyComponent)
+const ModalBody = toNative(ModalBodyComponent)
 export default ModalBody

package/components/modal/modal-footer.tsx

@@ -9,5 +9,5 @@ class ModalFooterComponent extends TsxComponent<ModalFooterArgs> implements Moda
     }
 }
 
-const ModalFooter = toNative(ModalFooterComponent)
+const ModalFooter = toNative(ModalFooterComponent)
 export default ModalFooter

package/components/modal-wrap/modal-section-wrapper.tsx

@@ -61,5 +61,5 @@ class ModalSectionWrapperComponent extends TsxComponent<ModalSectionWrapperArgs>
     }
 }
 
-const ModalSectionWrapper = toNative(ModalSectionWrapperComponent)
+const ModalSectionWrapper = toNative(ModalSectionWrapperComponent)
 export default ModalSectionWrapper

package/components/modal-wrap/modal-subtitle.tsx

@@ -15,5 +15,5 @@ class ModalSubtitleComponent extends TsxComponent<TabPageArgs> implements TabPag
     }
 }
 
-const ModalSubtitle = toNative(ModalSubtitleComponent)
+const ModalSubtitle = toNative(ModalSubtitleComponent)
 export default ModalSubtitle

package/components/progress-bar/index.tsx

@@ -121,5 +121,5 @@ class ProgressBarComponent extends TsxComponent<ProgressBarArgs> implements Prog
     }
 }
 
-const ProgressBar = toNative(ProgressBarComponent)
+const ProgressBar = toNative(ProgressBarComponent)
 export default ProgressBar

package/components/rating/rating-displayer.tsx

@@ -28,5 +28,5 @@ class RatingDisplayerComponent extends TsxComponent<RatingDisplayerArgs> impleme
     }
 }
 
-const RatingDisplayer = toNative(RatingDisplayerComponent)
+const RatingDisplayer = toNative(RatingDisplayerComponent)
 export default RatingDisplayer

package/components/rating/rating-picker.tsx

@@ -80,5 +80,5 @@ class RatingPickerComponent extends TsxComponent<RatingPickerArgs> implements Ra
     }
 }
 
-const RatingPicker = toNative(RatingPickerComponent)
+const RatingPicker = toNative(RatingPickerComponent)
 export default RatingPicker

package/components/share/share-modal.tsx

@@ -265,5 +265,5 @@ class ShareModalComponent extends TsxComponent<ShareComponentBindingArgs> implem
     }
 }
 
-const ShareModal = toNative(ShareModalComponent)
+const ShareModal = toNative(ShareModalComponent)
 export default ShareModal

package/components/share/share.tsx

@@ -237,5 +237,5 @@ class ShareComponentComponent extends TsxComponent<ShareComponentArgs> implement
     }
 }
 
-const ShareComponent = toNative(ShareComponentComponent)
+const ShareComponent = toNative(ShareComponentComponent)
 export default ShareComponent

package/components/sortable/sortable-container.tsx

@@ -59,5 +59,5 @@ class SortableContainerComponent extends TsxComponent<SortableContainerArgs> imp
     }
 }
 
-const SortableContainer = toNative(SortableContainerComponent)
+const SortableContainer = toNative(SortableContainerComponent)
 export default SortableContainer

package/components/sortable/sortable-item.tsx

@@ -15,5 +15,5 @@ class SortableItemComponent extends TsxComponent<SortableItemArgs> implements So
     }
 }
 
-const SortableItem = toNative(SortableItemComponent)
+const SortableItem = toNative(SortableItemComponent)
 export default SortableItem

package/components/spreadsheet/spreadsheet.tsx

@@ -132,5 +132,5 @@ class SpreadsheetComponent extends TsxComponent<SpreadsheetArgs> implements Spre
     }
 }
 
-const Spreadsheet = toNative(SpreadsheetComponent)
+const Spreadsheet = toNative(SpreadsheetComponent)
 export default Spreadsheet

package/components/summary-stats/summary-stats.tsx

@@ -15,5 +15,5 @@ class SummaryStatsComponent extends TsxComponent<SummaryStatsArgs> implements Su
     }
 }
 
-const SummaryStats = toNative(SummaryStatsComponent)
+const SummaryStats = toNative(SummaryStatsComponent)
 export default SummaryStats

package/components/swiper/swiper-gallery.tsx

@@ -86,5 +86,5 @@ class SwiperGalleryComponent extends TsxComponent<SwiperGalleryArgs> implements
     }
 }
 
-const SwiperGallery = toNative(SwiperGalleryComponent)
+const SwiperGallery = toNative(SwiperGalleryComponent)
 export default SwiperGallery

package/components/swiper/swiper-slide.tsx

@@ -9,5 +9,5 @@ class SwiperSlideComponent extends TsxComponent<SwiperSlideArgs> implements Swip
     }
 }
 
-const SwiperSlide = toNative(SwiperSlideComponent)
+const SwiperSlide = toNative(SwiperSlideComponent)
 export default SwiperSlide

package/components/swiper/swiper.tsx

@@ -131,5 +131,5 @@ class SwiperComponent extends TsxComponent<SwiperArgs> implements SwiperArgs {
     }
 }
 
-const Swiper = toNative(SwiperComponent)
+const Swiper = toNative(SwiperComponent)
 export default Swiper

package/components/table-wrapper/css/table-wrapper.css

@@ -38,7 +38,7 @@
 
 .table-upper-buttons-wrap {
     position: absolute;
-    top: 20px;
+    top: 8px;
     z-index: 1;
 }
 

package/components/table-wrapper/table-wrapper.tsx

@@ -23,5 +23,5 @@ class TableWrapperComponent extends TsxComponent<TableWrapperArgs> implements Ta
     }
 }
 
-const TableWrapper = toNative(TableWrapperComponent)
+const TableWrapper = toNative(TableWrapperComponent)
 export default TableWrapper

package/components/tilebox/tilebox.tsx

@@ -77,5 +77,5 @@ class TileboxComponent extends TsxComponent<TileboxArgs> implements TileboxArgs
     }
 }
 
-const Tilebox = toNative(TileboxComponent)
+const Tilebox = toNative(TileboxComponent)
 export default Tilebox

package/components/tooltip/index.tsx

@@ -96,5 +96,5 @@ class TooltipContainerComponent extends TsxComponent<TooltipContainerArgs> imple
     }
 }
 
-const TooltipContainer = toNative(TooltipContainerComponent)
+const TooltipContainer = toNative(TooltipContainerComponent)
 export default TooltipContainer

package/components/transition/index.tsx

@@ -14,5 +14,5 @@ class TransitionHolderComponent extends TsxComponent<TransitionArgs> implements
     }
 }
 
-const TransitionHolder = toNative(TransitionHolderComponent)
+const TransitionHolder = toNative(TransitionHolderComponent)
 export default TransitionHolder

package/components/wizard/wizard-subtitle.tsx

@@ -9,5 +9,5 @@ class WizardSubtitleComponent extends TsxComponent<WizardSubtitleArgs> implement
     }
 }
 
-const WizardSubtitle = toNative(WizardSubtitleComponent)
+const WizardSubtitle = toNative(WizardSubtitleComponent)
 export default WizardSubtitle

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inviton-powerduck",
-  "version": "0.0.87",
+  "version": "0.0.90",
   "type": "module",
   "scripts": {
     "build": " vite build && vue-tsc  --declaration --emitDeclarationOnly",