inviton-powerduck 0.0.86 → 0.0.89

package/common/localized-value-helper.ts

@@ -1,17 +1,19 @@
 import PowerduckState from '../app/powerduck-state';
 import { Language } from './enums/language';
-import LocalizedText from './localized-text';
+import { ILocalizedText } from './localized-text';
 import { isNullOrEmpty } from './utils/is-null-or-empty';
 
-export default class LocalizedValueHelper {
-    static getLocalizedValue(value: LocalizedText): string {
+export default class LocalizedValueHelper {   
+    static getValue(value: ILocalizedText, lang?: Language | string): string {
         if (value == null) {
             return null as any;
         }
 
-        const lang = PowerduckState.getCurrentLanguage();
-        const inLang = value[lang];
+        if (lang == null) {
+            lang = PowerduckState.getCurrentLanguage()
+        }
 
+        const inLang = value[lang];
         if (inLang != null) {
             return inLang;
         }
@@ -42,8 +44,8 @@ export default class LocalizedValueHelper {
         return null as any;
     }
 
-    static validateLocalizedValue(locValArr: LocalizedText): boolean {
-        if (isNullOrEmpty(LocalizedValueHelper.getLocalizedValue(locValArr))) {
+    static validateLocalizedValue(locValArr: ILocalizedText): boolean {
+        if (isNullOrEmpty(LocalizedValueHelper.getValue(locValArr))) {
             return false;
         }
 

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,
                         }),
                     );
 

package/common/validation.ts

@@ -21,11 +21,11 @@
 } from "@vuelidate/validators";
 import { PowerduckViewModelBase } from "./base-component";
 import { Validation } from "@vuelidate/core";
-import LocalizedStringHelper from "./utils/localized-string";
 import { isNullOrEmpty } from "./utils/is-null-or-empty";
 import { capitalize } from "./utils/capitalize-string";
 import PowerduckState from "../app/powerduck-state";
 import { IValidationSet, ValidationRuleset, ValidationState } from "./static-wrappers/interfaces/validation-interface";
+import LocalizedValueHelper from "./localized-value-helper";
 
 function getFirstUnsattisfiedValidatorName(valProp: Validation): string {
     const errors = valProp?.$errors || [];
@@ -158,7 +158,7 @@ export class ValidationBuilder {
 
     requiredLocalizedString(): ValidationBuilder {
         this._validationArgs.requiredLocalizedString = (value) => {
-            if (value == null || isNullOrEmpty(LocalizedStringHelper.getValue(value, 'sk'))) {
+            if (value == null || isNullOrEmpty(LocalizedValueHelper.getValue(value, 'sk'))) {
                 return false;
             }
 

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/input/localized-info-input.tsx

@@ -1,5 +1,5 @@
 import { Prop, toNative } from "vue-facing-decorator";
-import LocalizedText from "../../common/localized-text";
+import { ILocalizedText } from "../../common/localized-text";
 import TsxComponent, { Component } from "../../app/vuetsx";
 import { Language } from "../../common/enums/language";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
@@ -12,13 +12,13 @@ import { ValidationState } from "../../common/static-wrappers/interfaces/validat
 interface LocalizedInfoInputArgs {
     label: string;
     wrap?: boolean;
-    value: LocalizedText;
+    value: ILocalizedText;
     placeholder?: string;
     subtitle?: string;
     hint?: string;
     displayType?: "input" | "textarea";
     validationState?: ValidationState;
-    changed: (e: LocalizedText) => void;
+    changed: (e: ILocalizedText) => void;
     mandatory?: boolean;
 }
 
@@ -26,19 +26,19 @@ interface LocalizedInfoInputArgs {
 class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> implements LocalizedInfoInputArgs {
     @Prop() label: string;
     @Prop() wrap?: boolean;
-    @Prop() value: LocalizedText;
+    @Prop() value: ILocalizedText;
     @Prop() placeholder!: string;
     @Prop() subtitle!: string;
     @Prop() hint!: string;
     @Prop() displayType: "input" | "textarea";
-    @Prop() changed: (e: LocalizedText) => void;
+    @Prop() changed: (e: ILocalizedText) => void;
     @Prop() mandatory?: boolean;
 
     getValueForTmrLanguage(lang: Language): string {
         return this.value[lang];
     }
 
-    getValue(value: LocalizedText): LocalizedText {
+    getValue(value: ILocalizedText): ILocalizedText {
         if (value == null) {
             return {
                 cs: null,
@@ -62,13 +62,13 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
         };
     }
 
-    valueChanged(e: LocalizedText): void {
+    valueChanged(e: ILocalizedText): void {
         if (e == null) {
             this.changed(null);
             return;
         }
 
-        let retObj: LocalizedText = {} as any;
+        let retObj: ILocalizedText = {} as any;
         const addLocalizedValue = (lang: Language, value: string): void => {
             if (!isNullOrEmpty(value)) {
                 retObj[lang] = value;

package/components/input/localized-string-input.tsx

@@ -9,17 +9,17 @@ import { ButtonLayout } from "../button/button-layout";
 import { DropdownButtonItemArgs } from "../dropdown-button/dropdown-button-item";
 import { PortalUtils } from "../../common/utils/utils";
 import { LanguageUtils } from "../../common/utils/language-utils";
-import LocalizedStringHelper from "../../common/utils/localized-string";
 import { Language } from "../../common/enums/language";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
 import globalIcon from './img/global.png';
 import PowerduckState from "../../app/powerduck-state";
-import LocalizedText from "../../common/localized-text";
+import { ILocalizedText } from "../../common/localized-text";
 import "./css/localized-string-input.css";
+import LocalizedValueHelper from "../../common/localized-value-helper";
 
 interface LocalizedStringInputArgs extends FormItemWrapperArgs {
-    value: LocalizedText;
-    changed: (e: LocalizedText) => void;
+    value: ILocalizedText;
+    changed: (e: ILocalizedText) => void;
     supportedLanguages?: Language[];
     placeholder?: string;
 }
@@ -29,8 +29,8 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
     @Prop() label!: string;
     @Prop() labelButtons!: DropdownButtonItemArgs[];
     @Prop() subtitle!: string;
-    @Prop() value!: LocalizedText;
-    @Prop() changed: (e: LocalizedText) => void;
+    @Prop() value!: ILocalizedText;
+    @Prop() changed: (e: ILocalizedText) => void;
     @Prop() supportedLanguages?: Language[];
     @Prop() marginType?: MarginType;
     @Prop() maxWidth?: number;
@@ -45,11 +45,11 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
     @Prop() prependIcon: string;
     @Prop() appendClicked: () => void;
     @Prop() prependClicked: () => void;
-    currentValue: LocalizedText = null;
+    currentValue: ILocalizedText = null;
     modalWillShow: boolean = false;
     uuid: string = "lsw-" + PortalUtils.randomString(10);
 
-    raiseChangeEvent(newValue: LocalizedText): void {
+    raiseChangeEvent(newValue: ILocalizedText): void {
         this.populateValidationDeclaration();
 
         if (this.changed != null) {
@@ -60,10 +60,10 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
     isAllSame(): boolean {
         if (this.value != null) {
             let langList = LanguageUtils.getLanguageList();
-            let skValue = LocalizedStringHelper.getValue(this.value, Language.sk);
+            let skValue = LocalizedValueHelper.getValue(this.value, Language.sk);
 
             for (let i = 0, len = langList.length; i < len; i++) {
-                if (LocalizedStringHelper.getValue(this.value, langList[i].id) != skValue) {
+                if (LocalizedValueHelper.getValue(this.value, langList[i].id) != skValue) {
                     return false;
                 }
             }
@@ -73,7 +73,7 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
     }
 
     hasSomeValue(): boolean {
-        return !isNullOrEmpty(LocalizedStringHelper.getValue(this.value, Language.sk));
+        return !isNullOrEmpty(LocalizedValueHelper.getValue(this.value, Language.sk));
     }
 
     getModalContext(): JQuery {
@@ -117,7 +117,7 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
 
                 if (currentVal == null || currentVal.length == 0) {
                     var language: Language = $this.attr("data-inv-lang") as any;
-                    var lsValue = LocalizedStringHelper.getValue(value, language) || "";
+                    var lsValue = LocalizedValueHelper.getValue(value, language) || "";
                     $this.attr("placeholder", lsValue);
                 }
             });
@@ -175,7 +175,7 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
         return (
             <div class={PowerduckState.getFormControlCssClass() + "  localized-input"} onClick={(e) => this.showInputModal()}>
                 <img src={globalIcon} />
-                &nbsp;{LocalizedStringHelper.getValue(this.value, Language.sk)}
+                &nbsp;{LocalizedValueHelper.getValue(this.value, Language.sk)}
             </div>
         );
     }
@@ -190,7 +190,7 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
 
                     let langValue = this.value[lang.id];
                     let hasValue = !isNullOrEmpty(langValue);
-                    langValue = hasValue ? langValue : LocalizedStringHelper.getValue(this.value, lang.id);
+                    langValue = hasValue ? langValue : LocalizedValueHelper.getValue(this.value, lang.id);
 
                     return (
                         <div class={"localized-input-item" + (hasValue ? "" : " lii-auto")}>
@@ -216,7 +216,7 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
 
                                 let langValue = this.currentValue[lang.id];
                                 let hasValue = !isNullOrEmpty(langValue);
-                                langValue = hasValue ? langValue : LocalizedStringHelper.getValue(this.currentValue, lang.id);
+                                langValue = hasValue ? langValue : LocalizedValueHelper.getValue(this.currentValue, lang.id);
 
                                 return (
                                     <div class="row align-items-end lsi-form-group">

package/components/input/localized-string-textarea.tsx

@@ -8,11 +8,11 @@ import TextArea from "./textarea";
 import { LanguageUtils } from "../../common/utils/language-utils";
 import { Language } from "../../common/enums/language";
 import PowerduckState from "../../app/powerduck-state";
-import LocalizedText from "../../common/localized-text";
+import {ILocalizedText} from "../../common/localized-text";
 
 interface LocalizedStringInputArgs extends FormItemWrapperArgs {
-    value: LocalizedText;
-	changed: (e: LocalizedText) => void;
+    value: ILocalizedText;
+	changed: (e: ILocalizedText) => void;
     supportedLanguages?: Language[];
     placeholder?: string;
 }
@@ -22,8 +22,8 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
     @Prop() label!: string;
     @Prop() labelButtons!: DropdownButtonItemArgs[];
     @Prop() subtitle!: string;
-	@Prop() value!: LocalizedText;
-	@Prop() changed: (e: LocalizedText) => void;
+	@Prop() value!: ILocalizedText;
+	@Prop() changed: (e: ILocalizedText) => void;
     @Prop() supportedLanguages?: Language[];
     @Prop() marginType?: MarginType;
     @Prop() maxWidth?: number;
@@ -37,9 +37,9 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
     @Prop() prependIcon: string;
     @Prop() appendClicked: () => void;
     @Prop() prependClicked: () => void;
-	currentValue: LocalizedText = null;
+	currentValue: ILocalizedText = null;
 
-	raiseChangeEvent (newValue: LocalizedText): void {
+	raiseChangeEvent (newValue: ILocalizedText): void {
         this.populateValidationDeclaration();
 
         if (this.changed != null) {
@@ -52,12 +52,12 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
     }
 
     changeValue(lang: Language, newValue: string): void {
-		let value = this.value || ({} as LocalizedText);
+		let value = this.value || ({} as ILocalizedText);
         value[lang] = newValue;
         this.raiseChangeEvent(value);
     }
 
-	getActualValue (lang: Language, value: LocalizedText): string {
+	getActualValue (lang: Language, value: ILocalizedText): string {
         if (value == null) {
             return null;
         }

package/components/input/localized-string-wysiwyg.tsx

@@ -5,14 +5,14 @@ import Tabs, { TabsRenderMode } from "../tabs/tabs";
 import { TabPage } from "../tabs/tab-page";
 import { DropdownButtonItemArgs } from "../dropdown-button/dropdown-button-item";
 import WysiwigEditor from "./wysiwig";
-import LocalizedText from "../../common/localized-text";
+import {ILocalizedText} from "../../common/localized-text";
 import { LanguageUtils } from "../../common/utils/language-utils";
 import { Language } from "../../common/enums/language";
 import PowerduckState from "../../app/powerduck-state";
 
 interface LocalizedStringInputArgs extends FormItemWrapperArgs {
-    value: LocalizedText;
-    changed: (e: LocalizedText) => void;
+    value: ILocalizedText;
+    changed: (e: ILocalizedText) => void;
     supportedLanguages?: Language[];
     placeholder?: string;
     resizable?: boolean
@@ -23,8 +23,8 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
     @Prop() label!: string;
     @Prop() labelButtons!: DropdownButtonItemArgs[];
     @Prop() subtitle!: string;
-    @Prop() value!: LocalizedText;
-    @Prop() changed: (e: LocalizedText) => void;
+    @Prop() value!: ILocalizedText;
+    @Prop() changed: (e: ILocalizedText) => void;
     @Prop() supportedLanguages?: Language[];
     @Prop() marginType?: MarginType;
     @Prop() maxWidth?: number;
@@ -38,9 +38,9 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
     @Prop() prependIcon: string;
     @Prop() appendClicked: () => void;
     @Prop() prependClicked: () => void;
-    currentValue: LocalizedText = null;
+    currentValue: ILocalizedText = null;
 
-    raiseChangeEvent(newValue: LocalizedText): void {
+    raiseChangeEvent(newValue: ILocalizedText): void {
         this.populateValidationDeclaration();
 
         if (this.changed != null) {
@@ -53,12 +53,12 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
     }
 
     changeValue(lang: Language, newValue: string): void {
-        let value = this.value || ({} as LocalizedText);
+        let value = this.value || ({} as ILocalizedText);
         value[lang] = newValue;
         this.raiseChangeEvent(value);
     }
 
-    getActualValue(lang: Language, value: LocalizedText): string {
+    getActualValue(lang: Language, value: ILocalizedText): string {
         if (value == null) {
             return null;
         }

package/components/input/localized-url-input.tsx

@@ -13,16 +13,16 @@ import FlexFormItem from "../form/form-item-flex";
 import { FileManagerDialog, FileManagerModalFileType } from "../modal/ts/file-manager-dialog";
 import { PortalUtils } from "../../common/utils/utils";
 import { LanguageUtils } from "../../common/utils/language-utils";
-import LocalizedStringHelper from "../../common/utils/localized-string";
 import { Language } from "../../common/enums/language";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
 import globalIcon from './img/global.png';
 import PowerduckState from "../../app/powerduck-state";
-import LocalizedText from "../../common/localized-text";
+import {ILocalizedText} from "../../common/localized-text";
+import LocalizedValueHelper from "../../common/localized-value-helper";
 
 interface LocalizedUrlInputArgs extends FormItemWrapperArgs {
-    value: LocalizedText;
-	changed: (e: LocalizedText) => void;
+    value: ILocalizedText;
+	changed: (e: ILocalizedText) => void;
     supportedLanguages?: Language[];
     placeholder?: string;
 }
@@ -32,8 +32,8 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
     @Prop() label!: string;
     @Prop() labelButtons!: DropdownButtonItemArgs[];
     @Prop() subtitle!: string;
-	@Prop() value!: LocalizedText;
-	@Prop() changed: (e: LocalizedText) => void;
+	@Prop() value!: ILocalizedText;
+	@Prop() changed: (e: ILocalizedText) => void;
     @Prop() supportedLanguages?: Language[];
     @Prop() marginType?: MarginType;
     @Prop() maxWidth?: number;
@@ -47,12 +47,12 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
     @Prop() prependIcon: string;
     @Prop() appendClicked: () => void;
     @Prop() prependClicked: () => void;
-	currentValue: LocalizedText = null;
+	currentValue: ILocalizedText = null;
     modalWillShow: boolean = false;
     isModal: boolean = false;
     uuid: string = "lsw-" + PortalUtils.randomString(10);
 
-	raiseChangeEvent (newValue: LocalizedText): void {
+	raiseChangeEvent (newValue: ILocalizedText): void {
         this.populateValidationDeclaration();
 
         if (this.changed != null) {
@@ -63,10 +63,10 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
     isAllSame(): boolean {
         if (this.value != null) {
             let langList = LanguageUtils.getLanguageList();
-            let skValue = LocalizedStringHelper.getValue(this.value, Language.sk);
+            let skValue = LocalizedValueHelper.getValue(this.value, Language.sk);
 
             for (let i = 0, len = langList.length; i < len; i++) {
-                if (LocalizedStringHelper.getValue(this.value, langList[i].id) != skValue) {
+                if (LocalizedValueHelper.getValue(this.value, langList[i].id) != skValue) {
                     return false;
                 }
             }
@@ -76,7 +76,7 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
     }
 
     hasSomeValue(): boolean {
-        return !isNullOrEmpty(LocalizedStringHelper.getValue(this.value, Language.sk));
+        return !isNullOrEmpty(LocalizedValueHelper.getValue(this.value, Language.sk));
     }
 
     getModalContext(): JQuery {
@@ -133,7 +133,7 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
 
                 if (currentVal == null || currentVal.length == 0) {
                     var language: Language = $this.attr("data-inv-lang") as any;
-                    var lsValue = LocalizedStringHelper.getValue(value, language) || "";
+                    var lsValue = LocalizedValueHelper.getValue(value, language) || "";
                     $this.attr("placeholder", lsValue);
                 }
             });
@@ -207,7 +207,7 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
     }
 
     renderInputGlobalValue(h) {
-        let langValue = LocalizedStringHelper.getValue(this.value, Language.sk);
+        let langValue = LocalizedValueHelper.getValue(this.value, Language.sk);
         return (
             <FlexContainer cssClass={"mb-1"} fullWidthOnMobile={false}>
                 <FlexFormItem flexFill={true}>
@@ -255,7 +255,7 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
 
                     let langValue = this.value[lang.id];
                     let hasValue = !isNullOrEmpty(langValue);
-                    langValue = hasValue ? langValue : LocalizedStringHelper.getValue(this.value, lang.id);
+                    langValue = hasValue ? langValue : LocalizedValueHelper.getValue(this.value, lang.id);
 
                     return (
                         <div class={"localized-input-item" + (hasValue ? "" : " lii-auto")}>
@@ -281,7 +281,7 @@ class LocalizedUrlInputComponent extends TsxComponent<LocalizedUrlInputArgs> imp
 
                                 let langValue = this.currentValue[lang.id];
                                 let hasValue = !isNullOrEmpty(langValue);
-                                langValue = hasValue ? langValue : LocalizedStringHelper.getValue(this.currentValue, lang.id);
+                                langValue = hasValue ? langValue : LocalizedValueHelper.getValue(this.currentValue, lang.id);
 
                                 return (
                                     <FlexContainer cssClass={"mb-1"} fullWidthOnMobile={false}>

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/package.json

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

package/common/utils/localized-string.ts

@@ -1,83 +0,0 @@
-import { Language } from "../enums/language";
-import LocalizedText, { ILocalizedText } from "../localized-text";
-import { isNullOrEmpty } from "./is-null-or-empty";
-import { LanguageUtils } from "./language-utils";
-
-export interface ILocalizedString {
-    Slovak: string;
-    English: string;
-    Czech: string;
-    German: string;
-    Latvian: string;
-    Polish: string;
-    Italian: string;
-    Hungarian: string;
-}
-
-function getValueForPair(localizedString: any, langCode: string, lang: Language): string {
-    return localizedString[langCode] || localizedString[lang];
-}
-
-export default class LocalizedStringHelper {
-    static getValue(value: ILocalizedString | ILocalizedText, lang: Language | string) {
-        if (value == null) {
-            return null;
-        }
-
-        if (lang == Language.sk) {
-            const skVal = getValueForPair(value, 'sk', Language.sk);
-            if (!isNullOrEmpty(skVal)) {
-                return skVal;
-            }
-
-            const csVal = getValueForPair(value, 'cs', Language.cs);
-            if (!isNullOrEmpty(csVal)) {
-                return csVal;
-            }
-        } else if (lang == Language.cs) {
-            const csVal = getValueForPair(value, 'cs', Language.cs);
-            if (!isNullOrEmpty(csVal)) {
-                return csVal;
-            }
-
-            const skVal = getValueForPair(value, 'sk', Language.sk);
-            if (!isNullOrEmpty(skVal)) {
-                return skVal;
-            }
-        } else if (lang == Language.de) {
-            const val = getValueForPair(value, 'de', Language.de);
-            if (!isNullOrEmpty(val)) {
-                return val;
-            }
-        } else if (lang == Language.pl) {
-            const val = getValueForPair(value, 'pl', Language.pl);
-            if (!isNullOrEmpty(val)) {
-                return val;
-            }
-        } else if (lang == Language.it) {
-            const val = getValueForPair(value, 'it', Language.it);
-            if (!isNullOrEmpty(val)) {
-                return val;
-            }
-        } else if (lang == Language.hu) {
-            const val = getValueForPair(value, 'hu', Language.hu);
-            if (!isNullOrEmpty(val)) {
-                return val;
-            }
-        }
-
-        const lastTry = getValueForPair(value, 'sk', Language.sk);
-        if (!isNullOrEmpty(lastTry)) {
-            return lastTry;
-        }
-
-        for (const propName in value) {
-            const text = (value as any)[propName];
-            if (text != null && text.toString().length > 0) {
-                return text;
-            }
-        }
-
-        return null;
-    }
-}

package/common/utils/localized-text-util.ts

@@ -1,36 +0,0 @@
-import LocalizedText from './../localized-text';
-import { Language } from './../enums/language';
-
-export default class LocalizedTextUtil {
-    static getLocalizedTextValue(value: LocalizedText, langKey: string | Language): string {
-        if (value == null) {
-            return null as any;
-        }
-
-        let retVal = (value as any)[langKey];
-        if (retVal == null) {
-            if (langKey == "sk") {
-                retVal = value.cs;
-            } else if (langKey == "cs") {
-                retVal = value.sk;
-            } else {
-                retVal = value.en;
-            }
-        }
-
-        if (retVal == null) {
-            if (value.sk != null) {
-                return value.sk;
-            }
-
-            for (const propName in value) {
-                const text = (value as any)[propName];
-                if (text != null && text.toString().length > 0) {
-                    return text;
-                }
-            }
-        }
-
-        return retVal || value.sk;
-    }
-}