@colijnit/homedecorator 256.1.6 → 256.1.8

package/_variables.scss

@@ -1 +1 @@
-$add-to-cart-button-color: #ed912e !default;
+$add-to-cart-button-color: #da9803 !default;

package/app/core/enum/icon.enum.d.ts

@@ -1,33 +1,89 @@
 /** AUTO GENERATED FILE. DO NOT CHANGE.. **/
 export declare enum IconEnum {
     AddButton = "add-button",
+    Aperture = "aperture",
+    ArrowUpRightAndArrowDownLeftFromCenter = "arrow-up-right-and-arrow-down-left-from-center",
+    ArrowsLeftRight = "arrows-left-right",
+    ArrowsUpDown = "arrows-up-down",
+    ArrowsToEye = "arrows_to_eye",
     ArrowPointDown = "arrow_point_down",
+    ArrowRotateLeft = "arrow_rotate_left",
+    ArrowRotateRight = "arrow_rotate_right",
+    ArrowTurnLeft = "arrow_turn_left",
+    ArrowTurnLeftRegular = "arrow_turn_left_regular",
+    ArrowTurnRight = "arrow_turn_right",
+    ArrowTurnRightRegular = "arrow_turn_right_regular",
     ArCircle = "ar_circle",
     Brush = "brush",
+    CameraSolid = "camera_solid",
+    CameraTopdown = "camera_topdown",
+    CameraViewfinder = "camera_viewfinder",
     CartShoppingRegular = "cart-shopping-regular",
     Check = "check",
+    CircleCheck = "circle_check",
+    CircleInfo = "circle_info",
+    CircleMinusLight = "circle_minus_light",
+    CirclePlusLight = "circle_plus_light",
+    CircleQuestion = "circle_question",
+    CircleXmark = "circle_xmark",
     CitPoweredWhite = "cit_powered_white",
+    CloudArrowDown = "cloud_arrow_down",
+    CloudArrowUp = "cloud_arrow_up",
+    Comment = "comment",
+    Compress = "compress",
     ConfFrame = "conf_frame",
     ConfPlane = "conf_plane",
+    CopyLight = "copy_light",
+    Couch = "couch",
     Cross = "cross",
     CubeOutline = "cube-outline",
     CubeUnfolded = "cube-unfolded",
+    Cube = "cube",
+    DashButton = "dash-button",
     DeleteButton = "delete-button",
     Download = "download",
+    DrawSquare = "draw_square",
     EditButton = "edit-button",
+    Expand = "expand",
+    FillDripLight = "fill_drip_light",
+    Flower = "flower",
     GoogleCardboardOrange = "google-cardboard-orange",
     GoogleCardboard = "google-cardboard",
+    GridLight = "grid_light",
     HandPointer = "hand-pointer",
+    HandLight = "hand_light",
+    HandPointerLight = "hand_pointer_light",
     HeightAdjust = "height_adjust",
+    House = "house",
+    ImageLight = "image_light",
+    LinkLight = "link_light",
+    LinkSlashLight = "link_slash_light",
+    List = "list",
+    LockLight = "lock_light",
+    LockOpenLight = "lock_open_light",
     MagicWand = "magic-wand",
+    Magnet = "magnet",
+    MagnetStrikethrough = "magnet_strikethrough",
     Magnifier = "magnifier",
+    MagnifyingGlassMinus = "magnifying_glass_minus",
+    MagnifyingGlassPlus = "magnifying_glass_plus",
     Measurements = "measurements",
     MovePhoneAr = "move-phone-ar",
+    PaintRollerLight = "paint_roller_light",
+    PenRuler = "pen-ruler",
+    PencilLight = "pencil_light",
     Qrcode = "qrcode",
+    RetryButton = "retry-button",
+    Settings = "settings",
     StreetViewOrange = "street-view-orange",
-    StreetView = "street-view",
+    StreetView = "street_view",
     SwapButton = "swap-button",
     TiltPhone = "tilt-phone",
+    TrashCanLight = "trash_can_light",
     TriangleDown = "triangle_down",
-    TriangleUp = "triangle_up"
+    TriangleUp = "triangle_up",
+    UploadLight = "upload_light",
+    WandMagicSparkles = "wand_magic_sparkles",
+    XmarkLight = "xmark_light",
+    XmarkRegular = "xmark_regular"
 }

package/app/core/enum/message-type.enum.d.ts

@@ -67,5 +67,7 @@ export declare enum MessageType {
     BlenderRenderFileReady = "BlenderRenderFileReady",
     UserModelUploaded = "UserModelUploaded",
     ChangeTexture = "ChangeTexture",
-    RenderError = "RenderError"
+    RenderError = "RenderError",
+    ShowFloorArticleCatalog = "ShowFloorArticleCatalog",
+    BlenderRenderPreviewReady = "BlenderRenderPreviewReady"
 }

package/app/core/interface/message-with-payload.interface.d.ts

@@ -84,4 +84,6 @@ export interface MessagesWithPayload {
         title: string;
         message: string;
     };
+    [MessageType.ShowFloorArticleCatalog]: any;
+    [MessageType.BlenderRenderPreviewReady]: any;
 }

package/app/core/service/3dm-api.d.ts

@@ -45,8 +45,8 @@ export declare class ApiServiceModule {
     private _settingsService;
     private _dialog;
     constructor(iOneControllerService: HomedecoratorConnectorService, messageService: MessageBusService, _http: HttpClient, _settingsService: HomedecoratorSettingsService, _dialog: MatDialog);
-    uploadToApiGLB(formData: FormData, filename: string, camera: PerspectiveCamera, standalone: boolean, renderParameters: any): Promise<void>;
-    requestRender(filename: string, camera: PerspectiveCamera, standalone: boolean, renderParameters: any): Promise<any>;
+    uploadToApiGLB(formData: FormData, filename: string, camera: PerspectiveCamera, standalone: boolean, renderParameters: any, renderPreview: boolean): Promise<void>;
+    requestRender(filename: string, camera: PerspectiveCamera, standalone: boolean, renderParameters: any, renderPreview: boolean): Promise<any>;
     private _sendRequest;
     private _setOptions;
     private _createRenderRequestBody;

package/app/core/service/homedecorator-connector.service.d.ts

@@ -81,6 +81,8 @@ export declare class HomedecoratorConnectorService implements OnDestroy {
      * @param decoNodes
      */
     setDecoNodes(decoNodes: DecoNode[]): void;
+    getImageCache(): any;
+    getImageById(id: number): any;
     initConnection(forceReload?: boolean): Promise<void>;
     getInternalParameter(param: InternalParam): Promise<string>;
     getJsonConfiguredArticles(goodId: number, goodType: string, quantity: number, externalSource?: boolean, showLoader?: boolean, instanceId?: number, configuratorStatistics?: ConfiguratorStatisticsEnvironment): Promise<any>;

package/app/core/service/homedecorator-icon-cache.service.d.ts

@@ -13,7 +13,7 @@ export declare class HomedecoratorIconCacheService {
     private _iconCache;
     private _allIcons;
     constructor(_sanitizer: DomSanitizer);
-    getIcon(iconName: IconEnum): SafeHtml;
+    getIcon(iconName: string): SafeHtml;
     getIconAsBase64(iconName: IconEnum): SafeHtml;
     setIconCache(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<HomedecoratorIconCacheService, never>;

package/app/core/service/utils.service.d.ts

@@ -9,9 +9,11 @@ import { ItemService } from '../../plugins/core3d/service/item.service';
 import { SceneService } from '../../plugins/core3d/service/scene.service';
 import { ApiServiceModule } from './3dm-api';
 import { CameraService } from '../../plugins/core3d/service/camera.service';
+import { MessageBusService } from './message-bus.service';
 import * as i0 from "@angular/core";
 export declare class UtilsService implements OnDestroy {
     apiServiceModule: ApiServiceModule;
+    messageService: MessageBusService;
     private _settingsService;
     private _jsonUtilsService;
     private _progressService;
@@ -25,7 +27,9 @@ export declare class UtilsService implements OnDestroy {
     private _ktx2Loader;
     private _usdzExporter;
     private _gltfExporter;
-    constructor(apiServiceModule: ApiServiceModule, _settingsService: HomedecoratorSettingsService, _jsonUtilsService: JsonUtilsService, _progressService: ProgressService, _itemsService: ItemService, _sceneService: SceneService, _dialog: MatDialog, _cameraService: CameraService);
+    private _sceneRenderName;
+    private _sceneRenderContents;
+    constructor(apiServiceModule: ApiServiceModule, messageService: MessageBusService, _settingsService: HomedecoratorSettingsService, _jsonUtilsService: JsonUtilsService, _progressService: ProgressService, _itemsService: ItemService, _sceneService: SceneService, _dialog: MatDialog, _cameraService: CameraService);
     ngOnDestroy(): void;
     readFileAsText(file: File): Promise<string>;
     /**
@@ -46,7 +50,8 @@ export declare class UtilsService implements OnDestroy {
     loadGlbFromFile(file: ArrayBuffer): Promise<Object3D>;
     loadGlbRoom(file: string): Promise<Object3D>;
     saveRoomAsGlb(): Promise<void>;
-    prepRoomForRender(standalone: boolean, renderParameters: any): Promise<void>;
+    prepRoomForRender(standalone: boolean, renderParameters: any, renderPreview?: boolean): Promise<void>;
+    clearSavedRoomRenderSettings(): void;
     private _createGLBForAPI;
     private _sendFileToApi;
     loadGlbSource(file: string): Promise<Object3D>;

package/app/plugins/core3d/hud/bounding-measurement-box/bounding-box-measurement.d.ts

@@ -14,8 +14,14 @@ export declare class BoundingBoxMeasurement implements Measurable {
     private _measurements;
     dimUnit: string;
     distanceStep: number;
+    textColor: any;
+    backgroundColor: any;
+    backgroundOpacity: number;
+    textSize: number;
     constructor(_item: Item | ItemGroup, font: Font, _dictionaryService: HomedecoratorDictionaryService);
     private _createMeasurements;
+    private _createAllMeasurements;
+    private _calculateAllMeasurementsPositions;
     private _createHeightMeasurement;
     private _calculateHeightPositions;
     private _createWidthMeasurement;
@@ -25,4 +31,6 @@ export declare class BoundingBoxMeasurement implements Measurable {
     getMeasurements(): THREE.Mesh[];
     updatePositions(camera: THREE.Camera): void;
     setVisibility(visible: boolean): void;
+    createMeshFromSVG(svgPath: string): Promise<any>;
+    getSvgData(svgPath: string): Promise<any>;
 }

package/app/plugins/core3d/hud/utils.d.ts

@@ -1,3 +1,4 @@
 import { Mesh } from 'three';
 import { Font } from 'three/examples/jsm/loaders/FontLoader';
 export declare function makeTextMesh(text: string, font: Font, color?: any, size?: number, beveled?: boolean, depthTest?: boolean, label?: string): Mesh;
+export declare function createTextWithBackground(text: string, font: Font, fontSize?: number, textColor?: any, backgroundColor?: any, backgroundOpacity?: number, padding?: number, label?: string): Mesh;

package/app/plugins/core3d/items/floor-plane-item.d.ts

@@ -1,4 +1,4 @@
-import { Color, Material, Mesh, Object3D, Vector3, BufferGeometry } from 'three';
+import { BufferGeometry, Color, Material, Mesh, Object3D, Vector3 } from 'three';
 import { Metadata } from './metadata';
 import { Item } from './item';
 import { Texture } from '../../../core/model/texture';

package/app/plugins/core3d/service/floor.service.d.ts

@@ -8,6 +8,8 @@ import { ItemService } from './item.service';
 import { FloorPlaneItem } from '../items/floor-plane-item';
 import { HomedecoratorSettingsService } from '../../../core/service/homedecorator-settings.service';
 import { MessageBusService } from '../../../core/service/message-bus.service';
+import { Article } from '@colijnit/configuratorapi/build/model/article';
+import { CustomFloorGroupResult } from '../model/custom-floor-group-result';
 import * as i0 from "@angular/core";
 export declare class FloorService implements OnDestroy {
     private _sceneService;
@@ -17,11 +19,33 @@ export declare class FloorService implements OnDestroy {
     private _messageService;
     private _groundPlane;
     private _floorPlane;
+    private _selectedFloorArticle;
+    private _showFloorCenterLineZAxis;
+    private _floorCenterLineZAxis;
+    private _showFloorCenterLineXAxis;
+    private _floorCenterLineXAxis;
+    private _floorRotation;
     private _floors;
     private _subs;
+    private _floorResultObject;
     private _mirrorPlane;
     get groundPlane(): Mesh;
     set groundPlane(mesh: Mesh);
+    get floorPlane(): FloorPlaneItem;
+    get selectedFloorArticle(): Article;
+    set selectedFloorArticle(article: Article);
+    get showFloorCenterLineZAxis(): boolean;
+    set showFloorCenterLineZAxis(show: boolean);
+    get showFloorCenterLineXAxis(): boolean;
+    set showFloorCenterLineXAxis(show: boolean);
+    get floorCenterLineZAxis(): number;
+    set floorCenterLineZAxis(value: number);
+    get floorCenterLineXAxis(): number;
+    set floorCenterLineXAxis(value: number);
+    get floorRotation(): number;
+    set floorRotation(value: number);
+    get floorResultObject(): CustomFloorGroupResult;
+    set floorResultObject(result: CustomFloorGroupResult);
     floorToConfigure: FloorPlaneItem;
     constructor(_sceneService: SceneService, _outlineService: OutlineService, _itemService: ItemService, _settingsService: HomedecoratorSettingsService, _messageService: MessageBusService);
     ngOnDestroy(): void;

package/app/plugins/core3d/service/hud.service.d.ts

@@ -13,6 +13,7 @@ import { ItemService } from './item.service';
 import { FloorService } from './floor.service';
 import { HomedecoratorDictionaryService } from '../../../core/service/homedecorator-dictionary.service';
 import { PresetsService } from '../../../core/service/presets.service';
+import { DomSanitizer } from '@angular/platform-browser';
 import * as i0 from "@angular/core";
 export declare class HudService implements OnDestroy {
     private _sceneService;
@@ -26,6 +27,7 @@ export declare class HudService implements OnDestroy {
     private _floorService;
     private _presetsService;
     private _dictionaryService;
+    private _domSanitizer;
     private _selectedItem;
     private _rotationHelper;
     private _wasRotationHelperShowing;
@@ -42,7 +44,7 @@ export declare class HudService implements OnDestroy {
     private _displayCustomShapeNames;
     private _isAirplaneMode;
     private _subs;
-    constructor(_sceneService: SceneService, _cameraService: CameraService, _roomService: RoomService, _fontService: FontService, _messageBusService: MessageBusService, _configurationService: ConfigurationService, _viewModeService: ViewModeService, _itemService: ItemService, _floorService: FloorService, _presetsService: PresetsService, _dictionaryService: HomedecoratorDictionaryService);
+    constructor(_sceneService: SceneService, _cameraService: CameraService, _roomService: RoomService, _fontService: FontService, _messageBusService: MessageBusService, _configurationService: ConfigurationService, _viewModeService: ViewModeService, _itemService: ItemService, _floorService: FloorService, _presetsService: PresetsService, _dictionaryService: HomedecoratorDictionaryService, _domSanitizer: DomSanitizer);
     ngOnDestroy(): void;
     unselectItem(): void;
     get rotationHelper(): RotationHelper;

package/app/plugins/core3d/service/light-presets.service.d.ts

@@ -25,6 +25,8 @@ export declare class LightPresetsService implements OnDestroy {
     loadedLightPresets: LightPreset[];
     presetLoaded: BehaviorSubject<boolean>;
     private _activeLightPreset;
+    private _lightPresetsLoaded;
+    private _subs;
     private _lightsMap;
     constructor(_lightsService: LightsService, _settingsService: HomedecoratorSettingsService, _appService: HomedecoratorAppService, _viewModeService: ViewModeService, _sceneService: SceneService, _dictionaryService: HomedecoratorDictionaryService, _dialogService: DialogService, _screenSizeAnalysis: ScreenSizeAnalysisService);
     init(): void;
@@ -37,6 +39,8 @@ export declare class LightPresetsService implements OnDestroy {
     saveOrDeletePreset(preset: LightPreset, deleteFromIndex?: boolean): Promise<void>;
     removeLightByIndex(index: number): void;
     upsertLight(index: number, light: Light): void;
+    prepareLoadLightPreset(standalone?: boolean): Promise<void>;
+    private _prepareLoadLightPreset;
     private _checkDirtyPreset;
     private _createLightFromProperties;
     private _setObjectProperties;

package/app/plugins/lite-selector/lite-selector/component/answer-card/answer-card.component.scss

@@ -1,8 +1,10 @@
 :host {
-  width: 25%;
-
+  width: 23%;
+  background: #FFF;
+  border-radius: 10px;
+  cursor: pointer;
   &.small-mode {
-    width: 12%;
+    width: 18%;
   }
 }
 
@@ -22,4 +24,20 @@
       content: '+ ';
     }
   }
+  .co-card-wrapper {
+    .check {
+      background-color: #da9803 !important;
+      width: 20px;
+      height: 20px;
+    }
+    co-button ::ng-deep {
+      width: 30px;
+      max-width: 30px;
+      height: 30px;
+      co-icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
 }

package/app/plugins/lite-selector/lite-selector/component/answers-slideout/answers-slideout.component.scss

@@ -1,10 +1,10 @@
 co-slideout {
   overflow-y: auto;
-  z-index: 1;
+  z-index: 2;
 }
 
 :host {
-  &.bottom-align:not(.custom-dimensions):not(.small-mode) {
+  &.bottom-align:not(.custom-dimensions) {
     co-slideout {
       width: 100%;
       height: 200px;
@@ -25,18 +25,16 @@ co-slideout {
   &:not(.custom-dimensions) co-slideout {
     width: 500px;
     max-width: 60vw;
-    top: 64px;
-    max-height: calc(100% - 64px);
-  }
-  &.small-mode co-slideout {
-    width: 50vw;
-    min-width: 700px;
+    top: 40px;
+    max-height: calc(100% - 100px);
+    padding: 30px;
   }
   .search-button {
-    margin-left: 25px;
-    width: 40px;
-    height: 40px;
+    margin-left: 15px;
+    width: 20px;
+    height: 20px;
     cursor: pointer;
+    line-height: 20px;
   }
   .search-wrapper {
     z-index: 2;
@@ -54,20 +52,33 @@ co-slideout {
     }
   }
   div.title {
-    margin: 10px 0 0 30px;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    h3 {
+      margin: 0;
+      color: #da9803;
+      font-weight: 500;
+      font-size: 20px;
+    }
+    .options-search {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      margin-bottom: 30px;
+    }
   }
   .header-description {
     padding: 30px;
   }
   .close-answer {
     position: absolute;
-    top: 0;
-    right: 0;
+    top: 15px;
+    right: 15px;
   }
   span.option-count {
-    margin-left: 6px;
-    font-family: "Century Gothic", "sans-serif";
-    color: #5b6875;
+    font-size: 14px;
     &:before {
       content: '(';
     }
@@ -97,16 +108,19 @@ co-slideout {
     flex-direction: row;
     flex-wrap: wrap;
     padding: 20px;
+    background: #f0f0f0;
+    gap: 10px;
+    border-radius: 15px;
   }
   co-html-header {
     display: flex;
     align-items: center;
   }
   co-html-header ::ng-deep h1, .price-header-level-1 {
-    font-size: 1.17em;
-    margin-bottom: 5px;
-    margin-top: 10px;
-    font-weight: bold;
+    font-size: 16px;
+    margin-bottom: 0;
+    margin-top: 0;
+    font-weight: 500;
   }
   co-html-header ::ng-deep h2,
   co-html-header ::ng-deep h3,
@@ -131,7 +145,7 @@ co-slideout {
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding-bottom: 10px;
+    padding-bottom: 0;
   }
   .group-header-title {
     display: flex;

package/app/plugins/lite-selector/lite-selector/component/selections-summary/selections-summary.component.scss

@@ -9,21 +9,31 @@
 }
 .selections-content {
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
 }
 
-.rp-selections-summary {
+::ng-deep rp-selections-summary {
   display: inline-block;
   background-color: white;
   overflow-y: auto;
   position: relative;
 
-  ::ng-deep co-summary-line br {
+  .co-summary-line br {
     display: none;
   }
+  .co-summary-line {
+    border-radius: 5px;
+    .summary-line {
+      padding: 0 5px;
+      cursor: pointer;
+    }
+  }
 }
 :host:not(.custom-dimensions) {
   min-width: 400px;
-  max-width: 600px;
+  max-width: 500px;
   min-height: 300px;
 }
 
@@ -37,22 +47,25 @@ h2 {
 
 button.close-lite-selector {
   position: absolute;
-  right: 0;
+  right: 10px;
+  line-height: 30px;
+  min-width: 50px;
 }
 
 div.sum {
-  display: flex;
   align-items: center;
-  height: 50px;
-  width: 100%;
-  background-color: #DEECF3;
+  height: auto;
+  display: flex;
+  padding: 10px;
+  background-color: #deecf399;
   box-shadow: 0 0 2px 0 rgba(72,79,96,.25);
+  border-radius: 5px;
 }
 
 div.sum > label {
   width: 100%;
-  font-size: 11.5px;
-  margin-left: 12px;
+  font-size: 12px;
+  margin-left: 0;
 }
 
 div.sum > div.price {

package/app/plugins/lite-selector/lite-selector/lite-selector.component.scss

@@ -7,4 +7,8 @@
 :host:not(.custom-dimensions).floating ::ng-deep rp-selections-summary {
   top: 64px;
   max-height: calc(100vh - 184px);
+  background: #fdf7e463;
+  padding: 5px 10px 10px 10px;
+  border-radius: 10px;
+  right: 10px;
 }

package/app/plugins/model-uploader/model-previewer/model-preview.component.scss

@@ -52,8 +52,8 @@
   .exportButton {
     cursor: pointer;
     color: #fff;
-    background: #dda73f;
-    border: 1px solid #dda73f;
+    background: #da9803;
+    border: 1px solid #da9803;
     border-radius: 3px;
     box-sizing: border-box;
     padding: 5px;
@@ -61,7 +61,7 @@
     align-items: center;
 
     &:hover {
-      background: #dda73f;
+      background: #da9803;
       color: #fff;
     }
   }
@@ -91,14 +91,14 @@ mat-radio-group {
 .base-button {
   cursor: pointer;
   color: #fff;
-  background: #dda73f;
-  border: 1px solid #dda73f;
+  background: #da9803;
+  border: 1px solid #da9803;
   border-radius: 3px;
   box-sizing: border-box;
   padding: 4px 10px;
   line-height: 30px;
   &:hover {
-    background: #dda73f;
+    background: #da9803;
     color: #fff;
   }
 }
@@ -138,13 +138,13 @@ mat-radio-group {
       text-align: center;
 
       &:hover {
-        background: #dda73f;
+        background: #da9803;
         color: #fff;
       }
     }
 
     .button-as-link {
-      color: #dda73f;
+      color: #da9803;
       border: none;
       width: 100%;
       height: 100%;
@@ -158,13 +158,13 @@ mat-radio-group {
         top: 8px;
         svg {
           path {
-            fill: #dda73f;
+            fill: #da9803;
           }
         }
       }
       &:hover {
         background: none;
-        color: #dda73f;
+        color: #da9803;
       }
     }
   }

package/app/plugins/model-uploader/model-uploader.module.d.ts

@@ -13,8 +13,9 @@ import * as i11 from "@angular/material/slide-toggle";
 import * as i12 from "@angular/material/form-field";
 import * as i13 from "@angular/material/core";
 import * as i14 from "@angular/material/select";
+import * as i15 from "@angular/forms";
 export declare class ModelUploaderModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ModelUploaderModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ModelUploaderModule, [typeof i1.ModelUploaderComponent, typeof i2.ModelPreviewComponent], [typeof i3.CommonModule, typeof i4.CoreModule, typeof i5.MatIconModule, typeof i6.MatButtonModule, typeof i7.ButtonModule, typeof i8.ImageModule, typeof i9.CatalogExternalSourcesModule, typeof i9.CatalogExternalSourceModule, typeof i10.MatRadioModule, typeof i11.MatSlideToggleModule, typeof i12.MatFormFieldModule, typeof i13.MatOptionModule, typeof i14.MatSelectModule, typeof i7.IconModule], [typeof i1.ModelUploaderComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ModelUploaderModule, [typeof i1.ModelUploaderComponent, typeof i2.ModelPreviewComponent], [typeof i3.CommonModule, typeof i4.CoreModule, typeof i5.MatIconModule, typeof i6.MatButtonModule, typeof i7.ButtonModule, typeof i8.ImageModule, typeof i9.CatalogExternalSourcesModule, typeof i9.CatalogExternalSourceModule, typeof i10.MatRadioModule, typeof i11.MatSlideToggleModule, typeof i12.MatFormFieldModule, typeof i13.MatOptionModule, typeof i14.MatSelectModule, typeof i7.IconModule, typeof i15.FormsModule], [typeof i1.ModelUploaderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ModelUploaderModule>;
 }

package/app/plugins/product-catalog/product-catalog/product-catalog.component.scss

@@ -13,7 +13,9 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    padding: 30px;
+    padding: 60px 30px 30px 30px;
+    width: 100%;
+    box-sizing: border-box;
     .catalog-button-wrapper {
       font-size: 16px;
       margin-bottom: 20px;
@@ -41,10 +43,10 @@
   &.shown {
     display: inline-block;
     position: relative;
-    top: 64px;
-    left: 64px;
-    width: calc(100% - 64px);
-    height: calc(100vh - 64px);
+    top: 0;
+    left: 50px;
+    width: calc(100% - 50px);
+    height: calc(100vh - 0px);
     background-color: white;
   }
   &.no-offset {
@@ -80,8 +82,8 @@
   }
   .hide-catalog {
     position: absolute;
-    top: 6px;
-    right: 0px;
+    top: 50px;
+    right: 15px;
     z-index: 100;
   }
 }
@@ -97,7 +99,9 @@
     grid-column-gap: 60px;
   }
 }
-
+::ng-deep co-pagination-bar .pagination {
+  box-sizing: border-box;
+}
 //::ng-deep .ione-catalog .component-wrapper .content-wrapper {
 //  overflow-y: auto;
 //}