Packages and styles upgrade

package.json

@@ -79,12 +79,12 @@
         "@fluentui/react": "^8.105.11",
         "@microsoft/applicationinsights-web": "^3.0.2",
         "@monaco-editor/loader": "^1.3.3",
-        "@paperbits/azure": "0.1.593",
-        "@paperbits/common": "0.1.593-hotfix2",
-        "@paperbits/core": "0.1.593-hotfix2",
-        "@paperbits/forms": "0.1.593-hotfix2",
-        "@paperbits/react": "1.0.7",
-        "@paperbits/styles": "0.1.593-hotfix2",
+        "@paperbits/azure": "0.1.623",
+        "@paperbits/common": "0.1.623",
+        "@paperbits/core": "0.1.623",
+        "@paperbits/forms": "0.1.623",
+        "@paperbits/react": "1.0.8",
+        "@paperbits/styles": "0.1.623",
         "@webcomponents/custom-elements": "1.6.0",
         "@webcomponents/shadydom": "^1.11.0",
         "client-oauth2": "4.3.3",

src/components/apis/api-products/apiProductsHandlers.ts

@@ -1,19 +1,19 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ApiProductsModel } from "./apiProductsModel";
 
-export class ApiProductsHandlers implements IWidgetHandler {
+export class ApiProductsHandlers implements IWidgetHandler<ApiProductsModel> {
     public async getWidgetModel(): Promise<ApiProductsModel> {
         return new ApiProductsModel("list");
     }
 }
 
-export class ApiProductsDropdownHandlers implements IWidgetHandler {
+export class ApiProductsDropdownHandlers implements IWidgetHandler<ApiProductsModel> {
     public async getWidgetModel(): Promise<ApiProductsModel> {
         return new ApiProductsModel("dropdown");
     }
 }
 
-export class ApiProductsTilesHandlers implements IWidgetHandler {
+export class ApiProductsTilesHandlers implements IWidgetHandler<ApiProductsModel> {
     public async getWidgetModel(): Promise<ApiProductsModel> {
         return new ApiProductsModel("tiles");
     }

src/components/apis/details-of-api/detailsOfApiHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { DetailsOfApiModel } from "./detailsOfApiModel";
 
-export class DetailsOfApiHandlers implements IWidgetHandler {
+export class DetailsOfApiHandlers implements IWidgetHandler<DetailsOfApiModel> {
     public async getWidgetModel(): Promise<DetailsOfApiModel> {
         return new DetailsOfApiModel();
     }

src/components/apis/history-of-api/historyOfApiHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { HistoryOfApiModel } from "./historyOfApiModel";
 
-export class HistoryOfApiHandlers implements IWidgetHandler {
+export class HistoryOfApiHandlers implements IWidgetHandler<HistoryOfApiModel> {
     public async getWidgetModel(): Promise<HistoryOfApiModel> {
         return new HistoryOfApiModel();
     }

src/components/apis/list-of-apis/listOfApisHandlers.ts

@@ -1,19 +1,19 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ListOfApisModel } from "./listOfApisModel";
 
-export class ListOfApisHandlers implements IWidgetHandler {
+export class ListOfApisHandlers implements IWidgetHandler<ListOfApisModel> {
     public async getWidgetModel(): Promise<ListOfApisModel> {
         return new ListOfApisModel("list");
     }
 }
 
-export class ListOfApisTilesHandlers implements IWidgetHandler {
+export class ListOfApisTilesHandlers implements IWidgetHandler<ListOfApisModel> {
     public async getWidgetModel(): Promise<ListOfApisModel> {
         return new ListOfApisModel("tiles");
     }
 }
 
-export class ListOfApisDropdownHandlers implements IWidgetHandler {
+export class ListOfApisDropdownHandlers implements IWidgetHandler<ListOfApisModel> {
     public async getWidgetModel(): Promise<ListOfApisModel> {
         return new ListOfApisModel("dropdown");
     }

src/components/custom-html/customHtmlHandlers.ts

@@ -3,7 +3,7 @@ import { StyleHelper } from "@paperbits/styles";
 import { CustomHtmlModel } from "./customHtmlModel";
 import { htmlCodeInitial, htmlCodeSizeStylesInitial } from "./ko/constants";
 
-export class HTMLInjectionHandlers implements IWidgetHandler {
+export class HTMLInjectionHandlers implements IWidgetHandler<CustomHtmlModel> {
     public async getWidgetModel(): Promise<CustomHtmlModel> {
         const model = new CustomHtmlModel();
         model.htmlCode = htmlCodeInitial;

src/components/custom-widget/customWidgetHandlers.ts

@@ -11,7 +11,7 @@ export interface TCustomWidgetConfig extends CustomWidgetCommonConfig {
     override?: string | boolean;
 }
 
-export class CustomWidgetHandlers implements IWidgetHandler {
+export class CustomWidgetHandlers implements IWidgetHandler<CustomWidgetModel> {
     constructor(private readonly configuration: TCustomWidgetConfig) {
         this.getWidgetModel = this.getWidgetModel.bind(this);
     }

src/components/operations/operation-details/operationDetailsHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { OperationDetailsModel } from "./operationDetailsModel";
 
-export class OperationDetailsHandlers implements IWidgetHandler {
+export class OperationDetailsHandlers implements IWidgetHandler<OperationDetailsModel> {
     public async getWidgetModel(): Promise<OperationDetailsModel> {
         return new OperationDetailsModel();
     }

src/components/operations/operation-list/operationListHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { OperationListModel } from "./operationListModel";
 
-export class OperationListHandlers implements IWidgetHandler {
+export class OperationListHandlers implements IWidgetHandler<OperationListModel> {
     public async getWidgetModel(): Promise<OperationListModel> {
         return new OperationListModel();
     }

src/components/products/product-apis/productApisHandlers.ts

@@ -1,13 +1,13 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ProductApisModel } from "./productApisModel";
 
-export class ProductApisHandlers implements IWidgetHandler {
+export class ProductApisHandlers implements IWidgetHandler<ProductApisModel> {
     public async getWidgetModel(): Promise<ProductApisModel> {
         return new ProductApisModel("list")
     }
 }
 
-export class ProductApisTilesHandlers implements IWidgetHandler {
+export class ProductApisTilesHandlers implements IWidgetHandler<ProductApisModel> {
     public async getWidgetModel(): Promise<ProductApisModel> {
         return new ProductApisModel("tiles")
     }

src/components/products/product-details/productDetailsHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ProductDetailsModel } from "./productDetailsModel";
 
-export class ProductDetailsHandlers implements IWidgetHandler {
+export class ProductDetailsHandlers implements IWidgetHandler<ProductDetailsModel> {
     public async getWidgetModel(): Promise<ProductDetailsModel> {
         return new ProductDetailsModel()
     }

src/components/products/product-list/productListHandlers.ts

@@ -1,19 +1,19 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ProductListModel } from "./productListModel";
 
-export class ProductListHandlers implements IWidgetHandler {
+export class ProductListHandlers implements IWidgetHandler<ProductListModel> {
     public async getWidgetModel(): Promise<ProductListModel> {
         return new ProductListModel("list");
     }
 }
 
-export class ProductListDropdownHandlers implements IWidgetHandler {
+export class ProductListDropdownHandlers implements IWidgetHandler<ProductListModel> {
     public async getWidgetModel(): Promise<ProductListModel> {
         return new ProductListModel("dropdown");
     }
 }
 
-export class ProductListTilesHandlers implements IWidgetHandler {
+export class ProductListTilesHandlers implements IWidgetHandler<ProductListModel> {
     public async getWidgetModel(): Promise<ProductListModel> {
         return new ProductListModel("tiles");
     }

src/components/products/product-subscribe/productSubscribeHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ProductSubscribeModel } from "./productSubscribeModel";
 
-export class ProductSubscribeHandlers implements IWidgetHandler {
+export class ProductSubscribeHandlers implements IWidgetHandler<ProductSubscribeModel> {
     public async getWidgetModel(): Promise<ProductSubscribeModel> {
         return new ProductSubscribeModel()
     }

src/components/products/product-subscriptions/productSubscriptionsHandlers.ts

@@ -2,7 +2,7 @@
 import { ProductSubscriptionsModel } from "./productSubscriptionsModel";
 
 
-export class ProductSubscriptionsHandlers implements IWidgetHandler {
+export class ProductSubscriptionsHandlers implements IWidgetHandler<ProductSubscriptionsModel> {
     public async getWidgetModel(): Promise<ProductSubscriptionsModel> {
         return new ProductSubscriptionsModel();
     }

src/components/reports/reportsHandlers.ts

@@ -2,7 +2,7 @@
 import { ReportsModel } from "./reportsModel";
 
 
-export class ReportsHandlers implements IWidgetHandler {
+export class ReportsHandlers implements IWidgetHandler<ReportsModel> {
     public async getWidgetModel(): Promise<ReportsModel> {
         return new ReportsModel()
     }

src/components/users/change-password/changePasswordHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ChangePasswordModel } from "./changePasswordModel";
 
-export class ChangePasswordHandlers implements IWidgetHandler {
+export class ChangePasswordHandlers implements IWidgetHandler<ChangePasswordModel> {
     public async getWidgetModel(): Promise<ChangePasswordModel> {
         return new ChangePasswordModel()
     }

src/components/users/confirm-password/confirmPasswordHandlers.ts

@@ -2,7 +2,7 @@
 import { ConfirmPasswordModel } from "./confirmPasswordModel";
 
 
-export class ConfirmPasswordHandlers implements IWidgetHandler {
+export class ConfirmPasswordHandlers implements IWidgetHandler<ConfirmPasswordModel> {
     public async getWidgetModel(): Promise<ConfirmPasswordModel> {
         return new ConfirmPasswordModel()
     }

src/components/users/profile/profileHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ProfileModel } from "./profileModel";
 
-export class ProfileHandlers implements IWidgetHandler {
+export class ProfileHandlers implements IWidgetHandler<ProfileModel> {
     public async getWidgetModel(): Promise<ProfileModel> {
         return new ProfileModel()
     }

src/components/users/reset-password/resetPasswordHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { ResetPasswordModel } from "./resetPasswordModel";
 
-export class ResetPasswordHandlers implements IWidgetHandler {
+export class ResetPasswordHandlers implements IWidgetHandler<ResetPasswordModel> {
     public async getWidgetModel(): Promise<ResetPasswordModel> {
         return new ResetPasswordModel()
     }

src/components/users/signin-social/signinSocialHandlers.ts

@@ -2,7 +2,7 @@
 import { SigninSocialModel } from "./signinSocialModel";
 
 
-export class SigninSocialHandlers implements IWidgetHandler {
+export class SigninSocialHandlers implements IWidgetHandler<SigninSocialModel> {
     public async getWidgetModel(): Promise<SigninSocialModel> {
         const model = new SigninSocialModel();
         model.aadLabel = "Azure Active Directory";

src/components/users/signin/signinHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { SigninModel } from "./signinModel";
 
-export class SigninHandlers implements IWidgetHandler {
+export class SigninHandlers implements IWidgetHandler<SigninModel> {
     public async getWidgetModel(): Promise<SigninModel> {
         return new SigninModel()
     }

src/components/users/signup-social/signupSocialHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { SignupSocialModel } from "./signupSocialModel";
 
-export class SignupSocialHandlers implements IWidgetHandler {
+export class SignupSocialHandlers implements IWidgetHandler<SignupSocialModel> {
     public async getWidgetModel(): Promise<SignupSocialModel> {
         return new SignupSocialModel()
     }

src/components/users/signup/signupHandlers.ts

@@ -2,7 +2,7 @@
 import { SignupModel } from "./signupModel";
 
 
-export class SignupHandlers implements IWidgetHandler {
+export class SignupHandlers implements IWidgetHandler<SignupModel> {
     public async getWidgetModel(): Promise<SignupModel> {
         return new SignupModel()
     }

src/components/users/subscriptions/subscriptionsHandlers.ts

@@ -1,7 +1,7 @@
 import { IWidgetHandler } from "@paperbits/common/editing";
 import { SubscriptionsModel } from "./subscriptionsModel";
 
-export class SubscriptionsHandlers implements IWidgetHandler {
+export class SubscriptionsHandlers implements IWidgetHandler<SubscriptionsModel> {
     public async getWidgetModel(): Promise<SubscriptionsModel> {
         return new SubscriptionsModel()
     }

src/components/users/validation-summary/validationSummaryHandlers.ts

@@ -2,7 +2,7 @@ import { IWidgetHandler } from "@paperbits/common/editing";
 import { ValidationSummaryModel } from "../validation-summary/validationSummaryModel";
 
 
-export class ValidationSummaryHandlers implements IWidgetHandler {
+export class ValidationSummaryHandlers implements IWidgetHandler<ValidationSummaryModel> {
     public async getWidgetModel(): Promise<ValidationSummaryModel> {
         return new ValidationSummaryModel()
     }

src/startup.design.ts

@@ -7,11 +7,12 @@ import { FormsDesignModule } from "@paperbits/forms/forms.design.module";
 import { StylesDesignModule } from "@paperbits/styles/styles.design.module";
 import { ApimDesignModule } from "./apim.design.module";
 import { SessionExpirationErrorHandler } from "./errors/sessionExpirationErrorHandler";
-import { ComponentBinder } from "@paperbits/common/editing";
+import { ComponentBinder } from "@paperbits/common/components";
 import { ReactModule } from "@paperbits/react/react.module";
 import { LeftPanel } from "./admin/leftPanel";
 import { RightPanel } from "./admin/rightPanel";
 
+
 /* Initializing dependency injection container */
 const injector = new InversifyInjector();
 injector.bindToCollection("autostart", SessionExpirationErrorHandler);

src/themes/designer/styles/arrows.scss

@@ -1,4 +1,6 @@
-@media (min-width: $breakpoint-lg) {
+@import "animation.scss";
+@import "variables.scss";
+@media (min-width: $breakpoint-lg) {
     .arrow-self {
         background-image: data-uri("../svgs/arrow.svg");
         background-size: auto 80%;

src/themes/designer/styles/balloons.scss

@@ -1,4 +1,8 @@
-$tip-width: 10px;
+@import "animation.scss";
+@import "variables.scss";
+@import "mixins.scss";
+
+$tip-width: 10px;
 
 .balloon {
     @include surface();
@@ -16,6 +20,36 @@
     }
 }
 
+.add-block-container {
+    width: 100%;
+    max-height: 600px;
+    .remove-block {
+        background-color: rgb(43, 135, 218);
+        background-repeat: no-repeat;
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        .paperbits-icon {
+            padding: 0;
+        }
+    }
+}
+
+.zoom-selector-item {
+    width: 100%;
+    height: 120px;
+    overflow: hidden;
+    margin: 8px 2px 2px 2px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+.zoom-item {
+    transform: scale(0.32);
+    transform-origin: 0% 0%;
+    transform-origin: top left;
+    pointer-events: none;
+}
+
 .balloon-tip {
     position: fixed;
     background-color: $balloon-background;

src/themes/designer/styles/buttons.scss

@@ -1,4 +1,7 @@
-.btn {
+@import "variables.scss";
+@import "mixins.scss";
+
+.btn {
     border: none;
     background: none;
     color: $color-base;

src/themes/designer/styles/draggables.scss

@@ -1,4 +1,6 @@
-.dragtarget {
+@import "variables.scss";
+
+.dragtarget {
     width: 100px;
     height: 100px;
     border: 1px dashed #ccc;

src/themes/designer/styles/dropbucket.scss

@@ -1,4 +1,9 @@
-dropbucket {
+@import "variables.scss";
+@import "toolboxes.scss";
+@import "animation.scss";
+@import "buttons.scss";
+
+dropbucket {
     right: 20px;
     bottom: 20px;
     position: fixed;

src/themes/designer/styles/dropzones.scss

@@ -1,4 +1,7 @@
-[alignment] {
+@import "variables.scss";
+@import "mixins.scss";
+
+[alignment] {
     position: absolute;
     top: initial;
     left: initial;

src/themes/designer/styles/editors/colorSelector.scss

@@ -46,7 +46,6 @@
             padding: 0;
             line-height: 30px;
             overflow: hidden;
-            text-align: center;
 
             &.pseudo-transparent-bckg {
                 @include pseudo-transparent-bckg();