@colijnit/configurator 261.1.0 → 261.1.1

package/lib/components/answers-slideout/style/_layout.scss

@@ -0,0 +1,198 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-answers-slideout-layout') {
+  .co-answers-slideout {
+    .answer-slideout {
+      overflow-y: auto;
+      z-index: 2;
+    }
+
+
+    button {
+      background: none;
+      cursor: pointer;
+      border: none;
+    }
+
+    &.custom-dimensions {
+      co-slideout {
+        width: 640px;
+        max-width: 100%;
+        height: 100%;
+        padding: 30px;
+        box-sizing: border-box;
+
+        h4 {
+          margin: 10px 0;
+        }
+
+        .title {
+          .options-search {
+            margin: 0 0 10px 0;
+          }
+        }
+
+        .filter {
+          margin: 0 0 15px 0;
+        }
+      }
+    }
+
+    &.bottom-align:not(.custom-dimensions) {
+      co-slideout {
+        width: 100%;
+        height: 200px;
+        bottom: 0;
+        top: inherit;
+        max-width: 100%;
+        z-index: 99999;
+        text-align: center;
+        transition: bottom .2s;
+
+        .cards {
+          justify-content: center;
+
+          ::ng-deep rp-answer-card {
+            width: 100px;
+          }
+        }
+      }
+    }
+
+    &:not(.custom-dimensions) co-slideout {
+      width: 500px;
+      max-width: 60vw;
+      top: 40px;
+      max-height: calc(100% - 100px);
+      padding: 30px;
+    }
+
+    .search-button {
+      margin-left: 15px;
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+      line-height: 40px;
+    }
+
+    .search-wrapper {
+      z-index: 2;
+      position: absolute;
+      top: .3em;
+      width: 98%;
+      padding-left: .3em;
+      padding-right: .3em;
+    }
+
+    .text-chips {
+      width: 100%;
+
+      ::ng-deep co-icon {
+        width: 30px;
+        height: 30px;
+      }
+    }
+
+    div.title {
+      margin: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+
+      h3 {
+        margin: 0;
+      }
+
+      .options-search {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        margin-bottom: 30px;
+      }
+    }
+
+    .header-description {
+      padding: 30px;
+    }
+
+    .close-answer {
+      position: absolute;
+      top: 15px;
+      right: 15px;
+      width: 40px;
+      height: 40px;
+    }
+
+    h3 {
+      display: inline-block;
+    }
+
+    h4 {
+      margin-left: 30px;
+    }
+
+    .filter {
+      display: flex;
+      margin-left: 30px;
+      margin-bottom: 5px;
+    }
+
+    .filter ::ng-deep rp-color-filter:not(last-child) {
+      margin-right: 5px;
+    }
+
+    .filter ::ng-deep rp-tag-filter:not(last-child) {
+      margin-right: 20px;
+    }
+
+    div.cards {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      padding: 20px;
+      gap: 10px;
+      border-radius: 15px;
+    }
+
+    co-html-header {
+      display: flex;
+      align-items: center;
+    }
+
+    co-html-header ::ng-deep h1, .price-header-level-1 {
+      margin-bottom: 0;
+      margin-top: 0;
+      font-weight: 500;
+    }
+
+    co-html-header ::ng-deep h2,
+    co-html-header ::ng-deep h3,
+    co-html-header ::ng-deep h4,
+    co-html-header ::ng-deep h5,
+    co-html-header ::ng-deep h6,
+    .price-header-level-2,
+    .price-header-level-3,
+    .price-header-level-4,
+    .price-header-level-5,
+    .price-header-level-6 {
+      font-family: "Century Gothic", "sans-serif";
+      font-size: 1em;
+      margin: 0;
+      font-weight: normal;
+      color: #5b6875;
+    }
+
+    .group-header-wrapper {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding-bottom: 0;
+    }
+
+    .group-header-title {
+      display: flex;
+      flex-direction: row;
+      column-gap: 10px;
+    }
+  }
+}

package/lib/components/answers-slideout/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+
+}

package/lib/components/answers-slideout/style/_theme.scss

@@ -0,0 +1,54 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-answers-slideout-theme') {
+  .co-answers-slideout {
+
+    div.title {
+      h3 {
+        color: #da9803;
+        font-weight: 500;
+        font-size: 20px;
+      }
+    }
+
+    span.option-count {
+      font-size: 14px;
+      &:before {
+        content: '(';
+      }
+      &:after {
+        content: ')';
+      }
+    }
+
+    div.cards {
+      background: #f0f0f0;
+    }
+
+    co-html-header ::ng-deep h1, .price-header-level-1 {
+      font-size: 16px;
+    }
+    co-html-header h2,
+    co-html-header h3,
+    co-html-header h4,
+    co-html-header h5,
+    co-html-header h6,
+    .price-header-level-2,
+    .price-header-level-3,
+    .price-header-level-4,
+    .price-header-level-5,
+    .price-header-level-6 {
+      font-family: "Century Gothic", "sans-serif";
+      font-size: 1em;
+      margin: 0;
+      font-weight: normal;
+      color: #5b6875;
+    }
+
+    .group-header-description {
+      font-size: 12px;
+      font-weight: bold;
+      color: rgba(0, 0, 0, 0.5);
+    }
+  }
+}

package/lib/components/answers-slideout/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/color-filter/color-filter.component.d.ts

@@ -0,0 +1,20 @@
+import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
+import { Color } from '@colijnit/configuratorapi/build/model/color';
+import { IconEnum } from '../../enum/icon.enum';
+import { IconCacheService } from '../../services/icon-cache.service';
+import * as i0 from "@angular/core";
+export declare class ColorFilterComponent {
+    iconService: IconCacheService;
+    private _sanitizer;
+    readonly icons: typeof IconEnum;
+    showClass(): boolean;
+    set color(value: Color);
+    get color(): Color;
+    active: boolean;
+    get lightBackground(): boolean;
+    backgroundStyle: SafeStyle;
+    private _color;
+    constructor(iconService: IconCacheService, _sanitizer: DomSanitizer);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorFilterComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColorFilterComponent, "co-color-filter", never, { "color": "color"; "active": "active"; }, {}, never, never>;
+}

package/lib/components/color-filter/color-filter.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./color-filter.component";
+import * as i2 from "@colijnit/corecomponents_v12";
+export declare class ColorFilterModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ColorFilterModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColorFilterModule, [typeof i1.ColorFilterComponent], [typeof i2.IconModule], [typeof i1.ColorFilterComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ColorFilterModule>;
+}

package/lib/components/color-filter/style/_layout.scss

@@ -0,0 +1,41 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-color-filter-layout') {
+  .co-color-filter {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+
+    co-icon {
+      width: 25px;
+      height: 25px;
+      opacity: 0;
+      transition: all .2s ease;
+      &.active {
+        opacity: 1;
+      }
+    }
+    co-icon svg [fill] {
+      fill: white;
+    }
+    &.light-background {
+      co-icon svg [fill] {
+        fill: black;
+      }
+    }
+
+    .color {
+      width: 25px;
+      height: 25px;
+      border-radius: 5px;
+      border-color: #cccccc;
+      border-style: solid;
+      border-width: 1px;
+    }
+
+    .description {
+      font-size: 13px;
+    }
+  }
+}

package/lib/components/color-filter/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+
+}

package/lib/components/color-filter/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-color-filter-theme') {
+  .co-color-filter {
+
+  }
+}

package/lib/components/color-filter/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/configurator/configurator.component.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter, OnDestroy } from '@angular/core';
+import { ConfigurationResultObject } from '../../model/configuration-result-object';
+import { LoaderService } from '../../services/loader.service';
+import { ConfiguratorErrorMessage } from '../../model/configurator-error-message';
+import { AppEventService } from '../../services/app-event.service';
+import { SettingsService } from '../../services/settings.service';
+import { ConfiguringService } from '../../services/configuring.service';
+import * as i0 from "@angular/core";
+export declare class ConfiguratorComponent implements OnDestroy {
+    settingsService: SettingsService;
+    loaderService: LoaderService;
+    private _appEventService;
+    private _configuringService;
+    showClass(): boolean;
+    showLoader: boolean;
+    showProgressBar: boolean;
+    showErrorMessages: boolean;
+    outputErrorMessages: boolean;
+    canCloseConfigurator: boolean;
+    buildResult: EventEmitter<ConfigurationResultObject>;
+    isLoading: EventEmitter<boolean>;
+    updateProgressBar: EventEmitter<boolean>;
+    errorMessages: EventEmitter<ConfiguratorErrorMessage[]>;
+    showChange: EventEmitter<boolean>;
+    resultHasErrors: boolean;
+    showErrorDiagram: boolean;
+    configurationResultObject: ConfigurationResultObject;
+    private _subs;
+    constructor(settingsService: SettingsService, loaderService: LoaderService, _appEventService: AppEventService, _configuringService: ConfiguringService);
+    ngOnDestroy(): void;
+    handleBuildFinished(result: ConfigurationResultObject): void;
+    handleShowChange(show: boolean): void;
+    handleCloseErrorDialog(): void;
+    private _handleArticleNotFound;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfiguratorComponent, "co-configurator", never, { "showLoader": "showLoader"; "showProgressBar": "showProgressBar"; "showErrorMessages": "showErrorMessages"; "outputErrorMessages": "outputErrorMessages"; "canCloseConfigurator": "canCloseConfigurator"; }, { "buildResult": "buildResult"; "isLoading": "isLoading"; "updateProgressBar": "updateProgressBar"; "errorMessages": "errorMessages"; "showChange": "showChange"; }, never, never>;
+}

package/lib/components/configurator/configurator.module.d.ts

@@ -0,0 +1,12 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./configurator.component";
+import * as i2 from "@angular/common";
+import * as i3 from "../progress-bar/progress-bar.module";
+import * as i4 from "../configurator-loader/configurator-loader.module";
+import * as i5 from "../configurator-dialog/configurator-dialog.module";
+import * as i6 from "../threedselector/threedselector.module";
+export declare class ConfiguratorModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ConfiguratorModule, [typeof i1.ConfiguratorComponent], [typeof i2.CommonModule, typeof i3.ProgressBarModule, typeof i4.ConfiguratorLoaderModule, typeof i5.ConfiguratorDialogModule, typeof i6.ThreedselectorModule], [typeof i1.ConfiguratorComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ConfiguratorModule>;
+}

package/lib/components/configurator/style/_layout.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-configurator-layout') {
+  .co-configurator {
+
+  }
+}

package/lib/components/configurator/style/_material-definition.scss

@@ -0,0 +1,3 @@
+:root {
+
+}

package/lib/components/configurator/style/_theme.scss

@@ -0,0 +1,7 @@
+@import "../../../style/mixin.scss";
+
+@include export-module('co-configurator-theme') {
+  .co-configurator {
+
+  }
+}

package/lib/components/configurator/style/material.scss

@@ -0,0 +1,3 @@
+@use './_material-definition.scss';
+@use './_layout.scss';
+@use './_theme.scss';

package/lib/components/configurator-dialog/configurator-camera-settings.component.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { IconCacheService } from '../../services/icon-cache.service';
+import { IconEnum } from '../../enum/icon.enum';
+import { CameraSettings } from '../../model/camera-settings';
+import { CameraService } from '../../services/camera.service';
+import { DynamicCameraService } from '../../services/dynamic-camera.service';
+import { ConfiguratorConnectorService } from '../../services/configurator-connector.service';
+import * as i0 from "@angular/core";
+export declare class ConfiguratorCameraSettingsComponent implements OnInit {
+    iconService: IconCacheService;
+    private _cameraService;
+    private _dynamicCameraService;
+    private _configuratorConnectorService;
+    readonly icons: typeof IconEnum;
+    closeCameraDialog: EventEmitter<void>;
+    tempCameraSettings: CameraSettings;
+    currentSku: string;
+    positionAsString: string;
+    rotationAsString: string;
+    constructor(iconService: IconCacheService, _cameraService: CameraService, _dynamicCameraService: DynamicCameraService, _configuratorConnectorService: ConfiguratorConnectorService);
+    ngOnInit(): void;
+    onClose(): void;
+    saveSettings(asDefault: boolean): void;
+    exportSettings(): void;
+    saveCurrentPosition(): void;
+    saveCurrentRotation(): void;
+    private _parsePositionAndRotation;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorCameraSettingsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfiguratorCameraSettingsComponent, "co-configurator-camera-settings-dialog", never, {}, { "closeCameraDialog": "closeCameraDialog"; }, never, never>;
+}

package/lib/components/configurator-dialog/configurator-dialog.module.d.ts

@@ -0,0 +1,13 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./configurator-error-dialog.component";
+import * as i2 from "./configurator-export-dialog.component";
+import * as i3 from "./configurator-camera-settings.component";
+import * as i4 from "../../pipes/pipes.module";
+import * as i5 from "@colijnit/corecomponents_v12";
+import * as i6 from "@angular/common";
+import * as i7 from "@angular/forms";
+export declare class ConfiguratorDialogModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorDialogModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ConfiguratorDialogModule, [typeof i1.ConfiguratorErrorDialogComponent, typeof i2.ConfiguratorExportDialogComponent, typeof i3.ConfiguratorCameraSettingsComponent], [typeof i4.PipesModule, typeof i5.IconModule, typeof i6.CommonModule, typeof i7.FormsModule], [typeof i1.ConfiguratorErrorDialogComponent, typeof i2.ConfiguratorExportDialogComponent, typeof i3.ConfiguratorCameraSettingsComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<ConfiguratorDialogModule>;
+}

package/lib/components/configurator-dialog/configurator-error-dialog.component.d.ts

@@ -0,0 +1,16 @@
+import { EventEmitter } from '@angular/core';
+import { ConfiguratorErrorMessage } from '../../model/configurator-error-message';
+import { IconCacheService } from '../../services/icon-cache.service';
+import { IconEnum } from '../../enum/icon.enum';
+import * as i0 from "@angular/core";
+export declare class ConfiguratorErrorDialogComponent {
+    iconService: IconCacheService;
+    showClass(): boolean;
+    readonly icons: typeof IconEnum;
+    errorMessages: ConfiguratorErrorMessage[];
+    closeErrorDialoag: EventEmitter<void>;
+    onClose(): void;
+    constructor(iconService: IconCacheService);
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorErrorDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfiguratorErrorDialogComponent, "co-configurator-error-dialog", never, { "errorMessages": "errorMessages"; }, { "closeErrorDialoag": "closeErrorDialoag"; }, never, never>;
+}

package/lib/components/configurator-dialog/configurator-export-dialog.component.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '@angular/core';
+import { IconCacheService } from '../../services/icon-cache.service';
+import { IconEnum } from '../../enum/icon.enum';
+import { ItemService } from '../../services/item.service';
+import { UtilsService } from '../../services/utils.service';
+import * as i0 from "@angular/core";
+export declare class ConfiguratorExportDialogComponent {
+    iconService: IconCacheService;
+    itemService: ItemService;
+    private _utilService;
+    readonly icons: typeof IconEnum;
+    closeExportDialog: EventEmitter<void>;
+    constructor(iconService: IconCacheService, itemService: ItemService, _utilService: UtilsService);
+    onClose(): void;
+    downloadGLB(): void;
+    downloadUSDZ(): void;
+    downloadBoth(): void;
+    downloadThumbnail(): void;
+    private _getObjectToExport;
+    private _download3DModelAsGLB;
+    private _download3DModelAsUSDZ;
+    private _downloadFile;
+    private _base64ToBlob;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ConfiguratorExportDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ConfiguratorExportDialogComponent, "co-configurator-export-dialog", never, {}, { "closeExportDialog": "closeExportDialog"; }, never, never>;
+}

package/lib/components/configurator-dialog/style/_layout.scss

@@ -0,0 +1,129 @@
+@import "../../../style/mixin";
+
+@include export-module('co-configurator-dialog-layout') {
+  .co-configurator-error-dialog, .co-configurator-error-dialog, .co-configurator-camera-settings-dialog {
+    .dialog {
+      width: 550px;
+      position: fixed;
+      z-index: 5;
+      top: 25%;
+      left: 50%;
+      margin-left: -275px;
+      border-radius: 8px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+
+      &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 15px;
+
+        h2 {
+          margin: 0;
+        }
+
+        .close-button {
+          width: 30px;
+          height: 30px;
+          background: none;
+          border: none;
+          cursor: pointer;
+
+        }
+      }
+
+      &-body {
+        padding: 15px;
+        max-height: 300px;
+        overflow-y: auto;
+
+        .error-list {
+          list-style-type: none;
+          padding: 0;
+          margin: 0;
+        }
+
+        .error-item {
+          padding: 8px 0;
+
+          .error-item-header {
+            font-weight: bold;
+          }
+          .error-item-text {
+            margin: 0;
+            padding: 0;
+          }
+
+          &:last-child {
+            border-bottom: none;
+          }
+        }
+      }
+
+      &-body {
+        .export-options-list {
+          box-sizing: border-box;
+          .export-option {
+            padding: 10px;
+            cursor: pointer;
+            border-radius: 5px;
+            h4 {
+              padding: 0;
+              margin: 0;
+            }
+            p {
+              padding: 0;
+              margin: 3px 0;
+            }
+          }
+        }
+      }
+
+      &-body {
+        .camera-setting-option {
+          box-sizing: border-box;
+          padding: 5px;
+          p {
+            font-weight: bold;
+          }
+          input {
+            width: 100%;
+            padding: 6px;
+            box-sizing: border-box;
+            border-radius: 5px;
+          }
+        }
+        .save-option-button {
+          width: 30px;
+          height: 30px;
+          background: none;
+          border: none;
+          cursor: pointer;
+        }
+      }
+
+      &-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 15px;
+
+        .close-button {
+          padding: 8px 16px;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+      }
+
+      .action-buttons {
+        display: flex;
+        justify-content: space-between;
+        padding: 15px;
+        button {
+          padding: 8px 16px;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}

package/lib/components/configurator-dialog/style/_material-definition.scss

@@ -0,0 +1,4 @@
+:root {
+  --overlay-background: #f8f8f8;
+  --hover-background-color: #e0e0e0;
+}